Verify current password before requesting password change

Author: varunsingh87

src/ChangePassword/changePassword.js

@@ -4,29 +4,64 @@ import changePassword from "../AccountForm/accountForm.module.css";
 import { setFormElement } from "../reactExtensions";
 
 export default function ChangePassword(props) {
-    const [currentPassword, setCurrentPassword] = useState("");
+	const [currentPassword, setCurrentPassword] = useState("");
 	const [newPassword, setNewPassword] = useState("");
 	const [confirmNewPassword, setConfirmNewPassword] = useState("");
 
 	const handleChangePasswordClick = e => {
 		e.preventDefault();
 
-		fetch("https://api.borumtech.com/api/login", {
-			method: "PUT",
-			headers: {
-				"content-type": "application/x-www-form-urlencoded",
-				"authorization": "Basic " + localStorage.getItem("apiKey")
-			},
-			body: `password=${newPassword}`
-		}).then(response => response.json()).then(response => {
-			if (!response.ok) {
-				alert("An error occurred and the password could not be changed.");
-			}
-		})
+		const userEmail = localStorage.getItem("email");
+
+		const verifyCurrentPassword = () =>
+			fetch("https://api.borumtech.com/api/login", {
+				method: "POST",
+				headers: {
+					"content-type": "application/x-www-form-urlencoded",
+				},
+				body: `email=${userEmail}&password=${currentPassword}`,
+			}).then(response => {
+				if (response.ok) return response.json();
+				throw new Error(response.json());
+			});
+
+		const requestPasswordChange = () =>
+			fetch("https://api.borumtech.com/api/login", {
+				method: "PUT",
+				headers: {
+					"content-type": "application/x-www-form-urlencoded",
+					authorization: "Basic " + localStorage.getItem("apiKey"),
+				},
+				body: `password=${newPassword}`,
+			})
+				.then(response => {
+					if (response.ok) {
+						return response.json();
+					}
+				})
+				.then(response => {
+					if (!response.ok) {
+						alert(
+							"An error occurred and the password could not be changed."
+						);
+					}
+				});
+
+		verifyCurrentPassword()
+			.then(requestPasswordChange)
+			.catch(() => {
+				alert(
+					"The current password is not correct. If you do not remember your current password, log out and click 'Forgot Password'"
+				);
+			});
 	};
 
 	return (
-		<form style={{width: "auto"}} onSubmit={handleChangePasswordClick} className={changePassword.form}>
+		<form
+			style={{ width: "auto" }}
+			onSubmit={handleChangePasswordClick}
+			className={changePassword.form}
+		>
 			<FormField
 				labelContent="Current Password"
 				label="currpass"