mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-09 14:09:52 +00:00
feat(ui): new SettingsPassword using antd
This commit is contained in:
parent
8b7295d77e
commit
525eb83d1e
@ -13,6 +13,7 @@ module.exports = {
|
|||||||
parser: "@typescript-eslint/parser",
|
parser: "@typescript-eslint/parser",
|
||||||
plugins: ["react-refresh"],
|
plugins: ["react-refresh"],
|
||||||
rules: {
|
rules: {
|
||||||
|
"@typescript-eslint/no-explicit-any": "warn",
|
||||||
"react-refresh/only-export-components": [
|
"react-refresh/only-export-components": [
|
||||||
"warn",
|
"warn",
|
||||||
{
|
{
|
||||||
|
@ -1,23 +1,19 @@
|
|||||||
{
|
{
|
||||||
"settings.page.title": "Settings",
|
"settings.page.title": "Settings",
|
||||||
|
|
||||||
"settings.account.relogin.message": "Please login again",
|
|
||||||
|
|
||||||
"settings.account.tab": "Account",
|
"settings.account.tab": "Account",
|
||||||
"settings.account.form.email.label": "Email",
|
"settings.account.form.email.label": "Email",
|
||||||
"settings.account.form.email.placeholder": "Please enter email",
|
"settings.account.form.email.placeholder": "Please enter email",
|
||||||
|
|
||||||
"settings.password.tab": "Password",
|
"settings.password.tab": "Password",
|
||||||
"settings.password.current_password.label": "Current Password",
|
"settings.password.form.old_password.label": "Current Password",
|
||||||
"settings.password.current_password.placeholder": "Please enter the current password",
|
"settings.password.form.old_password.placeholder": "Please enter the current password",
|
||||||
"settings.password.new_password.label": "New Password",
|
"settings.password.form.new_password.label": "New Password",
|
||||||
"settings.password.new_password.placeholder": "Please enter the new password",
|
"settings.password.form.new_password.placeholder": "Please enter the new password",
|
||||||
"settings.password.confirm_password.label": "Confirm Password",
|
"settings.password.form.confirm_password.label": "Confirm Password",
|
||||||
"settings.password.confirm_password.placeholder": "Please enter the new password again",
|
"settings.password.form.confirm_password.placeholder": "Please enter the new password again",
|
||||||
"settings.password.password.errmsg.length": "Password should be at least 10 characters",
|
"settings.password.form.password.errmsg.invalid": "Password should be at least 10 characters",
|
||||||
"settings.password.password.errmsg.not_matched": "Passwords do not match",
|
"settings.password.form.password.errmsg.not_matched": "Passwords do not match",
|
||||||
"settings.password.changed.message": "Password changed successfully",
|
|
||||||
"settings.password.failed.message": "Password change failed",
|
|
||||||
|
|
||||||
"settings.notification.tab": "Notification",
|
"settings.notification.tab": "Notification",
|
||||||
"settings.notification.template.label": "Template",
|
"settings.notification.template.label": "Template",
|
||||||
|
@ -1,23 +1,19 @@
|
|||||||
{
|
{
|
||||||
"settings.page.title": "系统设置",
|
"settings.page.title": "系统设置",
|
||||||
|
|
||||||
"settings.account.relogin.message": "请重新登录",
|
|
||||||
|
|
||||||
"settings.account.tab": "登录账号",
|
"settings.account.tab": "登录账号",
|
||||||
"settings.account.form.email.label": "登录邮箱",
|
"settings.account.form.email.label": "登录邮箱",
|
||||||
"settings.account.form.email.placeholder": "请输入邮箱",
|
"settings.account.form.email.placeholder": "请输入邮箱",
|
||||||
|
|
||||||
"settings.password.tab": "登录密码",
|
"settings.password.tab": "登录密码",
|
||||||
"settings.password.password.errmsg.length": "密码至少10个字符",
|
"settings.password.form.old_password.label": "当前密码",
|
||||||
"settings.password.password.errmsg.not_matched": "两次密码不一致",
|
"settings.password.form.old_password.placeholder": "请输入旧密码",
|
||||||
"settings.password.current_password.label": "当前密码",
|
"settings.password.form.new_password.label": "新密码",
|
||||||
"settings.password.current_password.placeholder": "请输入旧密码",
|
"settings.password.form.new_password.placeholder": "请输入新密码",
|
||||||
"settings.password.new_password.label": "新密码",
|
"settings.password.form.confirm_password.label": "确认密码",
|
||||||
"settings.password.new_password.placeholder": "请输入新密码",
|
"settings.password.form.confirm_password.placeholder": "请再次输入新密码",
|
||||||
"settings.password.confirm_password.label": "确认密码",
|
"settings.password.form.password.errmsg.invalid": "密码至少 10 个字符",
|
||||||
"settings.password.confirm_password.placeholder": "请再次输入新密码",
|
"settings.password.form.password.errmsg.not_matched": "两次密码不一致",
|
||||||
"settings.password.changed.message": "修改密码成功",
|
|
||||||
"settings.password.failed.message": "修改密码失败",
|
|
||||||
|
|
||||||
"settings.notification.tab": "消息推送",
|
"settings.notification.tab": "消息推送",
|
||||||
"settings.notification.template.label": "内容模板",
|
"settings.notification.template.label": "内容模板",
|
||||||
|
@ -1,136 +0,0 @@
|
|||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
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({
|
|
||||||
oldPassword: z.string().min(10, {
|
|
||||||
message: "settings.password.password.errmsg.length",
|
|
||||||
}),
|
|
||||||
newPassword: z.string().min(10, {
|
|
||||||
message: "settings.password.password.errmsg.length",
|
|
||||||
}),
|
|
||||||
confirmPassword: z.string().min(10, {
|
|
||||||
message: "settings.password.password.errmsg.length",
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.refine((data) => data.newPassword === data.confirmPassword, {
|
|
||||||
message: "settings.password.password.errmsg.not_matched",
|
|
||||||
path: ["confirmPassword"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const Password = () => {
|
|
||||||
const { toast } = useToast();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const form = useForm<z.infer<typeof formSchema>>({
|
|
||||||
resolver: zodResolver(formSchema),
|
|
||||||
defaultValues: {
|
|
||||||
oldPassword: "",
|
|
||||||
newPassword: "",
|
|
||||||
confirmPassword: "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
|
||||||
try {
|
|
||||||
await getPocketBase().admins.authWithPassword(getPocketBase().authStore.model?.email, values.oldPassword);
|
|
||||||
} catch (e) {
|
|
||||||
const message = getErrMsg(e);
|
|
||||||
form.setError("oldPassword", { message });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
|
|
||||||
password: values.newPassword,
|
|
||||||
passwordConfirm: values.confirmPassword,
|
|
||||||
});
|
|
||||||
|
|
||||||
getPocketBase().authStore.clear();
|
|
||||||
toast({
|
|
||||||
title: t("settings.password.changed.message"),
|
|
||||||
description: t("settings.account.relogin.message"),
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
navigate("/login");
|
|
||||||
}, 500);
|
|
||||||
} catch (e) {
|
|
||||||
const message = getErrMsg(e);
|
|
||||||
toast({
|
|
||||||
title: t("settings.password.failed.message"),
|
|
||||||
description: message,
|
|
||||||
variant: "destructive",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="w-full md:max-w-[35em]">
|
|
||||||
<Form {...form}>
|
|
||||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 dark:text-stone-200">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="oldPassword"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>{t("settings.password.current_password.label")}</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder={t("settings.password.current_password.placeholder")} {...field} type="password" />
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="newPassword"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>{t("settings.password.new_password.label")}</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder={t("settings.password.new_password.placeholder")} {...field} type="password" />
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="confirmPassword"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>{t("settings.password.confirm_password.label")}</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder={t("settings.password.confirm_password.placeholder")} {...field} type="password" />
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button type="submit">{t("common.button.save")}</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Password;
|
|
@ -17,7 +17,7 @@ const SettingsAccount = () => {
|
|||||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||||
|
|
||||||
const formSchema = z.object({
|
const formSchema = z.object({
|
||||||
username: z.string().email(t("common.errmsg.email_invalid")),
|
username: z.string({ message: "settings.account.form.email.placeholder" }).email({ message: t("common.errmsg.email_invalid") }),
|
||||||
});
|
});
|
||||||
const formRule = createSchemaFieldRule(formSchema);
|
const formRule = createSchemaFieldRule(formSchema);
|
||||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||||
@ -32,12 +32,12 @@ const SettingsAccount = () => {
|
|||||||
setInitialChanged(form.getFieldValue("username") !== initialValues.username);
|
setInitialChanged(form.getFieldValue("username") !== initialValues.username);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFormFinish = async (values: z.infer<typeof formSchema>) => {
|
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||||
setFormPending(true);
|
setFormPending(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
|
await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
|
||||||
email: values.username,
|
email: fields.username,
|
||||||
});
|
});
|
||||||
|
|
||||||
messageApi.success(t("common.text.operation_succeeded"));
|
messageApi.success(t("common.text.operation_succeeded"));
|
||||||
|
99
ui/src/pages/settings/SettingsPassword.tsx
Normal file
99
ui/src/pages/settings/SettingsPassword.tsx
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
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 SettingsPassword = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const [messageApi, MessageContextHolder] = message.useMessage();
|
||||||
|
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||||
|
|
||||||
|
const formSchema = z
|
||||||
|
.object({
|
||||||
|
oldPassword: z
|
||||||
|
.string({ message: t("settings.password.form.old_password.placeholder") })
|
||||||
|
.min(10, { message: t("settings.password.form.password.errmsg.invalid") }),
|
||||||
|
newPassword: z
|
||||||
|
.string({ message: t("settings.password.form.new_password.placeholder") })
|
||||||
|
.min(10, { message: t("settings.password.form.password.errmsg.invalid") }),
|
||||||
|
confirmPassword: z
|
||||||
|
.string({ message: t("settings.password.form.confirm_password.placeholder") })
|
||||||
|
.min(10, { message: t("settings.password.form.password.errmsg.invalid") }),
|
||||||
|
})
|
||||||
|
.refine((data) => data.newPassword === data.confirmPassword, {
|
||||||
|
message: t("settings.password.form.password.errmsg.not_matched"),
|
||||||
|
path: ["confirmPassword"],
|
||||||
|
});
|
||||||
|
const formRule = createSchemaFieldRule(formSchema);
|
||||||
|
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||||
|
const [formPending, setFormPending] = useState(false);
|
||||||
|
|
||||||
|
const [initialChanged, setInitialChanged] = useState(false);
|
||||||
|
|
||||||
|
const handleInputChange = () => {
|
||||||
|
const fields = form.getFieldsValue();
|
||||||
|
setInitialChanged(!!fields.oldPassword && !!fields.newPassword && !!fields.confirmPassword);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||||
|
setFormPending(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await getPocketBase().admins.authWithPassword(getPocketBase().authStore.model?.email, fields.oldPassword);
|
||||||
|
await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
|
||||||
|
password: fields.newPassword,
|
||||||
|
passwordConfirm: fields.confirmPassword,
|
||||||
|
});
|
||||||
|
|
||||||
|
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}
|
||||||
|
|
||||||
|
<div className="w-full md:max-w-[35em]">
|
||||||
|
<Form form={form} disabled={formPending} layout="vertical" onFinish={handleFormFinish}>
|
||||||
|
<Form.Item name="oldPassword" label={t("settings.password.form.old_password.label")} rules={[formRule]}>
|
||||||
|
<Input.Password placeholder={t("settings.password.form.old_password.placeholder")} onChange={handleInputChange} />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item name="newPassword" label={t("settings.password.form.new_password.label")} rules={[formRule]}>
|
||||||
|
<Input.Password placeholder={t("settings.password.form.new_password.placeholder")} onChange={handleInputChange} />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item name="confirmPassword" label={t("settings.password.form.confirm_password.label")} rules={[formRule]}>
|
||||||
|
<Input.Password placeholder={t("settings.password.form.confirm_password.placeholder")} onChange={handleInputChange} />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={formPending}>
|
||||||
|
{t("common.button.save")}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SettingsPassword;
|
@ -10,7 +10,7 @@ import WorkflowDetail from "./pages/workflows/WorkflowDetail";
|
|||||||
import CertificateList from "./pages/certificates/CertificateList";
|
import CertificateList from "./pages/certificates/CertificateList";
|
||||||
import Settings from "./pages/settings/Settings";
|
import Settings from "./pages/settings/Settings";
|
||||||
import SettingsAccount from "./pages/settings/SettingsAccount";
|
import SettingsAccount from "./pages/settings/SettingsAccount";
|
||||||
import SettingsPassword from "./pages/settings/Password";
|
import SettingsPassword from "./pages/settings/SettingsPassword";
|
||||||
import SettingsNotification from "./pages/settings/Notification";
|
import SettingsNotification from "./pages/settings/Notification";
|
||||||
import SettingsSSLProvider from "./pages/settings/SSLProvider";
|
import SettingsSSLProvider from "./pages/settings/SSLProvider";
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user