diff --git a/config/paths.js b/config/paths.js index a0705f9fa..5e0510214 100644 --- a/config/paths.js +++ b/config/paths.js @@ -57,7 +57,8 @@ module.exports = { appEntryPoints: { app: resolveModule(resolveApp, 'src/components/app/initApp'), login: resolveModule(resolveApp, 'src/components/login/initLogin'), - registration: resolveModule(resolveApp, 'src/components/registration/initRegistration') + registration: resolveModule(resolveApp, 'src/components/registration/initRegistration'), + error: resolveModule(resolveApp, 'src/components/error/initError') }, appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), diff --git a/config/webpack.config.js b/config/webpack.config.js index 8583b21c5..06c1b8aa9 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -786,6 +786,46 @@ module.exports = function (webpackEnv) { chunks: ['registration'], filename: 'registration.regionale-angebote.html', }), + new HtmlWebpackPlugin({ + title: 'Error Page 401', + templateParameters: { + type: 'error', + errorType: '401', + }, + template: 'src/pages/app.html', + chunks: ['error'], + filename: 'error.401.html', + }), + new HtmlWebpackPlugin({ + title: 'Error Page 404', + templateParameters: { + type: 'error', + errorType: '404', + }, + template: 'src/pages/app.html', + chunks: ['error'], + filename: 'error.404.html', + }), + new HtmlWebpackPlugin({ + title: 'Error Page 500', + templateParameters: { + type: 'error', + errorType: '500', + }, + template: 'src/pages/app.html', + chunks: ['error'], + filename: 'error.500.html', + }), + new HtmlWebpackPlugin({ + title: 'Error Page construction', + templateParameters: { + type: 'error', + errorType: 'construction', + }, + template: 'src/pages/app.html', + chunks: ['error'], + filename: 'under-construction.html', + }), // Inlines the webpack runtime script. This script is too small to warrant // a network request. // https://github.com/facebook/create-react-app/issues/5358 diff --git a/src/components/apiWrapper/ajaxCallLogoutKeycloak.ts b/src/components/apiWrapper/ajaxCallLogoutKeycloak.ts index 16bae79a1..8d88596e2 100644 --- a/src/components/apiWrapper/ajaxCallLogoutKeycloak.ts +++ b/src/components/apiWrapper/ajaxCallLogoutKeycloak.ts @@ -3,7 +3,7 @@ import { getTokenFromCookie } from '../sessionCookie/accessSessionCookie'; import { getErrorCaseForStatus, redirectToErrorPage -} from '../errorPage/errorHandling'; +} from '../error/errorHandling'; export const keycloakLogout = (): Promise => new Promise((resolve, reject) => { diff --git a/src/components/apiWrapper/ajaxCallRegistration.ts b/src/components/apiWrapper/ajaxCallRegistration.ts index cf7bfda01..4a64390ab 100644 --- a/src/components/apiWrapper/ajaxCallRegistration.ts +++ b/src/components/apiWrapper/ajaxCallRegistration.ts @@ -7,7 +7,7 @@ import { autoLogin } from '../registration/autoLogin'; import { getErrorCaseForStatus, redirectToErrorPage -} from '../errorPage/errorHandling'; +} from '../error/errorHandling'; import { removeAllCookies } from '../sessionCookie/accessSessionCookie'; let isRequestInProgress = false; diff --git a/src/components/apiWrapper/fetchData.ts b/src/components/apiWrapper/fetchData.ts index 04928c273..f1eb609e4 100644 --- a/src/components/apiWrapper/fetchData.ts +++ b/src/components/apiWrapper/fetchData.ts @@ -3,7 +3,7 @@ import { generateCsrfToken } from '../../resources/scripts/helpers/generateCsrfT import { getErrorCaseForStatus, redirectToErrorPage -} from '../errorPage/errorHandling'; +} from '../error/errorHandling'; import { redirectToHelpmail } from '../registration/prefillPostcode'; import { isU25Registration, diff --git a/src/components/apiWrapper/fetchRCData.ts b/src/components/apiWrapper/fetchRCData.ts index 0d2b55c29..a6e9bbc08 100644 --- a/src/components/apiWrapper/fetchRCData.ts +++ b/src/components/apiWrapper/fetchRCData.ts @@ -2,7 +2,7 @@ import { getTokenFromCookie } from '../sessionCookie/accessSessionCookie'; import { getErrorCaseForStatus, redirectToErrorPage -} from '../errorPage/errorHandling'; +} from '../error/errorHandling'; export const fetchRCData = ( url: string, diff --git a/src/components/error/Error.tsx b/src/components/error/Error.tsx new file mode 100644 index 000000000..e3bec45ea --- /dev/null +++ b/src/components/error/Error.tsx @@ -0,0 +1,97 @@ +import React, { useState } from 'react'; +import ReactDOM from 'react-dom'; +import { errorData } from './errorData'; +import Icon401 from '../../resources/img/illustrations/kein-zutritt.svg'; +import Icon404 from '../../resources/img/illustrations/ooh.svg'; +import Icon500 from '../../resources/img/illustrations/gleich-zurueck.svg'; +import IconConstruction from '../../resources/img/illustrations/baustelle.svg'; + +import '../../resources/styles/styles'; +import './error.styles'; + +const getErrorType = () => { + const errorRoot = document.getElementById('errorRoot'); + return errorRoot?.dataset?.errortype; +}; + +export const initError = () => { + ReactDOM.render(, document.getElementById('errorRoot')); +}; + +const Error = () => { + const [{ imgSrc, headline, infoText, hasCaritasButton }] = useState(() => { + const type = getErrorType(); + + let imgSrc; + switch (type) { + case '401': + imgSrc = Icon401; + break; + case '404': + imgSrc = Icon404; + break; + case '500': + imgSrc = Icon500; + break; + case 'construction': + imgSrc = IconConstruction; + break; + } + + return { ...errorData[type], imgSrc }; + }); + + return ( +
+ +
+
+

