improved password protection code

traque-front/app/admin/layout.js

@@ -1,4 +1,4 @@
-import { AdminConnexionProvider } from "@/context/adminConnexionContext";
+import { AdminConnexionProvider} from "@/context/adminConnexionContext";
 import { AdminProvider } from "@/context/adminContext";
 
 export default function AdminLayout({ children}) {

traque-front/app/admin/login/page.js

@@ -1,16 +1,11 @@
 "use client";
 import LoginForm from '@/components/team/loginForm'
 import { useAdminConnexion } from '@/context/adminConnexionContext';
-import { redirect } from 'next/navigation';
+import React from 'react'
-import React, { useEffect } from 'react'
 
 export default function AdminLoginPage() {
-    const { login, loggedIn } = useAdminConnexion();
+    const {login, useProtect} = useAdminConnexion();
-    useEffect(() => {
+    useProtect();
-        if (loggedIn) {
-            redirect("/admin");
-        }
-    }, [loggedIn]);
     return (
         <LoginForm title="Admin login" placeholder="Admin password" buttonText={"Login"} onSubmit={login} />
     )

traque-front/app/admin/page.js

@@ -1,36 +1,12 @@
 "use client";
-import TeamAddForm from '@/components/admin/teamAdd';
+import { useAdminConnexion } from "@/context/adminConnexionContext";
-import TeamEdit from '@/components/admin/teamEdit';
-import TeamList from '@/components/admin/teamList';
-import { useAdminConnexion } from '@/context/adminConnexionContext';
-import useAdmin from '@/hook/useAdmin';
-import { redirect } from 'next/navigation';
-import React, { useEffect, useState } from 'react'
 
-
+export default function AdminPage() {
-export default function Admin() {
+    const { useProtect }  = useAdminConnexion();
-    const [selectedTeamId, setSelectedTeamId] = useState(null);
+    useProtect();
-    const { loggedIn } = useAdminConnexion();
+    return (
-    const { addTeam } = useAdmin();
+        <div>
-
+            <h1>Admin page</h1>
-    useEffect(() => {
-        if (!loggedIn) {
-          redirect("/admin/login");
-        }
-    }, [loggedIn]);
-
-
-
-  return (
-      <div className='h-full p-10 flex flex-row justify-between'> 
-        <div className='w-5/12 h-full p-4 shadow-md rounded outline'>
-          <h2 className='text-2xl text-center'>Team list</h2>
-          <TeamAddForm onAddTeam={addTeam}/>
-          <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
         </div>
-        <div className='w-5/12 h-full p-4 shadow-md rounded outline'>
+    )
-          <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>
-        </div>
-      </div>
-  )
 }

traque-front/app/admin/teams/page.js

@@ -0,0 +1,28 @@
+"use client";
+import TeamAddForm from '@/components/admin/teamAdd';
+import TeamEdit from '@/components/admin/teamEdit';
+import TeamList from '@/components/admin/teamList';
+import { useAdminConnexion } from '@/context/adminConnexionContext';
+import useAdmin from '@/hook/useAdmin';
+import React, { useState } from 'react'
+
+export default function TeamAdminPage() {
+    const [selectedTeamId, setSelectedTeamId] = useState(null);
+    const { addTeam } = useAdmin();
+    const { useProtect }  = useAdminConnexion();
+    useProtect();
+
+
+  return (
+      <div className='h-full p-10 flex flex-row justify-between'> 
+        <div className='w-5/12 h-full p-4 shadow-md rounded'>
+          <h2 className='text-2xl text-center'>Team list</h2>
+          <TeamAddForm onAddTeam={addTeam}/>
+          <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
+        </div>
+        <div className='w-5/12 h-full p-4 shadow-md rounded'>
+          <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>
+        </div>
+      </div>
+  )
+}

traque-front/app/team/layout.js

@@ -1,7 +1,8 @@
+"use client";
 import { TeamConnexionProvider } from "@/context/teamConnexionContext";
 import { TeamProvider } from "@/context/teamContext";
 
-export default function AdminLayout({ children}) {
+export default function AdminLayout({ children }) {
     return (
         <TeamConnexionProvider>
             <TeamProvider>

traque-front/app/team/page.js

@@ -1,16 +1,10 @@
 "use client"
 import LoginForm from "@/components/team/loginForm";
-import useGame from "@/hook/useGame";
+import { useTeamConnexion } from "@/context/teamConnexionContext";
-import { redirect } from "next/navigation";
-import { useEffect } from "react";
 
 export default function Home() {
-  const { login, loggedIn } = useGame();
+  const { login,useProtect  } = useTeamConnexion();
-  useEffect(() => {
+  useProtect();
-    if (loggedIn) {
-      redirect("/team/track");
-    }
-  }, [loggedIn]);
   return (
     <div>
       <LoginForm title={"Team login"} placeholder={"team ID"} buttonText={"Login"} onSubmit={(value) => login(parseInt(value))}/>

traque-front/app/team/track/page.js

@@ -1,10 +1,9 @@
 "use client";
 import ActionDrawer from '@/components/team/actionDrawer';
-import Button from '@/components/util/button';
+import { useTeamConnexion } from '@/context/teamConnexionContext';
 import useGame from '@/hook/useGame';
 import dynamic from 'next/dynamic';
-import { redirect } from 'next/navigation';
+import React, { use } from 'react'
-import React, { useEffect } from 'react'
 
 //Load the map without SSR
 const LiveMap = dynamic(() => import('@/components/team/map'), {
@@ -12,17 +11,12 @@ const LiveMap = dynamic(() => import('@/components/team/map'), {
 });
 
 export default function Track() {
-    const { currentPosition, enemyPosition, loggedIn } = useGame();
+    const { currentPosition, enemyPosition } = useGame();
-    useEffect(() => {
+    const {useProtect} = useTeamConnexion();
-        if (!loggedIn) {
+    useProtect();
-            redirect("/team");
-        }
-    }, [loggedIn]);
-
-
     return (
         <div className='h-full'>
-            <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition}/>
+            <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition} />
             <ActionDrawer />
         </div>
     )

traque-front/context/adminConnexionContext.jsx

@@ -1,38 +1,27 @@
 "use client";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, } from "react";
 import { useSocket } from "./socketContext";
-import { useSocketListener } from "@/hook/useSocketListener";
+import { useSocketAuth } from "@/hook/useSocketAuth";
-import { useLocalStorage } from "@/hook/useLocalStorage";
+import { redirect, usePathname } from "next/navigation";
+import { usePasswordProtect } from "@/hook/usePasswordProtect";
 
-const adminContext = createContext();
+const adminConnexionContext = createContext();
 const AdminConnexionProvider = ({ children }) => {
-    const [loggedIn, setLoggedIn] = useState(false);
-    const [savedPassword, setSavedPassword] = useLocalStorage("admin_password", null);
     const { adminSocket } = useSocket();
+    const { login, loggedIn, loading } = useSocketAuth(adminSocket, "admin_password");
+    const useProtect = () => usePasswordProtect("/admin/login", "/admin", loading, loggedIn);
 
-    useEffect(() => {
+    const value = useMemo(() => ({ login, loggedIn, loading, useProtect }), [loggedIn, loading]);
-        if (savedPassword && !loggedIn) {
-            adminSocket.emit("login", savedPassword);
-        }
-    }, [savedPassword]);
-
-    function login(password) {
-        setSavedPassword(password)
-    }
-
-    useSocketListener(adminSocket, "login_response", setLoggedIn);
-
-    const value = useMemo(() => ({ login, loggedIn }), [loggedIn]);
 
     return (
-        <adminContext.Provider value={value}>
+        <adminConnexionContext.Provider value={value}>
             {children}
-        </adminContext.Provider>
+        </adminConnexionContext.Provider>
     );
 }
 
 function useAdminConnexion() {
-    return useContext(adminContext);
+    return useContext(adminConnexionContext);
 }
 
 export { AdminConnexionProvider, useAdminConnexion };

traque-front/context/teamConnexionContext.jsx

@@ -1,32 +1,20 @@
 "use client";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { useSocket } from "./socketContext";
-import { useSocketListener } from "@/hook/useSocketListener";
+import { useSocketAuth } from "@/hook/useSocketAuth";
-import { useLocalStorage } from "@/hook/useLocalStorage";
+import { usePasswordProtect } from "@/hook/usePasswordProtect";
 
 const teamConnexionContext = createContext();
 const TeamConnexionProvider = ({ children }) => {
-    const [loggedIn, setLoggedIn] = useState(false);
-    const [teamId, setTeamId] = useLocalStorage("team_id", null);
     const { teamSocket } = useSocket();
+    const { login, password: teamId, loggedIn, loading } = useSocketAuth(teamSocket, "team_password");
+    const useProtect = () => usePasswordProtect("/team", "/team/track", loading, loggedIn);
 
-    useEffect(() => {
+    const value = useMemo(() => ({ teamId, login, loggedIn, loading, useProtect}), [teamId, login, loggedIn, loading]);
-        if (teamId && !loggedIn) {
-            teamSocket.emit("login", teamId);
-        }
-    }, [teamId]);
-
-    function login(id) {
-        setTeamId(id);
-    }
-    
-    useSocketListener(teamSocket, "login_response", setLoggedIn);
-
-    const value = useMemo(() => ({ teamId, login, loggedIn }), [teamId, login, loggedIn]);
 
     return (
         <teamConnexionContext.Provider value={value}>
-        {children}
+            {children}
         </teamConnexionContext.Provider>
     );
 }
@@ -35,5 +23,5 @@ function useTeamConnexion() {
     return useContext(teamConnexionContext);
 }
 
-export { TeamConnexionProvider, useTeamConnexion};
+export { TeamConnexionProvider, useTeamConnexion };
 

traque-front/hook/useAdmin.jsx

@@ -2,7 +2,7 @@ import { useAdminContext } from "@/context/adminContext";
 import { useSocket } from "@/context/socketContext";
 
 export default function useAdmin(){
-    const {teams, started} = useAdminContext();
+    const {teams, started } = useAdminContext();
     const {adminSocket} = useSocket();
 
     function pollTeams() {
@@ -42,6 +42,6 @@ export default function useAdmin(){
         adminSocket.emit("stop_game");
     }
 
-    return { teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, setTeamName };
+    return {teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, setTeamName };
 
 }

traque-front/hook/useGame.jsx

@@ -6,12 +6,13 @@ import { useTeamContext } from "@/context/teamContext";
 
 export default function useGame() {
     const {teamSocket} = useSocket();
-    const {loggedIn, login, teamId} = useTeamConnexion();
+    const {teamId} = useTeamConnexion();
     const {currentPosition, enemyPosition} = useTeamContext();
 
     function sendCurrentPosition() {
         teamSocket.emit("send_position");
     }
 
-    return { sendCurrentPosition, login, enemyPosition, currentPosition, loggedIn, teamId };
+
+    return { sendCurrentPosition, enemyPosition, currentPosition, teamId };
 }

traque-front/hook/useLocalStorage.jsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 export function useLocalStorage(key, initialValue) {
     const [storedValue, setStoredValue] = useState(initialValue);
+    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         try {
@@ -11,6 +12,7 @@ export function useLocalStorage(key, initialValue) {
         } catch (error) {
             console.log(error);
         }
+        setLoading(false);
     }, []);
 
     const setValue = value => {
@@ -23,5 +25,5 @@ export function useLocalStorage(key, initialValue) {
         }
     }
 
-    return [storedValue, setValue];
+    return [storedValue, setValue, loading];
 }

traque-front/hook/usePasswordProtect.jsx

@@ -0,0 +1,15 @@
+"use client";
+import { redirect, usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+export function usePasswordProtect(loginPath, redirectPath, loading, loggedIn) {
+    const path = usePathname();
+    useEffect(() => {
+        if (!loggedIn && !loading && path !== loginPath) {
+            redirect(loginPath);
+        }
+        if(loggedIn && !loading && path === loginPath) {
+            redirect(redirectPath)
+        }
+    }, [loggedIn, loading, path]);
+}

traque-front/hook/useSocketAuth.jsx

@@ -0,0 +1,43 @@
+import {useEffect, useState} from 'react';
+import { useSocketListener } from './useSocketListener';
+import { useLocalStorage } from './useLocalStorage';
+import { usePathname } from 'next/navigation';
+
+const LOGIN_MESSAGE = "login";
+const LOGIN_RESPONSE_MESSAGE = "login_response";
+
+export function useSocketAuth(socket, passwordName) {
+    const [loggedIn, setLoggedIn] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [waitingForResponse, setWaitingForResponse] = useState(true);
+    const [savedPassword, setSavedPassword, savedPasswordLoading] = useLocalStorage(passwordName, null);
+    
+    useEffect(() => {
+        if (savedPassword && !loggedIn) {
+            socket.emit(LOGIN_MESSAGE, savedPassword);
+        }
+    }, [savedPassword]);
+
+    function login(password) {
+        setSavedPassword(password)
+    }
+
+    useSocketListener(socket, LOGIN_RESPONSE_MESSAGE,(loginResponse) => {
+        setWaitingForResponse(false);
+        setLoggedIn(loginResponse);
+    });
+
+    useEffect(() => {
+        //There is a password saved and we recieved a login response
+        if(savedPassword && !waitingForResponse && !savedPasswordLoading) {
+            setLoading(false);
+        }
+        //We tried to load the saved password but it is not there
+        else if (savedPassword == null && !savedPasswordLoading) {
+            setLoading(false);
+        }
+    }, [waitingForResponse, savedPasswordLoading, savedPassword]);
+
+
+    return {login,password: savedPassword, loggedIn, loading};
+}