feat:账号设置+密码重置

2026-09-01 15:03:45 +08:00
parent 64d33fb1d0
commit 1532feedde
13 changed files with 815 additions and 29 deletions
@@ -0,0 +1,127 @@
+import { useEffect, useState } from "react";
+
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import {
+  formFieldClass,
+  formHintClass,
+  formInputClass,
+  modalFormClass,
+} from "../platform/modalUi";
+
+type ResetPasswordDialogProps = {
+  open: boolean;
+  displayName: string;
+  username: string;
+  saving: boolean;
+  onSubmit: (newPassword: string) => Promise<void>;
+  onClose: () => void;
+};
+
+export function ResetPasswordDialog({
+  open,
+  displayName,
+  username,
+  saving,
+  onSubmit,
+  onClose,
+}: ResetPasswordDialogProps) {
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setPassword("");
+    setConfirm("");
+    setError(null);
+  }, [open]);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (password.length < 8 || password.length > 72) {
+      setError("密码长度需为 8~72 字符");
+      return;
+    }
+    if (password !== confirm) {
+      setError("两次输入的密码不一致");
+      return;
+    }
+    setError(null);
+    await onSubmit(password);
+  };
+
+  return (
+    <AppFormDialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      eyebrow="SECURITY"
+      title="重置密码"
+    >
+      <form
+        className={`${modalFormClass} pb-5`}
+        onSubmit={(event) => void handleSubmit(event)}
+      >
+        <p className="mb-4 text-[12px] text-[#587087]">
+          正在为 <strong className="text-[#23384e]">{displayName}</strong>
+          （{username}）设置新密码。对方需使用新密码重新登录。
+        </p>
+        <label className={formFieldClass}>
+          <span>
+            新密码<span className="text-danger">*</span>
+          </span>
+          <Input
+            className={formInputClass}
+            type="password"
+            autoFocus
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            autoComplete="new-password"
+            placeholder="8~72 字符"
+          />
+        </label>
+        <label className={formFieldClass}>
+          <span>
+            确认新密码<span className="text-danger">*</span>
+          </span>
+          <Input
+            className={formInputClass}
+            type="password"
+            value={confirm}
+            onChange={(event) => setConfirm(event.target.value)}
+            autoComplete="new-password"
+          />
+          <span className={formHintClass}>重置后不会强制踢下线已有会话</span>
+        </label>
+        {error ? (
+          <p className="mb-3 text-[11px] text-danger">{error}</p>
+        ) : null}
+        <div className="flex justify-end gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            className={dialogSecondaryButtonClass}
+            onClick={onClose}
+            disabled={saving}
+          >
+            取消
+          </Button>
+          <Button
+            type="submit"
+            className={dialogPrimaryButtonClass}
+            disabled={saving}
+          >
+            {saving ? "重置中…" : "确认重置"}
+          </Button>
+        </div>
+      </form>
+    </AppFormDialog>
+  );
+}