Updated the register to allow the difference between a individual and corporate

src/components/Low/Input.tsx

@@ -2,11 +2,11 @@ import clsx from "clsx";
 import {useState} from "react";
 
 interface Props {
-	type: "email" | "text" | "password" | "tel";
+	type: "email" | "text" | "password" | "tel" | "number";
 	required?: boolean;
 	label?: string;
 	placeholder?: string;
-	defaultValue?: string;
+	defaultValue?: string | number;
 	className?: string;
 	disabled?: boolean;
 	name: string;

src/interfaces/user.ts

@@ -14,13 +14,25 @@ export interface User {
 	bio: string;
 	isVerified: boolean;
 	demographicInformation?: DemographicInformation;
-	companyInformation?: CompanyInformation;
+	corporateInformation?: CorporateInformation;
 	subscriptionExpirationDate?: null | Date;
 	isDisabled?: boolean;
 	registrationDate?: Date;
 }
 
-export interface CompanyInformation {}
+export interface CorporateInformation {
+	companyInformation: CompanyInformation;
+	payment?: {
+		value: number;
+		currency: string;
+	};
+	allowedUserAmount?: number;
+}
+
+export interface CompanyInformation {
+	name: string;
+	userAmount: number;
+}
 
 export interface DemographicInformation {
 	country: string;

src/pages/(auth)/EmailVerification.tsx

@@ -0,0 +1,57 @@
+import Button from "@/components/Low/Button";
+import {User} from "@/interfaces/user";
+import {sendEmailVerification} from "@/utils/email";
+import axios from "axios";
+import {useRouter} from "next/router";
+import {Divider} from "primereact/divider";
+import {toast} from "react-toastify";
+
+interface Props {
+	user: User;
+	isLoading: boolean;
+	setIsLoading: (isLoading: boolean) => void;
+}
+
+export default function EmailVerification({user, isLoading, setIsLoading}: Props) {
+	const router = useRouter();
+
+	const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!");
+
+	const onError = (e: Error) => {
+		console.error(e);
+		toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
+	};
+
+	const logout = async () => {
+		axios.post("/api/logout").finally(() => {
+			setTimeout(() => router.reload(), 500);
+		});
+	};
+
+	return (
+		<>
+			<Divider className="max-w-xs lg:max-w-md" />
+			<div className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2 relative">
+				<h4 className="font-semibold text-2xl text-mti-purple-light">Please confirm your account!</h4>
+				<span className="text-center">
+					An e-mail has been sent to <span className="italic text-mti-purple-light">{user?.email}</span>, please click the link in it to
+					confirm your account to be able to use the application. <br /> <br />
+					Please refresh this page once it has been verified.
+				</span>
+				<Button
+					className="mt-8 w-full"
+					color="purple"
+					disabled={isLoading}
+					onClick={() => sendEmailVerification(setIsLoading, onSuccess, onError)}>
+					Resend e-mail
+				</Button>
+			</div>
+			<Divider className="max-w-xs lg:max-w-md" />
+			<span className="text-mti-gray-cool text-sm font-normal">
+				<button className="text-mti-purple-light" onClick={logout}>
+					Log out instead
+				</button>
+			</span>
+		</>
+	);
+}

src/pages/(register)/RegisterCorporate.tsx

@@ -0,0 +1,122 @@
+import Button from "@/components/Low/Button";
+import Input from "@/components/Low/Input";
+import {User} from "@/interfaces/user";
+import {sendEmailVerification} from "@/utils/email";
+import axios from "axios";
+import {Divider} from "primereact/divider";
+import {useState} from "react";
+import {toast} from "react-toastify";
+import {KeyedMutator} from "swr";
+
+interface Props {
+	isLoading: boolean;
+	setIsLoading: (isLoading: boolean) => void;
+	mutateUser: KeyedMutator<User>;
+	sendEmailVerification: typeof sendEmailVerification;
+}
+
+export default function RegisterCorporate({isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) {
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+
+	const [companyName, setCompanyName] = useState("");
+	const [companyUsers, setCompanyUsers] = useState(0);
+
+	const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!");
+
+	const onError = (e: Error) => {
+		console.error(e);
+		toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
+	};
+
+	const register = (e: any) => {
+		e.preventDefault();
+
+		if (confirmPassword !== password) {
+			toast.error("Your passwords do not match!", {toastId: "password-not-match"});
+			return;
+		}
+
+		setIsLoading(true);
+		axios
+			.post("/api/register", {
+				name,
+				email,
+				password,
+				type: "corporate",
+				profilePicture: "/defaultAvatar.png",
+			})
+			.then((response) => {
+				mutateUser(response.data.user).then(() => sendEmailVerification(setIsLoading, onSuccess, onError));
+			})
+			.catch((error) => {
+				console.log(error.response.data);
+
+				if (error.response.status === 401) {
+					toast.error("There is already a user with that e-mail!");
+					return;
+				}
+
+				if (error.response.status === 400) {
+					toast.error("The provided code is invalid!");
+					return;
+				}
+
+				toast.error("There was something wrong, please try again!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<form className="flex flex-col items-center gap-4 w-full" onSubmit={register}>
+			<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
+			<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
+			<div className="w-full flex gap-4">
+				<Input
+					type="password"
+					name="password"
+					onChange={(e) => setPassword(e)}
+					placeholder="Enter your password"
+					defaultValue={password}
+					required
+				/>
+				<Input
+					type="password"
+					name="confirmPassword"
+					onChange={(e) => setConfirmPassword(e)}
+					placeholder="Confirm your password"
+					defaultValue={confirmPassword}
+					required
+				/>
+			</div>
+
+			<Divider className="w-full !my-2" />
+
+			<Input
+				type="text"
+				name="companyName"
+				onChange={(e) => setCompanyName(e)}
+				placeholder="Institution name"
+				defaultValue={companyName}
+				required
+			/>
+			<Input
+				type="number"
+				name="companyUsers"
+				onChange={(e) => setCompanyUsers(parseInt(e))}
+				placeholder="Institution name"
+				defaultValue={companyUsers}
+				required
+			/>
+
+			<Button
+				className="lg:mt-8 w-full"
+				color="purple"
+				disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword}>
+				Create account
+			</Button>
+		</form>
+	);
+}

src/pages/(register)/RegisterIndividual.tsx

@@ -0,0 +1,100 @@
+import Button from "@/components/Low/Button";
+import Input from "@/components/Low/Input";
+import {User} from "@/interfaces/user";
+import {sendEmailVerification} from "@/utils/email";
+import axios from "axios";
+import {useState} from "react";
+import {toast} from "react-toastify";
+import {KeyedMutator} from "swr";
+
+interface Props {
+	queryCode?: string;
+	isLoading: boolean;
+	setIsLoading: (isLoading: boolean) => void;
+	mutateUser: KeyedMutator<User>;
+	sendEmailVerification: typeof sendEmailVerification;
+}
+
+export default function RegisterIndividual({queryCode, isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) {
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [code, setCode] = useState(queryCode || "");
+
+	const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!");
+
+	const onError = (e: Error) => {
+		console.error(e);
+		toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
+	};
+
+	const register = (e: any) => {
+		e.preventDefault();
+
+		if (confirmPassword !== password) {
+			toast.error("Your passwords do not match!", {toastId: "password-not-match"});
+			return;
+		}
+
+		setIsLoading(true);
+		axios
+			.post("/api/register", {
+				name,
+				email,
+				password,
+				code,
+				profilePicture: "/defaultAvatar.png",
+			})
+			.then((response) => {
+				mutateUser(response.data.user).then(() => sendEmailVerification(setIsLoading, onSuccess, onError));
+			})
+			.catch((error) => {
+				console.log(error.response.data);
+
+				if (error.response.status === 401) {
+					toast.error("There is already a user with that e-mail!");
+					return;
+				}
+
+				if (error.response.status === 400) {
+					toast.error("The provided code is invalid!");
+					return;
+				}
+
+				toast.error("There was something wrong, please try again!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<form className="flex flex-col items-center gap-6 w-full" onSubmit={register}>
+			<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
+			<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
+			<Input
+				type="password"
+				name="password"
+				onChange={(e) => setPassword(e)}
+				placeholder="Enter your password"
+				defaultValue={password}
+				required
+			/>
+			<Input
+				type="password"
+				name="confirmPassword"
+				onChange={(e) => setConfirmPassword(e)}
+				placeholder="Confirm your password"
+				defaultValue={confirmPassword}
+				required
+			/>
+			<Input type="text" name="code" onChange={(e) => setCode(e)} placeholder="Enter your registration code" defaultValue={code} required />
+
+			<Button
+				className="lg:mt-8 w-full"
+				color="purple"
+				disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword || !code}>
+				Create account
+			</Button>
+		</form>
+	);
+}

src/pages/login.tsx

@@ -12,6 +12,7 @@ import Link from "next/link";
 import Input from "@/components/Low/Input";
 import clsx from "clsx";
 import {useRouter} from "next/router";
+import EmailVerification from "./(auth)/EmailVerification";
 
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g);
 
@@ -68,26 +69,6 @@ export default function Login() {
 			.finally(() => setIsLoading(false));
 	};
 
-	const sendEmailVerification = () => {
-		setIsLoading(true);
-		axios
-			.post<{ok: boolean}>("/api/reset/sendVerification", {})
-			.then(() => {
-				toast.success("An e-mail has been sent, please make sure to check your spam folder!");
-			})
-			.catch((e) => {
-				console.log(e);
-				toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
-			})
-			.finally(() => setIsLoading(false));
-	};
-
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
-
 	return (
 		<>
 			<Head>
@@ -150,27 +131,7 @@ export default function Login() {
 							</span>
 						</>
 					)}
-					{user && !user.isVerified && (
+					{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />}
-						<>
-							<div className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2 relative">
-								<h4 className="font-semibold text-2xl text-mti-purple-light">Please confirm your account!</h4>
-								<span className="text-center">
-									An e-mail has been sent to <span className="italic text-mti-purple-light">{user.email}</span>, please click the
-									link in it to confirm your account to be able to use the application. <br /> <br />
-									Please refresh this page once it has been verified.
-								</span>
-								<Button className="mt-8 w-full" color="purple" disabled={isLoading} onClick={sendEmailVerification}>
-									Resend e-mail
-								</Button>
-							</div>
-							<Divider className="max-w-xs lg:max-w-md" />
-							<span className="text-mti-gray-cool text-sm font-normal">
-								<button className="text-mti-purple-light" onClick={logout}>
-									Log out instead
-								</button>
-							</span>
-						</>
-					)}
 				</section>
 			</main>
 		</>

src/pages/register.tsx

@@ -1,18 +1,15 @@
 /* eslint-disable @next/next/no-img-element */
-import {toast, ToastContainer} from "react-toastify";
+import {ToastContainer} from "react-toastify";
 import {useState} from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
-import Button from "@/components/Low/Button";
-import {BsArrowRepeat} from "react-icons/bs";
 import Link from "next/link";
-import Input from "@/components/Low/Input";
-import axios from "axios";
-import {Divider} from "primereact/divider";
-import {useRouter} from "next/router";
 import clsx from "clsx";
-import {NextPageContext} from "next";
+import {Tab} from "@headlessui/react";
-import {NextRequest, NextResponse} from "next/server";
+import RegisterIndividual from "./(register)/RegisterIndividual";
+import RegisterCorporate from "./(register)/RegisterCorporate";
+import EmailVerification from "./(auth)/EmailVerification";
+import {sendEmailVerification} from "@/utils/email";
 
 export const getServerSideProps = (context: any) => {
 	const {code} = context.query;
@@ -23,110 +20,13 @@ export const getServerSideProps = (context: any) => {
 };
 
 export default function Register({code: queryCode}: {code: string}) {
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [confirmPassword, setConfirmPassword] = useState("");
-	const [code, setCode] = useState(queryCode || "");
 	const [isLoading, setIsLoading] = useState(false);
 
-	const router = useRouter();
-
 	const {user, mutateUser} = useUser({
 		redirectTo: "/",
 		redirectIfFound: true,
 	});
 
-	const register = (e: any) => {
-		e.preventDefault();
-
-		if (confirmPassword !== password) {
-			toast.error("Your passwords do not match!", {toastId: "password-not-match"});
-			return;
-		}
-
-		setIsLoading(true);
-		axios
-			.post("/api/register", {
-				name,
-				email,
-				password,
-				code,
-				profilePicture: "/defaultAvatar.png",
-			})
-			.then((response) => {
-				mutateUser(response.data.user).then(sendEmailVerification);
-			})
-			.catch((error) => {
-				console.log(error.response.data);
-
-				if (error.response.status === 401) {
-					toast.error("There is already a user with that e-mail!");
-					return;
-				}
-
-				if (error.response.status === 400) {
-					toast.error("The provided code is invalid!");
-					return;
-				}
-
-				toast.error("There was something wrong, please try again!");
-			})
-			.finally(() => setIsLoading(false));
-	};
-
-	const sendEmailVerification = () => {
-		setIsLoading(true);
-		axios
-			.post<{ok: boolean}>("/api/reset/sendVerification", {})
-			.then(() => {
-				toast.success("An e-mail has been sent, please make sure to check your spam folder!");
-			})
-			.catch((e) => {
-				console.log(e);
-				toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
-			})
-			.finally(() => setIsLoading(false));
-	};
-
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
-
-	const initialStep = () => (
-		<>
-			<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={register}>
-				<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
-				<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
-				<Input
-					type="password"
-					name="password"
-					onChange={(e) => setPassword(e)}
-					placeholder="Enter your password"
-					defaultValue={password}
-					required
-				/>
-				<Input
-					type="password"
-					name="confirmPassword"
-					onChange={(e) => setConfirmPassword(e)}
-					placeholder="Confirm your password"
-					defaultValue={confirmPassword}
-					required
-				/>
-				<Input type="text" name="code" onChange={(e) => setCode(e)} placeholder="Enter your registration code" defaultValue={code} required />
-				<Button
-					className="lg:mt-8 w-full"
-					color="purple"
-					disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword || !code}>
-					Create account
-				</Button>
-			</form>
-		</>
-	);
-
 	return (
 		<>
 			<Head>
@@ -142,40 +42,66 @@ export default function Register({code: queryCode}: {code: string}) {
 					<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
 				</section>
 				<section className="h-full w-full flex flex-col items-center justify-center gap-4">
-					<div className={clsx("flex flex-col gap-2 items-center relative", !user && "mb-4")}>
+					<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-64 absolute -top-36 lg:-top-64" />
+						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
 						<h1 className="font-bold text-2xl lg:text-4xl">Create new account</h1>
 					</div>
 					{!user && (
 						<>
-							{initialStep()}
+							<div className="flex flex-col gap-6 w-full -lg:px-8 lg:w-2/3">
+								<Tab.Group>
+									<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+												)
+											}>
+											Individual
+										</Tab>
+										<Tab
+											className={({selected}) =>
+												clsx(
+													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+													"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+													"transition duration-300 ease-in-out",
+													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+												)
+											}>
+											Corporate
+										</Tab>
+									</Tab.List>
+
+									<Tab.Panels>
+										<Tab.Panel>
+											<RegisterIndividual
+												isLoading={isLoading}
+												setIsLoading={setIsLoading}
+												mutateUser={mutateUser}
+												sendEmailVerification={sendEmailVerification}
+												queryCode={queryCode}
+											/>
+										</Tab.Panel>
+										<Tab.Panel>
+											<RegisterCorporate
+												isLoading={isLoading}
+												setIsLoading={setIsLoading}
+												mutateUser={mutateUser}
+												sendEmailVerification={sendEmailVerification}
+											/>
+										</Tab.Panel>
+									</Tab.Panels>
+								</Tab.Group>
+							</div>
 							<Link className="text-mti-purple-light text-sm font-normal" href="/login">
 								Sign in instead
 							</Link>
 						</>
 					)}
-					{user && !user.isVerified && (
+					{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />}
-						<>
-							<Divider className="max-w-xs lg:max-w-md" />
-							<div className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2 relative">
-								<h4 className="font-semibold text-2xl text-mti-purple-light">Please confirm your account!</h4>
-								<span className="text-center">
-									An e-mail has been sent to <span className="italic text-mti-purple-light">{user.email}</span>, please click the
-									link in it to confirm your account to be able to use the application. <br /> <br />
-									Please refresh this page once it has been verified.
-								</span>
-								<Button className="mt-8 w-full" color="purple" disabled={isLoading} onClick={sendEmailVerification}>
-									Resend e-mail
-								</Button>
-							</div>
-							<Divider className="max-w-xs lg:max-w-md" />
-							<span className="text-mti-gray-cool text-sm font-normal">
-								<button className="text-mti-purple-light" onClick={logout}>
-									Log out instead
-								</button>
-							</span>
-						</>
-					)}
 				</section>
 			</main>
 		</>

src/utils/email.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+export const sendEmailVerification = (setIsLoading: (isLoading: boolean) => void, onSuccess: () => void, onError: (e: Error) => void) => {
+	setIsLoading(true);
+	axios
+		.post<{ok: boolean}>("/api/reset/sendVerification", {})
+		.then(onSuccess)
+		.catch(onError)
+		.finally(() => setIsLoading(false));
+};