Solved a bug where users could change their e-mail to another user's email

src/pages/profile.tsx

@@ -64,6 +64,8 @@ interface Props {
 	mutateUser: Function;
 }
 
+const DoubleColumnRow = ({children}: {children: ReactNode}) => <div className="flex flex-col md:flex-row gap-8 w-full">{children}</div>;
+
 function UserProfile({user, mutateUser}: Props) {
 	const [bio, setBio] = useState(user.bio || "");
 	const [name, setName] = useState(user.name || "");
@@ -150,106 +152,45 @@ function UserProfile({user, mutateUser}: Props) {
 			}
 		}
 
-		const request = await axios.post("/api/users/update", {
-			bio,
-			name,
-			email,
-			password,
-			newPassword,
-			profilePicture,
-			desiredLevels,
-			preferredGender,
-			preferredTopics,
-			demographicInformation: {
-				phone,
-				country,
-				employment: user?.type === "corporate" ? undefined : employment,
-				position: user?.type === "corporate" ? position : undefined,
-				gender,
-				passport_id,
-				timezone,
-			},
-			...(user.type === "corporate" ? {corporateInformation} : {}),
-		});
-		if (request.status === 200) {
-			toast.success("Your profile has been updated!");
-			mutateUser((request.data as {user: User}).user);
-			setIsLoading(false);
-			return;
-		}
-
-		toast.error((request.data as ErrorMessage).message);
-		setIsLoading(false);
+		axios
+			.post("/api/users/update", {
+				bio,
+				name,
+				email,
+				password,
+				newPassword,
+				profilePicture,
+				desiredLevels,
+				preferredGender,
+				preferredTopics,
+				demographicInformation: {
+					phone,
+					country,
+					employment: user?.type === "corporate" ? undefined : employment,
+					position: user?.type === "corporate" ? position : undefined,
+					gender,
+					passport_id,
+					timezone,
+				},
+				...(user.type === "corporate" ? {corporateInformation} : {}),
+			})
+			.then((response) => {
+				if (response.status === 200) {
+					toast.success("Your profile has been updated!");
+					mutateUser((response.data as {user: User}).user);
+					setIsLoading(false);
+					return;
+				}
+			})
+			.catch((error) => {
+				console.log(error);
+				toast.error((error.response.data as ErrorMessage).message);
+			})
+			.finally(() => {
+				setIsLoading(false);
+			});
 	};
 
-	const DoubleColumnRow = ({children}: {children: ReactNode}) => <div className="flex flex-col md:flex-row gap-8 w-full">{children}</div>;
-
-	const PasswordInput = () => (
-		<DoubleColumnRow>
-			<Input
-				label="Current Password"
-				type="password"
-				name="password"
-				onChange={(e) => setPassword(e)}
-				placeholder="Enter your password"
-				required
-			/>
-			<Input
-				label="New Password"
-				type="password"
-				name="newPassword"
-				onChange={(e) => setNewPassword(e)}
-				placeholder="Enter your new password (optional)"
-			/>
-		</DoubleColumnRow>
-	);
-
-	const NameInput = () => (
-		<Input label="Name" type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
-	);
-
-	const AgentInformationInput = () => (
-		<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
-			<Input
-				label="Corporate Name"
-				type="text"
-				name="companyName"
-				onChange={() => null}
-				placeholder="Enter corporate name"
-				defaultValue={companyName}
-				disabled
-			/>
-			<Input
-				label="Commercial Registration"
-				type="text"
-				name="commercialRegistration"
-				onChange={() => null}
-				placeholder="Enter commercial registration"
-				defaultValue={commercialRegistration}
-				disabled
-			/>
-		</div>
-	);
-
-	const CountryInput = () => (
-		<div className="flex flex-col gap-3 w-full">
-			<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-			<CountrySelect value={country} onChange={setCountry} />
-		</div>
-	);
-
-	const PhoneInput = () => (
-		<Input
-			type="tel"
-			name="phone"
-			label="Phone number"
-			onChange={(e) => setPhone(e)}
-			placeholder="Enter phone number"
-			defaultValue={phone}
-			required
-		/>
-	);
-
 	const ExpirationDate = () => (
 		<div className="flex flex-col gap-3 w-full">
 			<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
@@ -276,7 +217,7 @@ function UserProfile({user, mutateUser}: Props) {
 		</div>
 	);
 
-	const manualDownloadLink = ['student', 'teacher', 'corporate'].includes(user.type) ? `/manuals/${user.type}.pdf` : '';
+	const manualDownloadLink = ["student", "teacher", "corporate"].includes(user.type) ? `/manuals/${user.type}.pdf` : "";
 
 	return (
 		<Layout user={user}>
@@ -288,7 +229,15 @@ function UserProfile({user, mutateUser}: Props) {
 						<form className="flex flex-col items-center gap-6 w-full">
 							<DoubleColumnRow>
 								{user.type !== "corporate" ? (
-									<NameInput />
+									<Input
+										label="Name"
+										type="text"
+										name="name"
+										onChange={(e) => setName(e)}
+										placeholder="Enter your name"
+										defaultValue={name}
+										required
+									/>
 								) : (
 									<Input
 										label="Company name"
@@ -316,12 +265,60 @@ function UserProfile({user, mutateUser}: Props) {
 									required
 								/>
 							</DoubleColumnRow>
-							<PasswordInput />
-							{user.type === "agent" && <AgentInformationInput />}
+							<DoubleColumnRow>
+								<Input
+									label="Current Password"
+									type="password"
+									name="password"
+									onChange={(e) => setPassword(e)}
+									placeholder="Enter your password"
+									required
+								/>
+								<Input
+									label="New Password"
+									type="password"
+									name="newPassword"
+									onChange={(e) => setNewPassword(e)}
+									placeholder="Enter your new password (optional)"
+								/>
+							</DoubleColumnRow>
+							{user.type === "agent" && (
+								<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+									<Input
+										label="Corporate Name"
+										type="text"
+										name="companyName"
+										onChange={() => null}
+										placeholder="Enter corporate name"
+										defaultValue={companyName}
+										disabled
+									/>
+									<Input
+										label="Commercial Registration"
+										type="text"
+										name="commercialRegistration"
+										onChange={() => null}
+										placeholder="Enter commercial registration"
+										defaultValue={commercialRegistration}
+										disabled
+									/>
+								</div>
+							)}
 
 							<DoubleColumnRow>
-								<CountryInput />
-								<PhoneInput />
+								<div className="flex flex-col gap-3 w-full">
+									<label className="font-normal text-base text-mti-gray-dim">Country *</label>
+									<CountrySelect value={country} onChange={setCountry} />
+								</div>
+								<Input
+									type="tel"
+									name="phone"
+									label="Phone number"
+									onChange={(e) => setPhone(e)}
+									placeholder="Enter phone number"
+									defaultValue={phone}
+									required
+								/>
 							</DoubleColumnRow>
 
 							{user.type === "student" ? (
@@ -426,7 +423,15 @@ function UserProfile({user, mutateUser}: Props) {
 								<>
 									<Divider />
 									<DoubleColumnRow>
-										<NameInput />
+										<Input
+											label="Name"
+											type="text"
+											name="name"
+											onChange={(e) => setName(e)}
+											placeholder="Enter your name"
+											defaultValue={name}
+											required
+										/>
 										<Input
 											name="position"
 											onChange={setPosition}