devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-11-11 10:26:24 +00:00
parent 0a3a00cd3f
commit 711a0743c2
3 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/blue-stock-photo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 KiB

BIN
public/purple-stock-photo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 KiB

52
src/pages/login.tsx
View File

@@ -1,44 +1,45 @@
/* eslint-disable @next/next/no-img-element */
import {User} from "@/interfaces/user";
import {toast, ToastContainer} from "react-toastify";
import { User } from "@/interfaces/user";
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 {sessionOptions} from "@/lib/session";
import { withIronSessionSsr } from "iron-session/next";
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" /> */}
<img src="/red-stock-photo.jpg" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
{!isOfficialExamLogin && (
<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>
<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">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 && (