Beratung & Hilfe

+
+

Online. Anonym. Sicher.

+
+
+
+ + + + + + + +
+
+

{headline}

+

+ {hasCaritasButton ? ( + + + + ) : ( + + + + )} +

+
+
+ ); +}; diff --git a/src/components/error/error.styles.scss b/src/components/error/error.styles.scss new file mode 100644 index 000000000..740e94461 --- /dev/null +++ b/src/components/error/error.styles.scss @@ -0,0 +1,184 @@ +$header-height: 102px; +$main-height: calc(100vh - #{$header-height}); +$max-height: 100vh; +$illustration-size: 280px; +$icon-size: 170px; +$content-width: calc( + (100vw - (#{$grid-base-twelve} * 3) - #{$grid-base-six}) / 2 +); +$content-width-medium: calc( + (100vw - (#{$grid-base-twelve} * 2) - #{$grid-base-six}) / 2 +); +$content-width-small: calc((100vw) / 2); + +.errorPage { + color: $white; + + &__nav { + background-color: $primary; + float: left; + flex-direction: column; + width: $grid-base-twelve; + height: $max-height; + display: none; + + @media (min-width: $fromLarge) { + display: flex; + } + } + + &__header { + background-color: $background-grey; + display: flex; + flex-direction: row; + justify-content: stretch; + padding: 0 $grid-base-three; + + @media (min-width: $fromLarge) { + padding: $grid-base-four $grid-base-three; + } + } + + &__headerMobile { + display: flex; + width: 100%; + + @media (min-width: $fromLarge) { + width: auto; + } + } + + &__claim { + margin: auto 0 auto auto; + display: none; + + @media (min-width: $fromLarge) { + display: block; + } + } + + &__main { + background-color: $background-grey; + padding: 0 $grid-base-three; + display: flex; + flex-direction: column; + height: 100vh; + + @media (min-width: $fromLarge) { + flex-direction: row; + height: $main-height; + padding: $grid-base-four $grid-base-three; + } + } + + &__illustrationWrapper { + display: flex; + flex-direction: row; + justify-content: center; + position: relative; + + animation: fadeIn linear 0.5s; + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + } + + &__illustration { + width: calc(#{$content-width-small} / 2.25); + min-width: $icon-size; + min-height: $icon-size; + pointer-events: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; + + animation: fadeIn linear 0.8s; + @keyframes fadeIn { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + } + + &__illustration__background { + width: $content-width-small; + height: $content-width-small; + min-width: $illustration-size; + min-height: $illustration-size; + color: $light-neutral; + margin: 0 $grid-base-three; + align-self: center; + + @media (min-width: $fromLarge) { + margin: 0 $grid-base-six; + width: $content-width-medium; + height: $content-width-medium; + } + + @media (min-width: $fromXLarge) { + margin: 0 $grid-base-twelve; + width: $content-width; + height: $content-width; + } + } + + &__content { + width: 100%; + text-align: center; + align-self: center; + margin-top: 0; + + @media (min-width: $fromLarge) { + width: $content-width; + text-align: left; + margin-top: 0; + } + } + + &__content p { + margin: 0; + } + + &__headline { + font-size: $font-size-super-mobile; + font-weight: $font-weight-medium; + margin-bottom: 20px; + + @media (min-width: $fromLarge) { + margin-bottom: 40px; + font-size: $font-size-super-large; + } + } + + &__button { + margin-top: $grid-base-six; + } + + p { + color: $white; + } + + h2 { + font-size: $font-size-h3; + font-weight: $font-weight-medium; + margin: auto; + display: block; + + @media (min-width: $fromLarge) { + font-size: $font-size-h2; + } + } +} diff --git a/src/components/error/errorData.ts b/src/components/error/errorData.ts new file mode 100644 index 000000000..5f14d143e --- /dev/null +++ b/src/components/error/errorData.ts @@ -0,0 +1,23 @@ +export const errorData = { + 401: { + headline: 'Schade!', + infoText: + 'Leider sind Sie nicht berechtigt diese Seite einzusehen.
Bitte melden Sie sich an.' + }, + 404: { + headline: 'Ohh!', + infoText: + 'Es tut uns leid da ist wohl etwas schief gelaufen.
Wir konnten die gewünschte Seite nicht finden.' + }, + 500: { + headline: 'Ups!', + infoText: + 'Wie es aussieht haben wir momentan ein Serverproblem.
Versuchen Sie es später noch einmal.' + }, + construction: { + headline: 'Ohh!', + infoText: + 'Wir arbeiten gerade an unserer Online-Beratung.

Leider können Sie währenddessen die Anwendung nicht nutzen.
Versuchen Sie es später noch einmal.', + hasCaritasButton: true + } +}; diff --git a/src/components/errorPage/errorHandling.ts b/src/components/error/errorHandling.ts similarity index 100% rename from src/components/errorPage/errorHandling.ts rename to src/components/error/errorHandling.ts diff --git a/src/components/error/initError.ts b/src/components/error/initError.ts new file mode 100644 index 000000000..d4242649e --- /dev/null +++ b/src/components/error/initError.ts @@ -0,0 +1,3 @@ +import { initError } from './Error'; + +initError(); diff --git a/src/components/errorPage/errorPage.hbs b/src/components/errorPage/errorPage.hbs deleted file mode 100644 index 51300f5f6..000000000 --- a/src/components/errorPage/errorPage.hbs +++ /dev/null @@ -1,240 +0,0 @@ -
- -
-
-

Beratung & Hilfe

-
-

Online. Anonym. Sicher.

-
-
-
- - - - - - - -
-
-

- {{headline}} -

-

- {{{infoText}}} -

- {{#if hasCaritasButton}} - - {{else}} - - {{/if}} -
-
-
- - \ No newline at end of file diff --git a/src/components/errorPage/scaffolding/constructionPage-demo.hbs b/src/components/errorPage/scaffolding/constructionPage-demo.hbs deleted file mode 100644 index ac6150515..000000000 --- a/src/components/errorPage/scaffolding/constructionPage-demo.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- {{> 'components/errorPage/errorPage' data.components.errorPage.scaffolding.demo.[3]}} -
\ No newline at end of file diff --git a/src/components/errorPage/scaffolding/demo.json b/src/components/errorPage/scaffolding/demo.json deleted file mode 100644 index b57c369d8..000000000 --- a/src/components/errorPage/scaffolding/demo.json +++ /dev/null @@ -1,27 +0,0 @@ -[ - { - "case": "401", - "imgSrc": "/resources/img/illustrations/kein-zutritt.svg", - "headline": "Schade!", - "infoText": "Leider sind Sie nicht berechtigt diese Seite einzusehen.
Bitte melden Sie sich an." - }, - { - "case": "404", - "imgSrc": "/resources/img/illustrations/ooh.svg", - "headline": "Ohh!", - "infoText": "Es tut uns leid da ist wohl etwas schief gelaufen.
Wir konnten die gewünschte Seite nicht finden." - }, - { - "case": "500", - "imgSrc": "/resources/img/illustrations/gleich-zurueck.svg", - "headline": "Ups!", - "infoText": "Wie es aussieht haben wir momentan ein Serverproblem.
Versuchen Sie es später noch einmal." - }, - { - "case": "construction", - "imgSrc": "/resources/img/illustrations/baustelle.svg", - "headline": "Ohh!", - "infoText": "Wir arbeiten gerade an unserer Online-Beratung.

Leider können Sie währenddessen die Anwendung nicht nutzen.
Versuchen Sie es später noch einmal.", - "hasCaritasButton": true - } -] diff --git a/src/components/errorPage/scaffolding/errorPage401-demo.hbs b/src/components/errorPage/scaffolding/errorPage401-demo.hbs deleted file mode 100644 index 22945db60..000000000 --- a/src/components/errorPage/scaffolding/errorPage401-demo.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- {{> 'components/errorPage/errorPage' data.components.errorPage.scaffolding.demo.[0]}} -
\ No newline at end of file diff --git a/src/components/errorPage/scaffolding/errorPage404-demo.hbs b/src/components/errorPage/scaffolding/errorPage404-demo.hbs deleted file mode 100644 index 028694b9e..000000000 --- a/src/components/errorPage/scaffolding/errorPage404-demo.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- {{> 'components/errorPage/errorPage' data.components.errorPage.scaffolding.demo.[1]}} -
\ No newline at end of file diff --git a/src/components/errorPage/scaffolding/errorPage500-demo.hbs b/src/components/errorPage/scaffolding/errorPage500-demo.hbs deleted file mode 100644 index b88cad922..000000000 --- a/src/components/errorPage/scaffolding/errorPage500-demo.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- {{> 'components/errorPage/errorPage' data.components.errorPage.scaffolding.demo.[2]}} -
\ No newline at end of file diff --git a/src/pages/app.html b/src/pages/app.html index 8cc9fd7b9..a6fef072c 100644 --- a/src/pages/app.html +++ b/src/pages/app.html @@ -92,6 +92,12 @@ class="app" id="registrationRoot" > + <% } else if(type === 'error') { %> +
<% } else { %>
<% } %> diff --git a/src/resources/img/illustrations/baustelle.svg b/src/resources/img/illustrations/baustelle.svg new file mode 100644 index 000000000..d421e35b3 --- /dev/null +++ b/src/resources/img/illustrations/baustelle.svg @@ -0,0 +1 @@ +baustelle \ No newline at end of file diff --git a/src/resources/img/illustrations/gleich-zurueck.svg b/src/resources/img/illustrations/gleich-zurueck.svg new file mode 100644 index 000000000..4ee595aff --- /dev/null +++ b/src/resources/img/illustrations/gleich-zurueck.svg @@ -0,0 +1 @@ +_ \ No newline at end of file diff --git a/src/resources/img/illustrations/kein-zutritt.svg b/src/resources/img/illustrations/kein-zutritt.svg new file mode 100644 index 000000000..19ca31bfb --- /dev/null +++ b/src/resources/img/illustrations/kein-zutritt.svg @@ -0,0 +1 @@ +_ \ No newline at end of file diff --git a/src/resources/img/illustrations/ooh.svg b/src/resources/img/illustrations/ooh.svg new file mode 100644 index 000000000..69c257eb2 --- /dev/null +++ b/src/resources/img/illustrations/ooh.svg @@ -0,0 +1 @@ +_ \ No newline at end of file diff --git a/src/resources/scripts/config.ts b/src/resources/scripts/config.ts index 5fd1f86f6..7cc5a3176 100644 --- a/src/resources/scripts/config.ts +++ b/src/resources/scripts/config.ts @@ -47,9 +47,9 @@ export const config = { 'https://www.caritas.de/hilfeundberatung/onlineberatung/datenschutz', updateMonitoring: tld + '/service/users/sessions/monitoring', userSessionsListView: '/sessions/user/view', - error500: tld + endpointPort + '/02components.07errorPage500.html', - error401: tld + endpointPort + '/02components.07errorPage401.html', - error404: tld + endpointPort + '/02components.07errorPage404.html', + error500: tld + endpointPort + '/error.500.html', + error401: tld + endpointPort + '/error.401.html', + error404: tld + endpointPort + '/error.404.html', registrationHelpmailRedirect: 'https://www.u25.de/helpmail/', agencyConsultants: tld + '/service/users/consultants', sessionAssign: tld + '/service/users/sessions',