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 } from 'react-router-dom';
+import { Routes, Route, Navigate } 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 />} />
-                        <Route path="/teacher/editor-quiz/:id" element={<QuizForm />} />
-                        <Route path="/teacher/manage-room/:id" element={<ManageRoom />} />
+
+                        {/* Routes protégées : redirection si l'utilisateur n'est pas connecté */}
+                        <Route
+                            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">
-                <form onSubmit={handleSimpleLoginSubmit}>
-                    <input
-                        type="text"
-                        name="username"
-                        placeholder="Nom d'utilisateur"
-                        value={simpleLoginData.username}
-                        onChange={handleSimpleLoginChange}
-                        required
-                    />
-                    <input
-                        type="password"
-                        name="password"
-                        placeholder="Mot de passe"
-                        value={simpleLoginData.password}
-                        onChange={handleSimpleLoginChange}
-                        required
-                    />
-                    <button type="submit">Se connecter</button>
-                </form>
-            </div>
+            
+            {/* Formulaire de connexion Simple Login */}
+            {authData && authData['simple-login'] && (
+                <div className="form-container">
+                    <form onSubmit={handleSimpleLoginSubmit}>
+                        <input
+                            type="text"
+                            name="username"
+                            placeholder="Nom d'utilisateur"
+                            value={simpleLoginData.username}
+                            onChange={handleSimpleLoginChange}
+                            required
+                        />
+                        <input
+                            type="password"
+                            name="password"
+                            placeholder="Mot de passe"
+                            value={simpleLoginData.password}
+                            onChange={handleSimpleLoginChange}
+                            required
+                        />
+                        <button type="submit">Se connecter</button>
+                    </form>
+                </div>
+            )}
+            
             {/* Conteneur OAuth */}
-            <div className="oauth-container">
-                <h2>Se connecter avec OAuth</h2>
-                {authData && Object.keys(authData).map((providerKey) => {
-                    const provider = authData[providerKey];
-                    if (provider.type === 'oauth') {
-                        return (
-                            <button key={providerKey} className="provider-btn oauth-btn" onClick={() => handleAuthLogin(providerKey)}>
-                                Continuer avec {providerKey}
-                            </button>
-                        );
-                    }
-                    return null;
-                })}
-            </div>
+            {authData && Object.keys(authData).some(key => authData[key].type === 'oauth') && (
+                <div className="oauth-container">
+                    <h2>Se connecter avec OAuth</h2>
+                    {Object.keys(authData).map((providerKey) => {
+                        const provider = authData[providerKey];
+                        if (provider.type === 'oauth') {
+                            return (
+                                <button key={providerKey} className="provider-btn oauth-btn" onClick={() => handleAuthLogin(providerKey)}>
+                                    Continuer avec {providerKey}
+                                </button>
+                            );
+                        }
+                        return null;
+                    })}
+                </div>
+            )}
+
             {/* Conteneur OIDC */}
-            <div className="oidc-container">
-                <h2>Se connecter avec OIDC</h2>
-                {authData && Object.keys(authData).map((providerKey) => {
-                    const provider = authData[providerKey];
-                    if (provider.type === 'oidc') {
-                        return (
-                            <button key={providerKey} className="provider-btn oauth-btn" onClick={() => handleAuthLogin(providerKey)}>
-                                Continuer avec {providerKey}
-                            </button>
-                        );
-                    }
-                    return null;
-                })}
-            </div>
+            {authData && Object.keys(authData).some(key => authData[key].type === 'oidc') && (
+                <div className="oidc-container">
+                    <h2>Se connecter avec OIDC</h2>
+                    {Object.keys(authData).map((providerKey) => {
+                        const provider = authData[providerKey];
+                        if (provider.type === 'oidc') {
+                            return (
+                                <button key={providerKey} className="provider-btn oidc-btn" onClick={() => handleAuthLogin(providerKey)}>
+                                    Continuer avec {providerKey}
+                                </button>
+                            );
+                        }
+                        return null;
+                    })}
+                </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;