diff --git a/frontend/src/App.js b/frontend/src/App.js index 627676c..56c24db 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -8,11 +8,7 @@ import ErrorBoundary from './Components/ComponentUtils/ErrorBoundary.js'; // Always loaded (public + internal) import MultiUploadPage from './Components/Pages/MultiUploadPage'; import ManagementPortalPage from './Components/Pages/ManagementPortalPage'; -import NotFoundPage from './Components/Pages/404Page.js'; -import ForbiddenPage from './Components/Pages/403Page.js'; -import InternalServerErrorPage from './Components/Pages/500Page.js'; -import BadGatewayPage from './Components/Pages/502Page.js'; -import ServiceUnavailablePage from './Components/Pages/503Page.js'; +import ErrorPage from './Components/Pages/ErrorPage.js'; // Lazy loaded (internal only) - Code Splitting für Performance const SlideshowPage = lazy(() => import('./Components/Pages/SlideshowPage')); @@ -23,14 +19,14 @@ const ModerationGroupImagesPage = lazy(() => import('./Components/Pages/Moderati /** * Protected Route Component - * Redirects to upload page if accessed from public host + * Shows 403 page if accessed from public host */ const ProtectedRoute = ({ children }) => { const hostConfig = getHostConfig(); if (hostConfig.isPublic) { - // Redirect to upload page - feature not available on public - return ; + // Show 403 - feature not available on public + return ; } return children; @@ -67,59 +63,56 @@ function App() { } /> {/* Error Pages */} - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> - {/* Internal Only Routes - nur auf internal host geladen */} - {hostConfig.isInternal && ( - <> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - )} + {/* Internal Only Routes - geschützt durch ProtectedRoute */} + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> {/* 404 / Not Found */} - } /> + } /> diff --git a/frontend/src/Components/ComponentUtils/ErrorBoundary.js b/frontend/src/Components/ComponentUtils/ErrorBoundary.js index 68857fd..142a529 100644 --- a/frontend/src/Components/ComponentUtils/ErrorBoundary.js +++ b/frontend/src/Components/ComponentUtils/ErrorBoundary.js @@ -1,5 +1,5 @@ import React from 'react'; -import InternalServerErrorPage from '../Pages/500Page'; +import ErrorPage from '../Pages/ErrorPage'; /** * Error Boundary Component @@ -28,7 +28,7 @@ class ErrorBoundary extends React.Component { render() { if (this.state.hasError) { // Render 500 Error Page - return ; + return ; } return this.props.children; diff --git a/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js b/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js index 0286667..79106e3 100644 --- a/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js +++ b/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js @@ -9,9 +9,9 @@ const Loading = () => {
- {hostConfig.isPublic ? : } - -
-
-

403 - Zugriff verweigert

-

Sie haben keine Berechtigung, auf diese Ressource zuzugreifen.

- - - Zurück zur Startseite - -
-
-
- ) -} - -export default ForbiddenPage diff --git a/frontend/src/Components/Pages/404Page.js b/frontend/src/Components/Pages/404Page.js deleted file mode 100644 index a8897e9..0000000 --- a/frontend/src/Components/Pages/404Page.js +++ /dev/null @@ -1,43 +0,0 @@ -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' - -function FZF() { - const hostConfig = getHostConfig(); - - return ( -
- {hostConfig.isPublic ? : } - -
- {hostConfig.isPublic ? ( -
-

404 - Diese Funktion ist nicht verfügbar

-

Diese Funktion ist nur über das interne Netzwerk erreichbar.

- - - Zurück zum Upload - -
- ) : ( -
-

404 - Seite nicht gefunden

-

Die angeforderte Seite existiert nicht.

- - - Zurück zur Startseite - -
- )} -
-
- ) -} - - -export default FZF diff --git a/frontend/src/Components/Pages/500Page.js b/frontend/src/Components/Pages/500Page.js deleted file mode 100644 index 07c4e04..0000000 --- a/frontend/src/Components/Pages/500Page.js +++ /dev/null @@ -1,30 +0,0 @@ -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' - -function InternalServerErrorPage() { - const hostConfig = getHostConfig(); - - return ( -
- {hostConfig.isPublic ? : } - -
-
-

500 - Interner Serverfehler

-

Es ist ein unerwarteter Fehler aufgetreten. Bitte versuchen Sie es später erneut.

- - - Zurück zur Startseite - -
-
-
- ) -} - -export default InternalServerErrorPage diff --git a/frontend/src/Components/Pages/502Page.js b/frontend/src/Components/Pages/502Page.js deleted file mode 100644 index 1917635..0000000 --- a/frontend/src/Components/Pages/502Page.js +++ /dev/null @@ -1,30 +0,0 @@ -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' - -function BadGatewayPage() { - const hostConfig = getHostConfig(); - - return ( -
- {hostConfig.isPublic ? : } - -
-
-

