From 091c63c14d849b826c3e14cef50f1ab4b14f2a02 Mon Sep 17 00:00:00 2001
From: Dylan Decrulle <dylan.decrulle@outlook.fr>
Date: Tue, 9 Jul 2024 16:52:46 +0200
Subject: [PATCH] feat: autoLogout

---
 package.json                                  |  2 +-
 src/i18n/resources/en.tsx                     |  5 ++
 src/i18n/resources/fr.tsx                     |  5 ++
 src/i18n/resources/sq.tsx                     |  5 ++
 src/i18n/types.ts                             |  1 +
 src/router/router.tsx                         |  2 +
 .../components/Layout/AutoLogoutCountdown.tsx | 75 +++++++++++++++++++
 yarn.lock                                     |  8 +-
 8 files changed, 98 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/components/Layout/AutoLogoutCountdown.tsx

diff --git a/package.json b/package.json
index 43cac67c..b0913005 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@tanstack/react-router": "^1.43.14",
     "axios": "^1.7.2",
     "i18nifty": "^3.2.1",
-    "oidc-spa": "^4.8.0",
+    "oidc-spa": "^4.8.1",
     "powerhooks": "^1.0.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/i18n/resources/en.tsx b/src/i18n/resources/en.tsx
index 2af298e1..b59aca75 100644
--- a/src/i18n/resources/en.tsx
+++ b/src/i18n/resources/en.tsx
@@ -45,6 +45,11 @@ export const translations: Translations<'en'> = {
     ),
     'operator logo alt': 'Insee, measure to understand',
   },
