certimate/ui/src/pages/settings/SettingsPassword.tsx
2024-12-19 11:59:13 +08:00

100 lines
3.8 KiB
TypeScript

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;