oa-login-password-recovery-ux 改进登录找回密码体验

client/src/pages/ChangePasswordPage.tsx

@@ -4,8 +4,8 @@ import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { useAuth } from "../auth/AuthContext";
 import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
+import { PasswordInput } from "../components/ui/password-input";
 import { markOnboardingEntryReady } from "../lib/onboardingGuide";
 
 const PASSWORD_REQUIREMENTS = [
@@ -62,26 +62,24 @@ export function ChangePasswordPage() {
       <form className="space-y-4" onSubmit={handleSubmit}>
         <div className="space-y-1">
           <Label htmlFor="oldPassword">旧密码</Label>
-          <Input
+          <PasswordInput
             autoComplete="current-password"
             data-testid="change-password-old"
             id="oldPassword"
             onChange={(event) => setOldPassword(event.target.value)}
             placeholder="请输入旧密码"
-            type="password"
             value={oldPassword}
           />
         </div>
 
         <div className="space-y-1">
           <Label htmlFor="newPassword">新密码</Label>
-          <Input
+          <PasswordInput
             autoComplete="new-password"
             data-testid="change-password-new"
             id="newPassword"
             onChange={(event) => setNewPassword(event.target.value)}
             placeholder="至少 12 位，建议包含大小写/数字"
-            type="password"
             value={newPassword}
           />
           <p className="text-xs text-zinc-500">密码要求：{PASSWORD_REQUIREMENTS.join("；")}。</p>
@@ -98,12 +96,11 @@ export function ChangePasswordPage() {
 
         <div className="space-y-1">
           <Label htmlFor="confirmPassword">确认新密码</Label>
-          <Input
+          <PasswordInput
             autoComplete="new-password"
             id="confirmPassword"
             onChange={(event) => setConfirmPassword(event.target.value)}
             placeholder="再次输入新密码"
-            type="password"
             value={confirmPassword}
           />
         </div>

client/src/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,192 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { forgotPassword, resetPassword } from "../api/auth";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import { isApiError } from "../api/types";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { PasswordInput } from "../components/ui/password-input";
+
+const PASSWORD_REQUIREMENTS = [
+  "至少 12 位",
+  "包含大写字母、小写字母和数字",
+  "不要使用公司名、常见顺序或过于简单的组合",
+];
+
+export function ForgotPasswordPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [codeRequested, setCodeRequested] = useState(false);
+  const [submittingCode, setSubmittingCode] = useState(false);
+  const [submittingReset, setSubmittingReset] = useState(false);
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+
+  async function handleRequestCode(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError("");
+    setMessage("");
+
+    const normalizedEmail = email.trim();
+    if (!normalizedEmail) {
+      setError("请输入邮箱。");
+      return;
+    }
+
+    setSubmittingCode(true);
+    try {
+      await forgotPassword({ email: normalizedEmail });
+      setCodeRequested(true);
+      setMessage("如账号可用，验证码将发送到该邮箱。请在有效期内完成重置。");
+    } catch (err) {
+      if (isApiError(err)) {
+        setError(mapApiErrorMessage(err.code, err.details, err.message));
+      } else {
+        setError("请求验证码失败，请稍后重试或联系管理员。");
+      }
+    } finally {
+      setSubmittingCode(false);
+    }
+  }
+
+  async function handleResetPassword(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError("");
+
+    const normalizedEmail = email.trim();
+    const normalizedCode = code.trim();
+    if (!normalizedEmail) {
+      setError("请输入邮箱。");
+      return;
+    }
+    if (normalizedCode.length !== 6) {
+      setError("请输入 6 位验证码。");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("两次输入的新密码不一致，请确认后再提交。");
+      return;
+    }
+
+    setSubmittingReset(true);
+    try {
+      await resetPassword({
+        email: normalizedEmail,
+        code: normalizedCode,
+        newPassword,
+      });
+      setMessage("密码已重置，请使用新密码登录。");
+      navigate("/login", { replace: true });
+    } catch (err) {
+      if (isApiError(err)) {
+        setError(mapApiErrorMessage(err.code, err.details, err.message));
+      } else {
+        setError("重置密码失败，请稍后重试或联系管理员。");
+      }
+    } finally {
+      setSubmittingReset(false);
+    }
+  }
+
+  return (
+    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6" data-testid="forgot-password-page">
+      <div>
+        <h1 className="text-xl font-semibold text-slate-900">找回密码</h1>
+        <p className="mt-1 text-sm leading-6 text-slate-500">使用账号邮箱接收验证码，设置新密码后重新登录。</p>
+      </div>
+
+      <form className="mt-6 space-y-4" onSubmit={handleRequestCode}>
+        <div className="space-y-2">
+          <Label htmlFor="forgot-password-email">邮箱</Label>
+          <Input
+            autoComplete="email"
+            data-testid="forgot-password-email"
+            id="forgot-password-email"
+            onChange={(event) => setEmail(event.target.value)}
+            placeholder="请输入账号邮箱"
+            type="email"
+            value={email}
+          />
+        </div>
+
+        <Button className="w-full" data-testid="forgot-password-request-code" disabled={submittingCode || !email.trim()} type="submit">
+          {submittingCode ? "发送中..." : codeRequested ? "重新发送验证码" : "发送验证码"}
+        </Button>
+      </form>
+
+      {codeRequested ? (
+        <form className="mt-5 space-y-4 border-t border-slate-100 pt-5" onSubmit={handleResetPassword}>
+          <div className="space-y-2">
+            <Label htmlFor="forgot-password-code">验证码</Label>
+            <Input
+              autoComplete="one-time-code"
+              data-testid="forgot-password-code"
+              id="forgot-password-code"
+              inputMode="numeric"
+              maxLength={6}
+              onChange={(event) => setCode(event.target.value.replace(/\D/g, "").slice(0, 6))}
+              placeholder="6 位验证码"
+              value={code}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="forgot-password-new">新密码</Label>
+            <PasswordInput
+              autoComplete="new-password"
+              data-testid="forgot-password-new"
+              id="forgot-password-new"
+              onChange={(event) => setNewPassword(event.target.value)}
+              placeholder="至少 12 位，建议包含大小写/数字"
+              value={newPassword}
+            />
+            <p className="text-xs text-slate-500">密码要求：{PASSWORD_REQUIREMENTS.join("；")}。</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="forgot-password-confirm">确认新密码</Label>
+            <PasswordInput
+              autoComplete="new-password"
+              data-testid="forgot-password-confirm"
+              id="forgot-password-confirm"
+              onChange={(event) => setConfirmPassword(event.target.value)}
+              placeholder="再次输入新密码"
+              value={confirmPassword}
+            />
+          </div>
+
+          <Button
+            className="w-full"
+            data-testid="forgot-password-submit"
+            disabled={submittingReset || !email.trim() || code.length !== 6 || !newPassword.trim() || !confirmPassword.trim()}
+            type="submit"
+          >
+            {submittingReset ? "提交中..." : "重置密码"}
+          </Button>
+        </form>
+      ) : null}
+
+      {message ? (
+        <div className="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700" data-testid="forgot-password-message">
+          {message}
+        </div>
+      ) : null}
+
+      {error ? (
+        <div className="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600" data-testid="forgot-password-error">
+          {error}
+        </div>
+      ) : null}
+
+      <div className="mt-5 text-center text-sm">
+        <Link className="font-medium text-primary hover:underline" to="/login">
+          返回登录
+        </Link>
+      </div>
+    </div>
+  );
+}

client/src/pages/LoginPage.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { fetchSsoProviders, fetchWecomConfig } from "../api/auth";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
@@ -9,6 +9,7 @@ import { getDeviceFingerprint } from "../auth/deviceFingerprint";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
+import { PasswordInput } from "../components/ui/password-input";
 import { isWecomWebView, resolveDefaultWorkspacePath } from "../lib/runtimeContext";
 import {
   buildWecomLoginUrl,
@@ -122,14 +123,18 @@ export function LoginPage() {
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="login-password">密码</Label>
-            <Input
+            <div className="flex items-center justify-between gap-3">
+              <Label htmlFor="login-password">密码</Label>
+              <Link className="text-sm font-medium text-primary hover:underline" to="/forgot-password">
+                忘记密码？
+              </Link>
+            </div>
+            <PasswordInput
               autoComplete="current-password"
               data-testid="login-password"
               id="login-password"
               onChange={(event) => setPassword(event.target.value)}
               placeholder="请输入密码"
-              type="password"
               value={password}
             />
           </div>