Petit ajustement

Petit ajustement du frontend pour l'affichage des options disponibles et la restriction des routes en fonction de la connexion. Enlever la nécessité du token pour récupérer les authActive, puisqu'on n'est pas encore connecté à ce stade.

client/src/App.tsx

@@ -1,5 +1,4 @@
-// App.tsx
+import { Routes, Route, Navigate } from 'react-router-dom';
-import { Routes, Route } from 'react-router-dom';
 
 // Page main
 import Home from './pages/Home/Home';
@@ -27,20 +26,16 @@ import ApiService from './services/ApiService';
 
 const handleLogout = () => {
     ApiService.logout();
-}
+};
 
 const isLoggedIn = () => {
     return ApiService.isLoggedIn();
-}
+};
 
 function App() {
     return (
         <div className="content">
-            
+            <Header isLoggedIn={isLoggedIn} handleLogout={handleLogout} />
-                <Header
-                isLoggedIn={isLoggedIn}
-                handleLogout={handleLogout}/>
-
             <div className="app">
                 <main>
                     <Routes>
@@ -51,20 +46,35 @@ function App() {
                         <Route path="/teacher/login" element={<Login />} />
                         <Route path="/teacher/register" element={<Register />} />
                         <Route path="/teacher/resetPassword" element={<ResetPassword />} />
-                        <Route path="/teacher/dashboard" element={<Dashboard />} />
+
-                        <Route path="/teacher/share/:id" element={<Share />} />
+                        {/* Routes protégées : redirection si l'utilisateur n'est pas connecté */}
-                        <Route path="/teacher/editor-quiz/:id" element={<QuizForm />} />
+                        <Route
-                        <Route path="/teacher/manage-room/:id" element={<ManageRoom />} />
+                            path="/teacher/dashboard"
+                            element={isLoggedIn() ? <Dashboard /> : <Navigate to="/auth-selection" />}
+                        />
+                        <Route
+                            path="/teacher/share/:id"
+                            element={isLoggedIn() ? <Share /> : <Navigate to="/auth-selection" />}
+                        />
+                        <Route
+                            path="/teacher/editor-quiz/:id"
+                            element={isLoggedIn() ? <QuizForm /> : <Navigate to="/auth-selection" />}
+                        />
+                        <Route
+                            path="/teacher/manage-room/:id"
+                            element={isLoggedIn() ? <ManageRoom /> : <Navigate to="/auth-selection" />}
+                        />
 
                         {/* Pages espace étudiant */}
-                        <Route path="/student/join-room" element={<JoinRoom />} />
+                        <Route path="/student/join-room" element={isLoggedIn() ? <JoinRoom /> : <Navigate to="/auth-selection" />}
+                        />
 
-                        {/* Pages authentification selection */}
+                        {/* Pages authentification sélection */}
                         <Route path="/auth-selection" element={<AuthSelection />} />
                     </Routes>
                 </main>
             </div>
-                <Footer/>
+            <Footer />
         </div>
     );
 }

client/src/pages/AuthSelection/AuthSelection.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './authselection.css';
+
 const AuthSelection: React.FC = () => {
     const [simpleLoginData, setSimpleLoginData] = useState({ username: '', password: '' });
     const [authData, setAuthData] = useState<any>(null); // Stocke les données d'auth
     const navigate = useNavigate();
+
     // Récupérer les données d'authentification depuis l'API
     useEffect(() => {
         const fetchAuthData = async () => {
@@ -19,15 +21,18 @@ const AuthSelection: React.FC = () => {
         };
         fetchAuthData(); // Appel de la fonction pour récupérer les données
     }, []);
+
     const handleSimpleLoginChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
         setSimpleLoginData((prev) => ({ ...prev, [name]: value }));
     };
+
     const handleSimpleLoginSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         // Logique d'authentification pour Simple Login
         console.log('Simple Login Data:', simpleLoginData);
     };
+
     const handleAuthLogin = (provider: string) => {
         window.location.href = 'http://localhost:3000/api/auth/' + provider;
     };
@@ -35,62 +40,73 @@ const AuthSelection: React.FC = () => {
     return (
         <div className="auth-selection-page">
             <h1>Connexion</h1>
-            {/* Formulaire de connexion simple */}
+            
-            <div className="form-container">
+            {/* Formulaire de connexion Simple Login */}
-                <form onSubmit={handleSimpleLoginSubmit}>
+            {authData && authData['simple-login'] && (
-                    <input
+                <div className="form-container">
-                        type="text"
+                    <form onSubmit={handleSimpleLoginSubmit}>
-                        name="username"
+                        <input
-                        placeholder="Nom d'utilisateur"
+                            type="text"
-                        value={simpleLoginData.username}
+                            name="username"
-                        onChange={handleSimpleLoginChange}
+                            placeholder="Nom d'utilisateur"
-                        required
+                            value={simpleLoginData.username}
-                    />
+                            onChange={handleSimpleLoginChange}
-                    <input
+                            required
-                        type="password"
+                        />
-                        name="password"
+                        <input
-                        placeholder="Mot de passe"
+                            type="password"
-                        value={simpleLoginData.password}
+                            name="password"
-                        onChange={handleSimpleLoginChange}
+                            placeholder="Mot de passe"
-                        required
+                            value={simpleLoginData.password}
-                    />
+                            onChange={handleSimpleLoginChange}
-                    <button type="submit">Se connecter</button>
+                            required
-                </form>
+                        />
-            </div>
+                        <button type="submit">Se connecter</button>
+                    </form>
+                </div>
+            )}
+            
             {/* Conteneur OAuth */}
-            <div className="oauth-container">
+            {authData && Object.keys(authData).some(key => authData[key].type === 'oauth') && (
-                <h2>Se connecter avec OAuth</h2>
+                <div className="oauth-container">
-                {authData && Object.keys(authData).map((providerKey) => {
+                    <h2>Se connecter avec OAuth</h2>
-                    const provider = authData[providerKey];
+                    {Object.keys(authData).map((providerKey) => {
-                    if (provider.type === 'oauth') {
+                        const provider = authData[providerKey];
-                        return (
+                        if (provider.type === 'oauth') {
-                            <button key={providerKey} className="provider-btn oauth-btn" onClick={() => handleAuthLogin(providerKey)}>
+                            return (
-                                Continuer avec {providerKey}
+                                <button key={providerKey} className="provider-btn oauth-btn" onClick={() => handleAuthLogin(providerKey)}>
-                            </button>
+                                    Continuer avec {providerKey}
-                        );
+                                </button>
-                    }
+                            );
-                    return null;
+                        }
-                })}
+                        return null;
-            </div>
+                    })}
+                </div>
+            )}
+
             {/* Conteneur OIDC */}
-            <div className="oidc-container">
+            {authData && Object.keys(authData).some(key => authData[key].type === 'oidc') && (
-                <h2>Se connecter avec OIDC</h2>
+                <div className="oidc-container">
-                {authData && Object.keys(authData).map((providerKey) => {
+                    <h2>Se connecter avec OIDC</h2>
-                    const provider = authData[providerKey];
+                    {Object.keys(authData).map((providerKey) => {
-                    if (provider.type === 'oidc') {
+                        const provider = authData[providerKey];
-                        return (
+                        if (provider.type === 'oidc') {
-                            <button key={providerKey} className="provider-btn oauth-btn" onClick={() => handleAuthLogin(providerKey)}>
+                            return (
-                                Continuer avec {providerKey}
+                                <button key={providerKey} className="provider-btn oidc-btn" onClick={() => handleAuthLogin(providerKey)}>
-                            </button>
+                                    Continuer avec {providerKey}
-                        );
+                                </button>
-                    }
+                            );
-                    return null;
+                        }
-                })}
+                        return null;
-            </div>
+                    })}
+                </div>
+            )}
+
             <div>
                 <button className="home-button-container" onClick={() => navigate('/')}>Retour à l'accueil</button>
             </div>
         </div>
     );
 };
+
 export default AuthSelection;

server/routers/auth.js

@@ -4,6 +4,6 @@ const jwt = require('../middleware/jwtToken.js');
 
 const authController = require('../controllers/auth.js')
 
-router.get("/getActiveAuth",jwt.authenticate, authController.getActive);
+router.get("/getActiveAuth",authController.getActive);
 
 module.exports = router;