last modal

web/src/components/domains/DomainEditModal.vue

@@ -0,0 +1,176 @@
+<template>
+    <NModal :mask-closable="false" preset="card" style="width: 600px" role="dialog" aria-modal="true" :show="show">
+        <template #header>
+            <span v-if="!domain || domain.id < 1">{{ t('common.new') }}</span><span v-else>{{ t('common.edit') }}</span><span>{{
+                t('domains._') }}</span>
+        </template>
+
+        <NForm :model="domain" :rules="rules">
+            <NFormItem :label="t('domains._')" path="domain_name">
+                <NInput placeholder="example.com" v-model:value="domain?.domain_name" @update:value="easyInput" />
+            </NFormItem>
+            <NFormItem :label="t('domains.form.mainDNS')" path="main_dns">
+                <NInput placeholder="ns1.example.com" v-model:value="domain?.main_dns" />
+            </NFormItem>
+            <NFormItem :label="t('domains.form.adminMail')" path="admin_email">
+                <NInput placeholder="admin@example.com" v-model:value="domain?.admin_email" />
+            </NFormItem>
+            <NFormItem :label="t('records.refesh')" path="refresh_interval">
+                <NInputNumber v-model:value="domain?.refresh_interval">
+                    <template #suffix>
+                        {{ t('domains.form.unitForSecond') }}
+                    </template>
+                </NInputNumber>
+            </NFormItem>
+            <NFormItem :label="t('records.retry')" path="retry_interval">
+                <NInputNumber v-model:value="domain?.retry_interval">
+                    <template #suffix>
+                        {{ t('domains.form.unitForSecond') }}
+                    </template>
+                </NInputNumber>
+            </NFormItem>
+            <NFormItem :label="t('records.expire')" path="expiry_period">
+                <NInputNumber v-model:value="domain?.expiry_period">
+                    <template #suffix>
+                        {{ t('domains.form.unitForSecond') }}
+                    </template>
+                </NInputNumber>
+            </NFormItem>
+            <NFormItem :label="t('records.ttl')" path="negative_ttl">
+                <NInputNumber v-model:value="domain?.negative_ttl">
+                    <template #suffix>
+                        {{ t('domains.form.unitForSecond') }}
+                    </template>
+                </NInputNumber>
+            </NFormItem>
+        </NForm>
+
+        <template #action>
+            <NFlex justify="end">
+                <NButton size="small" @click="show = false">
+                    <template #icon>
+                        <NIcon>
+                            <Times />
+                        </NIcon>
+                    </template>
+                    {{ t('common.cancel') }}
+                </NButton>
+                <NSpin :show="loading">
+                    <NButton size="small" type="primary" :disabled="loading || invalidData" @click="confirm">
+                        <template #icon>
+                            <NIcon>
+                                <Check />
+                            </NIcon>
+                        </template>
+                        {{ t('common.confirm') }}
+                    </NButton>
+                </NSpin>
+            </NFlex>
+        </template>
+    </NModal>
+</template>
+
+<script setup lang="ts">
+import { useDomainStore, type Domain } from '@/stores/domains';
+import { Check, Times } from '@vicons/fa';
+import {
+    NModal,
+    NForm,
+    NFormItem,
+    NButton,
+    NInput,
+    NInputNumber,
+    useNotification,
+    type FormRules,
+    type FormItemRule
+} from 'naive-ui'
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n()
+
+const props = defineProps<{
+    domain: Domain
+}>()
+
+const show = defineModel<boolean>('show', { default: false })
+const loading = defineModel<boolean>('loading', { default: false })
+const invalidData = defineModel<boolean>('invalidData', { default: false })
+const rules = defineModel<FormRules>('rules')
+rules.value = {
+    domain_name: {
+        required: true,
+        trigger: 'blur',
+        validator(_rule: FormItemRule, value: string) {
+            return validate(
+                value,
+                /([\w-]+\.)+[\w-]+/,
+                'domains.errors.domainName'
+            )
+        }
+    },
+    main_dns: {
+        required: true,
+        trigger: 'blur',
+        validator(_rule: FormItemRule, value: string) {
+            return validate(
+                value,
+                /([\w-]+\.)+[\w-]+/,
+                'domains.errors.domainName'
+            )
+        }
+    },
+    admin_email: {
+        required: true,
+        trigger: 'blur',
+        validator(_rule: FormItemRule, value: string) {
+            return validate(
+                value,
+                /[\w-.]+@([\w-]+\.)+[\w-]+/,
+                'domains.errors.mail'
+            )
+        }
+    },
+    refresh_interval: {
+        required: true,
+        trigger: 'blur',
+        type: 'number'
+    },
+    retry_interval: {
+        required: true,
+        trigger: 'blur',
+        type: 'number'
+    },
+    expiry_period: {
+        required: true,
+        trigger: 'blur',
+        type: 'number'
+    },
+    negative_ttl: {
+        required: true,
+        trigger: 'blur',
+        type: 'number'
+    }
+}
+
+const domainStore = useDomainStore()
+const notification = useNotification()
+
+async function confirm() {
+
+}
+
+function validate(value: string, reg: RegExp, msg: string) {
+    invalidData.value = true
+    if (!value) {
+        return new Error(t('common.mandatory'))
+    } else if (!reg.test(value)) {
+        return new Error(t(msg))
+    }
+    invalidData.value = false
+    return true
+}
+
+function easyInput(domain: string) {
+    props.domain.admin_email = `admin@${domain}`
+    props.domain.main_dns = `ns1.${domain}`
+}
+</script>

