2
0
mirror of https://github.com/acepanel/panel.git synced 2026-02-04 13:47:15 +08:00
Files
panel/web/src/views/ssh/CreateModal.vue
2026-01-09 04:09:32 +08:00

117 lines
3.4 KiB
Vue

<script setup lang="ts">
import ssh from '@/api/panel/ssh'
import { NInput } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
const { $gettext } = useGettext()
const show = defineModel<boolean>('show', { type: Boolean, required: true })
const loading = ref(false)
const model = ref({
name: '',
host: '127.0.0.1',
port: 22,
auth_method: 'password',
user: 'root',
password: '',
key: '',
passphrase: '',
remark: ''
})
const handleSubmit = () => {
loading.value = true
useRequest(ssh.create(model.value))
.onSuccess(() => {
loading.value = false
show.value = false
model.value = {
name: '',
host: '127.0.0.1',
port: 22,
auth_method: 'password',
user: 'root',
password: '',
key: '',
passphrase: '',
remark: ''
}
window.$bus.emit('ssh:refresh')
window.$message.success($gettext('Created successfully'))
})
.onComplete(() => {
loading.value = false
})
}
</script>
<template>
<n-modal
v-model:show="show"
preset="card"
:title="$gettext('Create Host')"
style="width: 60vw"
size="huge"
:bordered="false"
:segmented="false"
>
<n-form>
<n-form-item :label="$gettext('Name')">
<n-input v-model:value="model.name" placeholder="127.0.0.1" />
</n-form-item>
<n-row :gutter="[0, 24]" pt-20>
<n-col :span="15">
<n-form-item :label="$gettext('Host')">
<n-input v-model:value="model.host" placeholder="127.0.0.1" />
</n-form-item>
</n-col>
<n-col :span="2"> </n-col>
<n-col :span="7">
<n-form-item :label="$gettext('Port')">
<n-input-number v-model:value="model.port" :min="1" :max="65535" />
</n-form-item>
</n-col>
</n-row>
<n-form-item :label="$gettext('Authentication Method')">
<n-select
v-model:value="model.auth_method"
:options="[
{ label: $gettext('Password'), value: 'password' },
{ label: $gettext('Private Key'), value: 'publickey' }
]"
>
</n-select>
</n-form-item>
<n-form-item :label="$gettext('Username')">
<n-input v-model:value="model.user" placeholder="root" />
</n-form-item>
<n-form-item v-if="model.auth_method == 'password'" :label="$gettext('Password')">
<n-input v-model:value="model.password" type="password" show-password-on="click" />
</n-form-item>
<n-form-item v-if="model.auth_method == 'publickey'" :label="$gettext('Private Key')">
<n-input v-model:value="model.key" type="textarea" :rows="5" />
</n-form-item>
<n-form-item v-if="model.auth_method == 'publickey'" :label="$gettext('Passphrase')">
<n-input
v-model:value="model.passphrase"
type="password"
show-password-on="click"
:placeholder="$gettext('Leave empty if key has no passphrase')"
/>
</n-form-item>
<n-form-item :label="$gettext('Remarks')">
<n-input v-model:value="model.remark" type="textarea" />
</n-form-item>
</n-form>
<n-row :gutter="[0, 24]" pt-20>
<n-col :span="24">
<n-button type="info" block :loading="loading" @click="handleSubmit">
{{ $gettext('Submit') }}
</n-button>
</n-col>
</n-row>
</n-modal>
</template>
<style scoped lang="scss"></style>