From 8b7295d77e1c5be1c81bbc4d4467789eb4e4f3d9 Mon Sep 17 00:00:00 2001 From: Fu Diwei Date: Thu, 19 Dec 2024 10:50:42 +0800 Subject: [PATCH] feat(ui): new SettingsAccount using antd --- ui/src/i18n/locales/en/nls.common.json | 2 +- ui/src/i18n/locales/en/nls.settings.json | 7 +- ui/src/i18n/locales/zh/nls.login.json | 2 +- ui/src/i18n/locales/zh/nls.settings.json | 11 +-- ui/src/pages/settings/Account.tsx | 101 ---------------------- ui/src/pages/settings/SettingsAccount.tsx | 78 +++++++++++++++++ ui/src/router.tsx | 2 +- 7 files changed, 87 insertions(+), 116 deletions(-) delete mode 100644 ui/src/pages/settings/Account.tsx create mode 100644 ui/src/pages/settings/SettingsAccount.tsx diff --git a/ui/src/i18n/locales/en/nls.common.json b/ui/src/i18n/locales/en/nls.common.json index faea418e..971cde9a 100644 --- a/ui/src/i18n/locales/en/nls.common.json +++ b/ui/src/i18n/locales/en/nls.common.json @@ -36,8 +36,8 @@ "common.theme.system": "System", "common.errmsg.string_max": "Please enter no more than {{max}} characters", - "common.errmsg.email_invalid": "Please enter a valid email address", "common.errmsg.email_empty": "Please enter email", + "common.errmsg.email_invalid": "Please enter a valid email address", "common.errmsg.email_duplicate": "Email already exists", "common.errmsg.domain_invalid": "Please enter domain", "common.errmsg.host_invalid": "Please enter a valid domain name or IP", diff --git a/ui/src/i18n/locales/en/nls.settings.json b/ui/src/i18n/locales/en/nls.settings.json index 580c4ef1..86316757 100644 --- a/ui/src/i18n/locales/en/nls.settings.json +++ b/ui/src/i18n/locales/en/nls.settings.json @@ -4,11 +4,8 @@ "settings.account.relogin.message": "Please login again", "settings.account.tab": "Account", - "settings.account.email.label": "Email", - "settings.account.email.placeholder": "Please enter email", - "settings.account.email.errmsg.invalid": "Please enter a valid email address", - "settings.account.email.changed.message": "Account email altered successfully", - "settings.account.email.failed.message": "Account email alteration failed", + "settings.account.form.email.label": "Email", + "settings.account.form.email.placeholder": "Please enter email", "settings.password.tab": "Password", "settings.password.current_password.label": "Current Password", diff --git a/ui/src/i18n/locales/zh/nls.login.json b/ui/src/i18n/locales/zh/nls.login.json index 45f7ce90..cc0ba106 100644 --- a/ui/src/i18n/locales/zh/nls.login.json +++ b/ui/src/i18n/locales/zh/nls.login.json @@ -1,5 +1,5 @@ { - "login.username.label": "用户名", + "login.username.label": "用户名/邮箱", "login.username.placeholder": "请输入用户名/邮箱", "login.username.errmsg.invalid": "请输入正确的用户名/邮箱", "login.password.label": "密码", diff --git a/ui/src/i18n/locales/zh/nls.settings.json b/ui/src/i18n/locales/zh/nls.settings.json index 9f6f7f28..f5c544b7 100644 --- a/ui/src/i18n/locales/zh/nls.settings.json +++ b/ui/src/i18n/locales/zh/nls.settings.json @@ -3,14 +3,11 @@ "settings.account.relogin.message": "请重新登录", - "settings.account.tab": "账号", - "settings.account.email.label": "登录邮箱", - "settings.account.email.errmsg.invalid": "请输入正确的邮箱地址", - "settings.account.email.placeholder": "请输入邮箱", - "settings.account.email.changed.message": "修改账户邮箱成功", - "settings.account.email.failed.message": "修改账户邮箱失败", + "settings.account.tab": "登录账号", + "settings.account.form.email.label": "登录邮箱", + "settings.account.form.email.placeholder": "请输入邮箱", - "settings.password.tab": "密码", + "settings.password.tab": "登录密码", "settings.password.password.errmsg.length": "密码至少10个字符", "settings.password.password.errmsg.not_matched": "两次密码不一致", "settings.password.current_password.label": "当前密码", diff --git a/ui/src/pages/settings/Account.tsx b/ui/src/pages/settings/Account.tsx deleted file mode 100644 index dc388201..00000000 --- a/ui/src/pages/settings/Account.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; -import { useForm } from "react-hook-form"; -import { useTranslation } from "react-i18next"; -import { z } from "zod"; -import { zodResolver } from "@hookform/resolvers/zod"; - -import { Button } from "@/components/ui/button"; -import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; -import { useToast } from "@/components/ui/use-toast"; -import { getErrMsg } from "@/utils/error"; -import { getPocketBase } from "@/repository/pocketbase"; - -const formSchema = z.object({ - email: z.string().email("settings.account.email.errmsg.invalid"), -}); - -const Account = () => { - const { toast } = useToast(); - const navigate = useNavigate(); - const { t } = useTranslation(); - - const [changed, setChanged] = useState(false); - - const form = useForm>({ - resolver: zodResolver(formSchema), - defaultValues: { - email: getPocketBase().authStore.model?.email, - }, - }); - - const onSubmit = async (values: z.infer) => { - try { - await getPocketBase().admins.update(getPocketBase().authStore.model?.id, { - email: values.email, - }); - - getPocketBase().authStore.clear(); - toast({ - title: t("settings.account.email.changed.message"), - description: t("settings.account.relogin.message"), - }); - setTimeout(() => { - navigate("/login"); - }, 500); - } catch (e) { - const message = getErrMsg(e); - toast({ - title: t("settings.account.email.failed.message"), - description: message, - variant: "destructive", - }); - } - }; - - return ( - <> -
-
- - ( - - {t("settings.account.email.label")} - - { - setChanged(true); - form.setValue("email", e.target.value); - }} - /> - - - - - )} - /> - -
- {changed ? ( - - ) : ( - - )} -
- - -
- - ); -}; - -export default Account; diff --git a/ui/src/pages/settings/SettingsAccount.tsx b/ui/src/pages/settings/SettingsAccount.tsx new file mode 100644 index 00000000..45f78c82 --- /dev/null +++ b/ui/src/pages/settings/SettingsAccount.tsx @@ -0,0 +1,78 @@ +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import { Button, Form, Input, message, notification } from "antd"; +import { createSchemaFieldRule } from "antd-zod"; +import { z } from "zod"; + +import { getErrMsg } from "@/utils/error"; +import { getPocketBase } from "@/repository/pocketbase"; + +const SettingsAccount = () => { + const navigate = useNavigate(); + + const { t } = useTranslation(); + + const [messageApi, MessageContextHolder] = message.useMessage(); + const [notificationApi, NotificationContextHolder] = notification.useNotification(); + + const formSchema = z.object({ + username: z.string().email(t("common.errmsg.email_invalid")), + }); + const formRule = createSchemaFieldRule(formSchema); + const [form] = Form.useForm>(); + const [formPending, setFormPending] = useState(false); + + const [initialValues] = useState>>({ + username: getPocketBase().authStore.model?.email, + }); + const [initialChanged, setInitialChanged] = useState(false); + + const handleInputChange = () => { + setInitialChanged(form.getFieldValue("username") !== initialValues.username); + }; + + const handleFormFinish = async (values: z.infer) => { + setFormPending(true); + + try { + await getPocketBase().admins.update(getPocketBase().authStore.model?.id, { + email: values.username, + }); + + messageApi.success(t("common.text.operation_succeeded")); + + setTimeout(() => { + getPocketBase().authStore.clear(); + navigate("/login"); + }, 500); + } catch (err) { + notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)} }); + } finally { + setFormPending(false); + } + }; + + return ( + <> + {MessageContextHolder} + {NotificationContextHolder} + +
+
+ + + + + + + +
+
+ + ); +}; + +export default SettingsAccount; diff --git a/ui/src/router.tsx b/ui/src/router.tsx index 8a147977..6b01d1a2 100644 --- a/ui/src/router.tsx +++ b/ui/src/router.tsx @@ -9,7 +9,7 @@ import WorkflowList from "./pages/workflows/WorkflowList"; import WorkflowDetail from "./pages/workflows/WorkflowDetail"; import CertificateList from "./pages/certificates/CertificateList"; import Settings from "./pages/settings/Settings"; -import SettingsAccount from "./pages/settings/Account"; +import SettingsAccount from "./pages/settings/SettingsAccount"; import SettingsPassword from "./pages/settings/Password"; import SettingsNotification from "./pages/settings/Notification"; import SettingsSSLProvider from "./pages/settings/SSLProvider";