Created a profile editing page

src/components/Low/Input.tsx

@@ -5,11 +5,12 @@ interface Props {
 	required?: boolean;
 	label?: string;
 	placeholder?: string;
+	defaultValue?: string;
 	name: string;
 	onChange: (value: string) => void;
 }
 
-export default function Input({type, label, placeholder, name, required = false, onChange}: Props) {
+export default function Input({type, label, placeholder, name, required = false, defaultValue, onChange}: Props) {
 	const [showPassword, setShowPassword] = useState(false);
 
 	if (type === "password") {
@@ -55,6 +56,7 @@ export default function Input({type, label, placeholder, name, required = false,
 				placeholder={placeholder}
 				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"
 				required={required}
+				defaultValue={defaultValue}
 			/>
 		</div>
 	);

src/components/Navbar.tsx

@@ -1,4 +1,5 @@
 import {User} from "@/interfaces/user";
+import Link from "next/link";
 import {Avatar} from "primereact/avatar";
 
 interface Props {
@@ -12,10 +13,10 @@ export default function Navbar({user}: Props) {
 			<h1 className="font-bold text-2xl w-1/6 px-8">eCrop</h1>
 			<div className="flex justify-between w-5/6 mr-8">
 				<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
-				<div className="flex gap-3 items-center justify-end">
+				<Link href="/profile" className="flex gap-3 items-center justify-end">
 					<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full" />
 					<span className="text-right">{user.name}</span>
-				</div>
+				</Link>
 			</div>
 		</header>
 	);

src/interfaces/user.ts

@@ -11,6 +11,7 @@ export interface User {
 	levels: {[key in Module]: number};
 	desiredLevels: {[key in Module]: number};
 	type: Type;
+	bio: string;
 }
 
 export interface Stat {

src/pages/_app.tsx

@@ -15,9 +15,7 @@ export default function App({Component, pageProps}: AppProps) {
 	const router = useRouter();
 
 	useEffect(() => {
-		if (router.pathname !== "/exam") {
-			reset();
-		}
+		reset();
 	}, [router.pathname, reset]);
 
 	return <Component {...pageProps} />;

src/pages/api/user.ts

@@ -12,6 +12,12 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(user, sessionOptions);
 
 async function user(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return get(req, res);
+
+	res.status(404).json(undefined);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
 	if (req.session.user) {
 		const docUser = await getDoc(doc(db, "users", req.session.user.id));
 		if (!docUser.exists()) {

src/pages/login.tsx

@@ -7,14 +7,15 @@ import Head from "next/head";
 import useUser from "@/hooks/useUser";
 import {Divider} from "primereact/divider";
 import Button from "@/components/Low/Button";
-import {BsArrowRepeat} 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";
 
 export default function Login() {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
-	const [showPassword, setShowPassword] = useState(false);
+	const [rememberPassword, setRememberPassword] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const {mutateUser} = useUser({
@@ -65,6 +66,23 @@ export default function Login() {
 					<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={login}>
 						<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
 						<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
+						<div className="flex justify-between w-full px-4">
+							<div className="flex gap-3 text-mti-gray-dim text-xs cursor-pointer" onClick={() => setRememberPassword((prev) => !prev)}>
+								<input type="checkbox" className="hidden" />
+								<div
+									className={clsx(
+										"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-green-light bg-white",
+										"transition duration-300 ease-in-out",
+										rememberPassword && "!bg-mti-green-light ",
+									)}>
+									<BsCheck color="white" className="w-full h-full" />
+								</div>
+								<span>Remember my password</span>
+							</div>
+							<Link href="/forgot-password" className="text-mti-green-light text-xs">
+								Forgot Password?
+							</Link>
+						</div>
 						<Button className="mt-8 w-full" color="green" disabled={isLoading}>
 							{!isLoading && "Login"}
 							{isLoading && (

src/pages/profile.tsx

@@ -1,9 +1,25 @@
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {User} from "@/interfaces/user";
+/* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
 import Navbar from "@/components/Navbar";
-import {Avatar} from "primereact/avatar";
+import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone, BsArrowRepeat} from "react-icons/bs";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {useEffect, useState} from "react";
+import useStats from "@/hooks/useStats";
+import {averageScore, totalExams} from "@/utils/stats";
+import useUser from "@/hooks/useUser";
+import Sidebar from "@/components/Sidebar";
+import Diagnostic from "@/components/Diagnostic";
+import {ToastContainer} from "react-toastify";
+import {capitalize} from "lodash";
+import {Module} from "@/interfaces";
+import ProgressBar from "@/components/Low/ProgressBar";
+import Layout from "@/components/High/Layout";
+import {calculateAverageLevel} from "@/utils/score";
+import Input from "@/components/Low/Input";
+import Button from "@/components/Low/Button";
+import {useRouter} from "next/router";
+import Link from "next/link";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -24,11 +40,28 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-export default function Profile({user}: {user: User}) {
+export default function Home() {
+	const [bio, setBio] = useState("");
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const {user} = useUser({redirectTo: "/login"});
+
+	useEffect(() => {
+		if (user) {
+			setName(user.name);
+			setEmail(user.email);
+			setBio(user.bio);
+		}
+	}, [user]);
+
 	return (
 		<>
 			<Head>
-				<title>IELTS GPT | Profile</title>
+				<title>IELTS GPT | Muscat Training Institute</title>
 				<meta
 					name="description"
 					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -36,13 +69,82 @@ export default function Profile({user}: {user: User}) {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
-				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
-					<section className="bg-white drop-shadow-xl p-4 rounded-xl w-96 flex flex-col items-center">
-						<Avatar image={user.profilePicture} size="xlarge" shape="circle" />
+			<ToastContainer />
+			{user && (
+				<Layout user={user}>
+					<section className="w-full flex flex-col gap-8 px-4 py-8">
+						<div className="flex w-full justify-between">
+							<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
+										label="Name"
+										type="text"
+										name="name"
+										onChange={(e) => setName(e)}
+										placeholder="Enter your name"
+										defaultValue={name}
+										required
+									/>
+									<Input
+										label="E-mail Address"
+										type="email"
+										name="email"
+										onChange={(e) => setEmail(e)}
+										placeholder="Enter email address"
+										defaultValue={email}
+										required
+									/>
+									<Input
+										label="Old Password"
+										type="password"
+										name="password"
+										onChange={(e) => setPassword(e)}
+										placeholder="Enter your password"
+										required
+									/>
+									<Input
+										label="New Password"
+										type="password"
+										name="confirmPassword"
+										onChange={(e) => setConfirmPassword(e)}
+										placeholder="Confirm your password"
+										required
+									/>
+								</form>
+							</div>
+							<div className="flex flex-col gap-3 items-center w-48">
+								<img
+									src={user.profilePicture}
+									alt={user.name}
+									className="aspect-square h-48 w-48 rounded-full drop-shadow-xl self-end"
+								/>
+								<span className="cursor-pointer text-mti-green-light text-sm">Change picture</span>
+							</div>
+						</div>
+						<div className="flex flex-col gap-4 mt-8 mb-20">
+							<span className="text-lg font-bold">Bio</span>
+							<textarea
+								className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+								onChange={(e) => setBio(e.target.value)}
+								defaultValue={bio}
+								placeholder="Write your text here..."
+							/>
+						</div>
+
+						<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+							<Link href="/" className="max-w-[200px] self-end w-full">
+								<Button color="green" variant="outline" className="max-w-[200px] self-end w-full">
+									Back
+								</Button>
+							</Link>
+							<Button color="green" className="max-w-[200px] self-end w-full">
+								Save Changes
+							</Button>
+						</div>
 					</section>
-				</div>
-			</main>
+				</Layout>
+			)}
 		</>
 	);
 }

src/pages/register.tsx

@@ -12,9 +12,7 @@ export default function Register() {
 	const [name, setName] = useState("");
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
-	const [showPassword, setShowPassword] = useState(false);
 	const [confirmPassword, setConfirmPassword] = useState("");
-	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const {mutateUser} = useUser({