feat: 🎸 migrate error page to react

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'),

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

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<any> =>
 	new Promise((resolve, reject) => {

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;

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,

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,

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(<Error />, 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 (
+		<div className="errorPage">
+			<nav className="errorPage__nav"></nav>
+			<header className="errorPage__header">
+				<div className="errorPage__headerMobile">
+					<h2>Beratung & Hilfe</h2>
+				</div>
+				<p className="errorPage__claim">Online. Anonym. Sicher.</p>
+			</header>
+			<div className="errorPage__main">
+				<div className="errorPage__illustrationWrapper">
+					<svg
+						className="errorPage__illustration__background"
+						xmlns="http://www.w3.org/2000/svg"
+						xmlnsXlink="http://www.w3.org/1999/xlink"
+						viewBox="0 0 72 72"
+					>
+						<defs>
+							<circle id="dot-a" cx="36" cy="36" r="30" />
+						</defs>
+						<use xlinkHref="#dot-a" />
+					</svg>
+					<img
+						alt=""
+						className="errorPage__illustration"
+						src={imgSrc}
+					/>
+				</div>
+				<div className="errorPage__content">
+					<h1 className="errorPage__headline">{headline}</h1>
+					<p
+						className="errorPage__infoText"
+						dangerouslySetInnerHTML={{
+							__html: infoText
+						}}
+					/>
+					{hasCaritasButton ? (
+						<a href="https://www.caritas.de/onlineberatung">
+							<button className="errorPage__button button__item button__primary">
+								Zur Caritas Website
+							</button>
+						</a>
+					) : (
+						<a href="/login.html">
+							<button className="errorPage__button button__item button__primary">
+								Zum Login
+							</button>
+						</a>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};

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;
+		}
+	}
+}

src/components/error/errorData.ts

@@ -0,0 +1,23 @@
+export const errorData = {
+	401: {
+		headline: 'Schade!',
+		infoText:
+			'Leider sind Sie nicht berechtigt diese Seite  einzusehen.<br>Bitte melden Sie sich an.'
+	},
+	404: {
+		headline: 'Ohh!',
+		infoText:
+			'Es tut uns leid da ist wohl etwas schief gelaufen.<br>Wir konnten die gewünschte Seite nicht finden.'
+	},
+	500: {
+		headline: 'Ups!',
+		infoText:
+			'Wie es aussieht haben wir momentan ein Serverproblem.<br>Versuchen Sie es später noch einmal.'
+	},
+	construction: {
+		headline: 'Ohh!',
+		infoText:
+			'Wir arbeiten gerade an unserer Online-Beratung.<br><br>Leider können Sie währenddessen die Anwendung nicht nutzen.<br>Versuchen Sie es später noch einmal.',
+		hasCaritasButton: true
+	}
+};