TILA-1515 (#294)

* show "login page" on every page when not logged in
* report page level erros to sentry
* refactored auth flow
* TILA-1493 add 500 error page

Author: siren

admin-ui/package.json

@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.13",
-    "@axa-fr/react-oidc-context": "^3.1.6",
+    "@axa-fr/react-oidc-context": "3.1.6",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@react-pdf/renderer": "2.0.15",
     "@sentry/react": "^6.18.1",
@@ -68,6 +68,7 @@
     "query-string": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.4",
     "react-i18next": "^11.8.5",
     "react-map-gl": "5.3.16",
     "react-quill": "beta",
@@ -111,5 +112,4 @@
     "testcafe": "^1.11.0",
     "typescript": "^4.3.4"
   }
-
 }

admin-ui/public/5xx.png

@@ -1,6 +1,5 @@
 import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-import { useReactOidc } from "@axa-fr/react-oidc-context";
 import ApplicationRound from "./component/recurring-reservations/ApplicationRound";
 import PageWrapper from "./component/PageWrapper";
 import "./i18n";
@@ -10,7 +9,6 @@ import Recommendation from "./component/recurring-reservations/Recommendation";
 import RecommendationsByApplicant from "./component/recurring-reservations/RecommendationsByApplicant";
 import ApplicationRounds from "./component/recurring-reservations/ApplicationRounds";
 import AllApplicationRounds from "./component/recurring-reservations/AllApplicationRounds";
-import MainLander from "./component/MainLander";
 import Approval from "./component/decisions/Approval";
 import Applications from "./component/applications/Applications";
 import Criteria from "./component/recurring-reservations/Criteria";
@@ -38,22 +36,14 @@ import RequestedReservations from "./component/reservations/requested/RequestedR
 import RequestedReservation from "./component/reservations/requested/RequestedReservation";
 import PrivateRoutes from "./common/PrivateRoutes";
 import { prefixes } from "./common/urls";
