From b664b23064d70e5a74805aaf8e221cfa7c90c97e Mon Sep 17 00:00:00 2001
From: Terje Karlsen <terjeofnorway@gmail.com>
Date: Wed, 27 Sep 2023 09:20:45 +0200
Subject: [PATCH] =?UTF-8?q?H=C3=A5ndterer=20feil=20ved=20fornying=20av=20t?=
 =?UTF-8?q?oken.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.ts                                | 11 ++--
 .../logoutWarning/LogoutWarning.module.scss   |  2 +-
 .../header/logoutWarning/LogoutWarning.tsx    | 53 +++++++++++++++----
 src/utils/hooks/useLoginStatus.ts             | 12 +++--
 4 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/src/api/api.ts b/src/api/api.ts
index 8485f9967..6abf95343 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -74,9 +74,14 @@ export const fornyInnloggingFetch = (environment: Environment): Promise<SessionD
 
     return fetchToJson(refreshUrl, {
         credentials: 'include',
-    }).then((result: any) => {
-        return adaptFulfilledSessionDataFromAPI(result);
-    });
+    })
+        .then((result: any) => {
+            return adaptFulfilledSessionDataFromAPI(result);
+        })
+        .catch((e) => {
+            window.dispatchEvent(new Event('INVALID_SESSION'));
+            throw new Error(`Error refreshing session [error: ${e}]`);
+        });
 };
 
 export const hentVarslerFetch = (VARSEL_API_URL: string): Promise<varselinnboksData> => {
diff --git a/src/komponenter/header/logoutWarning/LogoutWarning.module.scss b/src/komponenter/header/logoutWarning/LogoutWarning.module.scss
index 08ada3079..4f5cf6102 100644
--- a/src/komponenter/header/logoutWarning/LogoutWarning.module.scss
+++ b/src/komponenter/header/logoutWarning/LogoutWarning.module.scss
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     padding: 1rem;
-    align-items: center;
+    align-items: flex-start;
     box-shadow: var(--a-shadow-large);
     justify-content: center;
     opacity: 0;
diff --git a/src/komponenter/header/logoutWarning/LogoutWarning.tsx b/src/komponenter/header/logoutWarning/LogoutWarning.tsx
index 7c23dc385..786137133 100644
--- a/src/komponenter/header/logoutWarning/LogoutWarning.tsx
+++ b/src/komponenter/header/logoutWarning/LogoutWarning.tsx
@@ -11,8 +11,15 @@ import { LangKey } from 'tekster/ledetekster';
 import styles from './LogoutWarning.module.scss';
 
 export const LogoutWarning = () => {
-    const { refreshTokenHandler, logoutHandler, isTokenExpiring, isSessionExpiring, secondsToSessionExpires } =
-        useLoginStatus();
+    const {
+        refreshTokenHandler,
+        loginHandler,
+        logoutHandler,
+        isTokenExpiring,
+        isSessionExpiring,
+        secondsToSessionExpires,
+        hasAuthError,
+    } = useLoginStatus();
     const [isOpen, setIsOpen] = React.useState(false);
     const { language } = useSelector((state: AppState) => state.language);
 
@@ -34,8 +41,24 @@ export const LogoutWarning = () => {
         return null;
     }
 
-    const titleId: LangKey = isSessionExpiring ? 'snart-session-logget-ut-tittel' : 'snart-token-logget-ut-tittel';
-    const textBodyId: LangKey = isSessionExpiring ? 'snart-session-logget-ut-body' : 'snart-token-logget-ut-body';
+    const getTitleId = () => {
+        if (hasAuthError) {
+            return 'token-feilet-tittel';
+        }
+
+        return isSessionExpiring ? 'snart-session-logget-ut-tittel' : 'snart-token-logget-ut-tittel';
+    };
+
+    const getBodyId = () => {
+        if (hasAuthError) {
+            return 'token-feilet-body';
+        }
+
+        return isSessionExpiring ? 'snart-session-logget-ut-body' : 'snart-token-logget-ut-body';
+    };
+
+    const titleId: LangKey = getTitleId();
+    const textBodyId: LangKey = getBodyId();
 
     const minutesToSessionEnd = Math.ceil(secondsToSessionExpires / 60);
 
@@ -53,19 +76,31 @@ export const LogoutWarning = () => {
             <Modal.Body className={styles.content}>
                 <BodyLong spacing>{finnTekst(textBodyId, language)}</BodyLong>
                 <div className={styles.buttonWrapper}>
-                    {isSessionExpiring && (
+                    {hasAuthError && (
+                        <>
+                            <Button className={styles.confirm} onClick={loginHandler}>
+                                {finnTekst('logg-inn-pa-nytt-knapp', language)}
+                            </Button>
+                            <Button className={styles.confirm} onClick={logoutHandler} variant="tertiary">
+                                {finnTekst('token-feilet-avbryt', language)}
+                            </Button>
+                        </>
+                    )}
+                    {!hasAuthError && isSessionExpiring && (
                         <Button className={styles.confirm} onClick={onCloseHandler}>
                             {finnTekst('ok', language)}
                         </Button>
                     )}
-                    {!isSessionExpiring && isTokenExpiring && (
+                    {!hasAuthError && !isSessionExpiring && isTokenExpiring && (
                         <Button className={styles.confirm} onClick={refreshTokenHandler}>
                             {finnTekst('svarknapp-ja', language)}
                         </Button>
                     )}
-                    <Button className={styles.logout} onClick={logoutHandler} variant="tertiary">
-                        {finnTekst('logg-ut-knapp', language)}
-                    </Button>
+                    {!hasAuthError && (
+                        <Button className={styles.logout} onClick={logoutHandler} variant="tertiary">
+                            {finnTekst('logg-ut-knapp', language)}
+                        </Button>
+                    )}
                 </div>
             </Modal.Body>
         </Modal>
diff --git a/src/utils/hooks/useLoginStatus.ts b/src/utils/hooks/useLoginStatus.ts
index 03fbebc65..9010d403a 100644
--- a/src/utils/hooks/useLoginStatus.ts
+++ b/src/utils/hooks/useLoginStatus.ts
@@ -2,19 +2,20 @@ import { useEffect, useRef, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { hentInnloggingsstatus, fornyInnlogging } from 'store/reducers/innloggingsstatus-duck';
-import { getLogOutUrl } from 'utils/login';
+import { getLogOutUrl, getLoginUrl } from 'utils/login';
 import { useLoginDebug } from './useLoginDebug';
 
 const stateSelector = (state: AppState) => ({
     innloggetStatus: state.innloggingsstatus.data,
     environment: state.environment,
+    arbeidsflate: state.arbeidsflate.status,
 });
 
 let timeoutId: NodeJS.Timeout | null = null;
 
 export const useLoginStatus = () => {
     const dispatch = useDispatch();
-    const { innloggetStatus, environment } = useSelector(stateSelector);
+    const { innloggetStatus, environment, arbeidsflate } = useSelector(stateSelector);
     const [isTokenExpiring, setIsTokenExpiring] = useState<boolean | null>(null);
     const [isSessionExpiring, setIsSessionExpiring] = useState<boolean | null>(null);
     const [hasAuthError, setHasAuthError] = useState<boolean>(false);
@@ -27,7 +28,7 @@ export const useLoginStatus = () => {
     innloggetStatusRef.current = innloggetStatus;
 
     useEffect(() => {
-        window.addEventListener('INVALID-SESSION', () => {
+        window.addEventListener('INVALID_SESSION', () => {
             setHasAuthError(true);
         });
     }, []);
@@ -82,6 +83,10 @@ export const useLoginStatus = () => {
         window.location.href = getLogOutUrl(environment);
     };
 
+    const loginHandler = () => {
+        window.location.href = getLoginUrl(environment, arbeidsflate);
+    };
+
     const onVisibilityChange = () => {
         if (document.visibilityState === 'visible') {
             checkLoginAndRepeat();
@@ -99,6 +104,7 @@ export const useLoginStatus = () => {
         isSessionExpiring,
         refreshTokenHandler,
         logoutHandler,
+        loginHandler,
         secondsToSessionExpires,
         hasAuthError,
     };