From 8bb62b8842f1576ad1dbb6000cb5461844967fff Mon Sep 17 00:00:00 2001
From: Jerry Kwok <jerrykwok7@gmail.com>
Date: Sun, 29 Sep 2024 15:07:16 -0400
Subject: [PATCH 1/2] frontend connexion page

---
 client/src/App.tsx                            |  6 ++
 .../src/pages/AuthSelection/AuthSelection.tsx | 92 +++++++++++++++++++
 .../src/pages/AuthSelection/authselection.css | 63 +++++++++++++
 client/src/pages/Home/Home.tsx                |  7 ++
 client/src/pages/Home/home.css                | 19 ++++
 5 files changed, 187 insertions(+)
 create mode 100644 client/src/pages/AuthSelection/AuthSelection.tsx
 create mode 100644 client/src/pages/AuthSelection/authselection.css

diff --git a/client/src/App.tsx b/client/src/App.tsx
index ab9ddff..52a2cc0 100644
--- a/client/src/App.tsx
+++ b/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>
diff --git a/client/src/pages/AuthSelection/AuthSelection.tsx b/client/src/pages/AuthSelection/AuthSelection.tsx
new file mode 100644
index 0000000..d619c7f
--- /dev/null
+++ b/client/src/pages/AuthSelection/AuthSelection.tsx
@@ -0,0 +1,92 @@
+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);
+    };
+    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={() => console.log(`${providerKey} OAuth Login Clicked`)}>
+                                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 oidc-btn" onClick={() => console.log(`${providerKey} OIDC Login Clicked`)}>
+                                Continuer avec {providerKey}
+                            </button>
+                        );
+                    }
+                    return null;
+                })}
+            </div>
+            <div>
+                <button className="home-button-container" onClick={() => navigate('/')}>Retour à l'accueil</button>
+            </div>
+        </div>
+    );
+};
+export default AuthSelection;
\ No newline at end of file
diff --git a/client/src/pages/AuthSelection/authselection.css b/client/src/pages/AuthSelection/authselection.css
new file mode 100644
index 0000000..f1da0c3
--- /dev/null
+++ b/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;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Home/Home.tsx b/client/src/pages/Home/Home.tsx
index b2abf1f..bc0cfc9 100644
--- a/client/src/pages/Home/Home.tsx
+++ b/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">
diff --git a/client/src/pages/Home/home.css b/client/src/pages/Home/home.css
index 1fc8a8d..8a6a1a7 100644
--- a/client/src/pages/Home/home.css
+++ b/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;

From e51f29c5d2dcce560bc0acd999b2fc692b9c928d Mon Sep 17 00:00:00 2001
From: MathieuSevignyLavallee
 <89943988+MathieuSevignyLavallee@users.noreply.github.com>
Date: Sun, 29 Sep 2024 16:37:08 -0400
Subject: [PATCH 2/2] ajusted button to redirect to good route

---
 client/src/pages/AuthSelection/AuthSelection.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/AuthSelection/AuthSelection.tsx b/client/src/pages/AuthSelection/AuthSelection.tsx
index d619c7f..b623a90 100644
--- a/client/src/pages/AuthSelection/AuthSelection.tsx
+++ b/client/src/pages/AuthSelection/AuthSelection.tsx
@@ -28,6 +28,10 @@ const AuthSelection: React.FC = () => {
         // 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>
@@ -60,7 +64,7 @@ const AuthSelection: React.FC = () => {
                     const provider = authData[providerKey];
                     if (provider.type === 'oauth') {
                         return (
-                            <button key={providerKey} className="provider-btn oauth-btn" onClick={() => console.log(`${providerKey} OAuth Login Clicked`)}>
+                            <button key={providerKey} className="provider-btn oauth-btn" onClick={() => handleAuthLogin(providerKey)}>
                                 Continuer avec {providerKey}
                             </button>
                         );
@@ -75,7 +79,7 @@ const AuthSelection: React.FC = () => {
                     const provider = authData[providerKey];
                     if (provider.type === 'oidc') {
                         return (
-                            <button key={providerKey} className="provider-btn oidc-btn" onClick={() => console.log(`${providerKey} OIDC Login Clicked`)}>
+                            <button key={providerKey} className="provider-btn oauth-btn" onClick={() => handleAuthLogin(providerKey)}>
                                 Continuer avec {providerKey}
                             </button>
                         );