From a49cc06aa30e2ff4997905756192bff18b2dd1d7 Mon Sep 17 00:00:00 2001
From: Baptiste Marcel <baptiste.marcel@etu.uca.fr>
Date: Tue, 21 Nov 2023 15:42:22 +0100
Subject: [PATCH] =?UTF-8?q?Affichage=20dynamique=20de=20la=20navbar=20et?=
 =?UTF-8?q?=20des=20pages=20+=20Connexion/D=C3=A9connexion=20OK?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cryptide_project/src/App.tsx                  |   8 +-
 cryptide_project/src/Components/NavBar.tsx    |  38 +++++---
 .../src/Components/ScoreBoard.tsx             |  39 ++++++++-
 cryptide_project/src/Contexts/AuthContext.tsx |  45 ++++++++++
 cryptide_project/src/Pages/Home.tsx           |  23 ++++-
 cryptide_project/src/Pages/LoginForm.tsx      |   7 +-
 cryptide_project/src/Pages/Play.tsx           |  81 +++++++++++-------
 cryptide_project/src/Translations/en.json     |   1 +
 cryptide_project/src/Translations/fr.json     |   1 +
 .../src/server/controllers/AuthController.js  |  20 ++---
 cryptide_project/src/server/db/socialgraph.db | Bin 28672 -> 28672 bytes
 .../src/server/routes/AuthRoutes.js           |   1 +
 cryptide_project/src/services/AuthService.tsx |  23 +++++
 cryptide_project/src/types/Player.tsx         |  18 ++++
 14 files changed, 246 insertions(+), 59 deletions(-)
 create mode 100644 cryptide_project/src/Contexts/AuthContext.tsx
 create mode 100644 cryptide_project/src/types/Player.tsx

diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx
index dacb2c0..c61433c 100644
--- a/cryptide_project/src/App.tsx
+++ b/cryptide_project/src/App.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { useState } from 'react';
 import { IntlProvider } from 'react-intl';
 import { GameProvider } from './Contexts/GameContext';
+import { AuthProvider } from './Contexts/AuthContext';
 
 /* Page */
 import Home from './Pages/Home'; 
@@ -63,9 +64,10 @@ function App() {
   //     <img src={logo} className="App-logo" alt="logo" />
   //   </header>
   // </div>
+    
+    <AuthProvider>
       <GameProvider>
-
-      {/*@ts-ignore*/}
+        {/*@ts-ignore*/}
         <IntlProvider locale={locale} messages={messages[locale]}>
           <ThemeProvider>
             <BrowserRouter>  
@@ -85,7 +87,7 @@ function App() {
           </ThemeProvider>
         </IntlProvider>
       </GameProvider>
-  
+    </AuthProvider>
   );
 }
 
diff --git a/cryptide_project/src/Components/NavBar.tsx b/cryptide_project/src/Components/NavBar.tsx
index f95c155..feb9695 100644
--- a/cryptide_project/src/Components/NavBar.tsx
+++ b/cryptide_project/src/Components/NavBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
 /* Naviagtion */
 import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
@@ -7,7 +7,7 @@ import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
 
 /* Icon */
-import { BiLogInCircle } from 'react-icons/bi';
+import { BiDoorOpen, BiLogInCircle } from 'react-icons/bi';
 import { BsFillPersonPlusFill } from 'react-icons/bs';
 import { HiLanguage } from 'react-icons/hi2';
 
@@ -17,16 +17,22 @@ import logo from '../res/img/logo2_preview_rev_1.png';
 /* Components */
 import ReactCountryFlag from "react-country-flag"
 
+/* Services */
+import SessionService from '../services/SessionService';
+import AuthService from '../services/AuthService';
 
 /* Style */
 import './NavBar.css';
 
 /* Style */
 import { useTheme } from '../Style/ThemeContext';
