initial

frontend/src/pages/RegisterPage.tsx

@@ -0,0 +1,80 @@
+import { FormEvent, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
+import { authApi } from "@/api";
+import { useAuthStore } from "@/store/auth";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import { Card, CardBody } from "@/components/ui/Card";
+
+export function RegisterPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { setAuth } = useAuthStore();
+  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(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"));
+    } finally {
+      setLoading(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">
+              {t("auth.have_account")}
+            </Link>
+          </p>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}