turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Design error pages

This commit is contained in:
Felix Hamme 2018-11-12 16:41:25 +01:00
parent b176c6ce65
commit 5acee296ca
3 changed files with 79 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
pages/_error.js
View File

@ -1,9 +1,14 @@
import React from 'react'
import Head from 'next/head' 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 { export default class Error extends React.Component {
static getInitialProps({ res, err }) { static getInitialProps({ res, err }) {
const statusCode = res ? res.statusCode : err ? err.statusCode : null; const statusCode = res ? res.statusCode : err ? err.statusCode : 400;
return { statusCode } return { statusCode }
} }
@ -11,14 +16,71 @@ export default class Error extends React.Component {
return ( return (
<div> <div>
<Head> <Head>
<title>Turnie.re - Error {this.props.statusCode}</title> <title>turnie.re - Error {this.props.statusCode}</title>
</Head> </Head>
<p> <TurniereNavigation/>
{this.props.statusCode <ErrorPage statusCode={this.props.statusCode}/>
? `An error ${this.props.statusCode} occurred on server` <Footer/>
: 'An error occurred on client'}
</p>
</div> </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>);
}
}

9
static/css/error.css Normal file
View File

@ -0,0 +1,9 @@
.error-code-box {
display: flex;
justify-content: center;
align-items: center;
}
.error-code-box h1 {
font-size: 10em;
}

BIN
static/images/logo-questionmark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB