- {/* --- Partie gauche : fond bleu + logo textuel + robot --- */}
-
-
- {/* Logo textuel */}
-
-
-
-
-
- {/* --- Partie droite : contenu dynamique (login/register) --- */}
-
+export default function AuthLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+ {/* --- Partie gauche : fond bleu + logo textuel + robot --- */}
+
+
+ {/* Logo textuel */}
+
+
- );
+
+
+ {/* --- Partie droite : contenu dynamique (login/register) --- */}
+
+
+ );
}
diff --git a/frontend/web/src/app/authentication/login/page.tsx b/frontend/web/src/app/authentication/login/page.tsx
index 2c9d5b6..56ae449 100644
--- a/frontend/web/src/app/authentication/login/page.tsx
+++ b/frontend/web/src/app/authentication/login/page.tsx
@@ -1,83 +1,125 @@
-'use client';
+"use client";
-import { useRouter } from 'next/navigation';
-import { Button } from '@/component/ui/button';
-import { Input } from '@/component/ui/input';
-import { Label } from '@/component/ui/label';
-import { Mail, Eye } from 'lucide-react';
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "@/component/ui/button";
+import { Input } from "@/component/ui/input";
+import { Label } from "@/component/ui/label";
+import { Mail } from "lucide-react";
+import PasswordInput from "@/component/ui/password-input";
+import {
+ login,
+ type LoginSuccess,
+} from "@/lib/api/auth";
+import { saveUser } from "@/lib/session";
export default function LoginPage() {
- const router = useRouter();
+ const router = useRouter();
+ const [loading, setLoading] = useState(false);
+ const [err, setErr] = useState
(null);
- const handleSubmit = (e: React.FormEvent) => {
- e.preventDefault();
- router.push('/dashboard/upload');
- };
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setErr(null);
+ setLoading(true);
- return (
+ const email = (document.getElementById("email") as HTMLInputElement)?.value.trim();
+ const password = (document.getElementById("mot-password") as HTMLInputElement)?.value;
+
+ try {
+ const res = await login({ email, password });
+ const u = res as LoginSuccess;
+
+ saveUser({ id: u.id, email: u.email, fullName: u.fullName });
+
+ // 🔥 Le loader reste visible jusqu'à ce que la page change
+ router.push("/dashboard/upload");
+ } catch (e: unknown) {
+ const message =
+ e instanceof Error
+ ? e.message
+ : typeof e === "string"
+ ? e
+ : "Erreur réseau/serveur";
+
+ setErr(message);
+ setLoading(false); // on enlève le loader si erreur
+ }
+ };
+
+ return (
+
+
CONNEXION
+
+
+ Heureux de vous revoir, entrez vos identifiants pour vous connecter
+
+
+
+
+ {/* Sign up link */}
+
+ Vous n'avez pas de compte ?{" "}
+
+ S'inscrire
+
+
+
+ {/*Loading overlay identique à celui de l’upload */}
+ {loading && (
+
+
+
+
Connexion en cours…
+
- );
+ )}
+
>;
- const handleSubmit = (e: React.FormEvent) => {
- e.preventDefault();
- router.push('/dashboard/upload');
- };
+const cn = (...c: (string | false | undefined)[]) =>
+ c.filter(Boolean).join(" ");
- return (
+export default function RegisterPage() {
+ const router = useRouter();
+
+ // champs contrôlés
+ const [fullName, setFullName] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [confirm, setConfirm] = useState("");
+
+ const [errors, setErrors] = useState({});
+ const [loading, setLoading] = useState(false);
+ const [ok, setOk] = useState(null);
+
+ // --- Validations simples
+ const validate = (partial = false) => {
+ const e: FieldErrors = {};
+
+ if (!partial || fullName) {
+ if (!fullName.trim()) e.fullName = "Nom & prénoms requis.";
+ }
+ if (!partial || email) {
+ if (!email.trim()) e.email = "Email requis.";
+ else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+ e.email = "Email invalide.";
+ }
+ if (!partial || password) {
+ if (!password) e.password = "Mot de passe requis.";
+ else if (password.length < 8) e.password = "Au moins 8 caractères.";
+ }
+ if (!partial || confirm) {
+ if (!confirm) e.confirm = "Confirmation requise.";
+ else if (confirm !== password)
+ e.confirm = "Les mots de passe ne correspondent pas.";
+ }
+
+ setErrors((prev) => ({ ...prev, ...e }));
+ return e;
+ };
+
+ const onBlurField = (f: Field) => {
+ // validation légère champ par champ
+ if (f === "fullName")
+ setErrors((s) => ({
+ ...s,
+ fullName: fullName.trim() ? "" : "Nom & prénoms requis.",
+ }));
+ if (f === "email") {
+ const err = !email.trim()
+ ? "Email requis."
+ : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+ ? "Email invalide."
+ : "";
+ setErrors((s) => ({ ...s, email: err }));
+ }
+ if (f === "password") {
+ const err = !password
+ ? "Mot de passe requis."
+ : password.length < 8
+ ? "Au moins 8 caractères."
+ : "";
+ setErrors((s) => ({ ...s, password: err }));
+ }
+ if (f === "confirm") {
+ const err = !confirm
+ ? "Confirmation requise."
+ : confirm !== password
+ ? "Les mots de passe ne correspondent pas."
+ : "";
+ setErrors((s) => ({ ...s, confirm: err }));
+ }
+ };
+
+ const onSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setOk(null);
+ setErrors({}); // reset
+
+ const eAll = validate(); // validation complète
+ if (Object.values(eAll).some(Boolean)) return;
+
+ setLoading(true);
+ try {
+ const payload: SignupRequest = {
+ fullName: fullName.trim(),
+ email: email.trim(),
+ password,
+ };
+ const res = await signup(payload);
+
+ // Si le back renvoie { error } ou { fieldErrors: { email: ... } }
+ const anyRes: any = res;
+ if ((anyRes && anyRes.error) || (anyRes && anyRes.fieldErrors)) {
+ setErrors({
+ general: anyRes.error ?? "",
+ ...anyRes.fieldErrors,
+ });
+ return;
+ }
+
+ setOk(res.message ?? "Inscription réussie !");
+ setTimeout(() => router.replace("/authentication/login"), 800);
+ } catch (err: any) {
+ console.log("Error during : ", err);
+ // si le serveur renvoie HTML (DOCTYPE...), on masque par un message propre
+ setErrors({ general: "Erreur serveur. Réessayez dans un instant." });
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+ INSCRIPTION
+
+
+ Bienvenue sur StudyAI, veuillez remplir vos informations :
+
+
+
+
+
+ Vous avez un compte ?{" "}
+
+ Se connecter
+
+
+
+
-
Mot de passe mis à jour !
+
+ Mot de passe mis à jour !
+
- Vous pouvez maintenant créer un nouveau mot de passe pour votre compte.
- Confirmer pour continuer.
+ Vous pouvez maintenant créer un nouveau mot de passe pour votre
+ compte.
+ Confirmer pour continuer.
{
- e.preventDefault();
- router.push('/authentication/reset-password/ready');
- };
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ router.push("/authentication/reset-password/ready");
+ };
- return (
-
-
Créer un nouveau mot de passe
-
-
- Saisissez et confirmez votre nouveau mot de passe.
-
+ return (
+
+
+ Créer un nouveau mot de passe
+
-