feat(ui): new SettingsPassword using antd

2024-12-19 11:59:13 +08:00
parent 8b7295d77e
commit 525eb83d1e
7 changed files with 120 additions and 164 deletions
--- a/ui/src/pages/settings/SettingsPassword.tsx
+++ b/ui/src/pages/settings/SettingsPassword.tsx
@@ -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;