Add Unauthorized page

frontend/src/components/DefaultErrorPage.tsx

@@ -0,0 +1,24 @@
+import {JSX} from "react";
+import {BiError} from "react-icons/bi";
+
+export default function DefaultErrorPage(title: string, body: string): JSX.Element {
+    return (
+        <div id="error-page" className={"container is-max-desktop mt-6"}>
+            <article className="message">
+                <div className="message-header has-background-danger-dark">
+                    <span className="icon-text">
+                      <span className="icon">
+                        <i><BiError/></i>
+                      </span>
+                      <span>{title}</span>
+                    </span>
+                </div>
+                <div className="message-body">
+                    {body}
+                    <br/>
+                    <a href={"/"}>Go back to the homepage</a>
+                </div>
+            </article>
+        </div>
+    );
+}

frontend/src/components/authentication/Unauthorized.tsx

@@ -0,0 +1,11 @@
+import {JSX} from "react";
+import DefaultErrorPage from "../DefaultErrorPage.tsx";
+
+export default function Unauthorized(): JSX.Element {
+    return (
+        DefaultErrorPage(
+            "Access to this page is restricted",
+            "Please check with an admin if you believe this is a mistake."
+        )
+    )
+}

frontend/src/main.tsx

@@ -13,6 +13,7 @@ import HomeStudent from "./pages/student/HomeStudent.tsx";
 import HomeTeacher from "./pages/teacher/HomeTeacher.tsx";
 import ErrorPage from "./pages/error.tsx";
 import studentLoader from "./dataloaders/StudentLoader.ts";
+import Unauthorized from "./components/authentication/Unauthorized.tsx";
 
 createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
@@ -21,7 +22,7 @@ createRoot(document.getElementById('root')!).render(
                 <Routes>
                     {/* Public routes */}
                     <Route path={"/login"} element={<LoginScreen/>}/>
-                    <Route path={"/unauthorized"} element={<header>Unauthorized</header>}/>
+                    <Route path={"/unauthorized"} element={<Unauthorized/>}/>
 
                     {/* Protected routes */}
                     <Route element={<RequireAuth allowedRoles={['ADMIN', 'STUDENT', 'TEACHER']}/>}>