barre menu en haut + ajustement style

front_end/src/components/login.tsx

@@ -1,49 +1,27 @@
 import { useKeycloak } from '@react-keycloak/web'
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Admin, Athlete, Coach, User } from '../classes';
 import { useLocalData } from '../context/useLocalData';
 import { loginOrRegister, postAthlete } from '../requetes';
 import { clearAuthToken, setAuthToken } from '../api';
 import { AthleteDTO } from '../classesDTO';
+import { Modal } from './Modal';
+import './style/topBar.css';
 
 export const Login =() =>{
     const {user,setUser} = useLocalData()
     const { keycloak } = useKeycloak();
+    const [open,setOpen] = useState<boolean>(false);
 
-    /*useEffect(() => {
-        const syncAndLoadUser = async () => {
-            if (keycloak.authenticated && keycloak.token && keycloak.tokenParsed) {
-                try {
-                    const newAthlete: Athlete = new Athlete();
-                    newAthlete.keycloakId = keycloak.tokenParsed.sub || "";
-                    newAthlete.email = keycloak.tokenParsed.email || "";
-                    newAthlete.nom = keycloak.tokenParsed.family_name || "";
-                    newAthlete.prenom = keycloak.tokenParsed.given_name || "";
-                    
-                    setAuthToken(keycloak.token);
-                    
-                    const athlete: Athlete = await postAthlete(newAthlete);
-                    setUser(athlete);
-                } catch (error) {
-                    console.error("Error :", error);
-                }
-            }
-        };
-
-        syncAndLoadUser();
-    }, [keycloak.authenticated, keycloak.token, setUser]);
-    */
 
     async function loginUser(){
         if(keycloak.authenticated){
             setAuthToken(keycloak.token);
-            //alert("Connexion en cours : " + keycloak.tokenParsed?.sub + " " + keycloak.tokenParsed?.realm_access?.roles);
             
             const logedUser = await loginOrRegister(keycloak);
             console.log(logedUser);
             if(logedUser!==null){
                 setUser(logedUser);
-               // alert("Connexion avec succès ! " + keycloak.tokenParsed?.sub);
             }
             else{
                 alert("Erreur de connexion " + keycloak.tokenParsed?.sub + " " + keycloak.tokenParsed?.realm_access?.roles);
@@ -63,37 +41,51 @@ export const Login =() =>{
         keycloak.logout()
         setUser(new User());
         clearAuthToken();
+        setOpen(false);
     }
+
+    function handleOpen(): void {
+        setOpen(!open);
+    }
+
+    if(keycloak.authenticated){
     return(
-        <div>
-            <div>
-                Etat : {keycloak.authenticated ? 'connecté' : 'non connecté'}
+            <div className='loginContainer'>
+                <button className="loginButton" onClick={()=>handleOpen()}>{user.prenom}</button>
+                {open &&
+                <div className='login'>
+                    <div>
+                        <div>
+                            Prenom : { user.prenom}
+                        </div>
+                        <div>
+                            Nom : { user.nom}
+                        </div>
+                        {/* <div>Keycloak ID : { keycloak.tokenParsed?.sub}</div> */}
+                        {user instanceof Athlete && <div>Role : Athlete</div>}
+                        {user instanceof Coach && <div>Role : Coach</div>}
+                        {user instanceof Admin && <div>Role : Admin</div>}
+                    
+                    </div>
+
+                    <button onClick={() => handleLogout()}>
+                        Se déconnecter
+                    </button>
+                </div>
+                }
             </div>
-            {keycloak.authenticated &&
+        )
+    }
+    else{
+        return(
             <div>
-                <div>
-                    Keycloak ID : { keycloak.tokenParsed?.sub}
-                </div>
-                 <div>
-                    Prenom : { user.prenom}
-                </div>
-                <div>
-                    Nom : { user.nom}
-                </div>
-                {user instanceof Athlete && <div>Role : Athlete</div>}
-                {user instanceof Coach && <div>Role : Coach</div>}
-                {user instanceof Admin && <div>Role : Admin</div>}
-            
+                <button onClick={() => handleLogin()}>
+                    Se connecter
+                </button>
             </div>
-            }
-            <button onClick={() => handleLogin()}>
-                Se connecter
-            </button>
-            <button onClick={() => handleLogout()}>
-                Se déconnecter
-            </button>
-        </div>
-    )
+        )
+    }
+    
 }
 
 export default Login