502 - Bad Gateway

-

Der Server hat eine ungültige Antwort erhalten. Bitte versuchen Sie es später erneut.

- - - Zurück zur Startseite - -
-
-
- ) -} - -export default BadGatewayPage diff --git a/frontend/src/Components/Pages/503Page.js b/frontend/src/Components/Pages/503Page.js deleted file mode 100644 index 88edbde..0000000 --- a/frontend/src/Components/Pages/503Page.js +++ /dev/null @@ -1,30 +0,0 @@ -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' - -function ServiceUnavailablePage() { - const hostConfig = getHostConfig(); - - return ( -
- {hostConfig.isPublic ? : } - -
-
-

503 - Service nicht verfügbar

-

Der Service ist vorübergehend nicht verfügbar. Bitte versuchen Sie es später erneut.

- - - Zurück zur Startseite - -
-
-
- ) -} - -export default ServiceUnavailablePage diff --git a/frontend/src/Components/Pages/Css/ErrorPage.css b/frontend/src/Components/Pages/Css/ErrorPage.css index 8bf1447..c222df6 100644 --- a/frontend/src/Components/Pages/Css/ErrorPage.css +++ b/frontend/src/Components/Pages/Css/ErrorPage.css @@ -1,6 +1,5 @@ /* Error Pages Container */ .containerError { - margin-top: 25vh; display: flex; flex-direction: row; flex-wrap: nowrap; diff --git a/frontend/src/Components/Pages/ErrorPage.js b/frontend/src/Components/Pages/ErrorPage.js new file mode 100644 index 0000000..8bf2d48 --- /dev/null +++ b/frontend/src/Components/Pages/ErrorPage.js @@ -0,0 +1,56 @@ +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 ( +
+ {hostConfig.isPublic ? : } + +
+
+

{error.title}

+

{error.description}

+ + + Zurück zur Startseite + +
+
+
+ ) +} + + +export default ErrorPage diff --git a/test-error-page.html b/test-error-page.html new file mode 100644 index 0000000..93f1caa --- /dev/null +++ b/test-error-page.html @@ -0,0 +1,162 @@ + + + + + + Loading Animation Test + + + +

🎨 Loading Animation Test & Fehlerseiten-Design

+ + +
+

Original Loading Animation

+

Die Standard-Loading-Animation mit grünem Hammer

+
+
+ +
+
+
+ + + + diff --git a/test-loading.html b/test-loading.html index 93f1caa..801bf06 100644 --- a/test-loading.html +++ b/test-loading.html @@ -52,105 +52,93 @@ font-size: 0.95rem; } - /* Loading Animation Styles */ - .loading-logo-container { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 400px; - position: relative; - perspective: 1000px; - } +.loading-logo-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 400px; + position: relative; + perspective: 1000px; +} - .rotor { - display: inline-block; - transform-origin: center; - transform-style: preserve-3d; - will-change: transform; - animation: rotateY 4s linear infinite; - } +/* Äußerer Container: Y-Achsen-Rotation für Wolke UND Hammer zusammen */ +.rotor { + display: inline-block; + transform-origin: center; + transform-style: preserve-3d; + will-change: transform; + animation: rotateY 4s linear infinite; +} - .loading-logo { - display: block; - width: 400px; - height: auto; - } +.loading-logo { + display: block; + width: 400px; + height: auto; +} - .loading-logo #g136 { - transform-box: fill-box; - transform-origin: center; - will-change: transform; - animation: rotateHammerAxis 3s linear infinite; - } +/* Hammer: zusätzliche Rotation um eigene Längsachse */ +.loading-logo #g136 { + transform-box: fill-box; /* Bezieht sich auf eigene Bounding Box */ + transform-origin: center; /* Mittelpunkt der eigenen BBox */ + will-change: transform; + animation: rotateHammerAxis 3s linear infinite; +} - @keyframes rotateY { - from { - transform: rotateY(0deg); - } - to { - transform: rotateY(360deg); - } - } +/* Y-Achsen-Rotation mit leichter X-Neigung (vermeidet Totpunkt bei 90°) */ +@keyframes rotateY { + from { + transform: rotateY(0deg); + } + to { + transform: rotateY(360deg); + } +} + +/* Hammer-Rotation um eigene Längsachse (diagonal) */ +@keyframes rotateHammerAxis { + from { + transform: rotate3d(1, -1, 0, 0deg); + } + to { + transform: rotate3d(1, -1, 0, 360deg); + } +} - @keyframes rotateHammerAxis { - from { - transform: rotate3d(1, -1, 0, 0deg); - } - to { - transform: rotate3d(1, -1, 0, 360deg); - } - }

🎨 Loading Animation Test & Fehlerseiten-Design

-
+

Original Loading Animation

Die Standard-Loading-Animation mit grünem Hammer

-