adding logout and show the username

webapp/src/components/navbarre/home/index.jsx

@@ -1,14 +1,22 @@
 import NavListHome from "./navlist";
 import list from "../list";
 import LoginButton from "../login-button";
+import logout from "../../../lib/logout";
 
-function NavbarreHome() {
+function NavbarreHome({auth, setAuth}) {
     return(
         <nav className="fixed top-0 left-0 h-16 w-full px-4 flex flex-row justify-between items-center text-center">
             <div className="h-12 w-12 bg-red-500">
             </div>
             <NavListHome list={list}/>
-            <LoginButton />
+            {auth !== null ? (
+                <div>
+                    <a onClick={() => logout({setAuth})}>logout</a>
+                    <p>{auth.username}</p>
+                </div>
+            ) : (
+                <LoginButton/>
+            ) }
         </nav>
     )
 }

webapp/src/index.js

@@ -9,21 +9,21 @@ import Register from "./pages/register";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 function App() {
-    const savedToken = localStorage.getItem('token');
+    const savedToken = localStorage.getItem('auth');
-    const [token, setToken] = useState(savedToken ? savedToken : null)
+    const [auth, setAuth] = useState(savedToken ? savedToken : null)
     useEffect(() => {
-        if(savedToken !== token){
+        if(savedToken !== auth){
-            localStorage.setItem('token', token);
+            localStorage.setItem('auth', auth);
         }
-    }, [token]);
+    }, [auth]);
 
     return (
         <React.StrictMode>
             <BrowserRouter>
                 <Routes>
-                    <Route path="/" element={<Home />}/>
+                    <Route path="/" element={<Home auth={auth} setAuth={setAuth}/>}/>
-                    <Route path="/login" element={<Login setToken={setToken} />}/>
+                    <Route path="/login" element={<Login setAuth={setAuth} />}/>
-                    <Route path="/register" element={<Register setToken={setToken} />}/>
+                    <Route path="/register" element={<Register setAuth={setAuth} />}/>
                     <Route path="/game" element={<Game />}/>
                 </Routes>
             </BrowserRouter>

webapp/src/lib/logout.js

@@ -0,0 +1,6 @@
+function logout({setAuth}) {
+    setAuth(null);
+    localStorage.removeItem('auth');
+}
+
+export default logout

webapp/src/pages/home/index.jsx

@@ -2,10 +2,10 @@ import NavbarreHome from "../../components/navbarre/home";
 import HomeHero from "../../components/content/home/hero";
 import Footer from "../../components/content/home/footer";
 
-function Home() {
+function Home({auth, setAuth}) {
     return (
         <div className="h-screen w-screen flex flex-col justify-center items-center">
-            <NavbarreHome />
+            <NavbarreHome auth={auth} setAuth={setAuth}/>
             <HomeHero />
             <Footer />
         </div>

webapp/src/pages/login/index.jsx

@@ -1,7 +1,7 @@
 import {Link, redirect, useNavigate} from "react-router-dom";
 import {useState} from "react";
 import {get, post} from '../../modules/fetcher';
-function Login({setToken}) {
+function Login({setAuth}) {
     const navigate = useNavigate();
     const loginUser = async (e) => {
         e.preventDefault()
@@ -9,7 +9,10 @@ function Login({setToken}) {
             .then(async res => {
                 if (res.status === 200) {
                     console.log(res.JSON.message)
-                    setToken(res.JSON.token)
+                    setAuth({
+                        'token': res.JSON.token,
+                        'username': username
+                    })
                     navigate('/')
                 } else {
                     setError(res.message)

webapp/src/pages/register/index.jsx

@@ -3,7 +3,7 @@ import {post} from "../../modules/fetcher";
 import {useState} from "react";
 
 
-function Register({setToken}) {
+function Register({setAuth}) {
     const navigate = useNavigate();
     const registerUser = async (e) => {
         e.preventDefault()
@@ -11,7 +11,10 @@ function Register({setToken}) {
             post('https://saucisson.justw.tf/api/users/register', {username, password}, '')
                 .then(async res => {
                     if (res.status === 200) {
-                        setToken(res.JSON.token)
+                        setAuth({
+                            'token': res.JSON.token,
+                            'username': username
+                        })
                         navigate('/')
                     } else {
                         setError(res.message)