From a2a53b8783a8517db3752c78191b978d79a761c4 Mon Sep 17 00:00:00 2001
From: lcross2002 <liamdcross@outlook.com>
Date: Sat, 20 Apr 2024 16:40:54 +0100
Subject: [PATCH] Error pages and handling
---
.../src/components/ErrorPage/ErrorPage.scss | 16 ++++
client/src/components/ErrorPage/ErrorPage.tsx | 15 ++++
.../src/components/ErrorPage/ErrorPage404.tsx | 15 ++++
.../ProtectedRoute/AirlineProtectedRoute.tsx | 14 ++++
.../ProtectedRoute/CustomerProtectedRoute.tsx | 14 ++++
client/src/main.tsx | 81 ++++++++++++-------
6 files changed, 126 insertions(+), 29 deletions(-)
create mode 100644 client/src/components/ErrorPage/ErrorPage.scss
create mode 100644 client/src/components/ErrorPage/ErrorPage.tsx
create mode 100644 client/src/components/ErrorPage/ErrorPage404.tsx
create mode 100644 client/src/components/ProtectedRoute/AirlineProtectedRoute.tsx
create mode 100644 client/src/components/ProtectedRoute/CustomerProtectedRoute.tsx
diff --git a/client/src/components/ErrorPage/ErrorPage.scss b/client/src/components/ErrorPage/ErrorPage.scss
new file mode 100644
index 0000000..9e720df
--- /dev/null
+++ b/client/src/components/ErrorPage/ErrorPage.scss
@@ -0,0 +1,16 @@
+.error-page {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+}
+
+.error-page-card {
+ display: flex;
+ align-items: center;
+ font-size: 2rem;
+ text-align: center;
+ width: 20vw;
+ min-width: 350px;
+}
diff --git a/client/src/components/ErrorPage/ErrorPage.tsx b/client/src/components/ErrorPage/ErrorPage.tsx
new file mode 100644
index 0000000..9ca1382
--- /dev/null
+++ b/client/src/components/ErrorPage/ErrorPage.tsx
@@ -0,0 +1,15 @@
+import './ErrorPage.scss';
+
+function ErrorPage() {
+ return (
+ <>
+ <div className='error-page'>
+ <div className='card error-page-card'>
+ Invalid Operation
+ </div>
+ </div>
+ </>
+ )
+}
+
+export default ErrorPage;
diff --git a/client/src/components/ErrorPage/ErrorPage404.tsx b/client/src/components/ErrorPage/ErrorPage404.tsx
new file mode 100644
index 0000000..9ce5f64
--- /dev/null
+++ b/client/src/components/ErrorPage/ErrorPage404.tsx
@@ -0,0 +1,15 @@
+import './ErrorPage.scss';
+
+function ErrorPage404() {
+ return (
+ <>
+ <div className='error-page'>
+ <div className='card error-page-card'>
+ 404 page not found
+ </div>
+ </div>
+ </>
+ )
+}
+
+export default ErrorPage404;
diff --git a/client/src/components/ProtectedRoute/AirlineProtectedRoute.tsx b/client/src/components/ProtectedRoute/AirlineProtectedRoute.tsx
new file mode 100644
index 0000000..da4acae
--- /dev/null
+++ b/client/src/components/ProtectedRoute/AirlineProtectedRoute.tsx
@@ -0,0 +1,14 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+function AirlineProtectedRoute() {
+ const { user } = useAuth();
+
+ if (user?.type === 1) {
+ return <Outlet></Outlet>
+ }
+
+ return <Navigate to={'/error'}></Navigate>
+}
+
+export default AirlineProtectedRoute;
diff --git a/client/src/components/ProtectedRoute/CustomerProtectedRoute.tsx b/client/src/components/ProtectedRoute/CustomerProtectedRoute.tsx
new file mode 100644
index 0000000..6cb20e3
--- /dev/null
+++ b/client/src/components/ProtectedRoute/CustomerProtectedRoute.tsx
@@ -0,0 +1,14 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+function CustomerProtectedRoute() {
+ const { user } = useAuth();
+
+ if (user?.type === 0) {
+ return <Outlet></Outlet>
+ }
+
+ return <Navigate to={'/error'}></Navigate>
+}
+
+export default CustomerProtectedRoute;
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 432d751..0fe3efc 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -25,12 +25,17 @@ import { GetBookingInformation } from "./services/BookingView/BookingView.ts";
import { GetAllBookings } from "./services/CustomerBookings/CustomerBookings.ts";
import CustomerBookings from "./components/CustomerBookings/CustomerBookings.tsx";
import BookingView from "./components/BookingView/BookingView.tsx";
+import CustomerProtectedRoute from "./components/ProtectedRoute/CustomerProtectedRoute.tsx";
+import AirlineProtectedRoute from "./components/ProtectedRoute/AirlineProtectedRoute.tsx";
+import ErrorPage404 from "./components/ErrorPage/ErrorPage404.tsx";
+import ErrorPage from "./components/ErrorPage/ErrorPage.tsx";
const router = createBrowserRouter([
{
path: "/",
loader: AuthoriseUser,
element: <App></App>,
+ errorElement: <ErrorPage></ErrorPage>,
children: [
{
element: <InverseProtectedRoute></InverseProtectedRoute>,
@@ -54,14 +59,47 @@ const router = createBrowserRouter([
element: <Logout></Logout>,
},
{
- path: "customer-dashboard",
- loader: GetCustomerDashboardData,
- element: <Dashboard></Dashboard>,
+ element: <CustomerProtectedRoute></CustomerProtectedRoute>,
+ children: [
+ {
+ path: "customer-dashboard",
+ loader: GetCustomerDashboardData,
+ element: <Dashboard></Dashboard>,
+ },
+ {
+ path: "booking/query",
+ element: <BookingQuery></BookingQuery>,
+ },
+ {
+ path: "booking/list",
+ loader: GetBookingList,
+ element: <BookingList></BookingList>,
+ },
+ {
+ path: "customer/bookings",
+ loader: GetAllBookings,
+ element: <CustomerBookings></CustomerBookings>,
+ },
+ {
+ path: "booking/:id",
+ loader: GetBookingInformation,
+ element: <BookingView></BookingView>,
+ }
+ ]
},
{
- path: "airline-dashboard",
- loader: GetAirlineDashboardData,
- element: <Dashboard></Dashboard>,
+ element: <AirlineProtectedRoute></AirlineProtectedRoute>,
+ children: [
+ {
+ path: "airline-dashboard",
+ loader: GetAirlineDashboardData,
+ element: <Dashboard></Dashboard>,
+ },
+ {
+ path: "register-flight",
+ element: <FlightCreationForm></FlightCreationForm>,
+ }
+ ]
},
{
path: "flight/:id",
@@ -73,31 +111,16 @@ const router = createBrowserRouter([
loader: GetFlightList,
element: <FlightList></FlightList>,
},
- {
- path: "booking/query",
- element: <BookingQuery></BookingQuery>,
- },
- {
- path: "booking/list",
- loader: GetBookingList,
- element: <BookingList></BookingList>,
- },
- {
- path: "register-flight",
- element: <FlightCreationForm></FlightCreationForm>,
- },
- {
- path: "booking/:id",
- loader: GetBookingInformation,
- element: <BookingView></BookingView>,
- },
- {
- path: "customer/bookings",
- loader: GetAllBookings,
- element: <CustomerBookings></CustomerBookings>,
- },
],
},
+ {
+ path: "error",
+ element: <ErrorPage></ErrorPage>
+ },
+ {
+ path: "*",
+ element: <ErrorPage404></ErrorPage404>
+ }
],
},
]);
--
GitLab