Handle login errors

src/components/loginform/loginForm.jsx

@@ -2,20 +2,25 @@ import { useState, useContext } from "react";
 import styles from "./loginForm.module.css";
 import Button from "../ui/button/button.jsx";
 import Input from "../ui/input/input.jsx";
+import Modal from "../ui/modal/modal.jsx";
 import { useNavigate } from "react-router";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 
 
 function LoginForm({ className }) {
+
+
+    const navigate = useNavigate();
+    const { login } = useContext(AuthContext);
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
-    let navigate = useNavigate();
-    const { login } = useContext(AuthContext);
+    const [open , setOpen] = useState(false);
+
+    async function handleSubmit() {
+        const res = await login(email, password);
+        if (res.status === 401 || res.status === 422) setOpen(true);
+        else navigate("/");
 
-    async function handleSubmit(e) {
-        e.preventDefault();
-        await login(email, password);
-        navigate("/");
     }
 
     return (
@@ -37,6 +42,10 @@ function LoginForm({ className }) {
                 <Button variant={"transparent"} onClick={() => navigate("/register")}>Vous n'avez pas de compte ?</Button>
                 <Button onClick={handleSubmit} variant={"default"}> Se connecter </Button>
             </div>
+
+            <Modal title={"Impossible de se connecter"} open={open} onClose={() => setOpen(false)}>
+                <p>L'Email ou le mot de passe est incorrect</p>
+            </Modal>
         </div>
     );
 }

src/contexts/auth/authProvider.jsx

@@ -19,12 +19,12 @@ export function AuthProvider({ children }) {
 
     const login = async (email, password) => {
         const res = await loginFunction(email, password);
-        if (!res || res.status !== 200) throw new Error("Login error");
-        const u = await getUser();
-        setUser(u);
+        const u = res.status === 200 ? await getUser() : null;
+        if (u) setUser(u);
         return res;
     };
 
+
     const logout = async () => {
         await logoutFunction();
         setUser(null);

src/utils/auth/login.js

@@ -15,17 +15,18 @@ export default async function login(email, password) {
             body: JSON.stringify({ email, password })
         });
 
-        console.log('Code HTTP :', response.status);
+        const data = await response.json();
 
         if (!response.ok) {
-            throw new Error(`Erreur HTTP ${response.status}`);
+            return {
+                status: response.status,
+                errors: data.errors || data.message
+            };
         }
 
-        const data = await response.json();
-        console.log('Connexion réussie ! Données utilisateur :', data);
-
         return { status: response.status, data };
+
     } catch (error) {
-        return error;
+        return { status: 500, error };
     }
 }