Design error pages

2018-11-12 16:41:25 +01:00 · 2018-11-12 16:41:25 +01:00 · 5acee296ca
parent b176c6ce65
commit 5acee296ca
3 changed files with 79 additions and 8 deletions
--- a/pages/_error.js
+++ b/pages/_error.js
@ -1,9 +1,14 @@
-import React from 'react'
 import Head from 'next/head'
+import React from 'react'
+import {Footer, TurniereNavigation} from "../js/CommonComponents";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import {Container} from "reactstrap";
+import '../static/everypage.css'
+import '../static/css/error.css'

 export default class Error extends React.Component {
    static getInitialProps({ res, err }) {
-        const statusCode = res ? res.statusCode : err ? err.statusCode : null;
+        const statusCode = res ? res.statusCode : err ? err.statusCode : 400;
        return { statusCode }
    }

@ -11,14 +16,71 @@ export default class Error extends React.Component {
        return (
            <div>
                <Head>
-                    <title>Turnie.re - Error {this.props.statusCode}</title>
+                    <title>turnie.re - Error {this.props.statusCode}</title>
                </Head>
-                <p>
-                  {this.props.statusCode
-                    ? `An error ${this.props.statusCode} occurred on server`
-                    : 'An error occurred on client'}
-                </p>
+                <TurniereNavigation/>
+                <ErrorPage statusCode={this.props.statusCode}/>
+                <Footer/>
            </div>
        )
    }
 }
+
+function ErrorPage(props){
+    return (
+        <Container className="mb-5">
+            <div className="row mb-5">
+                <div className="col-lg text-center">
+                    <img src="/static/images/logo-questionmark.png" className="w-75 img-fluid"/>
+                </div>
+                <div className="col-lg error-code-box">
+                    <h1 className="custom-font py-5">{props.statusCode}</h1>
+                </div>
+            </div>
+            <ErrorMessage code={props.statusCode}/>
+        </Container>
+    );
+}
+
+function ErrorMessage(props) {
+    switch (props.code) {
+        case 400:
+            return (<div className="running-text">
+                <h2>Deine Anfrage ist fehlerhaft.</h2>
+                <p>
+                    Wir empfehlen, die eingegebene Seite über die <a href="/">Startseite</a> zu suchen.
+                </p>
+            </div>);
+        case 403:
+            return (<div className="running-text">
+                <h2>Du bist nicht autorisiert, diese Seite aufzurufen.</h2>
+                <p>
+                    Bitte stelle sicher, dass Du angemeldet bist und auf dieses Turnier oder dieses Match zugreifen darfst.
+                </p>
+                <p>
+                    Wir empfehlen, die eingegebene Seite über die <a href="/">Startseite</a> zu suchen.
+                </p>
+            </div>);
+        case 404:
+            return (<div className="running-text">
+                <h2>Die aufgerufene Seite wurde leider nicht gefunden.</h2>
+                <p>
+                    Entweder hast Du dich vertippt, oder die gesuchte Seite gibt es nicht.
+                </p>
+                <p>
+                    Wir empfehlen, die eingegebene Seite über die <a href="/">Startseite</a> zu suchen.
+                </p>
+            </div>);
+        case 500:
+            return (<div className="running-text">
+                <h2>Diese Seite funktioniert nicht.</h2>
+                <p>
+                    turnie.re kann Deine Anfrage im Moment nicht verarbeiten. Bitte versuche es später erneut.
+                </p>
+            </div>);
+        default:
+            return (<div>
+                <h2>Ein unbekannter Fehler ist aufgetreten.</h2>
+            </div>);
+    }
+}
--- a/static/css/error.css
+++ b/static/css/error.css
@ -0,0 +1,9 @@
+.error-code-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.error-code-box h1 {
+    font-size: 10em;
+}
--- a/static/images/logo-questionmark.png
+++ b/static/images/logo-questionmark.png