Update frontend/src/components/Login.jsx

frontend/src/components/Login.jsx

@@ -1,36 +1,101 @@
-import React from 'react'
-import '../login.css'; 
-
-
-const Login = ({toSignin}) => {
-
-    
-
-  return (
-    <div className='login'>
-        <h1 className='title-1'>Te voilà de retour sur Medic.ial !</h1>
-        <div className="container">
-            <div className='container-form'>
-                <form action="" className='form'>
-                    <h3>CONNEXION</h3>
-                    <div className='form-container-input'>
-                        <p className='form-title'>Adresse email</p>
-                        <input type='mail' className='form-input'/>
-                    </div>
-                    <div className='form-container-input'>
-                        <p className='form-title'>Mot de passe</p>
-                        <input type='password' className='form-input'/>
-                    </div>
-                    <div className='form-container-submit'>
-                        <button type="submit">Connexion</button>
-                        <p>Mot de passe oublié?</p>
-                    </div>
-                </form>
-            </div>
-        </div>
-        <p className='title-2'>Pas encore de compte ? <span onClick={toSignin}>S'inscrire</span></p>
-    </div>
-  )
-}
-
+import React, { useState } from 'react'
+import '../login.css';
+
+const Login = ({toSignin, onLoginSuccess}) => {
+    // États pour les champs du formulaire
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    
+    // Gérer la soumission du formulaire
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError('');
+        setIsLoading(true);
+        
+        try {
+            const response = await fetch('/api/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include',  // Important pour accepter les cookies!
+                body: JSON.stringify({
+                    email,
+                    password
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok) {
+                // Stockage du nom d'utilisateur dans localStorage
+                localStorage.setItem('userName', data.username);
+                localStorage.setItem('userId', data.user_id);
+                
+                // Informer le composant parent que la connexion est réussie
+                if (onLoginSuccess) {
+                    onLoginSuccess();
+                }
+                
+            } else {
+                setError(data.detail || 'Identifiants incorrects');
+            }
+        } catch (err) {
+            setError('Erreur de connexion au serveur');
+            console.error(err);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className='login'>
+            <h1 className='title-1'>Te voilà de retour sur Medic.ial !</h1>
+            <div className="container">
+                <div className='container-form'>
+                    <form onSubmit={handleSubmit} className='form'>
+                        <h3>CONNEXION</h3>
+                        
+                        {/* Afficher les erreurs */}
+                        {error && <div className="error-message">{error}</div>}
+                        
+                        <div className='form-container-input'>
+                            <p className='form-title'>Adresse email</p>
+                            <input 
+                                type='email' 
+                                className='form-input'
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                required
+                            />
+                        </div>
+                        <div className='form-container-input'>
+                            <p className='form-title'>Mot de passe</p>
+                            <input 
+                                type='password' 
+                                className='form-input'
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                            />
+                        </div>
+                        <div className='form-container-submit'>
+                            <button 
+                                type="submit" 
+                                disabled={isLoading}
+                            >
+                                {isLoading ? 'Connexion...' : 'Connexion'}
+                            </button>
+                            <p>Mot de passe oublié?</p>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <p className='title-2'>Pas encore de compte ? <span onClick={toSignin}>S'inscrire</span></p>
+        </div>
+    )
+}
+
 export default Login