Gabriel Kaszewski
0ee2e04fe5
- merge lib/api/* + hooks/use-* → features/* domain modules - log-sheet + edit-review-sheet → review-sheet with mode discriminant - index.tsx → feed-tab, watchlist-tab, queue-tab - social actor-list pattern → ActorList component - movie detail inline sections → community-reviews, viewing-history
62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
import { createFileRoute, useNavigate, Link } from "@tanstack/react-router"
|
|
import { useState } from "react"
|
|
import { useTranslation } from "react-i18next"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { useRegister } from "@/features/auth"
|
|
|
|
export const Route = createFileRoute("/register")({
|
|
component: RegisterPage,
|
|
})
|
|
|
|
function RegisterPage() {
|
|
const { t } = useTranslation()
|
|
const navigate = useNavigate()
|
|
const registerMutation = useRegister()
|
|
const [email, setEmail] = useState("")
|
|
const [username, setUsername] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
registerMutation.mutate(
|
|
{ email, username, password },
|
|
{ onSuccess: () => navigate({ to: "/login" }) },
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-svh items-center justify-center p-6">
|
|
<div className="w-full max-w-sm space-y-6">
|
|
<div className="text-center">
|
|
<h1 className="text-2xl font-bold tracking-tight">{t("auth.title")}</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">{t("auth.registerHeading")}</p>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">{t("auth.email")}</Label>
|
|
<Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoComplete="email" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username">{t("auth.username")}</Label>
|
|
<Input id="username" value={username} onChange={(e) => setUsername(e.target.value)} required autoComplete="username" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">{t("auth.password")}</Label>
|
|
<Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required autoComplete="new-password" />
|
|
</div>
|
|
{registerMutation.error && <p className="text-sm text-destructive">{t("auth.registerError")}</p>}
|
|
<Button type="submit" className="w-full" disabled={registerMutation.isPending}>
|
|
{registerMutation.isPending ? t("auth.creating") : t("auth.createAccount")}
|
|
</Button>
|
|
</form>
|
|
<p className="text-center text-sm text-muted-foreground">
|
|
{t("auth.hasAccount")}{" "}
|
|
<Link to="/login" className="font-medium text-primary underline">{t("auth.logIn")}</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|