rebase

frontend/src/pages/RegisterPage.tsx

@@ -1,79 +1,105 @@
-import { FormEvent, useState } from "react";
+import { useState, type FormEvent } from "react";
+import { useNavigate, Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
-import { authApi } from "@/api";
-import { useAuthStore } from "@/store/auth";
+import { useAuthStore } from "@/stores/authStore";
+import { useToastStore } from "@/stores/toastStore";
+import { ApiError } from "@/lib/api";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
-import { Card, CardBody } from "@/components/ui/Card";
+import { Card } from "@/components/ui/Card";
 
 export function RegisterPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { setAuth } = useAuthStore();
+  const register = useAuthStore((s) => s.register);
+  const pushToast = useToastStore((s) => s.push);
+
   const [email, setEmail] = useState("");
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [passwordConfirm, setPasswordConfirm] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
 
-  const onSubmit = async (e: FormEvent) => {
+  const validate = (): boolean => {
+    const next: Record<string, string> = {};
+    if (!email.includes("@")) next.email = t("errors.validation");
+    if (username.trim().length < 3) next.username = t("errors.validation");
+    if (password.length < 8) next.password = t("errors.validation");
+    if (password !== passwordConfirm) next.password_confirm = t("errors.validation");
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    setError("");
-    setLoading(true);
+    if (!validate()) return;
+    setSubmitting(true);
     try {
-      const { access_token, user } = await authApi.register(email, username, password);
-      setAuth(access_token, user);
-      navigate("/dashboard");
-    } catch (err: any) {
-      setError(err.response?.data?.detail || t("errors.unknown"));
+      await register({
+        email: email.trim(),
+        username: username.trim(),
+        password,
+        password_confirm: passwordConfirm,
+      });
+      pushToast("success", t("auth.register_success"));
+      navigate("/login");
+    } catch (err) {
+      const msg = err instanceof ApiError ? err.message : t("auth.register_failed");
+      pushToast("error", msg);
     } finally {
-      setLoading(false);
+      setSubmitting(false);
     }
   };
 
   return (
-    <div className="max-w-md mx-auto px-4 py-12">
-      <h1 className="text-2xl font-serif text-center text-ink-100 mb-6">{t("auth.register_title")}</h1>
-      <Card>
-        <CardBody>
-          <form onSubmit={onSubmit} className="space-y-4">
-            <Input
-              label={t("auth.email")}
-              type="email"
-              name="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-            />
-            <Input
-              label={t("auth.username")}
-              type="text"
-              name="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-            />
-            <Input
-              label={t("auth.password")}
-              type="password"
-              name="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              minLength={6}
-            />
-            {error && <p className="text-sm text-red-400">{error}</p>}
-            <Button type="submit" disabled={loading} className="w-full">
-              {loading ? t("common.loading") : t("auth.register_btn")}
-            </Button>
-          </form>
-          <p className="text-center mt-4 text-sm text-ink-400">
-            <Link to="/login" className="text-accent-400 hover:underline">
+    <div className="mx-auto flex min-h-[calc(100vh-3.5rem)] max-w-md items-center p-4">
+      <Card className="w-full" title={t("auth.register_title")}>
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <Input
+            label={t("auth.email")}
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            autoComplete="email"
+            required
+            error={errors.email}
+          />
+          <Input
+            label={t("auth.username")}
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            autoComplete="username"
+            required
+            error={errors.username}
+          />
+          <Input
+            label={t("auth.password")}
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="new-password"
+            required
+            error={errors.password}
+          />
+          <Input
+            label={t("auth.password_confirm")}
+            type="password"
+            value={passwordConfirm}
+            onChange={(e) => setPasswordConfirm(e.target.value)}
+            autoComplete="new-password"
+            required
+            error={errors.password_confirm}
+          />
+          <Button type="submit" loading={submitting} fullWidth>
+            {t("auth.register_button")}
+          </Button>
+          <p className="text-center text-sm text-fg-muted">
+            <Link to="/login" className="text-accent hover:underline">
               {t("auth.have_account")}
             </Link>
           </p>
-        </CardBody>
+        </form>
       </Card>
     </div>
   );