+import { useAuth } from '../Contexts/AuthContext';
 
 // @ts-ignore
 function AppNavbar({changeLocale}) {
     const theme = useTheme();
+    const {isLoggedIn, logout} = useAuth();
+
     return (
         <Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
         <Container>
@@ -45,14 +51,26 @@ function AppNavbar({changeLocale}) {
             </Nav>
             <div className='leftdiv'>
                 <Nav className="ml-auto navbar-title-dd">
-                    <Nav.Link href="login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}> 
-                        <BiLogInCircle/>
-                        <FormattedMessage id="log_in"/> 
-                    </Nav.Link>
-                    <Nav.Link href="signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}> 
-                        <BsFillPersonPlusFill/>
-                        <FormattedMessage id="sign_up"/> 
-                    </Nav.Link>
+                    {/* Affichage dynamique selon état de connexion */}
+                    {isLoggedIn ? (
+                                        <Nav.Link href="/play" onClick={logout} className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
+                                            <BiDoorOpen />
+                                            <FormattedMessage id="log_out" />
+                                        </Nav.Link>
+                                    ) 
+                                    : (
+                                        <>
+                                            <Nav.Link href="/login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
+                                                <BiLogInCircle />
+                                                <FormattedMessage id="log_in" />
+                                            </Nav.Link>
+                                            <Nav.Link href="/signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
+                                                <BsFillPersonPlusFill />
+                                                <FormattedMessage id="sign_up" />
+                                            </Nav.Link>
+                                        </>
+                                    )
+                    }
                 </Nav>
                 <Nav className="me-auto">
                     <NavDropdown 
diff --git a/cryptide_project/src/Components/ScoreBoard.tsx b/cryptide_project/src/Components/ScoreBoard.tsx
index b756e4a..1d253ee 100644
--- a/cryptide_project/src/Components/ScoreBoard.tsx
+++ b/cryptide_project/src/Components/ScoreBoard.tsx
@@ -21,9 +21,13 @@ import Col from 'react-bootstrap/Col';
 /* Component */
 import ButtonImgNav from './ButtonImgNav';
 
+/* Types */
+import { PlayerProps } from '../types/Player';
+
 //@ts-ignore
-function ScoreBoard({Player = null}) {
+const ScoreBoard: React.FC<{ Player: PlayerProps }> = ({ Player }) => {
     const theme=useTheme();
+
     return (
         // <div className='LeaderBoardiv'>
         <div className='LeaderBoardiv'>
@@ -31,9 +35,36 @@ function ScoreBoard({Player = null}) {
                 defaultActiveKey="profile"
                 id="ScoreBoard"
                 className="mb-3">
-                
-                <Tab eventKey="perso" title="Vos Stats" disabled>
-                    Tab content for Contact
+                <Tab eventKey="perso" title="Vos Stats" disabled = { !Player.pseudo.startsWith("Guest_") ? false : true}>
+                <Container fluid>
+                        <Row>Stats en solo :</Row>
+                        <Row>
+                            <Col sm={10}>Partie Jouées :</Col>
+                            <Col className='leftRow'>{Player !== null ? Player.soloStats.nbGames : "0"}</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={10}>Best-Score :</Col>
+                            <Col className='leftRow'>{Player !== null ? Player.soloStats.bestScore : "0"}</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={10}>Moyenne d'essai :</Col>
+                            <Col className='leftRow'>{Player !== null ? Player.soloStats.avgNbTry : "0"}</Col>
+                        </Row>
+                        <hr/>
+                        <Row>Stats en ligne :</Row>
+                        <Row>
+                            <Col sm={10}>Partie jouée :</Col>
+                            <Col className='leftRow'>{Player !== null ? Player.onlineStats.nbGames : "0"}</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={10}>Nombre de victoire :</Col>
+                            <Col className='leftRow'>{Player !== null ? Player.onlineStats.nbWins : "0"}</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={10}>Ratio P/V :</Col>
+                            <Col className='leftRow'>{Player !== null ? Player.onlineStats.ratio : "0"}</Col>
+                        </Row>
+                    </Container>
                 </Tab>
                 <Tab eventKey="daily" title="Daily"
                     style={{display:"flex", flexDirection:'column', alignItems:'center'}}>
diff --git a/cryptide_project/src/Contexts/AuthContext.tsx b/cryptide_project/src/Contexts/AuthContext.tsx
new file mode 100644
index 0000000..763616b
--- /dev/null
+++ b/cryptide_project/src/Contexts/AuthContext.tsx
@@ -0,0 +1,45 @@
+// AuthContext.js
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import AuthService from '../services/AuthService';
+
+interface AuthContextProps {
+  isLoggedIn: boolean;
+  login: () => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextProps | undefined>(undefined);
+
+const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+
+  const login = () => {
+    setIsLoggedIn(true);
+  };
+
+  const logout = async() => {
+    try {
+        await AuthService.logout();
+        setIsLoggedIn(false);
+    }
+    catch (error) {
+        console.log(error);
+    };
+  };
+
+  return (
+    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+const useAuth = (): AuthContextProps => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+export { AuthProvider, useAuth };
diff --git a/cryptide_project/src/Pages/Home.tsx b/cryptide_project/src/Pages/Home.tsx
index b3a1766..d6ba0c0 100644
--- a/cryptide_project/src/Pages/Home.tsx
+++ b/cryptide_project/src/Pages/Home.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {useEffect} from 'react';
+import { useAuth } from '../Contexts/AuthContext';
+import SessionService from '../services/SessionService';
 import './Home.css';
 import '../App.css';
 import { useTheme } from '../Style/ThemeContext';
@@ -9,6 +11,25 @@ import ButtonImgNav from '../Components/ButtonImgNav';
 
 function Home() {
     const theme=useTheme();
+    const {isLoggedIn, login} = useAuth();
+
+    useEffect(() => {
+        // Verifie la connexion
+        const verifSession = async () => {
+            try {
+                const sessionData = await SessionService.getSession();
+                if (sessionData.user) {
+                    login();
+                }
+            }
+            catch (error) {
+                console.log(error);
+            };
+        }
+
+        verifSession();
+    }, []);
+
     return (
         
     <div className="home-container">
diff --git a/cryptide_project/src/Pages/LoginForm.tsx b/cryptide_project/src/Pages/LoginForm.tsx
index fae874f..0c56b55 100644
--- a/cryptide_project/src/Pages/LoginForm.tsx
+++ b/cryptide_project/src/Pages/LoginForm.tsx
@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
-import { useNavigate } from 'react-router-dom'; 
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../Contexts/AuthContext'; 
 import AuthService from '../services/AuthService';
 import '../Style/Global.css';
 
 const SignIn = () => {
-    const navigate = useNavigate(); 
+    const navigate = useNavigate();
+    const { login } = useAuth(); 
 
     const [error, setError] = useState<string | null>(null);
     const [showConfirmation, setShowConfirmation] = useState(false);
@@ -32,6 +34,7 @@ const SignIn = () => {
 
                 setShowConfirmation(true);
                 setTimeout(() => {
+                    login();
                     navigate('/play');         // 3 secondes avant de rediriger vers la page de connexion
                 }, 3000);
             }
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index 86c593d..a3ea278 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 
+/* Context */
+import { useAuth } from '../Contexts/AuthContext';
+
 /* Style */
 import './Play.css';
 import { useTheme } from '../Style/ThemeContext';
 
-/* Nav */
-import { Link } from 'react-router-dom';
-
 /* Component */
 import ButtonImgNav from "../Components/ButtonImgNav"
 import SessionService from "../services/SessionService";
@@ -15,43 +15,66 @@ import SessionService from "../services/SessionService";
 import Person from '../res/img/Person.png';
 
 /* Icon */
-import trophy from '../res/icon/trophy.png';
-import param from '../res/icon/param.png';
-import share from '../res/icon/share.png';
 import { socket } from '../SocketConfig';
 import { useNavigate } from 'react-router-dom';
 import GameCreator from '../model/GameCreator';
 import { useGame } from '../Contexts/GameContext';
 import ScoreBoard from '../Components/ScoreBoard';
-import { set } from 'lodash';
+
+/* Types */
+import { PlayerProps } from '../types/Player';
 
 
 function Play() {
     const theme=useTheme()
-    const [username, setUsername] = useState('');
-    const [nbSoloGames, setNbSoloGames] = useState(0);
-    const [soloBestScore, setSoloBestScore] = useState(0);
-    const [soloAverageTry, setSoloAverageTry] = useState(0);
+    const {isLoggedIn, login} = useAuth();
+    const [player, setPlayer] = useState<PlayerProps | null>(null);
 
     useEffect(() => {
         const fetchUserInformation = async () => {
-          try {
-            const sessionData = await SessionService.getSession();
-      
-            console.log(sessionData);
-            // Vérifie si il y a une session
-            if (sessionData.user) {
-              setUsername(sessionData.user.pseudo);
-              setNbSoloGames(sessionData.user.soloStats.nbGames);
-              setSoloBestScore(sessionData.user.soloStats.bestScore);
-              setSoloAverageTry(sessionData.user.soloStats.averageTry);
-            } else {
-              // Pas de session on génère un guest random
-              setUsername(`Guest ${Math.floor(Math.random() * 100000)}`);
+            try {
+                const sessionData = await SessionService.getSession();
+                
+                // Vérifie si il y a une session
+                if (sessionData.user) {
+                    // Il y a une session on récupère les infos du joueur
+                    const updatedPlayer: PlayerProps = {
+                        pseudo: sessionData.user.pseudo,
+                        profilePicture: sessionData.user.profilePicture,
+                        soloStats: {
+                            nbGames: sessionData.user.soloStats.nbGames,
+                            bestScore: sessionData.user.soloStats.bestScore,
+                            avgNbTry: sessionData.user.soloStats.avgNbTry,
+                        },
+                        onlineStats: {
+                            nbGames: sessionData.user.onlineStats.nbGames,
+                            nbWins: sessionData.user.onlineStats.nbWins,
+                            ratio: sessionData.user.onlineStats.ratio,
+                        },
+                    };
+                    login();
+                    setPlayer(updatedPlayer);
+                } else {
+                    // Pas de session on génère un guest random
+                    const guestPlayer: PlayerProps = {
+                        pseudo: 'Guest_' + Math.floor(Math.random() * 1000000),
+                        profilePicture: '',
+                        soloStats: {
+                            nbGames: 0,
+                            bestScore: 0,
+                            avgNbTry: 0,
+                        },
+                        onlineStats: {
+                            nbGames: 0,
+                            nbWins: 0,
+                            ratio: 0,
+                        },
+                    };
+                    setPlayer(guestPlayer);
+                }
+            } catch (error) {
+                console.error(error);
             }
-          } catch (error) {
-            console.error(error);
-          }
         };
       
         fetchUserInformation();
@@ -113,7 +136,7 @@ function Play() {
             <div className="MidContainer">
                 <div>
                     <h2>
-                        {username}
+                        {player && player.pseudo}
                     </h2>
                     <img src={Person}
                             height='300'
@@ -129,7 +152,7 @@ function Play() {
                 </div>
             </div>
             <div className='rightContainer'>
-                <ScoreBoard/>
+                {player && (<ScoreBoard Player={player}/>)}
             </div>
         </div>
     );
diff --git a/cryptide_project/src/Translations/en.json b/cryptide_project/src/Translations/en.json
index b462ccd..c5fe91d 100644
--- a/cryptide_project/src/Translations/en.json
+++ b/cryptide_project/src/Translations/en.json
@@ -21,6 +21,7 @@
 
     "log_in":" Log in ",
     "sign_up":" Sign up ",
+    "log_out":" Log out ",
 
     "join" : "Join",
     "create_room" : "Create room",
diff --git a/cryptide_project/src/Translations/fr.json b/cryptide_project/src/Translations/fr.json
index a60b340..7dba79e 100644
--- a/cryptide_project/src/Translations/fr.json
+++ b/cryptide_project/src/Translations/fr.json
@@ -21,6 +21,7 @@
 
     "log_in":" Se connecter ",
     "sign_up":" S'inscrire ",
+    "log_out":" Se déconnecter ",
 
 
     "join" : "Rejoindre",
diff --git a/cryptide_project/src/server/controllers/AuthController.js b/cryptide_project/src/server/controllers/AuthController.js
index 0316d35..6bd5aa7 100644
--- a/cryptide_project/src/server/controllers/AuthController.js
+++ b/cryptide_project/src/server/controllers/AuthController.js
@@ -87,16 +87,16 @@ class AuthController {
     }
   }
 
-  static getSession(req, res) {
-    console.log(req.session);
-    // Vérifier si l'utilisateur est connecté
-    if (req.session.user) {
-        // Envoyer une réponse réussie
-        res.status(200).json({ message: 'Utilisateur connecté', user: req.session.user });
-    } else {
-        // Envoyer une réponse d'erreur
-        res.status(401).json({ error: 'Utilisateur non connecté' });
-    }
+  static async logout(req, res) {
+    // Détruire la session pour déconnecter l'utilisateur
+    req.session.destroy((err) => {
+        if (err) {
+            console.error(err);
+            res.status(500).json({ error: 'Erreur lors de la déconnexion.' });
+        } else {
+            res.status(200).json({ message: 'Déconnexion réussie' });
+        }
+    });
   }
   
 }
diff --git a/cryptide_project/src/server/db/socialgraph.db b/cryptide_project/src/server/db/socialgraph.db
index 750cc18422ad034b825a19c195f591b256b424ec..fda2b9c52293a764ea92fcb897c512f2e773242f 100644
GIT binary patch
delta 416
zcmZp8z}WDBae_3X?nD`9M%|4GOZa(M_;MKd7w|js-QvsHEGQ7eSD(Yh$-rya$ZE{U
zXp>=R7vdTmq5vXn^npATqa+nW1C<DG|A5kz0?)v3&w#9|^w2`rq_7nKyrQV=F!Pk8
z%1|Q{W6v<t3h!XwB0~@J3ZJl&w6a_y10!QyLqlC70|i4<D`R6T15-A(R8F96%3#|{
zQj1H9Q#ZeslVs#!;XlE^e}ex#|9AfTn*|ki@QaHv8)9(}*W~;9sz6WtVBojn-^X9W
z_XDW<1>a;Vdmd}D9LeR#(#Xm<`GcIz=4$&$0Y<jTSN-K>*f<%P#TiSBQ;UkZco`TN
zSorTS0G;-Z|0(|+poM4nIoa9R7&tgM7`Y}tjh6>HA5C5bF3-*iQOL>80%35lGea2c
E05Cgl_W%F@

delta 186
zcmZp8z}WDBae_3X=0q81M$L^0OZd5%`ED`rFW`6NyR}(R;SAsATXI^AT+ICU8TjAx
zf9JoySuo%<|HJ^c$@leDd6@aF82GLD_wm;-FacF-@lXC?$20l6oayFj`$z#s*2!1>
z<)v6T8JWcyON&#BiaB{17#NuOpE3YVddL41Y8KDrr}6SYE6|0d*;&~bI5;>MIoVkt
L3=Vc?2!kB}+gLKW

diff --git a/cryptide_project/src/server/routes/AuthRoutes.js b/cryptide_project/src/server/routes/AuthRoutes.js
index 348346c..be94796 100644
--- a/cryptide_project/src/server/routes/AuthRoutes.js
+++ b/cryptide_project/src/server/routes/AuthRoutes.js
@@ -6,6 +6,7 @@ const SessionController = require('../controllers/SessionController');
 // Routes pour l'authentification
 router.post('/auth/signup', AuthController.signUp);
 router.post('/auth/signin', AuthController.signIn);
+router.delete('/auth/logout', AuthController.logout)
 
 // Routes pour les sessions
 router.get('/session', SessionController.getUserInformation);
diff --git a/cryptide_project/src/services/AuthService.tsx b/cryptide_project/src/services/AuthService.tsx
index a6716bc..e7b85e4 100644
--- a/cryptide_project/src/services/AuthService.tsx
+++ b/cryptide_project/src/services/AuthService.tsx
@@ -58,6 +58,29 @@ class AuthService{
             throw error;
         }
     }
+
+    static async logout() {
+        try {
+            const response = await fetch('http://localhost:3003/auth/logout', {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include',
+            });
+        
+            if (response.ok) {
+                const result = await response.json();
+                return result;
+            } else {
+                const errorResponse = await response.json();
+                throw new Error(errorResponse.error);
+            }
+        } catch (error) {
+            console.error(error);
+            throw error;
+        }
+    }
 }
 
 export default AuthService;
\ No newline at end of file
diff --git a/cryptide_project/src/types/Player.tsx b/cryptide_project/src/types/Player.tsx
new file mode 100644
index 0000000..f522152
--- /dev/null
+++ b/cryptide_project/src/types/Player.tsx
@@ -0,0 +1,18 @@
+export interface PlayerSoloStats {
+    nbGames: number;
+    bestScore: number;
+    avgNbTry: number;
+};
+
+export interface PlayerOnlineStats {
+    nbGames: number;
+    nbWins: number;
+    ratio: number;
+};
+
+export interface PlayerProps {
+    profilePicture: string;
+    pseudo: string;
+    soloStats: PlayerSoloStats;
+    onlineStats: PlayerOnlineStats;
+};
\ No newline at end of file