+  AutoLogoutCountdown: {
+    'paragraph still there' : "Are you still there?"
+    ,
+    "paragraph logged out in": ({secondsLeft}) => `You will be logged out in ${secondsLeft}`
+  },
   ErrorComponent: {
     'error button redirect to': ({ redirectTo }) => {
       switch (redirectTo) {
diff --git a/src/i18n/resources/fr.tsx b/src/i18n/resources/fr.tsx
index 7f573262..206ef9ce 100644
--- a/src/i18n/resources/fr.tsx
+++ b/src/i18n/resources/fr.tsx
@@ -44,6 +44,11 @@ export const translations: Translations<'fr'> = {
     ),
     'operator logo alt': 'Insee, mesurer pour comprendre',
   },
+  AutoLogoutCountdown: {
+    'paragraph still there': 'Êtes-vous toujours là?',
+    'paragraph logged out in': ({ secondsLeft }) =>
+      `Vous serez déconnecté dans ${secondsLeft} secondes`,
+  },
   ErrorComponent: {
     'error button redirect to': ({ redirectTo }) => {
       switch (redirectTo) {
diff --git a/src/i18n/resources/sq.tsx b/src/i18n/resources/sq.tsx
index 70c9950b..f69f2f20 100644
--- a/src/i18n/resources/sq.tsx
+++ b/src/i18n/resources/sq.tsx
@@ -45,6 +45,11 @@ export const translations: Translations<'sq'> = {
     ),
     'operator logo alt': 'Insee, mat për të kuptuar',
   },
+  AutoLogoutCountdown: {
+    'paragraph still there': 'A jeni ende aty?',
+    'paragraph logged out in': ({ secondsLeft }) =>
+      `Do të dilni nga sistemi për ${secondsLeft} sekonda`,
+  },
   ErrorComponent: {
     'error button redirect to': ({ redirectTo }) => {
       switch (redirectTo) {
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
index 983233de..0ec65761 100644
--- a/src/i18n/types.ts
+++ b/src/i18n/types.ts
@@ -12,6 +12,7 @@ export type Language = (typeof languages)[number]
 export type ComponentKey =
   | import('shared/components/Layout/Footer').I18n
   | import('shared/components/Layout/Header').I18n
+  | import('shared/components/Layout/AutoLogoutCountdown').I18n
   | import('shared/components/Error/ErrorComponent').I18n
   | import('shared/components/Orchestrator/CustomPages/EndPage').I18n
   | import('shared/components/Orchestrator/CustomPages/ValidationModal').I18n
diff --git a/src/router/router.tsx b/src/router/router.tsx
index dd5a57d7..29da27f8 100644
--- a/src/router/router.tsx
+++ b/src/router/router.tsx
@@ -10,6 +10,7 @@ import { siteMapRoute } from 'pages/SiteMap/route'
 import { visualizeRoute } from 'pages/Visualize/route'
 import { Toaster } from 'react-hot-toast'
 import { ErrorComponent } from 'shared/components/Error/ErrorComponent'
+import { AutoLogoutCountdown } from 'shared/components/Layout/AutoLogoutCountdown'
 import { Footer } from 'shared/components/Layout/Footer'
 import { Header } from 'shared/components/Layout/Header'
 import { NotFoundError } from 'shared/error/notFoundError'
@@ -35,6 +36,7 @@ function RootComponent() {
         <Outlet />
       </main>
       <Footer />
+      <AutoLogoutCountdown />
     </div>
   )
 }
diff --git a/src/shared/components/Layout/AutoLogoutCountdown.tsx b/src/shared/components/Layout/AutoLogoutCountdown.tsx
new file mode 100644
index 00000000..69e7c918
--- /dev/null
+++ b/src/shared/components/Layout/AutoLogoutCountdown.tsx
@@ -0,0 +1,75 @@
+import { useTranslation } from 'i18n'
+import { declareComponentKeys } from 'i18nifty'
+import { useOidc } from 'oidc'
+import { useEffect, useState } from 'react'
+
+export function AutoLogoutCountdown() {
+  const { isUserLoggedIn, subscribeToAutoLogoutCountdown } = useOidc()
+  const [secondsLeft, setSecondsLeft] = useState<number | undefined>(undefined)
+
+  const { t } = useTranslation({ AutoLogoutCountdown })
+  useEffect(
+    () => {
+      if (!isUserLoggedIn) {
+        return
+      }
+
+      const { unsubscribeFromAutoLogoutCountdown } =
+        subscribeToAutoLogoutCountdown(({ secondsLeft }) =>
+          setSecondsLeft(
+            secondsLeft === undefined || secondsLeft > 60
+              ? undefined
+              : secondsLeft
+          )
+        )
+
+      return () => {
+        unsubscribeFromAutoLogoutCountdown()
+      }
+    },
+    // NOTE: These dependency array could very well be empty
+    // we're just making react-hooks/exhaustive-deps happy.
+    // Unless you're hot swapping the oidc context isUserLoggedIn
+    // and subscribeToAutoLogoutCountdown never change for the
+    // lifetime of the app.
+    [isUserLoggedIn, subscribeToAutoLogoutCountdown]
+  )
+
+  if (secondsLeft === undefined) {
+    return null
+  }
+
+  return (
+    <div
+      // Full screen overlay, blurred background
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        backdropFilter: 'blur(10px)',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1000,
+      }}
+    >
+      <div style={{ textAlign: 'center' }}>
+        <p>{t('paragraph still there')}</p>
+        <p>{t('paragraph logged out in', { secondsLeft })}</p>
+      </div>
+    </div>
+  )
+}
+
+const { i18n } = declareComponentKeys<
+  | 'paragraph still there'
+  | {
+      K: 'paragraph logged out in'
+      P: { secondsLeft: number }
+      R: string
+    }
+>()({ AutoLogoutCountdown })
+export type I18n = typeof i18n
diff --git a/yarn.lock b/yarn.lock
index 344a34ef..6b84b01e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4264,10 +4264,10 @@ oidc-client-ts@2.4.0:
     crypto-js "^4.2.0"
     jwt-decode "^3.1.2"
 
-oidc-spa@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-4.8.0.tgz#9210a4a74cdf3ffbd77d8f57ae6ddec8538fb259"
-  integrity sha512-iX3/i0b0uh1yqLGQ/HGNlKcvai6oI+XEf69H5KK+xM6TbqSfXfxDxdYbE62HLv0LBr26xnK/S+tA2a7l7uC78w==
+oidc-spa@^4.8.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-4.8.1.tgz#bef661b1a437c016db28818380ad0aee354931e5"
+  integrity sha512-RTZjakJ8lPOdSZoAsJ6mRP1+j/MukzNZ7ugh1qTrqQyQdhOlJPwHFT9OCevGYMRCsEEss/f74GYuKdT3bF3Org==
   dependencies:
     jwt-decode "^3.1.2"
     oidc-client-ts "2.4.0"