Added demographic information to the user

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.3.5",
     "chart.js": "^4.2.1",
     "clsx": "^1.2.1",
+    "country-codes-list": "^1.6.11",
     "daisyui": "^3.1.5",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
@@ -39,6 +40,7 @@
     "react-icons": "^4.8.0",
     "react-lineto": "^3.3.0",
     "react-media-recorder": "1.6.5",
+    "react-phone-number-input": "^3.3.6",
     "react-player": "^2.12.0",
     "react-string-replace": "^1.1.0",
     "react-toastify": "^9.1.2",
@@ -59,4 +61,4 @@
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.4"
   }
-}
+}

src/components/Low/Button.tsx

@@ -8,9 +8,10 @@ interface Props {
 	className?: string;
 	disabled?: boolean;
 	onClick?: () => void;
+	type?: "button" | "reset" | "submit";
 }
 
-export default function Button({color = "purple", variant = "solid", disabled = false, className, children, onClick}: Props) {
+export default function Button({color = "purple", variant = "solid", disabled = false, className, children, type, onClick}: Props) {
 	const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
 		purple: {
 			solid: "bg-mti-purple-light text-white border border-mti-purple-light hover:bg-mti-purple disabled:text-mti-purple disabled:bg-mti-purple-ultralight selection:bg-mti-purple-dark",
@@ -31,6 +32,7 @@ export default function Button({color = "purple", variant = "solid", disabled =
 
 	return (
 		<button
+			type={type}
 			onClick={onClick}
 			className={clsx(
 				"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",

src/components/Low/Input.tsx

@@ -1,7 +1,7 @@
 import {useState} from "react";
 
 interface Props {
-	type: "email" | "text" | "password";
+	type: "email" | "text" | "password" | "tel";
 	required?: boolean;
 	label?: string;
 	placeholder?: string;
@@ -28,6 +28,7 @@ export default function Input({type, label, placeholder, name, required = false,
 						name={name}
 						onChange={(e) => onChange(e.target.value)}
 						placeholder={placeholder}
+						defaultValue={defaultValue}
 						className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
 					/>
 					<p

src/interfaces/user.ts

@@ -13,8 +13,27 @@ export interface User {
 	type: Type;
 	bio: string;
 	isVerified: boolean;
+	demographicInformation?: DemographicInformation;
 }
 
+export interface DemographicInformation {
+	country: string;
+	phone: string;
+	gender: Gender;
+	employment: EmploymentStatus;
+}
+
+export type Gender = "male" | "female" | "other";
+export type EmploymentStatus = "employed" | "student" | "self-employed" | "unemployed" | "retired" | "other";
+export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [
+	{status: "student", label: "Student"},
+	{status: "employed", label: "Employed"},
+	{status: "unemployed", label: "Unemployed"},
+	{status: "self-employed", label: "Self-employed"},
+	{status: "retired", label: "Retired"},
+	{status: "other", label: "Other"},
+];
+
 export interface Stat {
 	user: string;
 	exam: string;

src/pages/api/register.ts

@@ -4,6 +4,7 @@ import {app} from "@/firebase";
 import {sessionOptions} from "@/lib/session";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {getFirestore, getDoc, doc, setDoc} from "firebase/firestore";
+import {DemographicInformation} from "@/interfaces/user";
 
 const auth = getAuth(app);
 const db = getFirestore(app);
@@ -25,7 +26,7 @@ const DEFAULT_LEVELS = {
 };
 
 async function login(req: NextApiRequest, res: NextApiResponse) {
-	const {email, password} = req.body as {email: string; password: string};
+	const {email, password} = req.body as {email: string; password: string; demographicInformation: DemographicInformation};
 
 	createUserWithEmailAndPassword(auth, email, password)
 		.then(async (userCredentials) => {

src/pages/profile.tsx

@@ -22,6 +22,10 @@ import {useRouter} from "next/router";
 import Link from "next/link";
 import axios from "axios";
 import {ErrorMessage} from "@/constants/errors";
+import {RadioGroup} from "@headlessui/react";
+import clsx from "clsx";
+import {EmploymentStatus, EMPLOYMENT_STATUS, Gender} from "@/interfaces/user";
+import countryCodes from "country-codes-list";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -51,10 +55,15 @@ export default function Home() {
 	const [isLoading, setIsLoading] = useState(false);
 	const [profilePicture, setProfilePicture] = useState("");
 
+	const [country, setCountry] = useState<string>();
+	const [phone, setPhone] = useState<string>();
+	const [gender, setGender] = useState<Gender>();
+	const [employment, setEmployment] = useState<EmploymentStatus>();
+
 	const profilePictureInput = useRef(null);
 	const router = useRouter();
 
-	const {user} = useUser({redirectTo: "/login"});
+	const {user, mutateUser} = useUser({redirectTo: "/login"});
 
 	useEffect(() => {
 		if (user) {
@@ -62,6 +71,10 @@ export default function Home() {
 			setEmail(user.email);
 			setBio(user.bio);
 			setProfilePicture(user.profilePicture);
+			setCountry(user.demographicInformation?.country);
+			setPhone(user.demographicInformation?.phone);
+			setGender(user.demographicInformation?.gender);
+			setEmployment(user.demographicInformation?.employment);
 		}
 	}, [user]);
 
@@ -100,10 +113,23 @@ export default function Home() {
 			return;
 		}
 
-		const request = await axios.post("/api/users/update", {bio, name, email, password, newPassword, profilePicture});
+		const request = await axios.post("/api/users/update", {
+			bio,
+			name,
+			email,
+			password,
+			newPassword,
+			profilePicture,
+			demographicInformation: {
+				phone,
+				country,
+				employment,
+				gender,
+			},
+		});
 		if (request.status === 200) {
 			toast.success("Your profile has been updated!");
-			setTimeout(() => router.reload(), 800);
+			mutateUser();
 			return;
 		}
 
@@ -130,39 +156,147 @@ export default function Home() {
 							<div className="flex flex-col gap-8 w-2/3">
 								<h1 className="text-4xl font-bold mb-6">Edit Profile</h1>
 								<form className="flex flex-col items-center gap-6 w-full">
-									<Input
+									<div className="flex flex-row gap-8 w-full">
-										label="Name"
+										<Input
-										type="text"
+											label="Name"
-										name="name"
+											type="text"
-										onChange={(e) => setName(e)}
+											name="name"
-										placeholder="Enter your name"
+											onChange={(e) => setName(e)}
-										defaultValue={name}
+											placeholder="Enter your name"
-										required
+											defaultValue={name}
-									/>
+											required
-									<Input
+										/>
-										label="E-mail Address"
+										<Input
-										type="email"
+											label="E-mail Address"
-										name="email"
+											type="email"
-										onChange={(e) => setEmail(e)}
+											name="email"
-										placeholder="Enter email address"
+											onChange={(e) => setEmail(e)}
-										defaultValue={email}
+											placeholder="Enter email address"
-										required
+											defaultValue={email}
-									/>
+											required
-									<Input
+										/>
-										label="Old Password"
+									</div>
-										type="password"
+									<div className="flex flex-row gap-8 w-full">
-										name="password"
+										<Input
-										onChange={(e) => setPassword(e)}
+											label="Old Password"
-										placeholder="Enter your password"
+											type="password"
-										required
+											name="password"
-									/>
+											onChange={(e) => setPassword(e)}
-									<Input
+											placeholder="Enter your password"
-										label="New Password"
+											required
-										type="password"
+										/>
-										name="newPassword"
+										<Input
-										onChange={(e) => setNewPassword(e)}
+											label="New Password"
-										placeholder="Enter your new password (optional)"
+											type="password"
-									/>
+											name="newPassword"
+											onChange={(e) => setNewPassword(e)}
+											placeholder="Enter your new password (optional)"
+										/>
+									</div>
+
+									<div className="flex flex-row gap-8 w-full">
+										<div className="flex flex-col gap-3 w-full">
+											<label className="font-normal text-base text-mti-gray-dim">Country *</label>
+											<select
+												name="country"
+												className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+												onChange={(e) => {
+													setCountry(e.target.value);
+												}}
+												defaultValue={country}>
+												<option value={undefined} disabled selected>
+													Select a country
+												</option>
+												{countryCodes.all().map((x) => (
+													<option key={x.countryCode} value={x.countryCode}>
+														{x.flag} {x.countryNameLocal}
+													</option>
+												))}
+											</select>
+										</div>
+										<Input
+											type="tel"
+											name="phone"
+											label="Phone number"
+											onChange={(e) => setPhone(e)}
+											placeholder="Enter phone number"
+											defaultValue={phone}
+											required
+										/>
+									</div>
+									<div className="flex flex-row gap-8 w-full">
+										<div className="relative flex flex-col gap-3 w-full">
+											<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
+											<RadioGroup
+												value={employment}
+												onChange={setEmployment}
+												className="grid grid-cols-2 items-center gap-4 place-items-center">
+												{EMPLOYMENT_STATUS.map(({status, label}) => (
+													<RadioGroup.Option value={status} key={status}>
+														{({checked}) => (
+															<span
+																className={clsx(
+																	"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+																	"transition duration-300 ease-in-out",
+																	!checked
+																		? "bg-white border-mti-gray-platinum"
+																		: "bg-mti-purple-light border-mti-purple-dark text-white",
+																)}>
+																{label}
+															</span>
+														)}
+													</RadioGroup.Option>
+												))}
+											</RadioGroup>
+										</div>
+										<div className="relative flex flex-col gap-3 w-full">
+											<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
+											<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
+												<RadioGroup.Option value="male">
+													{({checked}) => (
+														<span
+															className={clsx(
+																"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+																"transition duration-300 ease-in-out",
+																!checked
+																	? "bg-white border-mti-gray-platinum"
+																	: "bg-mti-purple-light border-mti-purple-dark text-white",
+															)}>
+															Male
+														</span>
+													)}
+												</RadioGroup.Option>
+												<RadioGroup.Option value="female">
+													{({checked}) => (
+														<span
+															className={clsx(
+																"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+																"transition duration-300 ease-in-out",
+																!checked
+																	? "bg-white border-mti-gray-platinum"
+																	: "bg-mti-purple-light border-mti-purple-dark text-white",
+															)}>
+															Female
+														</span>
+													)}
+												</RadioGroup.Option>
+												<RadioGroup.Option value="other">
+													{({checked}) => (
+														<span
+															className={clsx(
+																"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+																"transition duration-300 ease-in-out",
+																!checked
+																	? "bg-white border-mti-gray-platinum"
+																	: "bg-mti-purple-light border-mti-purple-dark text-white",
+															)}>
+															Other
+														</span>
+													)}
+												</RadioGroup.Option>
+											</RadioGroup>
+										</div>
+									</div>
 								</form>
 							</div>
 							<div className="flex flex-col gap-3 items-center w-48">

src/pages/register.tsx

@@ -11,12 +11,22 @@ import axios from "axios";
 import {Divider} from "primereact/divider";
 import {useRouter} from "next/router";
 import clsx from "clsx";
+import {EmploymentStatus, EMPLOYMENT_STATUS, Gender} from "@/interfaces/user";
+import countryCodes from "country-codes-list";
+import {RadioGroup} from "@headlessui/react";
 
 export default function Register() {
 	const [name, setName] = useState("");
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const [confirmPassword, setConfirmPassword] = useState("");
+
+	const [country, setCountry] = useState<string>();
+	const [phone, setPhone] = useState<string>();
+	const [gender, setGender] = useState<Gender>();
+	const [employment, setEmployment] = useState<EmploymentStatus>();
+
+	const [step, setStep] = useState<0 | 1>(0);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const router = useRouter();
@@ -31,12 +41,24 @@ export default function Register() {
 
 		if (confirmPassword !== password) {
 			toast.error("Your passwords do not match!", {toastId: "password-not-match"});
+			setStep(0);
 			return;
 		}
 
 		setIsLoading(true);
 		axios
-			.post("/api/register", {name, email, password, profilePicture: "/defaultAvatar.png"})
+			.post("/api/register", {
+				name,
+				email,
+				password,
+				profilePicture: "/defaultAvatar.png",
+				demographicInformation: {
+					country,
+					phone,
+					gender,
+					employment,
+				},
+			})
 			.then((response) => {
 				mutateUser(response.data.user).then(sendEmailVerification);
 			})
@@ -45,6 +67,7 @@ export default function Register() {
 
 				if (error.response.status === 401) {
 					toast.error("There is already a user with that e-mail!");
+					setStep(0);
 					return;
 				}
 				toast.error("There was something wrong, please try again!");
@@ -69,6 +92,149 @@ export default function Register() {
 		});
 	};
 
+	const initialStep = () => (
+		<>
+			<form
+				className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2"
+				onSubmit={(e) => {
+					e.preventDefault();
+					setStep(1);
+				}}>
+				<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
+				/>
+				<Button
+					className="lg:mt-8 w-full"
+					color="purple"
+					disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword}>
+					Next
+				</Button>
+			</form>
+		</>
+	);
+
+	const demographicStep = () => (
+		<>
+			<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={register}>
+				<div className="relative flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Country *</label>
+					<select
+						name="country"
+						className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+						onChange={(e) => {
+							setCountry(e.target.value);
+						}}
+						defaultValue={country}>
+						<option value={undefined} disabled selected>
+							Select a country
+						</option>
+						{countryCodes.all().map((x) => (
+							<option key={x.countryCode} value={x.countryCode}>
+								{x.flag} {x.countryNameLocal}
+							</option>
+						))}
+					</select>
+				</div>
+				<Input
+					type="tel"
+					name="phone"
+					label="Phone number"
+					onChange={(e) => setPhone(e)}
+					placeholder="Enter phone number"
+					defaultValue={phone}
+					required
+				/>
+				<div className="relative flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
+					<RadioGroup value={gender} onChange={setGender} className="flex flex-row justify-between">
+						<RadioGroup.Option value="male">
+							{({checked}) => (
+								<span
+									className={clsx(
+										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"transition duration-300 ease-in-out",
+										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+									)}>
+									Male
+								</span>
+							)}
+						</RadioGroup.Option>
+						<RadioGroup.Option value="female">
+							{({checked}) => (
+								<span
+									className={clsx(
+										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"transition duration-300 ease-in-out",
+										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+									)}>
+									Female
+								</span>
+							)}
+						</RadioGroup.Option>
+						<RadioGroup.Option value="other">
+							{({checked}) => (
+								<span
+									className={clsx(
+										"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"transition duration-300 ease-in-out",
+										!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+									)}>
+									Other
+								</span>
+							)}
+						</RadioGroup.Option>
+					</RadioGroup>
+				</div>
+				<div className="relative flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
+					<RadioGroup value={employment} onChange={setEmployment} className="grid grid-cols-2 items-center gap-4 place-items-center">
+						{EMPLOYMENT_STATUS.map(({status, label}) => (
+							<RadioGroup.Option value={status} key={status}>
+								{({checked}) => (
+									<span
+										className={clsx(
+											"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+											"transition duration-300 ease-in-out",
+											!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+										)}>
+										{label}
+									</span>
+								)}
+							</RadioGroup.Option>
+						))}
+					</RadioGroup>
+				</div>
+
+				<Button className="lg:mt-8 w-full" color="purple" disabled={isLoading || !country || !phone || !gender || !employment}>
+					{!isLoading && "Create account"}
+					{isLoading && (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="text-white animate-spin" size={25} />
+						</div>
+					)}
+				</Button>
+				<Button className="w-full" color="purple" variant="outline" type="button" onClick={() => setStep(0)} disabled={isLoading}>
+					Back
+				</Button>
+			</form>
+		</>
+	);
+
 	return (
 		<>
 			<Head>
@@ -86,30 +252,12 @@ export default function Register() {
 				<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")}>
 						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-64 absolute -top-36 lg:-top-64" />
-						<h1 className="font-bold text-2xl lg:text-4xl">Create new account</h1>
+						<h1 className="font-bold text-2xl lg:text-4xl">{step === 1 ? "Demographic Information" : "Create new account"}</h1>
 					</div>
 					{!user && (
 						<>
-							<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={register}>
+							{step === 0 && initialStep()}
-								<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" required />
+							{step === 1 && demographicStep()}
-								<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" required />
-								<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />
-								<Input
-									type="password"
-									name="confirmPassword"
-									onChange={(e) => setConfirmPassword(e)}
-									placeholder="Confirm your password"
-									required
-								/>
-								<Button className="lg:mt-8 w-full" color="purple" disabled={isLoading}>
-									{!isLoading && "Create account"}
-									{isLoading && (
-										<div className="flex items-center justify-center">
-											<BsArrowRepeat className="text-white animate-spin" size={25} />
-										</div>
-									)}
-								</Button>
-							</form>
 							<Link className="text-mti-purple-light text-sm font-normal" href="/login">
 								Sign in instead
 							</Link>