feat: add re-login message

src/main/webapp/src/App.jsx

@@ -1,11 +1,11 @@
 import {useEffect, useRef} from 'react'
 import {Nav} from "./components/Nav.jsx";
-import {createBrowserRouter, Outlet, RouterProvider, useRouteError} from "react-router-dom";
+import {createBrowserRouter, Outlet, RouterProvider, useLocation, useRouteError} from "react-router-dom";
 import {Home} from "./pages/Homepage.jsx";
 import {AdminRoot, getAdminChildren} from "./pages/admin/AdminRoot.jsx";
 import {AuthCallback} from "./components/auhCallback.jsx";
-import {KeycloakContextProvider, useAuthDispatch} from "./hooks/useAuth.jsx";
+import {KeycloakContextProvider, useAuth, useAuthDispatch} from "./hooks/useAuth.jsx";
-import {check_validity} from "./utils/auth.js";
+import {check_validity, login} from "./utils/auth.js";
 import {ToastContainer} from "react-toastify";
 
 import './App.css'
@@ -14,6 +14,7 @@ import {ClubRoot, getClubChildren} from "./pages/club/ClubRoot.jsx";
 import {DemandeAff, DemandeAffOk} from "./pages/DemandeAff.jsx";
 import {MePage} from "./pages/MePage.jsx";
 import {CompetitionRoot, getCompetitionChildren} from "./pages/competition/CompetitionRoot.jsx";
+import {FallingLines} from "react-loader-spinner";
 
 const router = createBrowserRouter([
     {
@@ -113,6 +114,44 @@ function Root() {
                 theme="light"
                 transition: Flip
             />
+            <ReAuthMsg/>
+        </div>
+    </>
+}
+
+function ReAuthMsg() {
+    const {is_authenticated} = useAuth()
+    const location = useLocation()
+
+    const notAuthPaths = [
+        /^\/$/s,
+        /^\/affiliation(\/)?$/s,
+        /^\/complete\/auth.*$/s
+    ]
+
+    console.log(location.pathname, notAuthPaths.some(r => r.test(location.pathname)))
+
+    if (is_authenticated || notAuthPaths.some(r => r.test(location.pathname)))
+        return <></>
+    return <>
+        <div className="overlayBG" style={{position: 'fixed'}}>
+            <div className="overlayContent" onClick={(e) => {
+                e.stopPropagation()
+            }}>
+                <div className="card">
+                    <div className="card-header">
+                        <h5>Session expirée</h5>
+                    </div>
+                    <div className="card-body">
+                        <p className="card-text">Votre session a expirée, veuillez vous reconnecter pour continuer à
+                            utiliser l'application.</p>
+                    </div>
+                    <div className="card-footer">
+                        <button className="btn btn-primary" onClick={() => login()} style={{marginRight: "0.5em"}}>Se reconnecter</button>
+                        <a className="btn btn-secondary" href="/">Accueil</a>
+                    </div>
+                </div>
+            </div>
         </div>
     </>
 }