turniere-frontend/js/components/ErrorComponents.js

82 lines
2.8 KiB
JavaScript

import Head from 'next/head';
import React from 'react';
import {Container} from 'reactstrap';
import {TurniereNavigation} from './Navigation';
import {Footer} from './Footer';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../../static/css/everypage.css';
import '../../static/css/error.css';
export class ErrorPageComponent extends React.Component {
static getInitialProps({statusCode}) {
return {statusCode};
}
render() {
return (
<div>
<Head>
<title>turnie.re - Error {this.props.statusCode}</title>
</Head>
<TurniereNavigation/>
<ErrorPage statusCode={this.props.statusCode}/>
<Footer/>
</div>
);
}
}
export 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) {
const errors = {};
errors[400] = {title: 'Deine Anfrage ist fehlerhaft.', message: '', showTryStartpage: true};
errors[403] = {
title: 'Du bist nicht autorisiert, diese Seite aufzurufen.',
message: 'Bitte stelle sicher, dass Du angemeldet bist und auf dieses Turnier oder dieses Match zugreifen' +
' darfst.',
showTryStartpage: true
};
errors[404] = {
title: 'Die aufgerufene Seite wurde leider nicht gefunden.',
message: 'Entweder hast Du dich vertippt, oder die gesuchte Seite gibt es nicht.',
showTryStartpage: true
};
errors[500] = {
title: 'Diese Seite funktioniert nicht.',
message: 'turnie.re kann Deine Anfrage im Moment nicht verarbeiten. Bitte versuche es später erneut.',
showTryStartpage: false
};
errors['unknown'] = {title: 'Ein unbekannter Fehler ist aufgetreten.', message: '', showTryStartpage: true};
const error = errors[props.code] === undefined ? errors['unknown'] : errors[props.code];
return <ErrorText title={error.title} message={error.message} showTryStartpage={error.showTryStartpage}/>;
}
function ErrorText(props) {
return (<div className='running-text'>
{props.title && <h2>{props.title}</h2>}
{props.message && <p>{props.message}</p>}
{props.showTryStartpage && <p>
Wir empfehlen, die eingegebene Seite über die <a href="/">Startseite</a> zu suchen.
</p>}
</div>);
}