rebase

frontend/src/pages/AdminRegisterPage.tsx

@@ -0,0 +1,119 @@
+import { useState, type FormEvent } from "react";
+import { useNavigate, Link, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+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 } from "@/components/ui/Card";
+
+export function AdminRegisterPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const registerAdmin = useAuthStore((s) => s.registerAdmin);
+  const pushToast = useToastStore((s) => s.push);
+
+  const initialToken = searchParams.get("token") || "";
+  const [token, setToken] = useState(initialToken);
+  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordConfirm, setPasswordConfirm] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validate = (): boolean => {
+    const next: Record<string, string> = {};
+    if (!token.trim()) next.token = t("errors.validation");
+    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();
+    if (!validate()) return;
+    setSubmitting(true);
+    try {
+      await registerAdmin({
+        token: token.trim(),
+        email: email.trim(),
+        username: username.trim(),
+        password,
+        password_confirm: passwordConfirm,
+      });
+      pushToast("success", t("auth.admin_register_success"));
+      navigate("/login");
+    } catch (err) {
+      const msg = err instanceof ApiError ? err.message : t("auth.register_failed");
+      pushToast("error", msg);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <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.admin_register_title")}>
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <Input
+            label={t("auth.admin_token")}
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+            required
+            error={errors.token}
+            hint="Provided by an existing administrator."
+          />
+          <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>
+        </form>
+      </Card>
+    </div>
+  );
+}