feat(04-01): redesign RegisterPage to match LoginPage visual treatment
- Change background from bg-background to bg-muted/60 - Add border-t-4 border-t-primary shadow-lg card accent - Add favicon.svg logo above CardTitle - Add auth.registerSubtitle below title - Add pb-4 to CardHeader for consistent spacing with LoginPage
This commit is contained in:
83
src/pages/RegisterPage.tsx
Normal file
83
src/pages/RegisterPage.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { useState } from "react"
|
||||
import { Link, useNavigate } from "react-router-dom"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { useAuth } from "@/hooks/useAuth"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
|
||||
export default function RegisterPage() {
|
||||
const { t } = useTranslation()
|
||||
const { signUp } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [email, setEmail] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [error, setError] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError("")
|
||||
setLoading(true)
|
||||
try {
|
||||
await signUp(email, password)
|
||||
navigate("/")
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : t("common.error"))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-muted/60 p-4">
|
||||
<Card className="w-full max-w-sm border-t-4 border-t-primary shadow-lg">
|
||||
<CardHeader className="text-center pb-4">
|
||||
<img src="/favicon.svg" alt="" className="mx-auto mb-3 size-10" aria-hidden="true" />
|
||||
<CardTitle className="text-2xl">{t("app.title")}</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">{t("auth.registerSubtitle")}</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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="password">{t("auth.password")}</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
)}
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{t("auth.register")}
|
||||
</Button>
|
||||
</form>
|
||||
<p className="mt-4 text-center text-sm text-muted-foreground">
|
||||
{t("auth.hasAccount")}{" "}
|
||||
<Link to="/login" className="text-primary underline">
|
||||
{t("auth.login")}
|
||||
</Link>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user