improve Activation page, page errors and minor fixes

backend/src/routes/controllers/auth/activate.controller.ts

@@ -28,7 +28,7 @@ export default async function activateController(
 			notifyBySms: false,
 		};
 	} catch (error) {
-		next(
+		return next(
 			new HttpError(HTTPCodes.ClientError.UNAUTHORIZED, "Expired token", {
 				cause: "crypto.verifyToken",
 			})

frontend/src/hooks/useThrowAsyncError.hook.ts

@@ -0,0 +1,20 @@
+import React from "react";
+//LOOKUP: https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971
+/*
+  NOTE:
+	React Router v6 does have built in methods to catch async errors, however there seems to be new(and better) tools
+	for client side page routing in react.
+	Not knowing the future of this app, I did not want to be dependent on a 3rd party service that i can easily implement
+	with a custom hook
+ */
+export const useThrowAsyncError = () => {
+	const [_, setError] = React.useState();
+	return React.useCallback(
+		(e: any) => {
+			setError(() => {
+				throw e;
+			});
+		},
+		[setError]
+	);
+};

frontend/src/pages/auth/ActivationPage.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Id } from 'react-toastify'
+import responseHandler from '../../apis/responseHandler'
+import RestAPI from '../../apis/server.endpoints'
+import { notifyToastPromiseSuccess } from '../../components/alerts/toasts/promise.notifier'
+import SectionWrapper from '../misc/SectionWrapper'
+import { useThrowAsyncError } from '../../hooks/useThrowAsyncError.hook'
+import Frame from '../misc/Frame'
+
+
+export default function ActivationPage() {
+
+    const { token } = useParams()
+    const navigation = useNavigate()
+    const ref = useRef(true)
+    const throwError = useThrowAsyncError()
+    useEffect(() => {
+        if (ref.current) {
+
+            responseHandler(() => RestAPI.activate(token as string), (_res: Response, toastId: Id) => {
+
+                notifyToastPromiseSuccess(toastId, "Success!")
+                navigation("/login")
+                return true;
+
+            }).then(res => {
+                !res && throwError(new Error("There seems to be a problem activating your account. Please request a new link through the sign up form, or try again later. If the error persists, then please contact the developers at: '[email protected]'"))
+            })
+
+            ref.current = false
+        }
+    }, [ref])
+
+    return (
+        <>
+
+            <Frame></Frame>
+            <main id="main">
+                <SectionWrapper className="account-activation">
+                    <h2>Activating Your Account</h2>
+                </SectionWrapper></main>
+        </>
+    )
+}

frontend/src/pages/errorBoundaries/ActivateAccountErrors.tsx

@@ -0,0 +1,10 @@
+import { useRouteError } from 'react-router-dom';
+import ErrorPage from './ErrorPage';
+
+export default function ActivateAccountErrors() {
+  const error = useRouteError() as Error
+
+  return (
+    <ErrorPage title="We've Spilled The Tea" message={error.message} />
+  )
+}

frontend/src/pages/errorBoundaries/ErrorPage.tsx

@@ -0,0 +1,13 @@
+import Frame from '../misc/Frame'
+
+export default function ErrorPage({ title, message }: { title: string, message: string }) {
+    return (
+        <>
+            <Frame></Frame>
+            <main id="main" className='error-container'>
+                <h1>{title}</h1>
+                <p className="error-message">{message}</p>
+            </main>
+        </>
+    )
+}

frontend/src/pages/router.tsx

@@ -11,7 +11,8 @@ import ShopPage from "./shop/ShopPage";
 import ItemDisplay from "./item/ItemDisplay";
 import AccountPage from "./account/AccountPage";
 import CartPage from "./cart/CartPage";
-import AccountActivation from "./auth/AccountActivation";
+import ActivationPage from "./auth/ActivationPage";
+import ActivateAccountErrors from "./errorBoundaries/ActivateAccountErrors";
 
 const router = createBrowserRouter(
 	createRoutesFromChildren(
@@ -43,8 +44,9 @@ const router = createBrowserRouter(
 
 			</Route>
 			<Route
+				errorElement={<ActivateAccountErrors />}
 				path="/activate/:token/"
-				element={<AccountActivation />}
+				element={<ActivationPage />}
 			/>
 			{/* // */}
 			<Route

frontend/src/sass/main.scss

@@ -25,3 +25,4 @@
 @use "pages/item-display";
 @use "pages/profile";
 @use "pages/help-center";
+@use "pages/error-boundary";

frontend/src/sass/pages/_error-boundary.scss

@@ -0,0 +1,16 @@
+@use "../base/colors" as colors;
+#main.error-container {
+	display: flex;
+    flex-direction: column;
+	place-content: center;
+	place-items: center;
+}
+.error-message {
+	max-width: 70%;
+	border-radius: 10px;
+	background-color: rgba($color: colors.$light, $alpha: 0.1);
+	backdrop-filter: blur(15px);
+	font-size: 1.5rem;
+	padding: 1.5em;
+	line-height: 1.3em;
+}