Merge pull request #141 from ets-cfuhrman-pfe/dev-it1-connexion-page

frontend connexion page

client/src/App.tsx

@@ -16,6 +16,9 @@ import QuizForm from './pages/Teacher/EditorQuiz/EditorQuiz';
 // Pages espace étudiant
 import JoinRoom from './pages/Student/JoinRoom/JoinRoom';
 
+// Pages authentification selection
+import AuthSelection from './pages/AuthSelection/AuthSelection';
+
 // Header/Footer import
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
@@ -55,6 +58,9 @@ function App() {
 
                         {/* Pages espace étudiant */}
                         <Route path="/student/join-room" element={<JoinRoom />} />
+
+                        {/* Pages authentification selection */}
+                        <Route path="/auth-selection" element={<AuthSelection />} />
                     </Routes>
                 </main>
             </div>

client/src/pages/AuthSelection/AuthSelection.tsx

@@ -0,0 +1,96 @@
+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 () => {
+            try {
+                const response = await fetch('http://localhost:3000/api/auth/getActiveAuth');
+                const data = await response.json();
+                console.log('Auth Data:', data); // Affichage dans la console
+                setAuthData(data.authActive); // Stocke les données dans l'état
+            } catch (error) {
+                console.error('Erreur lors de la récupération des données d\'auth:', error);
+            }
+        };
+        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;
+    };
+
+    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>
+            {/* 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>
+            {/* 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>
+            <div>
+                <button className="home-button-container" onClick={() => navigate('/')}>Retour à l'accueil</button>
+            </div>
+        </div>
+    );
+};
+export default AuthSelection;

client/src/pages/AuthSelection/authselection.css

@@ -0,0 +1,63 @@
+.auth-selection-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+  }
+  h1 {
+    margin-bottom: 20px;
+  }
+  .form-container,
+  .oauth-container,
+  .oidc-container {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 10px 0;
+    width: 400px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+  }
+  form {
+    display: flex;
+    flex-direction: column;
+  }
+  input {
+    margin: 5px 0;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  button {
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    background-color: #5271ff;
+    color: white;
+    cursor: pointer;
+  }
+  button:hover {
+    background-color: #5271ff;
+  }
+  .home-button-container{
+    background: none;
+    color: black;
+  }
+  .home-button-container:hover{
+    background: none;
+    color: black;
+    text-decoration: underline;
+  }
+  .provider-btn {
+    background-color: #ffffff;
+    border: 1px solid #ccc;
+    color: black;
+    margin: 4px 0 4px 0;
+  }
+  .provider-btn:hover {
+    background-color: #dbdbdb;
+    border: 1px solid #ccc;
+    color: black;
+    margin: 4px 0 4px 0;
+  }
+  

client/src/pages/Home/Home.tsx

@@ -6,6 +6,13 @@ import { Link } from 'react-router-dom';
 const Home: React.FC = () => {
     return (
         <div className="page">
+
+            <div className="auth-selection-btn">
+                <Link to="/auth-selection">
+                    <button className="auth-btn">Connexion</button>
+                </Link>
+            </div>
+            
             <div className="btn-container">
 
                 <Link to="/student/join-room" className="student-btn">

client/src/pages/Home/home.css

@@ -61,6 +61,25 @@
     align-items: end;
 }
 
+.auth-selection-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+.auth-btn {
+    padding: 10px 20px;
+    background-color: #5271ff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.3s ease;
+}
+.auth-btn:hover {
+    background-color: #5976fa;
+}
+
 @media only screen and (max-width: 768px) {
     .btn-container {
         flex-direction: column;