web/src/components/domains/DomainRemoveModal.vue

@@ -25,7 +25,7 @@
                         {{ t('common.cancel') }}
                     </NButton>
                     <NSpin :show="loading">
-                        <NButton size="small" type="error" :disabled="domain_name !== domain?.domain_name"
+                        <NButton size="small" type="error" :disabled="(domain_name !== domain?.domain_name) || loading"
                             @click="confirm">
                             <template #icon>
                                 <NIcon>
@@ -57,7 +57,7 @@ const domainStore = useDomainStore()
 const notification = useNotification()
 
 const props = defineProps<{
-    domain: Domain | undefined
+    domain: Domain
 }>()
 
 async function confirm() {

web/src/locale/en-US.ts

@@ -9,6 +9,7 @@ export default {
         new: 'New',
         cancel: 'Cancel',
         confirm: 'OK',
+        mandatory: 'This field is mandatory'
     },
     api: {
         error400: {
@@ -37,13 +38,26 @@ export default {
         }
     },
     domains: {
+        '_': 'Domain',
         dnsRecord: 'DNS Record',
         delete: 'Remove Domain',
         deleteHint: 'All records of this domain will be WIPED!',
         confirm1: 'Please input',
-        confirm2: 'for comfirmation'
+        confirm2: 'for comfirmation',
+
+        form: {
+            adminMail: 'Admin Email',
+            mainDNS: 'Main DNS',
+            unitForSecond: 'Second(s)'
+        },
+
+        errors: {
+            domainName: 'Invalid domain name',
+            mail: 'Invalid email',
+        }
     },
     records: {
+        '_': 'Record',
         name: 'Record Name',
         recordType: 'Type',
         content: 'Record',

web/src/locale/zh-CN.ts

@@ -9,6 +9,7 @@ export default {
         new: '新增',
         cancel: '取消',
         confirm: '确定',
+        mandatory: '此项必填'
     },
     api: {
         error400: {
@@ -37,13 +38,26 @@ export default {
         }
     },
     domains: {
+        '_': '域名',
         dnsRecord: 'DNS 记录',
         delete: '删除域名',
         deleteHint: '该域名所有记录将被删除！',
         confirm1: '请输入',
-        confirm2: '以确认要删除的域名'
+        confirm2: '以确认要删除的域名',
+
+        form: {
+            adminMail: '管理员邮箱',
+            mainDNS: '主 DNS 服务器',
+            unitForSecond: '秒'
+        },
+
+        errors: {
+            domainName: '这不是一个有效的域名',
+            mail: '这不是一个有效的邮箱',
+        }
     },
     records: {
+        '_': '记录',
         name: '记录名',
         recordType: '类型',
         content: '记录值',

web/src/views/DomainsView.vue

@@ -7,13 +7,15 @@ import { getErrorInfo } from '@/apis/api'
 import DomainInfo from '@/components/domains/DomainInfo.vue'
 import DomainOps from '@/components/domains/DomainOps.vue'
 import DomainRemoveModal from '@/components/domains/DomainRemoveModal.vue'
+import DomainEditModal from '@/components/domains/DomainEditModal.vue'
 
 const domainStore = useDomainStore()
 const notification = useNotification()
 
 const loading = defineModel<boolean>('loading', { default: true });
 const removeModalShow = defineModel<boolean>('removeModalShow', { default: false })
-const operationDomain = defineModel<Domain|undefined>('operationDomain')
+const editModalShow = defineModel<boolean>('editModalShow', { default: false })
+const operationDomain = defineModel<Domain>('operationDomain', { default: {} as Domain })
 
 onMounted(() => {
     try {
@@ -29,6 +31,16 @@ function showRemoveModal(domain: Domain) {
     operationDomain.value = domain
     removeModalShow.value = true
 }
+
+function showEditModal(domain: Domain) {
+    operationDomain.value = domain
+    editModalShow.value = true
+}
+
+function addDomain() {
+    const domain = {} as Domain
+    showEditModal(domain)
+}
 </script>
 
 <template>
@@ -40,18 +52,19 @@ function showRemoveModal(domain: Domain) {
                     size="large" hoverable>
                     <DomainInfo :domain="domain" />
                     <template #action>
-                        <DomainOps :domain="domain" @remove-domain="showRemoveModal"/>
+                        <DomainOps :domain="domain" @remove-domain="showRemoveModal" @edit-domain="showEditModal" />
                     </template>
                 </NCard>
                 <NCard hoverable>
-                    <NButton block quaternary size="large">
+                    <NButton block quaternary size="large" @click="addDomain">
                         <template #icon>
                             <NIcon :component="PlusSquare" :depth="5" />
                         </template>
                     </NButton>
                 </NCard>
             </NFlex>
-            <DomainRemoveModal v-model:show="removeModalShow" :domain="operationDomain"/>
+            <DomainRemoveModal v-model:show="removeModalShow" :domain="operationDomain" />
+            <DomainEditModal v-model:show="editModalShow" :domain="operationDomain" />
         </NModalProvider>
     </div>
 </template>