feat: frontend core — auth, layout, transactions, categories

2026-03-17 16:36:47 +00:00
parent 21339d771d
commit 9f7378cb69
16 changed files with 2042 additions and 5 deletions
@@ -0,0 +1,187 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { registerUser, loginUser, getMe, setClientTokens } from "../api/client";
+import { useAuthStore } from "../stores/auth";
+
+interface FormState {
+  full_name: string;
+  email: string;
+  password: string;
+}
+
+interface Errors {
+  full_name?: string;
+  email?: string;
+  password?: string;
+  global?: string;
+}
+
+export default function RegisterPage() {
+  const navigate = useNavigate();
+  const login = useAuthStore((s) => s.login);
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+  const [form, setForm] = useState<FormState>({
+    full_name: "",
+    email: "",
+    password: "",
+  });
+  const [errors, setErrors] = useState<Errors>({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (isAuthenticated) {
+    navigate("/", { replace: true });
+    return null;
+  }
+
+  function validate(): boolean {
+    const errs: Errors = {};
+    if (!form.full_name.trim() || form.full_name.trim().length < 2)
+      errs.full_name = "Nom complet requis (2 caractères minimum)";
+    if (!form.email) errs.email = "Email requis";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
+      errs.email = "Email invalide";
+    if (!form.password || form.password.length < 8)
+      errs.password = "Mot de passe requis (8 caractères minimum)";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!validate()) return;
+
+    setIsLoading(true);
+    setErrors({});
+    try {
+      await registerUser(form.email, form.password, form.full_name.trim());
+      // Auto-login after registration
+      const tokens = await loginUser(form.email, form.password);
+      setClientTokens(tokens.access_token, tokens.refresh_token);
+      const user = await getMe();
+      login(user, tokens.access_token, tokens.refresh_token);
+      navigate("/", { replace: true });
+    } catch (err) {
+      const isConflict =
+        err instanceof Error && err.message.toLowerCase().includes("409");
+      setErrors({
+        global: isConflict
+          ? "Cet email est déjà utilisé"
+          : "Erreur lors de l'inscription, veuillez réessayer",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
+      <div className="w-full max-w-sm">
+        <div className="mb-8 text-center">
+          <h1 className="text-2xl font-bold text-slate-800">Budget Tracker</h1>
+          <p className="mt-1 text-sm text-slate-500">Créez votre compte</p>
+        </div>
+
+        <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
+          {errors.global && (
+            <div className="mb-4 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">
+              {errors.global}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+            <div>
+              <label
+                htmlFor="full_name"
+                className="mb-1.5 block text-sm font-medium text-slate-700"
+              >
+                Nom complet
+              </label>
+              <input
+                id="full_name"
+                type="text"
+                autoComplete="name"
+                value={form.full_name}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, full_name: e.target.value }))
+                }
+                className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                  errors.full_name ? "border-red-400" : "border-slate-200"
+                }`}
+                placeholder="Jean Dupont"
+              />
+              {errors.full_name && (
+                <p className="mt-1 text-xs text-red-500">{errors.full_name}</p>
+              )}
+            </div>
+
+            <div>
+              <label
+                htmlFor="email"
+                className="mb-1.5 block text-sm font-medium text-slate-700"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                autoComplete="email"
+                value={form.email}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, email: e.target.value }))
+                }
+                className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                  errors.email ? "border-red-400" : "border-slate-200"
+                }`}
+                placeholder="vous@exemple.com"
+              />
+              {errors.email && (
+                <p className="mt-1 text-xs text-red-500">{errors.email}</p>
+              )}
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                className="mb-1.5 block text-sm font-medium text-slate-700"
+              >
+                Mot de passe
+              </label>
+              <input
+                id="password"
+                type="password"
+                autoComplete="new-password"
+                value={form.password}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, password: e.target.value }))
+                }
+                className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                  errors.password ? "border-red-400" : "border-slate-200"
+                }`}
+                placeholder="8 caractères minimum"
+              />
+              {errors.password && (
+                <p className="mt-1 text-xs text-red-500">{errors.password}</p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full rounded-lg bg-primary py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
+            >
+              {isLoading ? "Inscription…" : "Créer mon compte"}
+            </button>
+          </form>
+        </div>
+
+        <p className="mt-4 text-center text-sm text-slate-500">
+          Déjà un compte ?{" "}
+          <Link to="/login" className="font-medium text-primary hover:underline">
+            Se connecter
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}