feat：增加首页登录页面

2026-06-20 17:35:14 +08:00
parent 7288f443f1
commit 2a7d4c74d4
6 changed files with 1744 additions and 4 deletions
--- a/frontend/src/components/LandingPage/LoginModal.tsx
+++ b/frontend/src/components/LandingPage/LoginModal.tsx
@@ -0,0 +1,163 @@
+// ============================================================
+// LoginModal — 登录 / 注册模态框
+// 职责：在 LandingPage 上弹出的认证表单，复用现有 auth 系统
+// ============================================================
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useAuth } from "../../lib/auth";
+import { useI18n } from "../../lib/i18n";
+
+type AuthMode = "login" | "register";
+
+interface LoginModalProps {
+  initialMode?: AuthMode;
+  onClose: () => void;
+}
+
+export function LoginModal({ initialMode = "login", onClose }: LoginModalProps) {
+  const { login, register } = useAuth();
+  const { t } = useI18n();
+  const [mode, setMode] = useState<AuthMode>(initialMode);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  // 点击遮罩关闭
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === overlayRef.current) onClose();
+    },
+    [onClose]
+  );
+
+  // ESC 关闭
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // 阻止 body 滚动
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = prev; };
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError("");
+
+      if (username.length < 3 || username.length > 64) {
+        setError(t("auth.error.usernameLength"));
+        return;
+      }
+      if (password.length < 8 || password.length > 72) {
+        setError(t("auth.error.passwordLength"));
+        return;
+      }
+
+      setIsSubmitting(true);
+      const fn = mode === "login" ? login : register;
+      const result = await fn(username, password);
+      setIsSubmitting(false);
+
+      if (result.error) {
+        setError(result.error);
+      }
+      // 登录成功时 auth 状态更新，App 自动切到主界面，modal 自然消失
+    },
+    [username, password, mode, login, register, t]
+  );
+
+  const switchMode = useCallback(() => {
+    setMode((m) => (m === "login" ? "register" : "login"));
+    setError("");
+  }, []);
+
+  return (
+    <div className="lp-modal-overlay" ref={overlayRef} onClick={handleOverlayClick}>
+      <div className="lp-modal" role="dialog" aria-modal="true">
+        <div className="lp-modal__inner">
+          <button type="button" className="lp-modal__close" onClick={onClose} aria-label="Close">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+
+          <div className="lp-modal__header">
+            <div className="lp-modal__logo">CamTalk</div>
+            <div className="lp-modal__subtitle">{t("auth.subtitle")}</div>
+          </div>
+
+          <form onSubmit={handleSubmit}>
+            <div className="lp-modal__tabs">
+              <button
+                type="button"
+                className={`lp-modal__tab ${mode === "login" ? "lp-modal__tab--active" : ""}`}
+                onClick={() => { setMode("login"); setError(""); }}
+              >
+                {t("auth.login")}
+              </button>
+              <button
+                type="button"
+                className={`lp-modal__tab ${mode === "register" ? "lp-modal__tab--active" : ""}`}
+                onClick={() => { setMode("register"); setError(""); }}
+              >
+                {t("auth.register")}
+              </button>
+            </div>
+
+            <label className="lp-modal__field">
+              <span className="lp-modal__field-label">{t("auth.username")}</span>
+              <input
+                type="text"
+                className="lp-modal__field-input"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder={t("auth.username.placeholder")}
+                autoComplete="username"
+                autoFocus
+              />
+            </label>
+
+            <label className="lp-modal__field">
+              <span className="lp-modal__field-label">{t("auth.password")}</span>
+              <input
+                type="password"
+                className="lp-modal__field-input"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder={t("auth.password.placeholder")}
+                autoComplete={mode === "login" ? "current-password" : "new-password"}
+              />
+            </label>
+
+            {error && <div className="lp-modal__error">{error}</div>}
+
+            <button type="submit" className="lp-modal__submit" disabled={isSubmitting}>
+              {isSubmitting
+                ? t("auth.submitting")
+                : mode === "login"
+                  ? t("auth.login")
+                  : t("auth.register")}
+            </button>
+          </form>
+
+          <div className="lp-modal__footer">
+            {mode === "login" ? t("auth.noAccount") : t("auth.hasAccount")}
+            <button type="button" className="lp-modal__link" onClick={switchMode}>
+              {mode === "login" ? t("auth.register") : t("auth.login")}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}