-import Error403 from "./common/Error403";
 
 function App(): JSX.Element {
-  const { oidcUser } = useReactOidc();
-
   return (
     <BrowserRouter basename={publicUrl}>
       <PageWrapper>
         <Switch>
-          <Route
-            exact
-            path="/"
-            component={oidcUser ? ApplicationRounds : MainLander}
-          />
-          <Route exact path="/403" component={Error403} />
           <PrivateRoutes>
+            <Route exact path="/" component={ApplicationRounds} />
             <Route
               exact
               path={`${prefixes.applications}/:applicationId`}

admin-ui/src/App.tsx

@@ -1,10 +1,11 @@
-import { useReactOidc } from "@axa-fr/react-oidc-context";
 import { Button, Link } from "hds-react";
 import React from "react";
 import styled from "styled-components";
+import { useAuthState } from "../context/AuthStateContext";
 import { H1 } from "../styles/new-typography";
 import { breakpoints } from "../styles/util";
 import { localLogout } from "./auth/util";
+import { publicUrl } from "./const";
 
 const Wrapper = styled.div`
   margin: 0 var(--spacing-s);
@@ -48,7 +49,7 @@ const ButtonContainer = styled.div`
 `;
 
 const Error403 = (): JSX.Element => {
-  const { oidcUser, logout } = useReactOidc();
+  const { authState } = useAuthState();
 
   return (
     <Wrapper>
@@ -70,20 +71,19 @@ const Error403 = (): JSX.Element => {
         >
           Anna palautetta
         </Link>
-        {oidcUser && (
+        {authState.state !== "NotAutenticated" && (
           <ButtonContainer>
             <Button
               onClick={() => {
                 localLogout();
-                logout();
               }}
             >
               Kirjaudu ulos
             </Button>
           </ButtonContainer>
         )}
       </Content>
-      <Image src="/403.png" />
+      <Image src={`${publicUrl}/403.png`} />
     </Wrapper>
   );
 };

admin-ui/src/common/Error403.tsx

@@ -0,0 +1,69 @@
+import { Link } from "hds-react";
+import React from "react";
+import styled from "styled-components";
+import { H1 } from "../styles/new-typography";
+import { breakpoints } from "../styles/util";
+import { publicUrl } from "./const";
+
+const Wrapper = styled.div`
+  margin: 0 var(--spacing-s);
+  word-break: break-word;
+  gap: var(--spacing-layout-m);
+  display: flex;
+  flex-direction: column;
+  h1 {
+    margin-bottom: 0;
+    font-size: 2.5em;
+  }
+
+  @media (min-width: ${breakpoints.l}) {
+    margin: var(--spacing-layout-2-xl);
+    grid-template-columns: 3fr 1fr;
+    display: grid;
+    h1 {
+      font-size: 4em;
+    }
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: auto;
+  margin-right: auto;
+  gap: 1.5rem;
+`;
+
+const Image = styled.img`
+  width: 100%;
+  max-width: 400px;
+  @media (min-width: ${breakpoints.l}) {
+    width: auto;
+  }
+`;
+
+const Error5xx = (): JSX.Element => {
+  return (
+    <Wrapper>
+      <Content>
+        <H1>Jokin meni vikaan</H1>
+        <p>
+          Pahoittelut, emme valitettavasti pysty näyttämään sivua juuri nyt.
+          Yritä myöhemmin uudelleen!
+        </p>
+        <Link external href="/">
+          Siirry Varaamon etusivulle
+        </Link>
+        <Link
+          external
+          href="https://app.helmet-kirjasto.fi/forms/?site=varaamopalaute&ref=https://tilavaraus.hel.fi/"
+        >
+          Anna palautetta
+        </Link>
+      </Content>
+      <Image src={`${publicUrl}/5xx.png`} />
+    </Wrapper>
+  );
+};
+
+export default Error5xx;

admin-ui/src/common/Error5xx.tsx

@@ -0,0 +1,94 @@
+// eslint-disable-next-line import/no-unresolved
+import { Button, IconArrowRight, IconGroup } from "hds-react";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Footer from "../component/Footer";
+import KorosHeading, { Heading } from "../component/KorosHeading";
+import { useAuthState } from "../context/AuthStateContext";
+import HeroImage from "../images/hero-user@1x.jpg";
+import { H2 } from "../styles/typography";
+import { breakpoints } from "../styles/util";
+
+const Wrapper = styled.div``;
+
+const LoginBtn = styled(Button).attrs({
+  iconLeft: <IconGroup className="icon-group" />,
+  iconRight: <IconArrowRight className="icon-arrow" />,
+  style: {
+    "--color-bus": "var(--color-white)",
+    "--color": "var(--color-black)",
+    "--background-color-focus": "var(--color-bus)",
+    "--color-focus": "var(--color-black)",
+  } as React.CSSProperties,
+})`
+  font-family: var(--tilavaraus-admin-font-bold);
+  font-size: var(--fontsize-heading-l);
+  font-weight: 700;
+  margin-top: var(--spacing-m);
+  padding: var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--spacing-l);
+  transform: scale(0.5);
+
+  svg {
+    display: flex;
+  }
+
+  span {
+    margin: 0 0 0 var(--spacing-s);
+  }
+
+  .icon-group {
+    transform: scale(1.5);
+  }
+
+  @media (min-width: ${breakpoints.m}) {
+    transform: scale(1);
+  }
+`;
+
+const Content = styled.div`
+  max-width: 44rem;
+  min-height: 30rem;
+  margin: var(--spacing-3-xl) auto var(--spacing-2-xl);
+  padding: 0 var(--spacing-xl);
+
+  @media (min-width: ${breakpoints.m}) {
+    text-align: center;
+  }
+`;
+
+const Ingress = styled(H2)`
+  line-height: 1.8125rem;
+`;
+
+function ErrorNotLoggedIn(): JSX.Element {
+  const { t } = useTranslation();
+  const { authState } = useAuthState();
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Wrapper>
+      <KorosHeading heroImage={HeroImage}>
+        <Heading>{t("common.applicationName")}</Heading>
+        <LoginBtn
+          isLoading={loading}
+          onClick={() => {
+            setLoading(true);
+            const { login } = authState;
+            if (login) {
+              login();
+            }
+          }}
+        >
+          {t("Navigation.login")}
+        </LoginBtn>
+      </KorosHeading>
+      <Content>
+        <Ingress>{t("MainLander.ingress")}</Ingress>
+      </Content>
+      <Footer />
+    </Wrapper>
+  );
+}
+
+export default ErrorNotLoggedIn;

admin-ui/src/common/ErrorNotAuthenticated.tsx

@@ -1,21 +1,34 @@
-import { OidcSecure } from "@axa-fr/react-oidc-context";
 import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAuthState } from "../context/AuthStateContext";
 
-import { useData } from "../context/DataContext";
 import Error403 from "./Error403";
+import Error5xx from "./Error5xx";
+import ErrorNotLoggedIn from "./ErrorNotAuthenticated";
 
 type Props = {
   children: React.ReactChild[] | React.ReactChild;
 };
 
 const PrivateRoutes = ({ children }: Props): JSX.Element => {
-  const { hasAnyPermissions } = useData();
+  const { authState } = useAuthState();
+  const { t } = useTranslation();
 
-  if (hasAnyPermissions()) {
-    return <OidcSecure>{children}</OidcSecure>;
+  switch (authState.state) {
+    case "HasPermissions":
+      return <>{children}</>;
+    case "Error":
+      return <Error5xx />;
+    case "NoPermissions":
+      return <Error403 />;
+    case "NotAutenticated":
+      return <ErrorNotLoggedIn />;
+    case "Unknown":
+    case "Authenticated":
+      return <span>{t("AuthState.initializing")}</span>;
+    default:
+      throw new Error(`Illegal auth state :'${authState.state}'`);
   }
-
-  return <Error403 />;
 };
 
 export default PrivateRoutes;

admin-ui/src/common/PrivateRoutes.tsx

@@ -9,16 +9,11 @@ import { setContext } from "@apollo/client/link/context";
 import { onError } from "@apollo/client/link/error";
 import { set } from "lodash";
 
-import {
-  getAccessToken,
-  getApiAccessToken,
-  updateApiAccessToken,
-} from "./auth/util";
+import { getApiAccessToken, updateApiAccessToken } from "./auth/util";
 import { apiBaseUrl } from "./const";
 import { CustomFormData } from "./CustomFormData";
 
-const getNewToken = (): Promise<string> =>
-  updateApiAccessToken(getAccessToken());
+const getNewToken = () => updateApiAccessToken();
 
 const uploadLinkOptions = {
   uri: `${apiBaseUrl}/graphql/`,

admin-ui/src/common/apolloClient.ts

@@ -1,11 +1,10 @@
-import { oidcClientId, oidcUrl, apiScope } from "../const";
+import { oidcClientId, oidcUrl } from "../const";
 
 export default class CustomUserStore {
   storage = window.localStorage;
 
   setItem(key: string, value: string): void {
     this.storage.setItem(key, value);
-    this.storage.removeItem(`oidc.apiToken.${apiScope}`); // side effect, make sure api access token is cleared
   }
 
   getItem(key: string): string | null {

admin-ui/src/common/auth/CustomUserStore.ts

@@ -2,11 +2,7 @@ import axios, { AxiosRequestConfig } from "axios";
 import createAuthRefreshInterceptor from "axios-auth-refresh";
 import applyCaseMiddleware from "axios-case-converter";
 import { authEnabled } from "../const";
-import {
-  getApiAccessToken,
-  updateApiAccessToken,
-  getAccessToken,
-} from "./util";
+import { getApiAccessToken, updateApiAccessToken } from "./util";
 
 const axiosOptions = {
   headers: {
@@ -27,16 +23,28 @@ axiosClient.interceptors.request.use((req: AxiosRequestConfig) => {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const refreshAuthLogic = (failedRequest: any) => {
-  return updateApiAccessToken(getAccessToken())
-    .then((apiAccessToken) => {
-      // eslint-disable-next-line no-param-reassign
-      failedRequest.response.config.headers.Authorization = `Bearer ${apiAccessToken}`;
-      return Promise.resolve();
-    })
-    .catch((e) => {
-      // eslint-disable-next-line
-      console.error("Auth refresh failed", e);
-    });
+  const detail = failedRequest.response.data.detail as string;
+
+  if (
+    detail.indexOf("Autentikaatiotunnuksia ei") !== -1 ||
+    detail.indexOf("AnonymousUser") !== -1 ||
+    detail.indexOf("has expired") !== -1 ||
+    detail.indexOf("too old") !== -1 ||
+    detail.indexOf("No permission to mutate") !== -1
+  ) {
+    return updateApiAccessToken()
+      .then((apiAccessToken) => {
+        // eslint-disable-next-line no-param-reassign
+        failedRequest.response.config.headers.Authorization = `Bearer ${apiAccessToken}`;
+        return Promise.resolve();
+      })
+      .catch((e) => {
+        // eslint-disable-next-line
+        console.error("Auth refresh failed", e);
+      });
+  }
+
+  return Promise.reject();
 };
 
 if (authEnabled) {