ENCOA-234: Changed the login page when a user is going into the /official-exam

src/pages/login.tsx

@@ -1,44 +1,45 @@
 /* eslint-disable @next/next/no-img-element */
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {toast, ToastContainer} from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
 import axios from "axios";
-import {FormEvent, useEffect, useState} from "react";
+import { FormEvent, useEffect, useMemo, useState } from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
-import {Divider} from "primereact/divider";
+import { Divider } from "primereact/divider";
 import Button from "@/components/Low/Button";
-import {BsArrowRepeat, BsCheck} from "react-icons/bs";
+import { BsArrowRepeat, BsCheck } from "react-icons/bs";
 import Link from "next/link";
 import Input from "@/components/Low/Input";
 import clsx from "clsx";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 import EmailVerification from "./(auth)/EmailVerification";
-import {withIronSessionSsr} from "iron-session/next";
+import { withIronSessionSsr } from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
 
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g);
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res, query}) => {
+export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
 	const destination = !query.destination ? "/" : Buffer.from(query.destination as string, 'base64').toString()
 	const user = await requestUser(req, res)
 	if (user) return redirect(destination)
 
 	return {
-		props: {user: null, destination},
+		props: { user: null, destination },
 	};
 }, sessionOptions);
 
-export default function Login({ destination }: { destination: string }) {
+export default function Login({ destination = "/" }: { destination?: string }) {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const [rememberPassword, setRememberPassword] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const router = useRouter();
+	const isOfficialExamLogin = useMemo(() => destination.startsWith("/official-exam"), [destination])
 
-	const {user, mutateUser} = useUser({
+	const { user, mutateUser } = useUser({
 		redirectTo: destination,
 		redirectIfFound: true,
 	});
@@ -56,10 +57,10 @@ export default function Login({ destination }: { destination: string }) {
 		}
 
 		axios
-			.post<{ok: boolean}>("/api/reset", {email})
+			.post<{ ok: boolean }>("/api/reset", { email })
 			.then((response) => {
 				if (response.data.ok) {
-					toast.success("You should receive an e-mail to reset your password!", {toastId: "forgot-success"});
+					toast.success("You should receive an e-mail to reset your password!", { toastId: "forgot-success" });
 					return;
 				}
 
@@ -79,7 +80,7 @@ export default function Login({ destination }: { destination: string }) {
 
 		setIsLoading(true);
 		axios
-			.post<User>("/api/login", {email, password})
+			.post<User>("/api/login", { email, password })
 			.then((response) => {
 				toast.success("You have been logged in!", {
 					toastId: "login-successful",
@@ -92,7 +93,7 @@ export default function Login({ destination }: { destination: string }) {
 						toastId: "wrong-credentials",
 					});
 				} else {
-					toast.error("Something went wrong!", {toastId: "server-error"});
+					toast.error("Something went wrong!", { toastId: "server-error" });
 				}
 				setIsLoading(false);
 			})
@@ -110,14 +111,25 @@ export default function Login({ destination }: { destination: string }) {
 			<main className="flex h-[100vh] w-full bg-white text-black">
 				<ToastContainer />
 				<section className="relative hidden h-full w-fit min-w-fit lg:flex">
-					{/* <div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" /> */}
+					{!isOfficialExamLogin && (
-					<img src="/red-stock-photo.jpg" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
+						<img src="/red-stock-photo.jpg" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
+					)}
+					{isOfficialExamLogin && (
+						<img src="/purple-stock-photo.png" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
+					)}
 				</section>
 				<section className="flex h-full w-full flex-col items-center justify-center gap-2">
 					<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
 						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
-						<h1 className="text-2xl font-bold lg:text-4xl">Login to your account</h1>
+						{!isOfficialExamLogin && (
-						<p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">with your registered Email Address</p>
+							<>
+								<h1 className="text-2xl font-bold lg:text-4xl">Login to your account</h1>
+								<p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">with your registered Email Address</p>
+							</>
+						)}
+						{isOfficialExamLogin && (
+							<h1 className="text-2xl font-bold lg:text-4xl">Welcome to the Official Exams Portal</h1>
+						)}
 					</div>
 					<Divider className="max-w-xs lg:max-w-md" />
 					{!user && (