) {
- return (
-
-
-
- emit("editDomain", d)} />
- emit("removeDomain", d)} />
-
-
- )
-}
-
-DomainOps.props = {
- domain: {
- required: true
- }
-}
-
-DomainOps.emits = {
- removeDomain: (d: Domain) => d,
- editDomain: (d: Domain) => d
-} as Events
-
-export default DomainOps
\ No newline at end of file
diff --git a/web/src/components/domains/DomainRemoveModal.css b/web/src/components/domains/DomainRemoveModal.css
deleted file mode 100644
index cd472b0..0000000
--- a/web/src/components/domains/DomainRemoveModal.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.icon-down {
- transform: translateY(2px);
-}
-
-b#boldit {
- font-weight: bold;
-}
\ No newline at end of file
diff --git a/web/src/components/domains/DomainRemoveModal.tsx b/web/src/components/domains/DomainRemoveModal.tsx
deleted file mode 100644
index cd2e09b..0000000
--- a/web/src/components/domains/DomainRemoveModal.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import './DomainRemoveModal.css'
-
-import { useDomainStore, type Domain } from '@/stores/domains';
-import { NModal, NCard, NFlex, NButton, NIcon, NInput, createDiscreteApi } from 'naive-ui'
-import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
-import { getErrorInfo } from '@/apis/api';
-import i18n from '@/locale/i18n';
-import { ref, type EmitsOptions, type ObjectEmitsOptions, type SetupContext } from 'vue';
-
-const t = i18n.global.t
-const domainStore = useDomainStore()
-const { notification } = createDiscreteApi(['notification'])
-
-type Props = {
- domain: Domain
- show: boolean
- 'onUpdate:show': (value: boolean) => void
-}
-
-type Events = {
- 'update:show': (value: boolean) => void
-}
-
-const domain_name = ref('')
-const loading = ref(false)
-
-async function confirm(domain: Domain) {
- domain_name.value = ''
- loading.value = true
-
- try {
- if (domain)
- await domainStore.removeDomain(domain)
- } catch (e) {
- const msg = getErrorInfo(e)
- notification.error(msg)
- console.error(e)
- } finally {
- loading.value = false
- }
-}
-
-function modalBody({ domain }: Props) {
- return (
- <>
- {t('common.deleteConfirm')}
- {t('domains.deleteHint')}
- {t('domains.confirm1')} {domain.domain_name} {t('domains.confirm2')}
-
-
- domain_name.value = v} placeholder={domain.domain_name} />
-
-
- )
-}
-
-function modalActions({ domain }: Props, { emit }: SetupContext) {
- return <>
-
- { emit('update:show', false) }}>
- {{
- icon: () => ,
- default: () => t('common.cancel')
- }}
-
-
- confirm(domain).then(() => emit('update:show', false))}>
- {{
- icon: () => ,
- default: () => t('common.confirm')
- }}
-
-
-
-}
-
-function DomainRemoveModal({ domain, show }: Props, { emit }: SetupContext) {
- return (
-
-
- {{
- header: () => <>{t('domains.delete')} - {domain.domain_name},
- default: () => ,
- action: () => emit('update:show', v)} />
- }}
-
-
- )
-}
-
-export default DomainRemoveModal
\ No newline at end of file
diff --git a/web/src/components/records/RecordEditModal.tsx b/web/src/components/records/RecordEditModal.tsx
index ead169e..6e24eda 100644
--- a/web/src/components/records/RecordEditModal.tsx
+++ b/web/src/components/records/RecordEditModal.tsx
@@ -1,461 +1,259 @@
-import {
- NModal,
- NCard,
- NForm,
- NFormItem,
- NFlex,
- NButton,
- NInput,
- NInputNumber,
- NInputGroup,
- NSelect,
- NIcon,
- type FormRules,
- type SelectOption,
- createDiscreteApi,
- type FormItemRule,
-} from 'naive-ui'
-import { getErrorInfo } from '@/apis/api';
-import {
- useRecordStore,
- RecordTypes,
- type Record,
- type ARecord,
- type AAAARecord,
- type CAARecord,
- type CNAMERecord,
- type NSRecord,
- type SRVRecord,
- type TXTRecord,
- type MXRecord,
- type RecordT,
-} from '@/stores/records';
-import { Check, Times } from '@vicons/fa';
-import { ref, type SetupContext } from 'vue';
-import i18n from '@/locale/i18n';
-
-const { t } = i18n.global
-
-const enum validationFlags {
- name = 1,
- content = name << 1
-}
+import { App, Form, Input, InputNumber, Modal, Select } from 'antd'
+import i18n from '../../locale'
+import { AAAARecord, ARecord, CAARecord, CNAMERecord, MXRecord, NSRecord, Record, RecordTypes, SRVRecord, TXTRecord } from '../../stores/records'
+import { useEffect, useState } from 'react'
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
+import { ResponseError, getErrorInfo } from '../../api'
+import { FormInstance } from 'antd/lib/form/Form'
+const { t } = i18n
type Props = {
+ open: boolean
record: Record
- domain: string
- show: boolean
- 'onReloadRecords': () => void
- 'onUpdate:show': (v: boolean) => void
+ //domain: string
+ onCancel(): void
+ onOk(): void
+
+ editRecord(record: Record): Promise
+ createRecord(record: Record): Promise
}
-type Events = {
- reloadRecords(): void
- 'update:show': (v: boolean) => void
-}
-
-const invalidData = ref(validationFlags.content)
-const loading = ref(false)
-const recordStore = useRecordStore()
-const { notification } = createDiscreteApi(['notification'])
-const recordTypeOptions = Object.entries(RecordTypes).filter(
- e => e[1] !== RecordTypes.RecordTypeSOA
-).map(e => {
+const recordTypeOptions = Object.entries(RecordTypes).filter(e => e[1] !== RecordTypes.RecordTypeSOA).map(e => {
return {
- label: e[1],
- value: e[1]
- } as SelectOption
+ value: e[1],
+ label: e[1]
+ }
})
-function validateName(_rule: FormItemRule, value: string): boolean | Error {
- invalidData.value |= validationFlags.name
- if (!value || value === '') {
- invalidData.value &= ~validationFlags.name
- return new Error(t('common.mandatory'))
- }
+export default function RecordEditModal({ open, record, onOk, onCancel, editRecord, createRecord }: Props) {
+ const [loading, setLoading] = useState(false)
+ const [form] = Form.useForm()
+ const { notification } = App.useApp()
- if (value.includes(' ')) {
- invalidData.value &= ~validationFlags.name
- return new Error(t('records.errors.hasSpace'))
- }
+ useEffect(() => { form.setFieldsValue(record) }, [open])
- if (value.startsWith('.') || value.endsWith('.')) {
- invalidData.value &= ~validationFlags.name
- return new Error(t('records.errors.badName.dotAndMinus'))
- }
-
- if (value.startsWith('-') || value.endsWith('-')) {
- invalidData.value &= ~validationFlags.name
- return new Error(t('records.errors.badName.dotAndMinus'))
- }
-
- if (value.includes('..')) {
- invalidData.value &= ~validationFlags.name
- return new Error(t('records.errors.badName.doubleDots'))
- }
-
- if (value.split('.').filter(e => e.length > 63).length > 0) {
- invalidData.value &= ~validationFlags.name
- return new Error(t('records.errors.badName.longerThan63'))
- }
- return true
-}
-
-function validateTXTRecord(record: Record) {
- return () => {
- invalidData.value |= validationFlags.content
- if (record.record_type !== RecordTypes.RecordTypeTXT) return true
-
- const r = (record.content as TXTRecord)
- if (!r || !r.text || r.text === '') {
- invalidData.value &= ~validationFlags.content
- return new Error(t('common.mandatory'))
- }
-
- return true
- }
-}
-
-function validateHostRecord(record: Record) {
- return () => {
- invalidData.value |= validationFlags.content
- if ([RecordTypes.RecordTypeCNAME, RecordTypes.RecordTypeNS].indexOf(record.record_type) === -1) return true
-
- const r = (record.content as CNAMERecord | NSRecord)
- if (!r || !r.host || r.host === '') {
- invalidData.value &= ~validationFlags.content
- return new Error(t('common.mandatory'))
- }
-
- if (r.host.includes(' ')) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.hasSpace'))
- }
-
- if (!r.host.endsWith('.')) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.endWithDot'))
- }
-
- return true
- }
-}
-
-function validateIPRecord(record: Record) {
- return () => {
- invalidData.value |= validationFlags.content
- if ([RecordTypes.RecordTypeA, RecordTypes.RecordTypeAAAA].indexOf(record.record_type) === -1) return true
- const r = (record.content as AAAARecord | ARecord)
- if (!r || !r.ip || r.ip === '') {
- invalidData.value &= ~validationFlags.content
- return new Error(t('common.mandatory'))
- }
-
- switch (record.record_type) {
- case RecordTypes.RecordTypeA:
- if (!/^((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])$/.test(r.ip)) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.badIPv4'))
- }
-
- break
- case RecordTypes.RecordTypeAAAA:
- if (!/^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/.test(r.ip)) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.badIPv6'))
- }
-
- break
- }
-
- return true
- }
-}
-
-function validateMXRecord(record: Record) {
- return () => {
- invalidData.value |= validationFlags.content
- if (record.record_type !== RecordTypes.RecordTypeMX) return true
- const r = (record.content as MXRecord)
-
- if (!r || !r.host || !r.preference || r.host === '') {
- invalidData.value &= ~validationFlags.content
- return new Error(t('common.mandatory'))
- }
-
- if (r.host.includes(' ')) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.hasSpace'))
- }
-
- if (!r.host.endsWith('.')) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.endWithDot'))
- }
-
- return true
- }
-}
-
-function validateSRVRecord(record: Record) {
- return () => {
- invalidData.value |= validationFlags.content
- if (record.record_type !== RecordTypes.RecordTypeSRV) return true
- const r = (record.content as SRVRecord)
-
- if (!r || !r.port || !r.priority || !r.weight || !r.target || r.target === '') {
- invalidData.value &= ~validationFlags.content
- return new Error(t('common.mandatory'))
- }
-
- if (r.target.includes(' ')) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.hasSpace'))
- }
-
- if (!r.target.endsWith('.')) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.endWithDot'))
- }
-
- return true
- }
-}
-
-function validateCAARecord(record: Record) {
- return () => {
- invalidData.value |= validationFlags.content
- if (record.record_type !== RecordTypes.RecordTypeCAA) return true
- const r = (record.content as CAARecord)
-
- if (!r || !r.flag || !r.tag || r.tag === '' || !r.value || r.value === '') {
- invalidData.value &= ~validationFlags.content
- return new Error(t('common.mandatory'))
- }
-
- if (r.tag.includes(' ')) {
- invalidData.value &= ~validationFlags.content
- return new Error(t('records.errors.hasSpace'))
- }
-
- return true
- }
-}
-
-function buildRules(record: Record): FormRules {
- return {
- name: {
- trigger: 'blur',
- validator: validateName
- },
- txt: {
- trigger: 'blur',
- validator: validateTXTRecord(record)
- },
- host: {
- trigger: 'blur',
- validator: validateHostRecord(record)
- },
- ip: {
- trigger: 'blur',
- validator: validateIPRecord(record)
- },
- mx: {
- trigger: 'blur',
- validator: validateMXRecord(record)
- },
- srv: {
- trigger: 'blur',
- validator: validateSRVRecord(record)
- },
- caa: {
- trigger: 'blur',
- validator: validateCAARecord(record)
+ async function confirm() {
+ const commitFunction = (!record.id || record.id < 1) ? createRecord : editRecord
+ setLoading(true)
+ try {
+ record = await form.validateFields()
+ await commitFunction(record)
+ onOk()
+ } catch (error) {
+ const msg = getErrorInfo(error as ResponseError)
+ notification.error(msg)
+ console.error(error)
+ } finally {
+ setLoading(false)
}
}
-}
-async function confirm(record: Record, domain: string) {
- loading.value = true;
- try {
- if (!record.id || record.id < 1) {
- await recordStore.addRecord(domain, record)
- } else {
- await recordStore.updateRecord(domain, record)
- }
- } catch (e) {
- const msg = getErrorInfo(e)
- notification.error(msg)
- console.error(e)
- }
- loading.value = false;
-}
+ const controls = new Map) => JSX.Element>([
+ [
+ RecordTypes.RecordTypeA, (
+ ({ getFieldValue }) =>
+ > label='IP' name={['content', 'ip']} required rules={[{
+ validator() {
+
+ const result = ARecord.validate(getFieldValue('content') as ARecord)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ }
+ }]}>
+
+
+ )
+ ],
+ [
+ RecordTypes.RecordTypeAAAA, (
+ ({ getFieldValue }) =>
+ > label='IP' name={['content', 'ip']} required rules={[{
+ validator() {
+ const result = AAAARecord.validate(getFieldValue('content') as AAAARecord)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ }
+ }]}>
+
+
+ )
+ ],
+ [
+ RecordTypes.RecordTypeCNAME, (
+ ({ getFieldValue }) =>
+ > label={t('records.form.host')} required name={['content', 'host']}
+ rules={[{
+ validator() {
+ const result = CNAMERecord.validate(getFieldValue('content') as CNAMERecord)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ }
+ }]}>
+
+
+ )
+ ],
+ [
+ RecordTypes.RecordTypeNS, (
+ ({ getFieldValue }) =>
+ > label={t('records.form.host')} name={['content', 'host']} required
+ rules={[{
+ validator() {
+ const result = NSRecord.validate(getFieldValue('content') as NSRecord)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ }
+ }]}>
+
+
+ )
+ ],
+ [
+ RecordTypes.RecordTypeTXT, (
+ ({ getFieldValue }) =>
+ > label={t('records.form.text')} name={['content', 'text']} required
+ rules={[{
+ validator() {
+ const result = TXTRecord.validate(getFieldValue('content') as TXTRecord)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ }
+ }]}>
+
+
+ )
+ ],
+ [
+ RecordTypes.RecordTypeMX, (
+ ({ getFieldValue }) =>
+ <>
+ > label={t('records.form.host')} name={['content', 'host']} required
+ rules={[{
+ validator() {
+ const result = MXRecord.validate(getFieldValue('content') as MXRecord)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ }
+ }]}>
+
+
+ > label={t('records.form.preference')} name={['content', 'preference']} required>
+
+
+
+ )
+ ],
+ [
+ RecordTypes.RecordTypeCAA, (
+ ({ getFieldValue }) =>
+ <>
+ > label={t('records.form.flag')} name={['content', 'flag']} required>
+
+
+ > label={t('records.form.tag')} name={['content', 'tag']} required rules={[{
+ validator() {
+ const result = CAARecord.validate(getFieldValue('content') as CAARecord)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ }
+ }]}>
+
+
+ > label={t('records.form.value')} name={['content', 'value']} required rules={[
+ { required: true, message: t('common.mandatory') }
+ ]} >
+
+
+
+ )
+ ],
+ [
+ RecordTypes.RecordTypeSRV, (
+ ({ getFieldValue }) =>
+ <>
+ > label={t('records.form.priority')} name={['content', 'priority']} required>
+
+
+
+ > label={t('records.form.weight')} name={['content', 'weight']} required>
+
+
+
+ > label={t('records.form.port')} name={['content', 'port']} required>
+
+
+
+ > label={t('records.form.target')} name={['content', 'target']} required rules={[{
+ validator() {
+ const result = SRVRecord.validate(getFieldValue('content') as SRVRecord)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ }
+ }]}>
+
+
+
+ )
+ ]
+ ])
-function modalHeader({ record }: Props) {
return (
- <>
- {(!record || !record.id || record.id < 1) ? {t('common.new')} : {t('common.edit')}}
- {t('records._')}
-
+
+ {
+ (!record || !record.id || record.id < 1) ? t('common.new') : t('common.edit')
+ }
+ {
+ t('records._')
+ }
+
+ }
+ confirmLoading={loading}
+ cancelButtonProps={{
+ icon: ,
+ }}
+ okButtonProps={{
+ icon: ,
+ htmlType: 'submit'
+ }}
+
+ open={open}
+ closeIcon={false}
+ maskClosable={false}
+
+ centered
+ destroyOnClose
+ forceRender
+ >
+ name='record' form={form}
+ scrollToFirstError
+ autoComplete='off'
+ labelCol={{ span: 4 }}
+ wrapperCol={{ span: 20 }}
+ validateTrigger='onBlur'
+ >
+ label={t('records.recordType')} required name='record_type'>
+
+
+ label={t('records.name')} required name='name' rules={[
+ {
+ validator(_rule, value) {
+ const result = Record.validateName(value)
+ return (result === true) ? Promise.resolve() : Promise.reject(result)
+ },
+ }
+ ]}>
+
+
+ label='TTL' required name='ttl'>
+
+
+ noStyle shouldUpdate={(p, c) => p.record_type !== c.record_type}>
+ {
+ ({ getFieldValue }: FormInstance) => {
+ const e = controls.get(getFieldValue('record_type'))
+ if (!e) {
+ return <>
+ }
+ return e({ getFieldValue } as FormInstance)
+ }
+ }
+
+
+
)
-}
-
-function modalActions({ record, domain }: Props, { emit }: SetupContext) {
- return (
-
- emit('update:show', false)}>
- {{
- icon: () => ,
- default: () => t('common.cancel')
- }}
-
-
- confirm(record, domain).then(() => { emit('reloadRecords'); emit('update:show', false) })}>
- {{
- icon: () => ,
- default: () => t('common.confirm')
- }}
-
-
- )
-}
-
-function modalBody({ record }: Props) {
- const rules = buildRules(record)
- return (
- <>
-
-
- { record.record_type = v; record.content = {} as RecordT }}
- options={recordTypeOptions} style={{ width: '8vw' }} />
-
-
- record.name = v} />
-
-
- v ? record.ttl = v : null} showButton={false} >
- {{
- suffix: () => t('common.unitForSecond')
- }}
-
-
-
-
-
-
-
- )
-}
-
-const IPRecordE = ({ record }: Props) => (
-
- (record.content as ARecord | AAAARecord).ip = v} placeholder='IP' />
-
-)
-
-const HostRecordE = ({ record }: Props) => (
-
- (record.content as CNAMERecord | NSRecord).host = v} placeholder={t('records.form.host')} />
-
-)
-
-const TXTRecordE = ({ record }: Props) => (
-
- (record.content as TXTRecord).text = v} placeholder={t('records.form.text')} />
-
-)
-
-const MXRecordE = ({ record }: Props) => (
-
-
- (record.content as MXRecord).host = v}
- style={{ width: '75%' }} />
- v ? (record.content as MXRecord).preference = v : null}
- style={{ width: '25%' }} show-button={false} />
-
-
-)
-
-const CAARecordE = ({ record }: Props) => (
-
-
- v ? (record.content as CAARecord).flag = v : null}
- show-button={false} />
- v ? (record.content as CAARecord).tag = v : null}
- style={{ width: '40%' }} />
- v ? (record.content as CAARecord).value = v : null}
- style={{ width: '40%' }} />
-
-
-)
-
-const SRVRecordE = ({ record }: Props) => (
-
-
- v ? (record.content as SRVRecord).priority = v : null}
- show-button={false} />
- v ? (record.content as SRVRecord).weight = v : null}
- show-button={false} />
- v ? (record.content as SRVRecord).port = v : null}
- show-button={false} />
- (record.content as SRVRecord).target = v}
- />
-
-
-)
-
-const modalBodyContent = ({ type, record }: { type: RecordTypes, record: Record }) => {
- const e = {
- 'A': IPRecordE,
- 'AAAA': IPRecordE,
- 'CNAME': HostRecordE,
- 'NS': HostRecordE,
- 'TXT': TXTRecordE,
- 'MX': MXRecordE,
- 'SRV': SRVRecordE,
- 'CAA': CAARecordE,
- 'SOA': ({ }: Props) => <>
- }[type]
- return
-}
-
-function RecordEditModal(
- { domain, show, record }: Props,
- { emit }: SetupContext) {
- return (
-
-
- {{
- header: () => ,
- default: () => ,
- action: () => emit('update:show', v)}
- onReloadRecords={() => emit('reloadRecords')} />
- }}
-
-
- )
-}
-
-export default RecordEditModal
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/src/components/records/RecordOps.tsx b/web/src/components/records/RecordOps.tsx
index e7d8ce8..d558d6d 100644
--- a/web/src/components/records/RecordOps.tsx
+++ b/web/src/components/records/RecordOps.tsx
@@ -1,49 +1,26 @@
-import { NButton, NButtonGroup, NTooltip, NIcon, NPopconfirm, NFlex } from 'naive-ui'
-import { TrashAlt, EditRegular } from '@vicons/fa'
-import type { Record } from '@/stores/records'
-import i18n from '@/locale/i18n'
-import type { SetupContext } from 'vue'
-const { t } = i18n.global
+import { Button, Flex, Popconfirm, Tooltip } from "antd"
+import { DeleteOutlined, EditFilled } from "@ant-design/icons"
+import i18n from '../../locale'
+
+const { t } = i18n
type Props = {
- record: Record
- domain: string
- onRecordDelete: (domain: string, record: Record) => void
- onEditRecord: (domain: string, record: Record) => void
+ onEdit(): void
+ onDelete(): void
}
-type Events = {
- recordDelete(domain: string, record: Record): void
- editRecord(domain: string, record: Record): void
-}
-
-function RecordOps({ record, domain }: Props, { emit }: SetupContext) {
+export default function RecordOps({ onEdit, onDelete }: Props) {
return (
-
-
-
- {{
- trigger: () => emit('editRecord', domain, record)}>
- {{
- icon: () =>
- }}
- ,
- default: () => t("common.edit")
- }}
-
- emit('recordDelete', domain, record)}>
- {{
- trigger: () =>
- {{
- icon: () =>
- }}
- ,
- default: () => t("common.deleteConfirm")
- }}
-
-
-
- )
-}
+
+
+ } size="small" onClick={onEdit}/>
+
-export default RecordOps
\ No newline at end of file
+
+
+ } size="small" />
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/web/src/index.css b/web/src/index.css
new file mode 100644
index 0000000..bc61194
--- /dev/null
+++ b/web/src/index.css
@@ -0,0 +1,78 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ --records-layout-header-bgcolor: #eee;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+ .records-layout-header{
+ background-color: #eee;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --records-layout-header-bgcolor: #333;
+ }
+}
diff --git a/web/src/isBrowserDarkTheme.ts b/web/src/isBrowserDarkTheme.ts
new file mode 100644
index 0000000..37801fc
--- /dev/null
+++ b/web/src/isBrowserDarkTheme.ts
@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+const isBrowserDarkTheme = () => {
+ const [isDarkTheme, setIsDarkTheme] = useState(false);
+
+ useEffect(() => {
+ const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+ const handleChange = (e: { matches: boolean | ((prevState: boolean) => boolean); }) => setIsDarkTheme(e.matches);
+ mediaQueryList.addEventListener('change', handleChange);
+ setIsDarkTheme(mediaQueryList.matches);
+
+ return () => mediaQueryList.removeEventListener('change', handleChange);
+ }, []);
+
+ return isDarkTheme
+};
+
+export default isBrowserDarkTheme;
\ No newline at end of file
diff --git a/web/src/locale/en-US.ts b/web/src/locale/en.ts
similarity index 98%
rename from web/src/locale/en-US.ts
rename to web/src/locale/en.ts
index 21941bd..83a11d8 100644
--- a/web/src/locale/en-US.ts
+++ b/web/src/locale/en.ts
@@ -86,6 +86,7 @@ export default {
hasSpace: 'shoule have no space',
badIPv4: 'invalid IPv4 address',
badIPv6: 'invalid IPv6 address',
+ badEmail: 'no @ for this email address',
badName: {
dotAndMinus: 'should not start or end with "." "-"',
doubleDots: 'should have no contianus "."',
diff --git a/web/src/locale/i18n.ts b/web/src/locale/i18n.ts
deleted file mode 100644
index 4a68400..0000000
--- a/web/src/locale/i18n.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createI18n } from "vue-i18n";
-import zhCN from "./zh-CN";
-import enUS from "./en-US";
-
-export default createI18n({
- locale: navigator.language,
- legacy: false,
- messages: {
- zh: {
- ...zhCN
- },
- 'zh-CN': {
- ...zhCN
- },
-
- en: {
- ...enUS
- },
- 'en-US': {
- ...enUS
- }
- }
-})
\ No newline at end of file
diff --git a/web/src/locale/index.ts b/web/src/locale/index.ts
new file mode 100644
index 0000000..cab50a9
--- /dev/null
+++ b/web/src/locale/index.ts
@@ -0,0 +1,24 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import zh from './zh'
+import en from './en'
+
+i18n.use(LanguageDetector).use(initReactI18next)
+ .init({
+ debug: import.meta.env.DEV,
+ fallbackLng: 'zh',
+ interpolation: {
+ escapeValue: false,
+ },
+ resources: {
+ en: {
+ translation: en
+ },
+ zh: {
+ translation: zh
+ }
+ }
+ })
+
+export default i18n
\ No newline at end of file
diff --git a/web/src/locale/zh-CN.ts b/web/src/locale/zh.ts
similarity index 97%
rename from web/src/locale/zh-CN.ts
rename to web/src/locale/zh.ts
index f7e0945..5a5c460 100644
--- a/web/src/locale/zh-CN.ts
+++ b/web/src/locale/zh.ts
@@ -86,6 +86,7 @@ export default {
hasSpace: '不能有空格',
badIPv4: '不是有效的 IPv4 地址',
badIPv6: '不是有效的 IPv6 地址',
+ badEmail: '这里的邮箱不能有 @ 符号',
badName: {
dotAndMinus: '资源记录不能以 "."、"-" 开头或结尾',
doubleDots: '资源记录不能有连续的 "."',
diff --git a/web/src/main.ts b/web/src/main.ts
deleted file mode 100644
index f6e8074..0000000
--- a/web/src/main.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import './assets/main.css'
-
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-
-import App from './App'
-import router from './router'
-import i18n from './locale/i18n'
-
-const app = createApp(App)
-
-app.use(createPinia())
-app.use(router)
-app.use(i18n)
-
-app.mount('#app')
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..3d7150d
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
deleted file mode 100644
index 27c9f46..0000000
--- a/web/src/router/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-
-const router = createRouter({
- history: createWebHashHistory(),
- routes: [
- {
- path: '/',
- redirect: '/domains'
- },
- {
- path: '/domains',
- name: 'domains',
- meta: {
- type: 'domains'
- },
- component: () => import('@/views/DomainsView')
- },
- {
- path: '/records/:domain',
- name: 'records',
- meta: {
- type: 'records'
- },
- component: () => import('@/views/RecordsView'),
- props: true
- }
- ]
-})
-
-export default router
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
new file mode 100644
index 0000000..44abc7b
--- /dev/null
+++ b/web/src/router/index.tsx
@@ -0,0 +1,28 @@
+import { createHashRouter, redirect } from 'react-router-dom'
+import { Suspense, lazy } from 'react'
+import { Spin } from 'antd'
+
+const DomainsView = lazy(() => import('../views/DomainsView'))
+const RecordsView = lazy(() => import('../views/RecordsView'))
+
+const router = createHashRouter([
+ {
+ path: '/',
+ loader: async () => {
+ return redirect('/domains')
+ },
+ },
+ {
+ path: '/domains',
+ id: 'domains',
+ element: }>
+ },
+ {
+ path: '/records/:domain',
+ id: 'records',
+ loader: args => args.params,
+ element: }>
+ }
+])
+
+export default router
\ No newline at end of file
diff --git a/web/src/stores/domains.ts b/web/src/stores/domains.ts
index f75c3e5..57cf283 100644
--- a/web/src/stores/domains.ts
+++ b/web/src/stores/domains.ts
@@ -1,17 +1,16 @@
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import api from '@/apis/api'
+import { useState } from 'react'
+import api from '../api'
-export type Domain = {
- id: number;
- domain_name: string;
- main_dns: string;
- admin_email: string;
- serial_number: number;
- refresh_interval: number;
- retry_interval: number;
- expiry_period: number;
- negative_ttl: number;
+export class Domain {
+ id?: number
+ domain_name?: string
+ main_dns?: string
+ admin_email?: string
+ serial_number?: number
+ refresh_interval?: number
+ retry_interval?: number
+ expiry_period?: number
+ negative_ttl?: number
}
const domainDevData: Domain[] = [
@@ -39,43 +38,37 @@ const domainDevData: Domain[] = [
},
]
-export const useDomainStore = defineStore('domains', () => {
- const domains = ref([])
- const domainsGetter = computed(() => domains.value)
+export const useDomainStore = () => {
+ const [domains, setDomains] = useState([])
async function loadDomains() {
- // TODO: load from api
- domains.value = import.meta.env.DEV ?
- domainDevData :
- (await api.get('/domains')).data.data
+ setDomains(import.meta.env.DEV ? domainDevData : (await api.get('/domains')).data.data)
}
async function addDomain(domain: Domain) {
- // TODO: load from api
if (!import.meta.env.DEV) {
domain = (await api.post("/domains", domain)).data.data
+ } else if (!domain.id) {
+ domain.id = Math.floor(1000 + Math.random() * 9000)
}
- domains.value.push(domain)
+ setDomains(domains.concat(domain))
}
async function updateDomain(domain: Domain) {
- // TODO: load from api
if (!import.meta.env.DEV) {
await api.put("/domains", domain)
}
- domains.value = domains.value.map(e => (e.id === domain.id || e.domain_name === domain.domain_name) ? domain : e)
+ setDomains(domains.map((e: Domain) => (e.id === domain.id || e.domain_name === domain.domain_name) ? domain : e))
}
async function removeDomain(domain: Domain) {
- // TODO: load from api
if (!import.meta.env.DEV) {
await api.delete(`/domains/${domain.id}`)
}
-
- domains.value = domains.value.filter(e => e.id !== domain.id)
+ setDomains(domains.filter(e => e.id !== domain.id))
}
- return { domains, domainsGetter, loadDomains, addDomain, updateDomain, removeDomain }
-})
+ return { domains, loadDomains, addDomain, updateDomain, removeDomain }
+}
\ No newline at end of file
diff --git a/web/src/stores/records.ts b/web/src/stores/records.ts
index 996863b..96fe160 100644
--- a/web/src/stores/records.ts
+++ b/web/src/stores/records.ts
@@ -1,52 +1,147 @@
-import api from '@/apis/api';
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
+import { useState } from 'react'
+import i18n from '../locale'
+import api from '../api';
+const { t } = i18n
+export class ARecord {
+ ip?: string
-export type ARecord = {
- ip: string;
+ static validate(v: ARecord): true | Error {
+ if (!v.ip || v.ip === '') return new Error(t('common.mandatory'))
+ if (!/^((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])$/.test(v.ip)) return new Error(t('records.errors.badIPv4'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return this.ip
+ }
}
-export type AAAARecord = {
- ip: string;
+export class AAAARecord {
+ ip?: string
+
+ static validate(v: AAAARecord): true | Error {
+ if (!v.ip || v.ip === '') return new Error(t('common.mandatory'))
+ if (!/^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/.test(v.ip)) return new Error(t('records.errors.badIPv4'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return this.ip
+ }
}
-export type TXTRecord = {
- text: string;
+export class TXTRecord {
+ text?: string
+
+ static validate(v: TXTRecord): true | Error {
+ if (!v.text || v.text === '') return new Error(t('common.mandatory'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return this.text
+ }
}
-export type CNAMERecord = {
- host: string;
+export class CNAMERecord {
+ host?: string
+
+ static validate(v: CNAMERecord): true | Error {
+ if (!v.host || v.host === '') return new Error(t('common.mandatory'))
+ if (v.host.includes(' ')) return new Error(t('records.errors.hasSpace'))
+ if (!v.host.endsWith('.')) return new Error(t('records.errors.endWithDot'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return this.host
+ }
}
-export type NSRecord = {
- host: string;
+export class NSRecord {
+ host?: string
+
+ static validate(v: NSRecord): true | Error {
+ if (!v.host || v.host === '') return new Error(t('common.mandatory'))
+ if (v.host.includes(' ')) return new Error(t('records.errors.hasSpace'))
+ if (!v.host.endsWith('.')) return new Error(t('records.errors.endWithDot'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return this.host
+ }
}
-export type MXRecord = {
- host: string;
- preference: number;
+export class MXRecord {
+ host?: string
+ preference?: number
+
+ static validate(v: MXRecord): true | Error {
+ if (!v.host || v.host === '' || !v.preference) return new Error(t('common.mandatory'))
+ if (v.host.includes(' ')) return new Error(t('records.errors.hasSpace'))
+ if (!v.host.endsWith('.')) return new Error(t('records.errors.endWithDot'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return Object.entries(this).map(i => i[1]).join(" ")
+ }
}
-export type SRVRecord = {
- priority: number;
- weight: number;
- port: number;
- target: string;
+export class SRVRecord {
+ priority?: number;
+ weight?: number;
+ port?: number;
+ target?: string;
+
+ static validate(v: SRVRecord): true | Error {
+ if (!v.port || !v.priority || !v.weight || !v.target || v.target === '') return new Error(t('common.mandatory'))
+ if (v.target?.includes(' ')) return new Error(t('records.errors.hasSpace'))
+ if (!v.target?.endsWith('.')) return new Error(t('records.errors.endWithDot'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return Object.entries(this).map(i => i[1]).join(" ")
+ }
}
-export type SOARecord = {
- ns: string;
- MBox: string;
- refresh: number;
- retry: number;
- expire: number;
- minttl: number;
+export class SOARecord {
+ ns?: string;
+ MBox?: string;
+ refresh?: number;
+ retry?: number;
+ expire?: number;
+ minttl?: number;
+
+ static validate(v: SOARecord): true | Error {
+ if (!v.refresh || !v.retry || !v.expire! || !v.minttl || !v.MBox || v.MBox === '' || !v.ns || v.ns === '') return new Error(t('common.mandatory'))
+ if (v.ns?.includes(' ') || v.MBox?.includes(' ')) return new Error(t('records.errors.hasSpace'))
+ if (!v.ns?.endsWith('.') || !v.MBox?.endsWith('.')) return new Error(t('records.errors.endWithDot'))
+ if (v.MBox?.includes('@')) return new Error(t('records.errors.badEmail'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return Object.entries(this).map(i => i[1]).join(" ")
+ }
}
-export type CAARecord = {
- flag: number;
- tag: string;
- value: string;
+export class CAARecord {
+ flag?: number
+ tag?: string
+ value?: string
+
+ static validate(v: CAARecord): true | Error {
+ if (!v.flag || !v.tag || v.tag === '' || !v.value || v.value === '') return new Error(t('common.mandatory'))
+ if (v.tag?.includes(' ')) return new Error(t('records.errors.hasSpace'))
+ return true
+ }
+
+ toString(): string | undefined {
+ return Object.entries(this).map(i => i[1]).join(" ")
+ }
}
export enum RecordTypes {
@@ -63,146 +158,165 @@ export enum RecordTypes {
export type RecordT = ARecord | AAAARecord | TXTRecord | CNAMERecord | NSRecord | MXRecord | SRVRecord | SOARecord | CAARecord
-export type Record = {
- id: number;
- zone: string;
- name: string;
- ttl: number;
- content: RecordT;
- record_type: RecordTypes;
+export class Record {
+ id?: number
+ zone?: string
+ name?: string
+ ttl?: number
+ content?: T
+ record_type?: RecordTypes
+
+ validate(): true | Error {
+ const zone = Record.validateZone(this.zone!)
+ if (zone !== true) return zone
+ const name = Record.validateName(this.name!)
+ if (name !== true) return name
+ return true
+ }
+
+ static validateZone(zone: string): true | Error {
+ if (zone === '') return new Error(t('common.mandatory'))
+ if (zone.includes(' ')) new Error(t('records.errors.hasSpace'))
+ if (zone.endsWith('.')) return new Error(t('records.errors.endWithDot'))
+ return true
+ }
+
+ static validateName(name: string): true | Error {
+ if (name === '') return new Error(t('common.mandatory'))
+ if (name.includes(' ')) return new Error(t('records.errors.hasSpace'))
+ if (name.startsWith('.') || name.endsWith('.')) return new Error(t('records.errors.badName.dotAndMinus'))
+ if (name.startsWith('-') || name.endsWith('.')) return new Error(t('records.errors.badName.dotAndMinus'))
+ if (name.includes('..')) new Error(t('records.errors.badName.doubleDots'))
+ if (name.split('.').filter(e => e.length > 63).length > 0) return new Error(t('records.errors.badName.longerThan63'))
+ return true
+ }
}
const recordDevData = new Map([
- [
- 'example.com', [
- {
- id: 1,
- zone: "example.com",
- name: "@",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeSOA,
- content: {
- ns: "ns1.example.com.",
- MBox: "admin@example.com.",
- refresh: 86400,
- retry: 7200,
- expire: 3600000,
- minttl: 86400,
- }
- },
- {
- id: 2,
- zone: "example.com",
- name: "@",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeNS,
- content: {
- host: "ns1.example.com."
- }
- },
- {
- id: 3,
- zone: "example.com",
- name: "@",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeNS,
- content: {
- host: "ns2.example.com."
- }
- },
- {
- id: 4,
- zone: "example.com",
- name: "www",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeA,
- content: {
- ip: "233.233.233.233"
- }
- },
- {
- id: 5,
- zone: "example.com",
- name: "cname",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeCNAME,
- content: {
- host: "www.example.com."
- }
+ ['example.com', [
+ {
+ id: 1,
+ zone: "example.com",
+ name: "@",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeSOA,
+ content: {
+ ns: "ns1.example.com.",
+ MBox: "admin@example.com.",
+ refresh: 86400,
+ retry: 7200,
+ expire: 3600000,
+ minttl: 86400,
}
- ]
- ],
- [
- 'example.org', [
- {
- id: 1,
- zone: "example.org",
- name: "@",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeSOA,
- content: {
- ns: "ns1.example.org.",
- MBox: "admin@example.org.",
- refresh: 86400,
- retry: 7200,
- expire: 3600000,
- minttl: 86400,
- }
- },
- {
- id: 2,
- zone: "example.org",
- name: "@",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeNS,
- content: {
- host: "ns1.example.org."
- }
- },
- {
- id: 3,
- zone: "example.org",
- name: "@",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeNS,
- content: {
- host: "ns2.example.org."
- }
- },
- {
- id: 4,
- zone: "example.org",
- name: "www",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeA,
- content: {
- ip: "233.233.233.233"
- }
- },
- {
- id: 5,
- zone: "example.org",
- name: "cname",
- ttl: 3600,
- record_type: RecordTypes.RecordTypeCNAME,
- content: {
- host: "www.example.org."
- }
+ },
+ {
+ id: 2,
+ zone: "example.com",
+ name: "@",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeNS,
+ content: {
+ host: "ns1.example.com."
}
- ]
- ]
+ },
+ {
+ id: 3,
+ zone: "example.com",
+ name: "@",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeNS,
+ content: {
+ host: "ns2.example.com."
+ }
+ },
+ {
+ id: 4,
+ zone: "example.com",
+ name: "www",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeA,
+ content: {
+ ip: "233.233.233.233"
+ }
+ },
+ {
+ id: 5,
+ zone: "example.com",
+ name: "cname",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeCNAME,
+ content: {
+ host: "www.example.com."
+ }
+ }
+ ] as Record[]],
+ ['example.org', [
+ {
+ id: 1,
+ zone: "example.org",
+ name: "@",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeSOA,
+ content: {
+ ns: "ns1.example.org.",
+ MBox: "admin@example.org.",
+ refresh: 86400,
+ retry: 7200,
+ expire: 3600000,
+ minttl: 86400,
+ }
+ },
+ {
+ id: 2,
+ zone: "example.org",
+ name: "@",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeNS,
+ content: {
+ host: "ns1.example.org."
+ }
+ },
+ {
+ id: 3,
+ zone: "example.org",
+ name: "@",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeNS,
+ content: {
+ host: "ns2.example.org."
+ }
+ },
+ {
+ id: 4,
+ zone: "example.org",
+ name: "www",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeA,
+ content: {
+ ip: "233.233.233.233"
+ }
+ },
+ {
+ id: 5,
+ zone: "example.org",
+ name: "cname",
+ ttl: 3600,
+ record_type: RecordTypes.RecordTypeCNAME,
+ content: {
+ host: "www.example.org."
+ }
+ }
+ ] as Record[]]
])
-
-export const useRecordStore = defineStore('records', () => {
- const records = ref([])
- const recordsGetter = computed(() => records.value)
+export const useRecordStore = () => {
+ const [records, setRecords] = useState([])
async function loadRecords(domain: string) {
// TODO: load from api
- records.value = import.meta.env.DEV ?
- recordDevData.get(domain) :
- (await api.get(`/records/${domain}`)).data.data
+ setRecords(import.meta.env.DEV ?
+ recordDevData.get(domain)! :
+ (await api.get(`/records/${domain}`)).data.data)
}
async function addRecord(domain: string, record: Record) {
@@ -211,7 +325,7 @@ export const useRecordStore = defineStore('records', () => {
record = (await api.post(`/records/${domain}`, record)).data.data
}
- records.value?.push(record)
+ setRecords(records.concat(record))
}
async function updateRecord(domain: string, record: Record) {
@@ -220,7 +334,7 @@ export const useRecordStore = defineStore('records', () => {
await api.put(`/records/${domain}`, record)
}
- records.value = records.value?.map(e => e.id === record.id ? record : e)
+ setRecords(records.map(e => e.id === record.id ? record : e))
}
async function removeRecord(domain: string, record: Record) {
@@ -229,8 +343,8 @@ export const useRecordStore = defineStore('records', () => {
await api.delete(`/records/${domain}/${record.id}`)
}
- records.value = records.value?.filter(e => e.id !== record.id)
+ setRecords(records.filter(e => e.id !== record.id))
}
- return { records, recordsGetter, loadRecords, addRecord, updateRecord, removeRecord }
-})
+ return { records, loadRecords, addRecord, updateRecord, removeRecord }
+}
\ No newline at end of file
diff --git a/web/src/views/DomainsView.css b/web/src/views/DomainsView.css
index 20aa6a3..7c854df 100644
--- a/web/src/views/DomainsView.css
+++ b/web/src/views/DomainsView.css
@@ -1,3 +1,4 @@
-.n-card {
+.domain-info {
width: 32vw;
-}
\ No newline at end of file
+ text-align: left;
+}
diff --git a/web/src/views/DomainsView.tsx b/web/src/views/DomainsView.tsx
index a642701..60583e9 100644
--- a/web/src/views/DomainsView.tsx
+++ b/web/src/views/DomainsView.tsx
@@ -1,87 +1,102 @@
import './DomainsView.css'
+import { Domain, useDomainStore } from '../stores/domains'
+import { useEffect, useState } from 'react'
+import { App, Button, Card, Space, Spin } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
-import { NSpin, NFlex, NCard, NButton, NIcon, NModalProvider, createDiscreteApi } from 'naive-ui'
-import { PlusSquare } from "@vicons/fa"
-import { type Domain, useDomainStore } from '@/stores/domains'
-import { getErrorInfo } from '@/apis/api'
-import DomainInfo from '@/components/domains/DomainInfo'
-import DomainOps from '@/components/domains/DomainOps'
-import DomainRemoveModal from '@/components/domains/DomainRemoveModal'
-import DomainEditModal from '@/components/domains/DomainEditModal'
-import { ref } from 'vue'
+import { useNavigate } from 'react-router-dom'
+import DomainDeleteModal from '../components/domains/DomainDeleteModal'
+import DomainCard from '../components/domains/DomainCard'
+import DomainEditModal from '../components/domains/DomainEditModal'
+import { ResponseError, getErrorInfo } from '../api'
-const domainStore = useDomainStore()
-const { notification } = createDiscreteApi(['notification'])
+const emptyDomain: Domain = { domain_name: '' }
-const loading = ref(true);
-const removeModalShow = ref(false);
-const editModalShow = ref(false);
-const operationDomain = ref({} as Domain)
+export default function DomainsView() {
+ const [loading, setLoading] = useState(true)
+ const [deleteModalShow, setDeleteModalShow] = useState(false)
+ const [editModalShow, setEditModalShow] = useState(false)
+ const [currentDomain, setCurrentDomain] = useState(emptyDomain)
+ const { notification } = App.useApp()
+ const domainStore = useDomainStore()
+ const go = useNavigate()
-function showRemoveModal(domain: Domain) {
- operationDomain.value = domain
- removeModalShow.value = true
-}
-
-function showEditModal(domain: Domain) {
- operationDomain.value = domain
- editModalShow.value = true
-}
-
-function addDomain() {
- const domain = {
- refresh_interval: 86400,
- retry_interval: 7200,
- expiry_period: 3600000,
- negative_ttl: 86400,
- serial_number: 1,
- } as Domain
- showEditModal(domain)
-}
-
-function DomainsView() {
- try {
- domainStore.loadDomains()
- loading.value = false
- } catch (e) {
- const msg = getErrorInfo(e)
- notification.error(msg)
- console.error(e)
+ function openDeleteModal(domain: Domain) {
+ setCurrentDomain(domain)
+ setDeleteModalShow(true)
}
+
+ function closeDeleteModdal() {
+ setDeleteModalShow(false)
+ }
+
+ function openEditModal(domain: Domain) {
+ setCurrentDomain(domain)
+ setEditModalShow(true)
+ }
+
+ function closeEditModal() {
+ setEditModalShow(false)
+ }
+
+ function newDomain() {
+ openEditModal({
+ domain_name: '',
+ admin_email: '',
+ main_dns: '',
+ refresh_interval: 86400,
+ retry_interval: 7200,
+ expiry_period: 3600000,
+ negative_ttl: 86400,
+ serial_number: 1,
+ })
+ }
+
+ // called once only.
+ useEffect(() => {
+ domainStore.loadDomains().then(() => setLoading(false)).catch(e => {
+ const msg = getErrorInfo(e as ResponseError)
+ notification.error(msg)
+ console.error(e)
+ })
+ }, [])
+
return (
<>
{
- loading.value ? :
-
-
+ loading ? :
+ <>
+
{
- domainStore.domains.map((domain: Domain) => (
-
- {{
- default: () => ,
- action: () =>
- }}
-
-
+ domainStore.domains.map(e => (
+ openDeleteModal(e)}
+ onRecordClick={() => go(`/records/${e.domain_name}`)}
+ onEditClick={() => openEditModal(e)}
+ key={e.id}
+ />
))
}
-
-
-
- {{
- icon: () =>
- }}
-
-
-
- removeModalShow.value = v} />
- editModalShow.value = v} />
-
+
+ }
+ block type="text" onClick={newDomain} />
+
+
+
+
+
}
)
-}
-
-DomainsView.displayName = 'DomainsView'
-
-export default DomainsView
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/src/views/RecordsView.css b/web/src/views/RecordsView.css
index 726782a..13e10b0 100644
--- a/web/src/views/RecordsView.css
+++ b/web/src/views/RecordsView.css
@@ -1,7 +1,38 @@
-div#records {
- position: absolute;
+.records-layout {
+ position: fixed;
+ display: block;
top: 0;
left: 0;
width: 100vw;
- padding: 1.5rem;
-}
\ No newline at end of file
+ height: 100vh;
+ text-align: left;
+}
+
+.toolbar {
+ padding-top: 1em;
+}
+
+.right {
+ position:absolute ;
+ right: 64px;
+}
+
+.records-layout-header {
+ background-color: var(--records-layout-header-bgcolor);
+ align-items: center;
+}
+
+.display-as-inline {
+ display:inline-block;
+ margin: 0 !important;
+}
+
+h1.title {
+ font-weight:normal;
+ font-size: 14pt;
+}
+
+h2.subtitle {
+ font-weight:normal;
+ font-size: 12pt;
+}
diff --git a/web/src/views/RecordsView.tsx b/web/src/views/RecordsView.tsx
index 66a2686..ee1bf16 100644
--- a/web/src/views/RecordsView.tsx
+++ b/web/src/views/RecordsView.tsx
@@ -1,250 +1,119 @@
+import { LeftOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons"
+import { App, Button, Flex, Input, Layout, Spin, Table, Typography, theme } from "antd"
+import { Params, useLoaderData, useNavigate } from "react-router-dom"
import './RecordsView.css'
+import i18n from '../locale'
+import { useEffect, useState } from "react"
+import { type Record, RecordT, useRecordStore, RecordTypes } from "../stores/records"
+import { ResponseError, getErrorInfo } from "../api"
+import RecordOps from "../components/records/RecordOps"
+import RecordEditModal from "../components/records/RecordEditModal"
-import {
- NSpin, NPageHeader,
- NFlex, NButton, NIcon, NGrid, NGi,
- NStatistic, NDataTable, NInput,
- NModalProvider,
- createDiscreteApi
-} from 'naive-ui'
-import type { DataTableColumns } from 'naive-ui'
-import { useRecordStore, type Record, type SOARecord, RecordTypes, type ARecord } from '@/stores/records'
-import { getErrorInfo } from '@/apis/api'
-import { PlusSquare, RedoAlt, CheckCircle, Clock, Cogs, Search } from '@vicons/fa'
-import router from '@/router';
-import RecordOps from '@/components/records/RecordOps'
-import RecordEditModal from '@/components/records/RecordEditModal'
-import i18n from '@/locale/i18n'
-import { ref } from 'vue'
+const { t } = i18n
+const emptyRecord: Record = {} as Record
-const { t } = i18n.global
+export default function RecordsView() {
+ const { domain } = useLoaderData() as Params
+ const [loading, setLoading] = useState(true)
+ const [searchText, setSearchText] = useState('')
+ const [editModalShow, setEditModalShow] = useState(false)
+ const [currentRecord, setCurrentRecord] = useState(emptyRecord)
+ const { notification } = App.useApp()
+ const {
+ token: { colorBgContainer, borderRadiusLG },
+ } = theme.useToken();
+ const go = useNavigate()
+ const recordStore = useRecordStore()
-type Props = {
- domain: string
-}
+ useEffect(() => {
+ if (domain)
+ recordStore.loadRecords(domain).then(() => setLoading(false)).catch(e => {
+ const msg = getErrorInfo(e as ResponseError)
+ notification.error(msg)
+ console.error(e)
+ })
+ }, [domain])
-const recordStore = useRecordStore()
-const { notification } = createDiscreteApi(['notification'])
-const editModalShow = ref(false)
-const editingRecord = ref({} as Record)
-const loading = ref(true);
-const records = ref([] as Record[]);
-const soa = ref({} as SOARecord)
-const reloadRecords = () => records.value = recordStore.records?.filter(e => e.record_type !== RecordTypes.RecordTypeSOA)
-
-async function refreshRecords(domain: string) {
- try {
- await recordStore.loadRecords(domain)
- reloadRecords()
- soa.value = recordStore.records?.find(e => e.record_type === RecordTypes.RecordTypeSOA)?.content as SOARecord
- } catch (err) {
- const msg = getErrorInfo(err)
- notification.error(msg)
- console.error(err)
- } finally {
- loading.value = false;
+ function closeEditModal() {
+ setCurrentRecord(emptyRecord)
+ setEditModalShow(false)
}
-}
-function goBack() {
- router.push('/domains')
-}
-
-function searchRecord(value: string) {
- if (value.length > 0) {
- records.value = recordStore.records?.
- filter(e => e.record_type !== RecordTypes.RecordTypeSOA).
- filter(e => !!~e.name.indexOf(value))
- } else {
- records.value = recordStore.records?.
- filter(e => e.record_type !== RecordTypes.RecordTypeSOA)
+ function openEditModal(record: Record) {
+ setCurrentRecord(record)
+ setEditModalShow(true)
}
-}
-async function deleteRecord(domain: string, record: Record) {
- try {
- await recordStore.removeRecord(domain, record)
- reloadRecords()
- } catch (err) {
- const msg = getErrorInfo(err)
- notification.error(msg)
- console.error(err)
+ function newRecord() {
+ openEditModal({
+ zone: `${domain}.`,
+ name: '',
+ record_type: RecordTypes.RecordTypeA,
+ ttl: 600
+ } as Record)
}
-}
-function showEditing(domain: string, record: Record) {
- editModalShow.value = true
- editingRecord.value = record
-}
-
-function newRecord(domain: string) {
- showEditing(domain, {
- zone: `${domain}.`,
- ttl: 500,
- record_type: RecordTypes.RecordTypeA,
- content: {
- ip: ''
- } as ARecord
- } as Record)
-}
-
-const generateColumns = (domain: string) => [
- {
- key: 'no',
- title: '#',
- render(_, index) {
- return index + 1
- }
- },
- {
- key: 'name',
- title: t("records.name"),
- },
- {
- key: 'record_type',
- title: t('records.recordType')
- },
- {
- key: 'content',
- title: t('records.content'),
- render(row: Record) {
- return Object.entries(row.content).map(i => i[1]).join(" ")
- }
- },
- {
- key: 'ttl',
- title: 'TTL (s)'
- },
- {
- key: '',
- render(row: Record) {
- return
- }
- }
-] as DataTableColumns
-
-const statRefresh = () => (
-
-
- {{
- suffix: () => 's',
- label: () => (
- <>
-
- {t('records.refresh')}
-
- )
- }}
-
-
-)
-
-const statRetry = () => (
-
-
- {{
- suffix: () => 's',
- label: () => (
- <>
-
- {t('records.retry')}
-
- )
- }}
-
-
-)
-
-const statExpire = () => (
-
-
- {{
- suffix: () => 's',
- label: () => (
- <>
-
- {t('records.expire')}
-
- )
- }}
-
-
-)
-
-const statTTL = () => (
-
-
- {{
- suffix: () => 's',
- label: () => (
- <>
-
- {t('records.ttl')}
-
- )
- }}
-
-
-)
-
-function recordsViewBodyHeaderExtra() {
return (
-
-
-
-
-
-
- )
-}
-
-function recordsViewBody({ domain }: Props) {
- const columns = generateColumns(domain)
- return (
-
-
- {{
- extra: () => (
-
- newRecord(domain)}>
- {{
- icon: () => ,
- default: () => t('common.add')
- }}
-
-
- {{
- prefix: () =>
- }}
-
-
- ),
- default: () =>
- }}
-
-
-
-
- )
-}
-
-function RecordsView({ domain }: Props) {
- try {
- refreshRecords(domain)
- } catch (err) {
- const msg = getErrorInfo(err)
- notification.error(msg)
- console.error(err)
- }
- return (
-
+
)
-}
-
-RecordsView.displayName = 'RecordsView'
-export default RecordsView
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/env.d.ts b/web/src/vite-env.d.ts
similarity index 100%
rename from web/env.d.ts
rename to web/src/vite-env.d.ts
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
deleted file mode 100644
index e14c754..0000000
--- a/web/tsconfig.app.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "extends": "@vue/tsconfig/tsconfig.dom.json",
- "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
- "exclude": ["src/**/__tests__/*"],
- "compilerOptions": {
- "composite": true,
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
- "baseUrl": ".",
- "paths": {
- "@/*": ["./src/*"]
- }
- }
-}
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 219a648..a7fc6fb 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,16 +1,25 @@
{
- "files": [],
- "references": [
- {
- "path": "./tsconfig.node.json"
- },
- {
- "path": "./tsconfig.app.json"
- }
- ],
"compilerOptions": {
- "jsx": "preserve",
- "jsxFactory": "h",
- "jsxFragmentFactory": "Fragment",
- }
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
index f094063..97ede7e 100644
--- a/web/tsconfig.node.json
+++ b/web/tsconfig.node.json
@@ -1,19 +1,11 @@
{
- "extends": "@tsconfig/node20/tsconfig.json",
- "include": [
- "vite.config.*",
- "vitest.config.*",
- "cypress.config.*",
- "nightwatch.conf.*",
- "playwright.config.*"
- ],
"compilerOptions": {
"composite": true,
- "noEmit": true,
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
+ "skipLibCheck": true,
"module": "ESNext",
- "moduleResolution": "Bundler",
- "types": ["node"]
- }
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true,
+ "strict": true
+ },
+ "include": ["vite.config.ts"]
}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 36c6187..861b04b 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,18 +1,7 @@
-import { fileURLToPath, URL } from 'node:url'
-
import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [
- vue(),
- vueJsx(),
- ],
- resolve: {
- alias: {
- '@': fileURLToPath(new URL('./src', import.meta.url))
- }
- }
+ plugins: [react()],
})