From 0ff9939789234b122f48ca77e4a4d56b9257480d Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Tue, 17 Mar 2026 16:10:19 +0100
Subject: [PATCH] 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
---
 src/pages/RegisterPage.tsx | 83 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/pages/RegisterPage.tsx

diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
new file mode 100644
index 0000000..8011cba
--- /dev/null
+++ b/src/pages/RegisterPage.tsx
@@ -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>
+  )
+}