81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|