gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor/regrouping of auth providers.

Browse source 
bug fix pour les refresh des routes si le users est connecté.

Reste a voir si on delete les page login/register/reset dans le dossier pages/teacher.
This commit is contained in:
MathieuSevignyLavallee 2024-10-15 19:49:44 -04:00
parent 7edce8ba9e
commit 1eff386da8
20 changed files with 366 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
client/src/App.tsx
View file

@ -1,4 +1,5 @@
import { Routes, Route, Navigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
// Page main
import Home from './pages/Home/Home';
@ -6,9 +7,8 @@ import Home from './pages/Home/Home';
// Pages espace enseignant
import Dashboard from './pages/Teacher/Dashboard/Dashboard';
import Share from './pages/Teacher/Share/Share';
import Login from './pages/Teacher/Login/Login';
import Register from './pages/Teacher/Register/Register';
import ResetPassword from './pages/Teacher/ResetPassword/ResetPassword';
import Register from './pages/AuthSelection/providers/SimpleLogin/Register';
import ResetPassword from './pages/AuthSelection/providers/SimpleLogin/ResetPassword';
import ManageRoom from './pages/Teacher/ManageRoom/ManageRoom';
import QuizForm from './pages/Teacher/EditorQuiz/EditorQuiz';
@ -16,29 +16,38 @@ import QuizForm from './pages/Teacher/EditorQuiz/EditorQuiz';
import JoinRoom from './pages/Student/JoinRoom/JoinRoom';
// Pages authentification selection
import AuthSelection from './pages/AuthSelection/AuthSelection';
import AuthDrawer from './pages/AuthSelection/AuthDrawer';
// Header/Footer import
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import ApiService from './services/ApiService';
import OAuthCallback from './pages/AuthSelection/AuthCallback';
import OAuthCallback from './pages/AuthSelection/callback/AuthCallback';
const handleLogout = () => {
ApiService.logout();
};
const App: React.FC = () => {
const [isAuthenticated, setIsAuthenticated] = useState(ApiService.isLoggedIn()); // Initial check
const location = useLocation(); // Hook to detect route changes
const isLoggedIn = () => {
const test = ApiService.isLoggedIn();
console.log("App.tsx: " + test);
return test;
};
// Check login status every time the route changes
useEffect(() => {
const checkLoginStatus = () => {
const loggedIn = ApiService.isLoggedIn();
setIsAuthenticated(loggedIn); // Update state if login status changes
console.log('App.tsx - Login status:', loggedIn);
};
checkLoginStatus(); // Check login status whenever the route changes
}, [location]); // Re-run when the location (route) changes
const handleLogout = () => {
ApiService.logout();
setIsAuthenticated(false); // Ensure we log out the user in the state as well
};
function App() {
return (
<div className="content">
<Header isLoggedIn={isLoggedIn} handleLogout={handleLogout} />
<Header isLoggedIn={isAuthenticated} handleLogout={handleLogout} />
<div className="app">
<main>
<Routes>
@ -46,43 +55,46 @@ function App() {
<Route path="/" element={<Home />} />
{/* Pages espace enseignant */}
<Route path="/teacher/login" element={<Login />} />
<Route path="/teacher/register" element={<Register />} />
<Route path="/teacher/resetPassword" element={<ResetPassword />} />
{/* Routes protégées : redirection si l'utilisateur n'est pas connecté */}
<Route
path="/teacher/dashboard"
element={isLoggedIn() ? <Dashboard /> : <Navigate to="/auth-selection" />}
element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />}
/>
<Route
path="/teacher/share/:id"
element={isLoggedIn() ? <Share /> : <Navigate to="/auth-selection" />}
element={isAuthenticated ? <Share /> : <Navigate to="/login" />}
/>
<Route
path="/teacher/editor-quiz/:id"
element={isLoggedIn() ? <QuizForm /> : <Navigate to="/auth-selection" />}
element={isAuthenticated ? <QuizForm /> : <Navigate to="/login" />}
/>
<Route
path="/teacher/manage-room/:id"
element={isLoggedIn() ? <ManageRoom /> : <Navigate to="/auth-selection" />}
element={isAuthenticated ? <ManageRoom /> : <Navigate to="/login" />}
/>
{/* Pages espace étudiant */}
<Route path="/student/join-room" element={isLoggedIn() ? <JoinRoom /> : <Navigate to="/auth-selection" />}
<Route
path="/student/join-room"
element={isAuthenticated ? <JoinRoom /> : <Navigate to="/login" />}
/>
{/* Pages authentification */}
<Route path="/login" element={<AuthDrawer />} />
{/* Pages enregistrement */}
<Route path="/register" element={<Register />} />
{/* Pages rest password */}
<Route path="/resetPassword" element={<ResetPassword />} />
{/* Pages authentification sélection */}
<Route path="/auth-selection" element={<AuthSelection />} />
{/* Pages authentification sélection */}
<Route path="/oauth/callback" element={<OAuthCallback />} />
<Route path="/auth/callback" element={<OAuthCallback />} />
</Routes>
</main>
</div>
<Footer />
</div>
);
}
};
export default App;

8
client/src/components/Header/Header.tsx
View file

@ -4,7 +4,7 @@ import './header.css';
import { Button } from '@mui/material';
interface HeaderProps {
isLoggedIn: () => boolean;
isLoggedIn: boolean;
handleLogout: () => void;
}
@ -20,7 +20,7 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
onClick={() => navigate('/')}
/>
{isLoggedIn() && (
{isLoggedIn && (
<Button
variant="outlined"
color="primary"
@ -33,9 +33,9 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
</Button>
)}
{!isLoggedIn() && (
{!isLoggedIn && (
<div className="auth-selection-btn">
<Link to="/auth-selection">
<Link to="/login">
<button className="auth-btn">Connexion</button>
</Link>
</div>

61
client/src/pages/AuthManager/AuthDrawer.tsx Normal file
View file

@ -0,0 +1,61 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import './authDrawer.css';
import SimpleLogin from './providers/SimpleLogin/Login';
import authService from '../../services/AuthService';
import { ENV_VARIABLES } from '../../constants';
import ButtonAuth from './providers/OAuth-Oidc/ButtonAuth';
const AuthSelection: React.FC = () => {
const [authData, setAuthData] = useState<any>(null); // Stocke les données d'auth
const navigate = useNavigate();
ENV_VARIABLES.VITE_BACKEND_URL;
// Récupérer les données d'authentification depuis l'API
useEffect(() => {
const fetchData = async () => {
const data = await authService.fetchAuthData();
setAuthData(data);
};
fetchData();
}, []);
return (
<div className="auth-selection-page">
<h1>Connexion</h1>
{/* Formulaire de connexion Simple Login */}
{authData && authData['simple-login'] && (
<div className="form-container">
<SimpleLogin />
</div>
)}
{/* Conteneur OAuth/OIDC */}
{authData && Object.keys(authData).some(key => authData[key].type === 'oidc' || authData[key].type === 'oauth') && (
<div className="auth-button-container">
{Object.keys(authData).map((providerKey) => {
const providerType = authData[providerKey].type;
if (providerType === 'oidc' || providerType === 'oauth') {
return (
<ButtonAuth
key={providerKey}
providerName={providerKey}
providerType={providerType}
/>
);
}
return null;
})}
</div>
)}
<div>
<button className="home-button-container" onClick={() => navigate('/')}>Retour à l'accueil</button>
</div>
</div>
);
};
export default AuthSelection;

19
client/src/pages/AuthSelection/authselection.css → client/src/pages/AuthManager/authDrawer.css
View file

@ -7,9 +7,7 @@
h1 {
margin-bottom: 20px;
}
.form-container,
.oauth-container,
.oidc-container {
.form-container{
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
@ -47,17 +45,4 @@
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;
}
}

7
client/src/pages/AuthSelection/AuthCallback.tsx → client/src/pages/AuthManager/callback/AuthCallback.tsx
View file

@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import apiService from '../../services/ApiService';
import apiService from '../../../services/ApiService';
const OAuthCallback: React.FC = () => {
const navigate = useNavigate();
@ -12,14 +12,15 @@ const OAuthCallback: React.FC = () => {
if (user) {
// Save user data to localStorage or sessionStorage
console.log(user);
apiService.saveToken(user);
// Navigate to the dashboard or another page
navigate('/');
} else {
navigate('/auth-selection');
navigate('/login');
}
}, [location, navigate]);
}, []);
return <div>Loading...</div>;
};

27
client/src/pages/AuthManager/providers/OAuth-Oidc/ButtonAuth.tsx Normal file
View file

@ -0,0 +1,27 @@
import React from 'react';
import { ENV_VARIABLES } from '../../../../constants';
import './css/ButtonAuth.css';
interface ButtonAuthContainerProps {
providerName: string;
providerType: 'oauth' | 'oidc';
}
const handleAuthLogin = (provider: string) => {
window.location.href = `${ENV_VARIABLES.VITE_BACKEND_URL}/api/auth/` + provider;
};
const ButtonAuth: React.FC<ButtonAuthContainerProps> = ({ providerName, providerType }) => {
return (
<>
<div className={`${providerName}-${providerType}-container button-container`}>
<h2>Se connecter avec {providerType.toUpperCase()}</h2>
<button key={providerName} className={`provider-btn ${providerType}-btn`} onClick={() => handleAuthLogin(providerName)}>
Continuer avec {providerName}
</button>
</div>
</>
);
};
export default ButtonAuth;

10
client/src/pages/AuthSelection/SimpleLogin.tsx → client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx
View file

@ -3,12 +3,12 @@ import { useNavigate, Link } from 'react-router-dom';
// JoinRoom.tsx
import React, { useEffect, useState } from 'react';
import './simpleLogin.css';
import '../css/simpleLogin.css';
import { TextField } from '@mui/material';
import LoadingButton from '@mui/lab/LoadingButton';
import LoginContainer from '../../components/LoginContainer/LoginContainer'
import ApiService from '../../services/ApiService';
import LoginContainer from '../../../../components/LoginContainer/LoginContainer'
import ApiService from '../../../../services/ApiService';
const SimpleLogin: React.FC = () => {
const navigate = useNavigate();
@ -77,11 +77,11 @@ const SimpleLogin: React.FC = () => {
<div className="login-links">
<Link to="/teacher/resetPassword">
<Link to="/resetPassword">
Réinitialiser le mot de passe
</Link>
<Link to="/teacher/register">
<Link to="/register">
Créer un compte
</Link>

81
client/src/pages/AuthManager/providers/SimpleLogin/Register.tsx Normal file
View file

@ -0,0 +1,81 @@
import { useNavigate } from 'react-router-dom';
// JoinRoom.tsx
import React, { useEffect, useState } from 'react';
import { TextField } from '@mui/material';
import LoadingButton from '@mui/lab/LoadingButton';
import LoginContainer from '../../../../components/LoginContainer/LoginContainer'
import ApiService from '../../../../services/ApiService';
const Register: React.FC = () => {
const navigate = useNavigate();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [connectionError, setConnectionError] = useState<string>('');
const [isConnecting] = useState<boolean>(false);
useEffect(() => {
return () => {
};
}, []);
const register = async () => {
const result = await ApiService.register(email, password);
if (result != true) {
setConnectionError(result);
return;
}
navigate("/login")
};
return (
<LoginContainer
title='Créer un compte'
error={connectionError}>
<TextField
label="Email"
variant="outlined"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Adresse courriel"
sx={{ marginBottom: '1rem' }}
fullWidth
/>
<TextField
label="Mot de passe"
variant="outlined"
value={password}
type="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Mot de passe"
sx={{ marginBottom: '1rem' }}
fullWidth
/>
<LoadingButton
loading={isConnecting}
onClick={register}
variant="contained"
sx={{ marginBottom: `${connectionError && '2rem'}` }}
disabled={!email || !password}
>
S'inscrire
</LoadingButton>
</LoginContainer>
);
};
export default Register;

68
client/src/pages/AuthManager/providers/SimpleLogin/ResetPassword.tsx Normal file
View file

@ -0,0 +1,68 @@
import { useNavigate } from 'react-router-dom';
// JoinRoom.tsx
import React, { useEffect, useState } from 'react';
import { TextField } from '@mui/material';
import LoadingButton from '@mui/lab/LoadingButton';
import LoginContainer from '../../../../components/LoginContainer/LoginContainer'
import ApiService from '../../../../services/ApiService';
const ResetPassword: React.FC = () => {
const navigate = useNavigate();
const [email, setEmail] = useState('');
const [connectionError, setConnectionError] = useState<string>('');
const [isConnecting] = useState<boolean>(false);
useEffect(() => {
return () => {
};
}, []);
const reset = async () => {
const result = await ApiService.resetPassword(email);
if (result != true) {
setConnectionError(result);
return;
}
navigate("/login")
};
return (
<LoginContainer
title='Récupération du compte'
error={connectionError}>
<TextField
label="Email"
variant="outlined"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Adresse courriel"
sx={{ marginBottom: '1rem' }}
fullWidth
/>
<LoadingButton
loading={isConnecting}
onClick={reset}
variant="contained"
sx={{ marginBottom: `${connectionError && '2rem'}` }}
disabled={!email}
>
Réinitialiser le mot de passe
</LoadingButton>
</LoginContainer>
);
};
export default ResetPassword;

23
client/src/pages/AuthManager/providers/css/buttonAuth.css Normal file
View file

@ -0,0 +1,23 @@
.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;
}
.button-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;
}

17
client/src/pages/AuthManager/providers/css/simpleLogin.css Normal file
View file

@ -0,0 +1,17 @@
.login-links {
padding-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.login-links a {
padding: 4px;
color: #333;
text-decoration: none;
}
.login-links a:hover {
text-decoration: underline;
}

83
client/src/pages/AuthSelection/AuthSelection.tsx
View file

@ -1,83 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import './authselection.css';
import SimpleLogin from './SimpleLogin';
const AuthSelection: React.FC = () => {
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 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 Login */}
{authData && authData['simple-login'] && (
<div className="form-container">
<SimpleLogin/>
</div>
)}
{/* Conteneur OAuth */}
{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 */}
{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;

0
client/src/pages/AuthSelection/simpleLogin.css
View file

2
client/src/pages/Teacher/Dashboard/Dashboard.tsx
View file

@ -44,7 +44,7 @@ const Dashboard: React.FC = () => {
useEffect(() => {
const fetchData = async () => {
if (!ApiService.isLoggedIn()) {
navigate("/teacher/login");
navigate("/login");
return;
}
else {

2
client/src/pages/Teacher/Share/Share.tsx
View file

@ -33,7 +33,7 @@ const Share: React.FC = () => {
if (!ApiService.isLoggedIn()) {
window.alert(`Vous n'êtes pas connecté.\nVeuillez vous connecter et revenir à ce lien`);
navigate("/teacher/login");
navigate("/login");
return;
}

2
client/src/services/ApiService.tsx
View file

@ -66,6 +66,8 @@ class ApiService {
public isLoggedIn(): boolean {
const token = this.getToken()
console.log("Check if loggedIn : " + token);
if (token == null) {
return false;
}

24
client/src/services/AuthService.tsx Normal file
View file

@ -0,0 +1,24 @@
import { ENV_VARIABLES } from '../constants';
class AuthService {
private BASE_URL: string;
constructor() {
this.BASE_URL = ENV_VARIABLES.VITE_BACKEND_URL;
}
async fetchAuthData(){
try {
const response = await fetch(`${this.BASE_URL}/api/auth/getActiveAuth`);
const data = await response.json();
return data.authActive;
} catch (error) {
console.error('Erreur lors de la récupération des données d\'auth:', error);
}
};
}
const authService = new AuthService();
export default authService;

2
server/app.js
View file

@ -19,7 +19,7 @@ const authRouter = require('./routers/auth.js')
dotenv.config();
// Setup urls from configs
const use_ports = (process.env['USE_PORTS']).toLocaleLowerCase() == "true"
const use_ports = (process.env['USE_PORTS']).toLowerCase() == "true"
process.env['FRONTEND_URL'] = process.env['SITE_URL'] + (use_ports ? `:${process.env['FRONTEND_PORT']}`:"")
process.env['BACKEND_URL'] = process.env['SITE_URL'] + (use_ports ? `:${process.env['PORT']}`:"")

2
server/auth/auth-manager.js
View file

@ -44,7 +44,7 @@ class AuthManager{
async login(userInfo,req,res,next){
const tokenToSave = jwt.create(userInfo.email, userInfo._id);
res.redirect(`/oauth/callback?user=${tokenToSave}`);
res.redirect(`http://localhost:${process.env['FRONTEND_PORT']}/auth/callback?user=${tokenToSave}`);
console.info(`L'utilisateur '${userInfo.name}' vient de se connecter`)
}

2
server/auth_config.json.example
View file

@ -31,7 +31,7 @@
"enabled": true,
"name": "provider3",
"SESSION_SECRET": "your_session_secret"
}
},
"Module X":{
}