Squashed commit of the following:
commit 1e92328a0fc570fe9419ad5dbaaef77f7dc9ad2e
Author: Sense T <me@sense-t.eu.org>
Date: Mon Apr 15 21:52:44 2024 +0800
yes, react it!
commit 09fffff6139b4cecb81cb1444139f225e95e8917
Author: Sense T <me@sense-t.eu.org>
Date: Mon Apr 15 17:33:26 2024 +0800
actions to be done
commit 1611b0b338cfd965d15f43fb10308bc56015895f
Author: Sense T <me@sense-t.eu.org>
Date: Mon Apr 15 15:22:08 2024 +0800
modal needed.
commit 88453e7382618fb6774ff1cc4c0f7045d4dfcf46
Author: Sense T <me@sense-t.eu.org>
Date: Mon Apr 15 10:52:13 2024 +0800
Domain View done
commit 8cedca27c79ca2ba69c8777dfcb6019799875e31
Author: Sense T <me@sense-t.eu.org>
Date: Sun Apr 14 21:24:14 2024 +0800
domain delete modal done
commit 60cd00c0cad0774bae5b57bcfc4723a29d28d221
Author: Sense T <me@sense-t.eu.org>
Date: Sun Apr 14 07:55:11 2024 +0800
1
commit 285853e988db6e6a6371135869da0129fd73afd7
Author: Sense T <me@sense-t.eu.org>
Date: Sat Apr 13 17:29:43 2024 +0800
eslint
commit 8f0ffbf744fd85a612daacd7bd6cbc45d58907d3
Author: Sense T <me@sense-t.eu.org>
Date: Sat Apr 13 17:20:50 2024 +0800
f
commit 9762b632225f185d83388e58d93ed49f62fe6b3f
Author: Sense T <me@sense-t.eu.org>
Date: Sat Apr 13 17:08:37 2024 +0800
views, components to be done
commit 321e5255f2b1e705844179dd910d5f5a1ae58298
Author: Sense T <me@sense-t.eu.org>
Date: Sat Apr 13 14:29:04 2024 +0800
prepare for react
This commit is contained in:
Sense T
parent
3305d8d618
commit
b583720223
12
web/.eslintrc
Normal file
12
web/.eslintrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"root": true,
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"plugins": [
|
||||
"@typescript-eslint"
|
||||
],
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/eslint-recommended",
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
]
|
||||
}
|
||||
@ -1,33 +1,30 @@
|
||||
# reCoreD-UI
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
## Recommended IDE Setup
|
||||
Currently, two official plugins are available:
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
## Customize configuration
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```js
|
||||
export default {
|
||||
// other rules...
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
|
||||
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
4280
web/package-lock.json
generated
4280
web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,34 +1,36 @@
|
||||
{
|
||||
"name": "recored-ui",
|
||||
"version": "0.0.0",
|
||||
"name": "web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "NODE_ENV=dev vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force"
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.3.6",
|
||||
"antd": "^5.16.1",
|
||||
"axios": "^1.6.8",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.21",
|
||||
"vue-i18n": "^9.11.0",
|
||||
"vue-router": "^4.3.0"
|
||||
"i18next": "^23.11.1",
|
||||
"i18next-browser-languagedetector": "^7.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^14.1.0",
|
||||
"react-redux": "^9.1.0",
|
||||
"react-router-dom": "^6.22.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node20": "^20.1.2",
|
||||
"@types/node": "^20.11.28",
|
||||
"@vicons/fa": "^0.12.0",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"naive-ui": "^2.38.1",
|
||||
"npm-run-all2": "^6.1.2",
|
||||
"typescript": "~5.4.0",
|
||||
"vfonts": "^0.0.3",
|
||||
"vite": "^5.1.6",
|
||||
"vue-tsc": "^2.0.6"
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@typescript-eslint/eslint-plugin": "^7.6.0",
|
||||
"@typescript-eslint/parser": "^7.6.0",
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
42
web/src/App.css
Normal file
42
web/src/App.css
Normal file
@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@ -1,32 +1,34 @@
|
||||
import {
|
||||
NNotificationProvider,
|
||||
NConfigProvider,
|
||||
NGlobalStyle,
|
||||
useOsTheme,
|
||||
darkTheme,
|
||||
lightTheme,
|
||||
} from "naive-ui";
|
||||
import { RouterProvider } from 'react-router-dom'
|
||||
import router from './router'
|
||||
import { App, ConfigProvider, Spin, theme } from 'antd'
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import enUS from 'antd/locale/en_US'
|
||||
|
||||
import { zhCN, dateZhCN, enUS, dateEnUS } from 'naive-ui'
|
||||
import { RouterView } from "vue-router";
|
||||
import './App.css'
|
||||
import isBrowserDarkTheme from './isBrowserDarkTheme'
|
||||
import i18n from './locale'
|
||||
|
||||
const osThemeRef = useOsTheme()
|
||||
const theme = osThemeRef.value === 'dark' ? darkTheme : lightTheme
|
||||
const locale = navigator.language === "zh-CN" ? zhCN : enUS
|
||||
const dateLocale = navigator.language === "zh-CN" ? dateZhCN : dateEnUS
|
||||
|
||||
function App() {
|
||||
document.title = 'reCoreD-UI'
|
||||
return (
|
||||
<NConfigProvider theme={theme} locale={locale} date-locale={dateLocale}>
|
||||
<NGlobalStyle />
|
||||
<NNotificationProvider max={3}>
|
||||
<RouterView />
|
||||
</NNotificationProvider>
|
||||
</NConfigProvider>
|
||||
)
|
||||
function detectLanguage() {
|
||||
switch (i18n.language) {
|
||||
case 'zh-CN':
|
||||
case 'zh':
|
||||
return zhCN
|
||||
default:
|
||||
return enUS
|
||||
}
|
||||
}
|
||||
|
||||
App.displayName = 'App'
|
||||
function ReactApp() {
|
||||
document.title = 'reCoreD-UI'
|
||||
const themeUsed = isBrowserDarkTheme() ? theme.darkAlgorithm : theme.defaultAlgorithm
|
||||
|
||||
export default App
|
||||
return (
|
||||
<ConfigProvider theme={{ algorithm: themeUsed }} locale={detectLanguage()}>
|
||||
<App>
|
||||
<RouterProvider router={router} fallbackElement={<Spin size='large' />} />
|
||||
</App>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReactApp
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse, type InternalAxiosRequestConfig } from "axios";
|
||||
import { type Record } from '@/stores/records';
|
||||
import { type Domain } from "@/stores/domains";
|
||||
|
||||
import i18n from "@/locale/i18n";
|
||||
import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from "axios"
|
||||
import { type Record } from '../stores/records'
|
||||
import { type Domain } from "../stores/domains"
|
||||
import i18n from "../locale"
|
||||
|
||||
type Result<T> = {
|
||||
success: boolean
|
||||
@ -10,45 +9,52 @@ type Result<T> = {
|
||||
data: T
|
||||
}
|
||||
|
||||
const t = i18n.t
|
||||
// 5 second.
|
||||
const notificationDuration = 5000
|
||||
const messages = new Map<number, {
|
||||
title: string, content: string, duration: number
|
||||
message: string, description: string, duration: number
|
||||
}>(
|
||||
[
|
||||
[400, {
|
||||
title: i18n.global.t("api.error400.title"),
|
||||
content: i18n.global.t("api.error400.content"),
|
||||
message: t("api.error400.title"),
|
||||
description: t("api.error400.content"),
|
||||
duration: notificationDuration
|
||||
}],
|
||||
[401, {
|
||||
title: i18n.global.t("api.error401.title"),
|
||||
content: i18n.global.t("api.error401.content"),
|
||||
message: t("api.error401.title"),
|
||||
description: t("api.error401.content"),
|
||||
duration: notificationDuration
|
||||
}],
|
||||
[403, {
|
||||
title: i18n.global.t("api.error403.title"),
|
||||
content: i18n.global.t("api.error403.content"),
|
||||
message: t("api.error403.title"),
|
||||
description: t("api.error403.content"),
|
||||
duration: notificationDuration
|
||||
}],
|
||||
[404, {
|
||||
title: i18n.global.t("api.error404.title"),
|
||||
content: i18n.global.t("api.error404.content"),
|
||||
message: t("api.error404.title"),
|
||||
description: t("api.error404.content"),
|
||||
duration: notificationDuration
|
||||
}],
|
||||
[500, {
|
||||
title: i18n.global.t("api.error500.title"),
|
||||
content: i18n.global.t("api.error500.content"),
|
||||
message: t("api.error500.title"),
|
||||
description: t("api.error500.content"),
|
||||
duration: notificationDuration
|
||||
}]
|
||||
]
|
||||
)
|
||||
|
||||
export function getErrorInfo(err: any) {
|
||||
export interface ResponseError {
|
||||
response: {
|
||||
status: number
|
||||
}
|
||||
}
|
||||
|
||||
export function getErrorInfo(err: ResponseError) {
|
||||
const msg = messages.get(err.response.status)
|
||||
return msg? msg: {
|
||||
title: i18n.global.t("api.errorUnknown.title"),
|
||||
content: i18n.global.t("api.errorUnknown.content"),
|
||||
return msg ? msg : {
|
||||
message: t("api.errorUnknown.title"),
|
||||
description: t("api.errorUnknown.content"),
|
||||
duration: notificationDuration
|
||||
}
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
padding: 2rem 2rem;
|
||||
}
|
||||
}
|
||||
32
web/src/components/domains/DomainCard.tsx
Normal file
32
web/src/components/domains/DomainCard.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { Card, Tooltip } from "antd"
|
||||
import { Domain } from "../../stores/domains"
|
||||
import { BookOutlined, DeleteOutlined, EditOutlined } from "@ant-design/icons"
|
||||
import DomainInfo from "./DomainInfo"
|
||||
import i18n from '../../locale'
|
||||
const { t } = i18n
|
||||
|
||||
type DomainCardProps = {
|
||||
domain: Domain
|
||||
onRecordClick(): void
|
||||
onEditClick(): void
|
||||
onDeleteClick(): void
|
||||
}
|
||||
|
||||
export default function DomainCard({ domain, onRecordClick, onEditClick, onDeleteClick }: DomainCardProps) {
|
||||
return (
|
||||
<Card className='domain-info' title={domain.domain_name} actions={[
|
||||
<Tooltip title={t('domains.dnsRecord')}>
|
||||
<BookOutlined key='records' className='icon' onClick={onRecordClick} />
|
||||
</Tooltip>,
|
||||
<Tooltip title={t('common.edit')} >
|
||||
<EditOutlined key='edit' className='icon' onClick={onEditClick} />
|
||||
</Tooltip>,
|
||||
<Tooltip title={t('common.delete')}>
|
||||
<DeleteOutlined key='delete' className='icon' onClick={onDeleteClick} />
|
||||
</Tooltip>
|
||||
]} key={domain.id}>
|
||||
<DomainInfo domain={domain} />
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
59
web/src/components/domains/DomainDeleteModal.tsx
Normal file
59
web/src/components/domains/DomainDeleteModal.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { App, Input, Modal } from "antd"
|
||||
import { Domain } from "../../stores/domains"
|
||||
import { useState } from "react"
|
||||
import i18n from '../../locale'
|
||||
import { CloseOutlined, DeleteOutlined } from "@ant-design/icons"
|
||||
import { ResponseError, getErrorInfo } from "../../api"
|
||||
const { t } = i18n
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
domain: Domain
|
||||
removeDomain(domain: Domain): Promise<void>
|
||||
onOk(): void
|
||||
onCancel(): void
|
||||
}
|
||||
|
||||
export default function DomainDeleteModal({ open, domain, removeDomain, onOk, onCancel }: Props) {
|
||||
const [input, setInput] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { notification } = App.useApp()
|
||||
|
||||
function confirm() {
|
||||
setLoading(true)
|
||||
removeDomain(domain).then(onOk).finally(() => setLoading(false)).catch(e => {
|
||||
const msg = getErrorInfo(e as ResponseError)
|
||||
notification.error(msg)
|
||||
console.error(e)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal onOk={confirm} onCancel={onCancel}
|
||||
title={`${t('domains.delete')} - ${domain.domain_name}`}
|
||||
confirmLoading={loading}
|
||||
okButtonProps={{
|
||||
disabled: input !== domain.domain_name,
|
||||
icon: <DeleteOutlined />,
|
||||
danger: true
|
||||
}}
|
||||
cancelButtonProps={{
|
||||
icon: <CloseOutlined />
|
||||
}}
|
||||
open={open}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
|
||||
centered
|
||||
destroyOnClose
|
||||
>
|
||||
<p>{t('common.deleteConfirm')}</p>
|
||||
<p>{t('domains.deleteHint')}</p>
|
||||
<p>{t('domains.confirm1')} <b id="boldit">{domain.domain_name}</b> {t('domains.confirm2')}</p>
|
||||
<p />
|
||||
<p>
|
||||
<Input placeholder={domain.domain_name} onChange={e => setInput(e.target.value)} />
|
||||
</p>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -1,220 +1,131 @@
|
||||
import {
|
||||
NModal,
|
||||
NCard,
|
||||
NForm,
|
||||
NFormItem,
|
||||
NFlex,
|
||||
NIcon,
|
||||
NButton,
|
||||
NInput,
|
||||
NInputNumber,
|
||||
type FormRules,
|
||||
type FormItemRule,
|
||||
createDiscreteApi
|
||||
} from 'naive-ui'
|
||||
import { getErrorInfo } from '@/apis/api';
|
||||
import { useDomainStore, type Domain } from '@/stores/domains';
|
||||
import { Check, Times } from '@vicons/fa';
|
||||
import i18n from '@/locale/i18n'
|
||||
import { ref, type SetupContext } from 'vue';
|
||||
|
||||
const { t } = i18n.global
|
||||
const domainStore = useDomainStore()
|
||||
const { notification } = createDiscreteApi(['notification'])
|
||||
const enum validFlags {
|
||||
domainNameValid = 1,
|
||||
mainNsValid = domainNameValid << 1,
|
||||
adminEmailValid = mainNsValid << 1
|
||||
}
|
||||
const allFlags = validFlags.adminEmailValid | validFlags.mainNsValid | validFlags.domainNameValid
|
||||
const rules = {
|
||||
domain_name: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: (_rule: FormItemRule, value: string) => {
|
||||
return validate(
|
||||
value,
|
||||
/^([\w-]+\.)+[\w-]+$/,
|
||||
'domains.errors.domainName',
|
||||
validFlags.domainNameValid
|
||||
)
|
||||
}
|
||||
}],
|
||||
main_dns: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: (_rule: FormItemRule, value: string) => {
|
||||
return validate(
|
||||
value,
|
||||
/^([\w-]+\.)+[\w-]+$/,
|
||||
'domains.errors.domainName',
|
||||
validFlags.mainNsValid,
|
||||
)
|
||||
}
|
||||
}],
|
||||
admin_email: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: (_rule: FormItemRule, value: string) => {
|
||||
return validate(
|
||||
value,
|
||||
/^[\w-.]+@([\w-]+\.)+[\w-]+$/,
|
||||
'domains.errors.mail',
|
||||
validFlags.adminEmailValid
|
||||
)
|
||||
}
|
||||
}],
|
||||
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'
|
||||
}]
|
||||
} as FormRules
|
||||
|
||||
import { App, Form, FormInstance, Input, InputNumber, Modal, Space } from "antd"
|
||||
import { Domain } from "../../stores/domains"
|
||||
import i18n from '../../locale'
|
||||
import { useEffect, useState } from "react"
|
||||
import { CheckOutlined, CloseOutlined } from "@ant-design/icons"
|
||||
import { ResponseError, getErrorInfo } from "../../api"
|
||||
const { t } = i18n
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
domain: Domain
|
||||
show: boolean
|
||||
'onUpdate:show': (v: boolean) => void
|
||||
editDomain(domain: Domain): Promise<void>
|
||||
createDomain(domain: Domain): Promise<void>
|
||||
onCancel(): void
|
||||
onOk(): void
|
||||
}
|
||||
|
||||
type Events = {
|
||||
'update:show': (v: boolean) => void
|
||||
'update:value': (v: string | number | null) => void
|
||||
}
|
||||
export default function DomainEditModal({ open, domain, editDomain, createDomain, onCancel, onOk }: Props) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [form] = Form.useForm<Domain>()
|
||||
const { notification } = App.useApp()
|
||||
|
||||
const loading = ref(false)
|
||||
const invalidData = ref(0)
|
||||
useEffect(() => {
|
||||
form.setFieldsValue(domain)
|
||||
}, [open])
|
||||
|
||||
function validate(value: string, reg: RegExp, msg: string, flag: validFlags): Promise<void> {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
invalidData.value &= ~flag
|
||||
reject(Error(t('common.mandatory')))
|
||||
} else if (!reg.test(value)) {
|
||||
invalidData.value &= ~flag
|
||||
reject(Error(t(msg)))
|
||||
} else {
|
||||
invalidData.value |= flag
|
||||
resolve()
|
||||
async function confirm() {
|
||||
const commitFunction = (!domain.id || domain.id < 1) ? createDomain : editDomain
|
||||
setLoading(true)
|
||||
try {
|
||||
domain = await form.validateFields()
|
||||
await commitFunction(domain)
|
||||
onOk()
|
||||
} catch (error) {
|
||||
const msg = getErrorInfo(error as ResponseError)
|
||||
notification.error(msg)
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function confirm(domain: Domain) {
|
||||
loading.value = true;
|
||||
try {
|
||||
if (!domain.id || domain.id < 1) {
|
||||
await domainStore.addDomain(domain)
|
||||
} else {
|
||||
await domainStore.updateDomain(domain)
|
||||
}
|
||||
} catch (e) {
|
||||
const msg = getErrorInfo(e)
|
||||
notification.error(msg)
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function easyInput(domain_name: string, domain: Domain) {
|
||||
domain.admin_email = `admin@${domain_name}`
|
||||
domain.main_dns = `ns1.${domain_name}`
|
||||
}
|
||||
function easyInput(form: FormInstance<Domain>, domain_name: string) {
|
||||
form.setFieldValue('admin_email', `admin@${domain_name}`)
|
||||
form.setFieldValue('main_dns', `ns1.${domain_name}`)
|
||||
}
|
||||
|
||||
function modalHeader({ domain }: Props) {
|
||||
return (
|
||||
<>
|
||||
{(!domain || !domain.id || domain.id < 1) ? <span>{t('common.new')}</span> : <span>{t('common.edit')}</span>}
|
||||
<span>{t('domains._')}</span>
|
||||
</>
|
||||
<Modal
|
||||
onCancel={onCancel} onOk={confirm}
|
||||
title={
|
||||
<span>
|
||||
{
|
||||
(!domain || !domain.id || domain.id < 1) ? t('common.new') : t('common.edit')
|
||||
}
|
||||
{
|
||||
t('domains._')
|
||||
}
|
||||
</span>
|
||||
}
|
||||
confirmLoading={loading}
|
||||
cancelButtonProps={{
|
||||
icon: <CloseOutlined />,
|
||||
}}
|
||||
okButtonProps={{
|
||||
icon: <CheckOutlined />,
|
||||
htmlType: 'submit'
|
||||
}}
|
||||
|
||||
open={open}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
|
||||
centered
|
||||
destroyOnClose
|
||||
forceRender
|
||||
>
|
||||
<Form<Domain> name="domain" form={form}
|
||||
scrollToFirstError
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item<Domain>
|
||||
label={t('domains._')}
|
||||
name='domain_name'
|
||||
rules={[
|
||||
{ required: true, message: t('common.mandatory') },
|
||||
{ pattern: /^([\w-]+\.)+[\w-]+$/, message: t('domains.errors.domainName') },
|
||||
]}
|
||||
>
|
||||
<Input placeholder='example.com' onChange={v => easyInput(form, v.target.value)} />
|
||||
</Form.Item>
|
||||
<Form.Item<Domain>
|
||||
label={t('domains.form.mainDNS')}
|
||||
name='main_dns'
|
||||
rules={[
|
||||
{ required: true, message: t('common.mandatory') },
|
||||
{ pattern: /^([\w-]+\.)+[\w-]+$/, message: t('domains.errors.domainName') },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="ns1.example.com" />
|
||||
</Form.Item>
|
||||
<Form.Item<Domain>
|
||||
label={t('domains.form.adminMail')}
|
||||
name='admin_email'
|
||||
rules={[
|
||||
{ required: true, message: t('common.mandatory') },
|
||||
{ pattern: /^[\w-.]+@([\w-]+\.)+[\w-]+$/, message: t('domains.errors.mail') }
|
||||
]}
|
||||
>
|
||||
<Input placeholder="admin@example.com" />
|
||||
</Form.Item>
|
||||
<Space>
|
||||
<Form.Item<Domain> name='refresh_interval' label={t('records.refresh')}>
|
||||
<InputNumber controls={false} addonAfter={t('common.unitForSecond')} />
|
||||
</Form.Item>
|
||||
<Form.Item<Domain> name='retry_interval' label={t('records.retry')}>
|
||||
<InputNumber controls={false} addonAfter={t('common.unitForSecond')} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<Space>
|
||||
<Form.Item<Domain> name='expiry_period' label={t('records.expire')}>
|
||||
<InputNumber controls={false} addonAfter={t('common.unitForSecond')} />
|
||||
</Form.Item>
|
||||
<Form.Item<Domain> name='negative_ttl' label={t('records.ttl')}>
|
||||
<InputNumber controls={false} addonAfter={t('common.unitForSecond')} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
function modalInputNumbers({ value, label, path }: { value: number, label: string, path: string }, { emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<NFormItem label={t(label)} path={path}>
|
||||
<NInputNumber value={value} onUpdate:value={v => emit('update:value', v)} showButton={false}>
|
||||
{{
|
||||
suffix: () => t('common.unitForSecond')
|
||||
}}
|
||||
</NInputNumber>
|
||||
</NFormItem>
|
||||
)
|
||||
}
|
||||
|
||||
function modalBody({ domain }: Props) {
|
||||
return (
|
||||
<>
|
||||
<NForm model={domain} rules={rules}>
|
||||
<NFormItem label={t('domains._')} path='domain_name'>
|
||||
<NInput placeholder='example.com' value={domain.domain_name} onUpdate:value={v => domain.domain_name = v} onInput={v => easyInput(v, domain)} />
|
||||
</NFormItem>
|
||||
<NFormItem label={t('domains.form.mainDNS')} path='main_dns'>
|
||||
<NInput placeholder="ns1.example.com" value={domain.main_dns} onUpdate:value={v => domain.main_dns = v} />
|
||||
</NFormItem>
|
||||
<NFormItem label={t('domains.form.adminMail')} path='admin_email'>
|
||||
<NInput placeholder="admin@example.com" value={domain.admin_email} onUpdate:value={v => domain.admin_email = v} inputProps={{ type: 'email' }} />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<NForm model={domain} rules={rules} inline>
|
||||
<modalInputNumbers value={domain.refresh_interval} onUpdate:value={(v: number) => domain.refresh_interval = v} path='refresh_interval' label='records.refresh' />
|
||||
<modalInputNumbers value={domain.retry_interval} onUpdate:value={(v: number) => domain.retry_interval = v} path='retry_interval' label='records.retry' />
|
||||
<modalInputNumbers value={domain.expiry_period} onUpdate:value={(v: number) => domain.expiry_period = v} path='expiry_period' label='records.expire' />
|
||||
<modalInputNumbers value={domain.negative_ttl} onUpdate:value={(v: number) => domain.negative_ttl = v} path='negative_ttl' label='records.ttl' />
|
||||
</NForm>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function modalActions({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<NFlex justify='end'>
|
||||
<NButton size='small' onClick={() => emit("update:show", false)} >
|
||||
{{
|
||||
default: () => t('common.cancel'),
|
||||
icon: () => <NIcon><Times /></NIcon>
|
||||
}}
|
||||
</NButton>
|
||||
|
||||
<NButton size='small' type='primary' disabled={invalidData.value !== allFlags} loading={loading.value} onClick={() => confirm(domain).then(() => emit('update:show', false))} attrType='submit'>
|
||||
{{
|
||||
default: () => t('common.confirm'),
|
||||
icon: () => <NIcon><Check /></NIcon>
|
||||
}}
|
||||
</NButton>
|
||||
</NFlex>
|
||||
)
|
||||
}
|
||||
|
||||
function DomainEditModal({ domain, show, }: Props, { emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<NModal maskClosable={false} show={show}>
|
||||
<NCard style={{ width: '640px' }} role='dialog'>
|
||||
{{
|
||||
headler: () => <modalHeader domain={domain} />,
|
||||
default: () => <modalBody domain={domain} />,
|
||||
action: () => <modalActions domain={domain} onUpdate:show={(v: boolean) => { emit("update:show", v) }} />
|
||||
}}
|
||||
</NCard>
|
||||
</NModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default DomainEditModal
|
||||
}
|
||||
@ -1,11 +1,7 @@
|
||||
div {
|
||||
display: block;
|
||||
.icon-info {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
span {
|
||||
span.info {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@ -1,27 +1,22 @@
|
||||
import { GlobalOutlined, MailOutlined } from "@ant-design/icons"
|
||||
import { Domain } from "../../stores/domains"
|
||||
import './DomainInfo.css'
|
||||
|
||||
import { type Domain } from "../../stores/domains";
|
||||
import { NIcon } from "naive-ui";
|
||||
import { AddressCard, Server } from "@vicons/fa";
|
||||
import { defineComponent, defineProps } from "vue";
|
||||
|
||||
type Props = {
|
||||
domain: Domain
|
||||
}
|
||||
|
||||
function DomainInfo({domain}: Props) {
|
||||
export default function DomainInfo({ domain }: Props) {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<p>
|
||||
<NIcon class="icon" component={AddressCard} />
|
||||
<span> {domain.admin_email}</span>
|
||||
<MailOutlined className="icon-info" />
|
||||
<span className="info">{domain.admin_email}</span>
|
||||
</p>
|
||||
<p>
|
||||
<NIcon class="icon" component={Server} />
|
||||
<span> {domain.main_dns}</span>
|
||||
<GlobalOutlined className="icon-info" />
|
||||
<span className="info">{domain.domain_name}</span>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DomainInfo
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
import { NSpace, NButton, NIcon, NTooltip, NFlex } from 'naive-ui'
|
||||
import { TrashAlt, EditRegular, Book } from '@vicons/fa'
|
||||
import { type Domain } from "../../stores/domains"
|
||||
import router from '@/router';
|
||||
import i18n from '@/locale/i18n'
|
||||
import type { SetupContext } from 'vue';
|
||||
const { t } = i18n.global
|
||||
|
||||
type Props = {
|
||||
domain: Domain
|
||||
onRemoveDomain: (d: Domain) => void
|
||||
onEditDomain: (d: Domain) => void
|
||||
}
|
||||
|
||||
type Events = {
|
||||
removeDomain(domain: Domain): void
|
||||
editDomain(domain: Domain): void
|
||||
}
|
||||
|
||||
function loadRecord({ domain }: Props) {
|
||||
return (
|
||||
<NTooltip trigger="hover">
|
||||
{{
|
||||
trigger: () =>
|
||||
<NButton size="tiny" type="primary" onClick={() => { router.push(`/records/${domain.domain_name}`) }}>
|
||||
{{ icon: () => <NIcon component={Book} /> }}
|
||||
</NButton>,
|
||||
default: () => t('domains.dnsRecord')
|
||||
}}
|
||||
</NTooltip>
|
||||
)
|
||||
}
|
||||
|
||||
function editDomain({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<NTooltip trigger="hover">
|
||||
{{
|
||||
default: () => t('common.edit'),
|
||||
trigger: () =>
|
||||
<NButton size="tiny" onClick={() => emit("editDomain", domain)}>
|
||||
{{
|
||||
icon: () =>
|
||||
<NIcon component={EditRegular} />
|
||||
}}
|
||||
</NButton>
|
||||
}}
|
||||
|
||||
</NTooltip>
|
||||
)
|
||||
}
|
||||
|
||||
function deleteDomain({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<NTooltip trigger="hover">
|
||||
{{
|
||||
default: () => t('common.delete'),
|
||||
trigger: () =>
|
||||
<NButton type="error" size="tiny" onClick={() => emit("removeDomain", domain)}>
|
||||
{{
|
||||
icon: () =>
|
||||
<NIcon component={TrashAlt} />
|
||||
}}
|
||||
</NButton>
|
||||
}}
|
||||
</NTooltip>
|
||||
)
|
||||
}
|
||||
|
||||
function DomainOps({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<div>
|
||||
<NFlex justify='end'>
|
||||
<loadRecord domain={domain} />
|
||||
<editDomain domain={domain} onEditDomain={(d: Domain) => emit("editDomain", d)} />
|
||||
<deleteDomain domain={domain} onRemoveDomain={(d: Domain) => emit("removeDomain", d)} />
|
||||
</NFlex>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
DomainOps.props = {
|
||||
domain: {
|
||||
required: true
|
||||
}
|
||||
}
|
||||
|
||||
DomainOps.emits = {
|
||||
removeDomain: (d: Domain) => d,
|
||||
editDomain: (d: Domain) => d
|
||||
} as Events
|
||||
|
||||
export default DomainOps
|
||||
@ -1,7 +0,0 @@
|
||||
.icon-down {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
b#boldit {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -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 (
|
||||
<>
|
||||
<p>{t('common.deleteConfirm')}</p>
|
||||
<p>{t('domains.deleteHint')}</p>
|
||||
<p>{t('domains.confirm1')} <b id="boldit">{domain.domain_name}</b> {t('domains.confirm2')}</p>
|
||||
<br />
|
||||
<p>
|
||||
<NInput onUpdate:value={(v) => domain_name.value = v} placeholder={domain.domain_name} />
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function modalActions({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||
return <>
|
||||
<NFlex justify='end'>
|
||||
<NButton size='small' onClick={() => { emit('update:show', false) }}>
|
||||
{{
|
||||
icon: () => <NIcon><Times /></NIcon>,
|
||||
default: () => t('common.cancel')
|
||||
}}
|
||||
</NButton>
|
||||
|
||||
<NButton size='small' type='error' disabled={domain_name.value !== domain.domain_name} attrType='submit' loading={loading.value} onClick={() => confirm(domain).then(() => emit('update:show', false))}>
|
||||
{{
|
||||
icon: () => <NIcon><TrashAlt /></NIcon>,
|
||||
default: () => t('common.confirm')
|
||||
}}
|
||||
</NButton>
|
||||
</NFlex>
|
||||
</>
|
||||
}
|
||||
|
||||
function DomainRemoveModal({ domain, show }: Props, { emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<NModal maskClosable={false} show={show}>
|
||||
<NCard role='dialog' style={{ width: '600px' }}>
|
||||
{{
|
||||
header: () => <><NIcon class="icon-down" color='red' />{t('domains.delete')} - {domain.domain_name}</>,
|
||||
default: () => <modalBody domain={domain} />,
|
||||
action: () => <modalActions domain={domain} onUpdate:show={(v: boolean) => emit('update:show', v)} />
|
||||
}}
|
||||
</NCard>
|
||||
</NModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default DomainRemoveModal
|
||||
@ -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<void>
|
||||
createRecord(record: Record): Promise<void>
|
||||
}
|
||||
|
||||
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<Record>()
|
||||
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<RecordTypes, (f: FormInstance<Record>) => JSX.Element>([
|
||||
[
|
||||
RecordTypes.RecordTypeA, (
|
||||
({ getFieldValue }) =>
|
||||
<Form.Item<Record<ARecord>> label='IP' name={['content', 'ip']} required rules={[{
|
||||
validator() {
|
||||
|
||||
const result = ARecord.validate(getFieldValue('content') as ARecord)
|
||||
return (result === true) ? Promise.resolve() : Promise.reject(result)
|
||||
}
|
||||
}]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)
|
||||
],
|
||||
[
|
||||
RecordTypes.RecordTypeAAAA, (
|
||||
({ getFieldValue }) =>
|
||||
<Form.Item<Record<AAAARecord>> label='IP' name={['content', 'ip']} required rules={[{
|
||||
validator() {
|
||||
const result = AAAARecord.validate(getFieldValue('content') as AAAARecord)
|
||||
return (result === true) ? Promise.resolve() : Promise.reject(result)
|
||||
}
|
||||
}]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)
|
||||
],
|
||||
[
|
||||
RecordTypes.RecordTypeCNAME, (
|
||||
({ getFieldValue }) =>
|
||||
<Form.Item<Record<CNAMERecord>> 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)
|
||||
}
|
||||
}]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)
|
||||
],
|
||||
[
|
||||
RecordTypes.RecordTypeNS, (
|
||||
({ getFieldValue }) =>
|
||||
<Form.Item<Record<NSRecord>> 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)
|
||||
}
|
||||
}]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)
|
||||
],
|
||||
[
|
||||
RecordTypes.RecordTypeTXT, (
|
||||
({ getFieldValue }) =>
|
||||
<Form.Item<Record<TXTRecord>> 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)
|
||||
}
|
||||
}]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)
|
||||
],
|
||||
[
|
||||
RecordTypes.RecordTypeMX, (
|
||||
({ getFieldValue }) =>
|
||||
<>
|
||||
<Form.Item<Record<MXRecord>> 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)
|
||||
}
|
||||
}]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item<Record<MXRecord>> label={t('records.form.preference')} name={['content', 'preference']} required>
|
||||
<InputNumber controls={false} />
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
],
|
||||
[
|
||||
RecordTypes.RecordTypeCAA, (
|
||||
({ getFieldValue }) =>
|
||||
<>
|
||||
<Form.Item<Record<CAARecord>> label={t('records.form.flag')} name={['content', 'flag']} required>
|
||||
<InputNumber controls={false} />
|
||||
</Form.Item>
|
||||
<Form.Item<Record<CAARecord>> 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)
|
||||
}
|
||||
}]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item<Record<CAARecord>> label={t('records.form.value')} name={['content', 'value']} required rules={[
|
||||
{ required: true, message: t('common.mandatory') }
|
||||
]} >
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
],
|
||||
[
|
||||
RecordTypes.RecordTypeSRV, (
|
||||
({ getFieldValue }) =>
|
||||
<>
|
||||
<Form.Item<Record<SRVRecord>> label={t('records.form.priority')} name={['content', 'priority']} required>
|
||||
<InputNumber controls={false} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<Record<SRVRecord>> label={t('records.form.weight')} name={['content', 'weight']} required>
|
||||
<InputNumber controls={false} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<Record<SRVRecord>> label={t('records.form.port')} name={['content', 'port']} required>
|
||||
<InputNumber controls={false} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<Record<SRVRecord>> 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)
|
||||
}
|
||||
}]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
]
|
||||
])
|
||||
|
||||
function modalHeader({ record }: Props) {
|
||||
return (
|
||||
<>
|
||||
{(!record || !record.id || record.id < 1) ? <span>{t('common.new')}</span> : <span> {t('common.edit')}</span>}
|
||||
<span>{t('records._')}</span>
|
||||
</>
|
||||
<Modal
|
||||
onCancel={onCancel} onOk={confirm}
|
||||
title={
|
||||
<span>
|
||||
{
|
||||
(!record || !record.id || record.id < 1) ? t('common.new') : t('common.edit')
|
||||
}
|
||||
{
|
||||
t('records._')
|
||||
}
|
||||
</span>
|
||||
}
|
||||
confirmLoading={loading}
|
||||
cancelButtonProps={{
|
||||
icon: <CloseOutlined />,
|
||||
}}
|
||||
okButtonProps={{
|
||||
icon: <CheckOutlined />,
|
||||
htmlType: 'submit'
|
||||
}}
|
||||
|
||||
open={open}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
|
||||
centered
|
||||
destroyOnClose
|
||||
forceRender
|
||||
>
|
||||
<Form<Record> name='record' form={form}
|
||||
scrollToFirstError
|
||||
autoComplete='off'
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
validateTrigger='onBlur'
|
||||
>
|
||||
<Form.Item<Record> label={t('records.recordType')} required name='record_type'>
|
||||
<Select allowClear={false} options={recordTypeOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item<Record> label={t('records.name')} required name='name' rules={[
|
||||
{
|
||||
validator(_rule, value) {
|
||||
const result = Record.validateName(value)
|
||||
return (result === true) ? Promise.resolve() : Promise.reject(result)
|
||||
},
|
||||
}
|
||||
]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item<Record> label='TTL' required name='ttl'>
|
||||
<InputNumber controls={false} addonAfter={t('common.unitForSecond')} />
|
||||
</Form.Item>
|
||||
<Form.Item<Record> noStyle shouldUpdate={(p, c) => p.record_type !== c.record_type}>
|
||||
{
|
||||
({ getFieldValue }: FormInstance<Record>) => {
|
||||
const e = controls.get(getFieldValue('record_type'))
|
||||
if (!e) {
|
||||
return <></>
|
||||
}
|
||||
return e({ getFieldValue } as FormInstance<Record>)
|
||||
}
|
||||
}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
function modalActions({ record, domain }: Props, { emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<NFlex justify='end'>
|
||||
<NButton size='small' onClick={() => emit('update:show', false)}>
|
||||
{{
|
||||
icon: () => <NIcon component={Times} />,
|
||||
default: () => t('common.cancel')
|
||||
}}
|
||||
</NButton>
|
||||
|
||||
<NButton size='small' type='primary' loading={loading.value} attrType='submit'
|
||||
disabled={invalidData.value !== (validationFlags.content | validationFlags.name)}
|
||||
onClick={() => confirm(record, domain).then(() => { emit('reloadRecords'); emit('update:show', false) })}>
|
||||
{{
|
||||
icon: () => <NIcon component={Check} />,
|
||||
default: () => t('common.confirm')
|
||||
}}
|
||||
</NButton>
|
||||
</NFlex>
|
||||
)
|
||||
}
|
||||
|
||||
function modalBody({ record }: Props) {
|
||||
const rules = buildRules(record)
|
||||
return (
|
||||
<>
|
||||
<NForm model={record} rules={rules} inline>
|
||||
<NFormItem label={t('records.recordType')}>
|
||||
<NSelect value={record.record_type}
|
||||
onUpdate:value={(v) => { record.record_type = v; record.content = {} as RecordT }}
|
||||
options={recordTypeOptions} style={{ width: '8vw' }} />
|
||||
</NFormItem>
|
||||
<NFormItem label={t('records.name')} path='name'>
|
||||
<NInput value={record.name} onUpdate:value={v => record.name = v} />
|
||||
</NFormItem>
|
||||
<NFormItem label='TTL' path='ttl'>
|
||||
<NInputNumber value={record.ttl} onUpdate:value={v => v ? record.ttl = v : null} showButton={false} >
|
||||
{{
|
||||
suffix: () => t('common.unitForSecond')
|
||||
}}
|
||||
</NInputNumber>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<NForm model={record} rules={rules}>
|
||||
<modalBodyContent type={record.record_type} record={record} />
|
||||
</NForm>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const IPRecordE = ({ record }: Props) => (
|
||||
<NFormItem label={t('records.content')} path='ip'>
|
||||
<NInput value={(record.content as ARecord | AAAARecord).ip} onUpdate:value={v => (record.content as ARecord | AAAARecord).ip = v} placeholder='IP' />
|
||||
</NFormItem>
|
||||
)
|
||||
|
||||
const HostRecordE = ({ record }: Props) => (
|
||||
<NFormItem label={t('records.content')} path='host'>
|
||||
<NInput value={(record.content as CNAMERecord | NSRecord).host} onUpdate:value={v => (record.content as CNAMERecord | NSRecord).host = v} placeholder={t('records.form.host')} />
|
||||
</NFormItem>
|
||||
)
|
||||
|
||||
const TXTRecordE = ({ record }: Props) => (
|
||||
<NFormItem label={t('records.content')} path='txt'>
|
||||
<NInput value={(record.content as TXTRecord).text} onUpdateValue={v => (record.content as TXTRecord).text = v} placeholder={t('records.form.text')} />
|
||||
</NFormItem>
|
||||
)
|
||||
|
||||
const MXRecordE = ({ record }: Props) => (
|
||||
<NFormItem label={t('records.content')} path='mx'>
|
||||
<NInputGroup>
|
||||
<NInput placeholder={t('records.form.host')}
|
||||
value={(record.content as MXRecord).host}
|
||||
onUpdate:value={v => (record.content as MXRecord).host = v}
|
||||
style={{ width: '75%' }} />
|
||||
<NInputNumber placeholder={t('records.form.preference')}
|
||||
value={(record.content as MXRecord).preference}
|
||||
onUpdate:value={v => v ? (record.content as MXRecord).preference = v : null}
|
||||
style={{ width: '25%' }} show-button={false} />
|
||||
</NInputGroup>
|
||||
</NFormItem>
|
||||
)
|
||||
|
||||
const CAARecordE = ({ record }: Props) => (
|
||||
<NFormItem label={t('records.content')} path='caa'>
|
||||
<NInputGroup>
|
||||
<NInputNumber placeholder={t('records.form.flag')}
|
||||
value={(record.content as CAARecord).flag} style={{ width: '20%' }}
|
||||
onUpdate:value={v => v ? (record.content as CAARecord).flag = v : null}
|
||||
show-button={false} />
|
||||
<NInput placeholder={t('records.form.tag')}
|
||||
value={(record.content as CAARecord).tag}
|
||||
onUpdate:value={v => v ? (record.content as CAARecord).tag = v : null}
|
||||
style={{ width: '40%' }} />
|
||||
<NInput placeholder={t('records.form.value')}
|
||||
value={(record.content as CAARecord).value}
|
||||
onUpdate:value={v => v ? (record.content as CAARecord).value = v : null}
|
||||
style={{ width: '40%' }} />
|
||||
</NInputGroup>
|
||||
</NFormItem>
|
||||
)
|
||||
|
||||
const SRVRecordE = ({ record }: Props) => (
|
||||
<NFormItem label={t('records.content')} path='srv'>
|
||||
<NInputGroup>
|
||||
<NInputNumber placeholder={t('records.form.priority')}
|
||||
value={(record.content as SRVRecord).priority} style={{ width: '15%' }}
|
||||
onUpdateValue={v => v ? (record.content as SRVRecord).priority = v : null}
|
||||
show-button={false} />
|
||||
<NInputNumber placeholder={t('records.form.weight')}
|
||||
value={(record.content as SRVRecord).weight} style={{ width: '15%' }}
|
||||
onUpdate:value={v => v ? (record.content as SRVRecord).weight = v : null}
|
||||
show-button={false} />
|
||||
<NInputNumber placeholder={t('records.form.port')}
|
||||
value={(record.content as SRVRecord).port} style={{ width: '15%' }} min={0} max={65535}
|
||||
onUpdate:value={v => v ? (record.content as SRVRecord).port = v : null}
|
||||
show-button={false} />
|
||||
<NInput placeholder={t('records.form.target')}
|
||||
value={(record.content as SRVRecord).target} style={{ width: '55%' }}
|
||||
onUpdate:value={v => (record.content as SRVRecord).target = v}
|
||||
/>
|
||||
</NInputGroup>
|
||||
</NFormItem>
|
||||
)
|
||||
|
||||
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 <e record={record} />
|
||||
}
|
||||
|
||||
function RecordEditModal(
|
||||
{ domain, show, record }: Props,
|
||||
{ emit }: SetupContext<Events>) {
|
||||
return (
|
||||
<NModal maskClosable={false} show={show}>
|
||||
<NCard style={{ width: '640px' }} role='dialog'>
|
||||
{{
|
||||
header: () => <modalHeader record={record} />,
|
||||
default: () => <modalBody record={record} />,
|
||||
action: () => <modalActions record={record} domain={domain}
|
||||
onUpdate:show={(v: boolean) => emit('update:show', v)}
|
||||
onReloadRecords={() => emit('reloadRecords')} />
|
||||
}}
|
||||
</NCard>
|
||||
</NModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default RecordEditModal
|
||||
}
|
||||
@ -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<Events>) {
|
||||
export default function RecordOps({ onEdit, onDelete }: Props) {
|
||||
return (
|
||||
<NFlex justify='end'>
|
||||
<NButtonGroup>
|
||||
<NTooltip>
|
||||
{{
|
||||
trigger: () => <NButton size='tiny' onClick={() => emit('editRecord', domain, record)}>
|
||||
{{
|
||||
icon: () => <NIcon component={EditRegular} />
|
||||
}}
|
||||
</NButton>,
|
||||
default: () => t("common.edit")
|
||||
}}
|
||||
</NTooltip>
|
||||
<NPopconfirm onPositiveClick={() => emit('recordDelete', domain, record)}>
|
||||
{{
|
||||
trigger: () => <NButton type='error' size='tiny'>
|
||||
{{
|
||||
icon: () => <NIcon component={TrashAlt} />
|
||||
}}
|
||||
</NButton>,
|
||||
default: () => t("common.deleteConfirm")
|
||||
}}
|
||||
</NPopconfirm>
|
||||
</NButtonGroup>
|
||||
</NFlex>
|
||||
)
|
||||
}
|
||||
<Flex justify="end" gap='small'>
|
||||
<Tooltip title={t("common.edit")}>
|
||||
<Button icon={<EditFilled />} size="small" onClick={onEdit}/>
|
||||
</Tooltip>
|
||||
|
||||
export default RecordOps
|
||||
<Popconfirm onConfirm={onDelete} title={t("common.deleteConfirm")}>
|
||||
<Tooltip title={t("common.delete")}>
|
||||
<Button danger type="primary" icon={<DeleteOutlined />} size="small" />
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
78
web/src/index.css
Normal file
78
web/src/index.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
18
web/src/isBrowserDarkTheme.ts
Normal file
18
web/src/isBrowserDarkTheme.ts
Normal file
@ -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;
|
||||
@ -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 "."',
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
24
web/src/locale/index.ts
Normal file
24
web/src/locale/index.ts
Normal file
@ -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
|
||||
@ -86,6 +86,7 @@ export default {
|
||||
hasSpace: '不能有空格',
|
||||
badIPv4: '不是有效的 IPv4 地址',
|
||||
badIPv6: '不是有效的 IPv6 地址',
|
||||
badEmail: '这里的邮箱不能有 @ 符号',
|
||||
badName: {
|
||||
dotAndMinus: '资源记录不能以 "."、"-" 开头或结尾',
|
||||
doubleDots: '资源记录不能有连续的 "."',
|
||||
@ -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')
|
||||
10
web/src/main.tsx
Normal file
10
web/src/main.tsx
Normal file
@ -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(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@ -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
|
||||
28
web/src/router/index.tsx
Normal file
28
web/src/router/index.tsx
Normal file
@ -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: <Suspense fallback={<Spin size='large' />}><DomainsView /></Suspense>
|
||||
},
|
||||
{
|
||||
path: '/records/:domain',
|
||||
id: 'records',
|
||||
loader: args => args.params,
|
||||
element: <Suspense fallback={<Spin size='large' />}><RecordsView /></Suspense>
|
||||
}
|
||||
])
|
||||
|
||||
export default router
|
||||
@ -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<Domain[]>([])
|
||||
const domainsGetter = computed(() => domains.value)
|
||||
export const useDomainStore = () => {
|
||||
const [domains, setDomains] = useState<Domain[]>([])
|
||||
|
||||
async function loadDomains() {
|
||||
// TODO: load from api
|
||||
domains.value = import.meta.env.DEV ?
|
||||
domainDevData :
|
||||
(await api.get<Domain[]>('/domains')).data.data
|
||||
setDomains(import.meta.env.DEV ? domainDevData : (await api.get<Domain[]>('/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 }
|
||||
}
|
||||
@ -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<T = RecordT> {
|
||||
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<string, Record[]>([
|
||||
[
|
||||
'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<Record[] | undefined>([])
|
||||
const recordsGetter = computed(() => records.value)
|
||||
export const useRecordStore = () => {
|
||||
const [records, setRecords] = useState<Record[]>([])
|
||||
|
||||
async function loadRecords(domain: string) {
|
||||
// TODO: load from api
|
||||
records.value = import.meta.env.DEV ?
|
||||
recordDevData.get(domain) :
|
||||
(await api.get<Record[]>(`/records/${domain}`)).data.data
|
||||
setRecords(import.meta.env.DEV ?
|
||||
recordDevData.get(domain)! :
|
||||
(await api.get<Record[]>(`/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 }
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
.n-card {
|
||||
.domain-info {
|
||||
width: 32vw;
|
||||
}
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -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 ? <NSpin size="large" /> :
|
||||
<NModalProvider>
|
||||
<NFlex vertical>
|
||||
loading ? <Spin size='large' /> :
|
||||
<>
|
||||
<Space direction="vertical" >
|
||||
{
|
||||
domainStore.domains.map((domain: Domain) => (
|
||||
<NCard title={domain.domain_name} key={domain.id} size='large' hoverable>
|
||||
{{
|
||||
default: () => <DomainInfo domain={domain} />,
|
||||
action: () => <DomainOps domain={domain} onRemoveDomain={showRemoveModal} onEditDomain={showEditModal} />
|
||||
}}
|
||||
|
||||
</NCard>
|
||||
domainStore.domains.map(e => (
|
||||
<DomainCard domain={e}
|
||||
onDeleteClick={() => openDeleteModal(e)}
|
||||
onRecordClick={() => go(`/records/${e.domain_name}`)}
|
||||
onEditClick={() => openEditModal(e)}
|
||||
key={e.id}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
<NCard hoverable>
|
||||
<NButton block quaternary size="large" onClick={addDomain}>
|
||||
{{
|
||||
icon: () => <NIcon component={PlusSquare} depth={5} />
|
||||
}}
|
||||
</NButton>
|
||||
</NCard>
|
||||
</NFlex>
|
||||
<DomainRemoveModal show={removeModalShow.value} domain={operationDomain.value} onUpdate:show={(v: boolean) => removeModalShow.value = v} />
|
||||
<DomainEditModal show={editModalShow.value} domain={operationDomain.value} onUpdate:show={(v: boolean) => editModalShow.value = v} />
|
||||
</NModalProvider>
|
||||
<Card>
|
||||
<Button icon={<PlusOutlined className='icon' />}
|
||||
block type="text" onClick={newDomain} />
|
||||
</Card>
|
||||
</Space>
|
||||
<DomainDeleteModal open={deleteModalShow}
|
||||
onCancel={closeDeleteModdal}
|
||||
onOk={closeDeleteModdal}
|
||||
domain={currentDomain}
|
||||
removeDomain={domainStore.removeDomain}
|
||||
/>
|
||||
<DomainEditModal open={editModalShow}
|
||||
onCancel={closeEditModal}
|
||||
onOk={closeEditModal}
|
||||
domain={currentDomain}
|
||||
editDomain={domainStore.updateDomain}
|
||||
createDomain={domainStore.addDomain}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
DomainsView.displayName = 'DomainsView'
|
||||
|
||||
export default DomainsView
|
||||
}
|
||||
@ -1,7 +1,38 @@
|
||||
div#records {
|
||||
position: absolute;
|
||||
.records-layout {
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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<RecordT> = {} as Record
|
||||
|
||||
const { t } = i18n.global
|
||||
export default function RecordsView() {
|
||||
const { domain } = useLoaderData() as Params<string>
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [searchText, setSearchText] = useState<string>('')
|
||||
const [editModalShow, setEditModalShow] = useState(false)
|
||||
const [currentRecord, setCurrentRecord] = useState<Record>(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<Record>({} as Record)
|
||||
const loading = ref(true);
|
||||
const records = ref<Record[] | undefined>([] as Record[]);
|
||||
const soa = ref<SOARecord>({} 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 <RecordOps record={row} domain={domain} onRecordDelete={deleteRecord} onEditRecord={showEditing} />
|
||||
}
|
||||
}
|
||||
] as DataTableColumns<Record>
|
||||
|
||||
const statRefresh = () => (
|
||||
<NGi>
|
||||
<NStatistic value={soa.value.refresh}>
|
||||
{{
|
||||
suffix: () => 's',
|
||||
label: () => (
|
||||
<>
|
||||
<NIcon component={RedoAlt} style={{ transform: 'translateY(2px)' }} />
|
||||
<span>{t('records.refresh')}</span>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
</NStatistic>
|
||||
</NGi>
|
||||
)
|
||||
|
||||
const statRetry = () => (
|
||||
<NGi>
|
||||
<NStatistic value={soa.value.retry}>
|
||||
{{
|
||||
suffix: () => 's',
|
||||
label: () => (
|
||||
<>
|
||||
<NIcon component={CheckCircle} style={{ transform: 'translateY(2px)' }} />
|
||||
<span>{t('records.retry')}</span>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
</NStatistic>
|
||||
</NGi>
|
||||
)
|
||||
|
||||
const statExpire = () => (
|
||||
<NGi>
|
||||
<NStatistic value={soa.value.expire}>
|
||||
{{
|
||||
suffix: () => 's',
|
||||
label: () => (
|
||||
<>
|
||||
<NIcon component={Clock} style={{ transform: 'translateY(2px)' }} />
|
||||
<span>{t('records.expire')}</span>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
</NStatistic>
|
||||
</NGi>
|
||||
)
|
||||
|
||||
const statTTL = () => (
|
||||
<NGi>
|
||||
<NStatistic value={soa.value.minttl}>
|
||||
{{
|
||||
suffix: () => 's',
|
||||
label: () => (
|
||||
<>
|
||||
<NIcon component={Cogs} style={{ transform: 'translateY(2px)' }} />
|
||||
<span>{t('records.ttl')}</span>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
</NStatistic>
|
||||
</NGi>
|
||||
)
|
||||
|
||||
function recordsViewBodyHeaderExtra() {
|
||||
return (
|
||||
<NGrid cols={4} >
|
||||
<statRefresh />
|
||||
<statRetry />
|
||||
<statExpire />
|
||||
<statTTL />
|
||||
</NGrid>
|
||||
)
|
||||
}
|
||||
|
||||
function recordsViewBody({ domain }: Props) {
|
||||
const columns = generateColumns(domain)
|
||||
return (
|
||||
<NModalProvider>
|
||||
<NPageHeader title={t('domains.dnsRecord')} subtitle={domain} onBack={goBack}>
|
||||
{{
|
||||
extra: () => (
|
||||
<NFlex wrap={false} justify="end" inline>
|
||||
<NButton type="primary" onClick={() => newRecord(domain)}>
|
||||
{{
|
||||
icon: () => <NIcon component={PlusSquare} />,
|
||||
default: () => t('common.add')
|
||||
}}
|
||||
</NButton>
|
||||
<NInput placeholder={t('records.search')} onUpdate:value={searchRecord} clearable>
|
||||
{{
|
||||
prefix: () => <NIcon component={Search} />
|
||||
}}
|
||||
</NInput>
|
||||
</NFlex>
|
||||
),
|
||||
default: () => <recordsViewBodyHeaderExtra />
|
||||
}}
|
||||
</NPageHeader>
|
||||
<br />
|
||||
<NDataTable data={records.value} columns={columns} pagination={{ pageSize: 20 }} />
|
||||
</NModalProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function RecordsView({ domain }: Props) {
|
||||
try {
|
||||
refreshRecords(domain)
|
||||
} catch (err) {
|
||||
const msg = getErrorInfo(err)
|
||||
notification.error(msg)
|
||||
console.error(err)
|
||||
}
|
||||
return (
|
||||
<div id='records'>
|
||||
<RecordEditModal show={editModalShow.value} domain={domain} record={editingRecord.value} onReloadRecords={reloadRecords} onUpdate:show={(v: boolean) => editModalShow.value = v} />
|
||||
<>
|
||||
{
|
||||
loading.value ? <NSpin size='large' /> : <recordsViewBody domain={domain} />
|
||||
loading ? <Spin size='large' /> :
|
||||
<>
|
||||
<Layout className="records-layout">
|
||||
<Layout.Header className="records-layout-header">
|
||||
<Flex align='center' className="toolbar">
|
||||
<Flex align="center" gap='small'>
|
||||
<Button onClick={() => go('/domains')} type="text" icon={<LeftOutlined />} />
|
||||
<Typography.Title level={1} className="display-as-inline title">{t('domains.dnsRecord')}</Typography.Title>
|
||||
<Typography.Title level={2} type='secondary' className="display-as-inline subtitle">{domain}</Typography.Title>
|
||||
</Flex>
|
||||
<Flex align="center" gap='small' className="right">
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={newRecord}>
|
||||
{t('common.add')}
|
||||
</Button>
|
||||
<Input prefix={<SearchOutlined />} placeholder={t('records.search')} onChange={v => setSearchText(v.target.value)} />
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Layout.Header>
|
||||
<Layout.Content style={{
|
||||
margin: 24,
|
||||
borderRadius: borderRadiusLG,
|
||||
minHeight: 480,
|
||||
background: colorBgContainer,
|
||||
}}>
|
||||
<Table<Record<RecordT>>
|
||||
dataSource={recordStore.records
|
||||
.filter(i => i.record_type !== RecordTypes.RecordTypeSOA)
|
||||
.filter(i => i.name?.includes(searchText) || Object.entries(i.content as RecordT).map(i => i[1]).join(" ").includes(searchText))
|
||||
}
|
||||
pagination={{ defaultPageSize: 20 }}
|
||||
rowKey={e => `${e.id}`}
|
||||
>
|
||||
<Table.Column<Record<RecordT>> title='#' render={(_v, _r, index) => index + 1} />
|
||||
<Table.Column<Record<RecordT>> title={t("records.name")} dataIndex='name' key='name' />
|
||||
<Table.Column<Record<RecordT>> title={t('records.recordType')} dataIndex='record_type' key='record_type' />
|
||||
<Table.Column<Record<RecordT>> title={t('records.content')} render={(v) => Object.entries(v.content).map(i => i[1]).join(" ")} />
|
||||
<Table.Column<Record<RecordT>> title='TTL' key='ttl' dataIndex='ttl' />
|
||||
<Table.Column<Record<RecordT>> key='op' render={(v: Record) =>
|
||||
<RecordOps
|
||||
onDelete={() => {
|
||||
if (domain)
|
||||
recordStore.removeRecord(domain, v).catch(e => {
|
||||
const msg = getErrorInfo(e as ResponseError)
|
||||
notification.error(msg)
|
||||
console.error(e)
|
||||
})
|
||||
}} onEdit={() => openEditModal(v)}
|
||||
/>
|
||||
} />
|
||||
</Table>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
<RecordEditModal open={editModalShow} onCancel={closeEditModal}
|
||||
onOk={closeEditModal} record={currentRecord}
|
||||
editRecord={v => recordStore.updateRecord(domain!, v)}
|
||||
createRecord={v => recordStore.addRecord(domain!, v)} />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
RecordsView.displayName = 'RecordsView'
|
||||
export default RecordsView
|
||||
}
|
||||
0
web/env.d.ts → web/src/vite-env.d.ts
vendored
0
web/env.d.ts → web/src/vite-env.d.ts
vendored
@ -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/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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" }]
|
||||
}
|
||||
|
||||
@ -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"]
|
||||
}
|
||||
|
||||
@ -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()],
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user