Reroute to login page

src/bootstrap.tsx

@@ -68,6 +68,7 @@ import { SHOGunAPIClient } from '@terrestris/shogun-util/dist/service/SHOGunAPIC
 
 const App = React.lazy(() => import('./App'));
 
+import RerouteToLogin from './components/RerouteToLogin';
 import {
   PluginProvider
 } from './context/PluginContext';
@@ -811,6 +812,7 @@ const renderApp = async () => {
     }
 
     let type: AlertProps['type'] = 'warning';
+    let action: React.ReactNode;
     let errorDescription = i18n.t('Index.errorDescription');
 
     if ((error as Error)?.message === LoadingErrorCode.APP_ID_NOT_SET) {
@@ -820,6 +822,10 @@ const renderApp = async () => {
     if ((error as Error)?.message === LoadingErrorCode.APP_UNAUTHORIZED) {
       errorDescription = i18n.t('Index.permissionDeniedUnauthorized');
       type = 'error';
+      action =
+        <RerouteToLogin
+          rerouteMsg={i18n.t('Index.rerouteToLoginPage')}
+        />;
     }
 
     if ((error as Error)?.message === LoadingErrorCode.APP_CONFIG_NOT_FOUND) {
@@ -836,13 +842,16 @@ const renderApp = async () => {
 
     root.render(
       <React.StrictMode>
-        <Alert
-          className="error-boundary"
-          message={i18n.t('Index.errorMessage')}
-          description={errorDescription}
-          type={type}
-          showIcon
-        />
+        <SHOGunAPIClientProvider client={client}>
+          <Alert
+            className="error-boundary"
+            message={i18n.t('Index.errorMessage')}
+            description={errorDescription}
+            type={type}
+            action={action}
+            showIcon
+          />
+        </SHOGunAPIClientProvider>
       </React.StrictMode>
     );
   }

src/components/RerouteToLogin/index.tsx

@@ -0,0 +1,67 @@
+import React, {
+  useEffect,
+  useState
+} from 'react';
+
+import {
+  DoubleLeftOutlined
+} from '@ant-design/icons';
+
+import {
+  Button,
+  Tooltip,
+  Flex
+} from 'antd';
+
+import useSHOGunAPIClient from '../../hooks/useSHOGunAPIClient';
+
+export interface RerouteToLoginProps {
+  rerouteMsg: string;
+}
+
+const RerouteToLogin: React.FC<RerouteToLoginProps> = ({
+  rerouteMsg
+}) => {
+
+  const [loginUrl, setLoginUrl] = useState<string>();
+
+  const client = useSHOGunAPIClient();
+  const keycloak = client?.getKeycloak();
+
+  useEffect(() => {
+    const getLoginUrl = async () => {
+      const url = await keycloak?.createLoginUrl();
+      if (url) {
+        setLoginUrl(url);
+      }
+    };
+
+    getLoginUrl();
+  }, [keycloak]);
+
+  const onLoginLinkClick = () => {
+    if (keycloak) {
+      window.open(loginUrl, '_self');
+    }
+  };
+
+  return (
+    <Flex
+      align='center'
+    >
+      <Tooltip
+        title='Login'
+      >
+        <Button
+          type='link'
+          onClick={onLoginLinkClick}
+        >
+          <DoubleLeftOutlined />
+        </Button>
+      </Tooltip>
+      {rerouteMsg}
+    </Flex>
+  );
+};
+
+export default RerouteToLogin;

src/i18n/translations.ts

@@ -162,7 +162,8 @@ export default {
         errorDescriptionAppIdNotSet: 'Keine Applikations-ID angegeben. Bitte geben Sie die ID als Abfrageparameter an, z.B. ?applicationId=1909',
         errorDescriptionAppConfigNotFound: 'Die Applikation mit der ID {{applicationId}} konnte nicht geladen werden.',
         errorDescriptionAppConfigStaticNotFound: 'Die Konfiguration der Applikation konnte nicht geladen werden.',
-        permissionDeniedUnauthorized: 'Dies ist keine öffentliche Applikation. Anmeldung erforderlich.'
+        permissionDeniedUnauthorized: 'Dies ist keine öffentliche Applikation. Anmeldung erforderlich.',
+        rerouteToLoginPage: 'Zur Anmeldeseite.'
       },
       Nominatim: {
         placeholder: 'Ortsname, Straßenname, Stadtteilname, POI usw.'
@@ -453,7 +454,8 @@ export default {
         errorDescriptionAppIdNotSet: 'No application ID given. Please provide the ID as query parameter, e.g. ?applicationId=1909',
         errorDescriptionAppConfigNotFound: 'The application with ID {{applicationId}} could not be loaded correctly.',
         errorDescriptionAppConfigStaticNotFound: 'The configuration of the application could not be loaded correctly.',
-        permissionDeniedUnauthorized: 'This application is not public. Authentication required.'
+        permissionDeniedUnauthorized: 'This application is not public. Authentication required.',
+        rerouteToLoginPage: 'To login page.'
       },
       Nominatim: {
         placeholder: 'Place name, street name, district name, POI, etc.'

src/index.less

@@ -33,9 +33,15 @@ body,
 
 .error-boundary {
   min-width: 400px;
+  min-height: 125px;
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
+
+  .ant-alert-action {
+    position: absolute;
+    top: 70%;
+  }
 }