Håndterer feil ved fornying av token.

navikt · Sep 27, 2023 · b664b23 · b664b23
1 parent 1021e41
commit b664b23
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
     };