Password reset working

src/ui/account/PasswordResetDisplay.tsx

@@ -0,0 +1,90 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import PasswordInput from "@/components/input/PasswordInput";
+import { useUpdatePassword } from "@/hooks/AccountHooks";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+
+
+export default function PasswordResetDisplay(){
+	const [ currentPassword, setCurrentPassword ] = useState("");
+	const [ newPassword, setNewPassword ] = useState("");
+	const [ confirmPassword, setConfirmPassword ] = useState("");
+
+	const navigate = useNavigate();
+	const { addErrorMessage, addSuccessMessage } = useTimedModal();
+
+	const {mutate: updatePasswordMutate, status: updatePasswordStatus, error: updatePasswordError, reset: updatePasswordReset} = useUpdatePassword();
+
+
+	const updatePassword = () => {
+		if(newPassword !== confirmPassword){
+			addErrorMessage("Passwords do not match");
+			return;
+		}
+		else if(newPassword === ""){
+			addErrorMessage("Password cannot be empty");
+			return;
+		}
+		else{
+			updatePasswordMutate({
+				currentPassword,
+				newPassword
+			});
+		}
+	}
+
+
+	useEffect(() => {
+		if(updatePasswordStatus === "success"){
+			addSuccessMessage("Password updated successfully");
+			updatePasswordReset();
+			setCurrentPassword("");
+			setNewPassword("");
+			setConfirmPassword("");
+		}
+		else if(updatePasswordStatus === "error"){
+			addErrorMessage("Failed to update password: " + updatePasswordError.message);
+			updatePasswordReset();
+		}
+	}, [ updatePasswordMutate, updatePasswordStatus, updatePasswordError, updatePasswordReset, addSuccessMessage, addErrorMessage, navigate ]);
+
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-4"
+		>
+			<div>
+				<PasswordInput
+					id="accountCurrentPassword"
+					placeholder="Current Password"
+					value={currentPassword}
+					onChange={(e) => setCurrentPassword(e.target.value)}
+				/>
+			</div>
+			<div>
+				<PasswordInput
+					id="accountNewPassword"
+					placeholder="New Password"
+					value={newPassword}
+					onChange={(e) => setNewPassword(e.target.value)}
+				/>
+			</div>
+			<div>
+				<PasswordInput
+					id="accountConfirmPassword"
+					placeholder="Confirm Password"
+					value={confirmPassword}
+					onChange={(e) => setConfirmPassword(e.target.value)}
+				/>
+			</div>
+			<div>
+				<PrimaryButton
+					onClick={updatePassword}
+				>
+					Update Password
+				</PrimaryButton>
+			</div>
+		</div>
+	);
+}