matthias.lotz
e4a76a6b3d
- Created generic ErrorPage.js with errorCode prop - Centralized error messages in ERROR_MESSAGES dictionary - Updated App.js to use ErrorPage for all error routes - Updated ErrorBoundary.js to use new ErrorPage component - Removed duplicate files: 403Page.js, 404Page.js, 500Page.js, 502Page.js, 503Page.js - Fixed 403/404 routing: protected routes show 403, unknown routes show 404 - Error pages now vertically centered with min-height: 100vh
57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
import Navbar from '../ComponentUtils/Headers/Navbar'
|
|
import NavbarUpload from '../ComponentUtils/Headers/NavbarUpload'
|
|
import ErrorAnimation from '../ComponentUtils/ErrorAnimation/ErrorAnimation'
|
|
import { getHostConfig } from '../../Utils/hostDetection'
|
|
|
|
import './Css/ErrorPage.css'
|
|
import '../../App.css'
|
|
|
|
const ERROR_MESSAGES = {
|
|
'403': {
|
|
title: '403 - Zugriff verweigert',
|
|
description: 'Sie haben keine Berechtigung, auf diese Ressource zuzugreifen.'
|
|
},
|
|
'404': {
|
|
title: '404 - Seite nicht gefunden',
|
|
description: 'Die angeforderte Seite existiert nicht.'
|
|
},
|
|
'500': {
|
|
title: '500 - Interner Serverfehler',
|
|
description: 'Es ist ein interner Serverfehler aufgetreten.'
|
|
},
|
|
'502': {
|
|
title: '502 - Bad Gateway',
|
|
description: 'Der Server hat eine ungültige Antwort erhalten.'
|
|
},
|
|
'503': {
|
|
title: '503 - Service nicht verfügbar',
|
|
description: 'Der Service ist vorübergehend nicht verfügbar.'
|
|
}
|
|
};
|
|
|
|
function ErrorPage({ errorCode = '404' }) {
|
|
const hostConfig = getHostConfig();
|
|
const error = ERROR_MESSAGES[errorCode] || ERROR_MESSAGES['404'];
|
|
|
|
return (
|
|
<div className="allContainerNoBackground">
|
|
{hostConfig.isPublic ? <NavbarUpload /> : <Navbar />}
|
|
|
|
<div className="containerError">
|
|
<div style={{ textAlign: 'center' }}>
|
|
<h1 style={{ textAlign: 'center' }}>{error.title}</h1>
|
|
<p>{error.description}</p>
|
|
<ErrorAnimation errorCode={errorCode} />
|
|
<a href="/" style={{ color: '#007bff', textDecoration: 'underline' }}>
|
|
Zurück zur Startseite
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
export default ErrorPage
|