72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { AccountSettings } from "@/types/global";
|
|
|
|
type Props = {
|
|
togglePasswordFormModal: Function;
|
|
user: AccountSettings;
|
|
setPasswordForm: Function;
|
|
};
|
|
|
|
export default function ChangePassword({
|
|
togglePasswordFormModal,
|
|
user,
|
|
setPasswordForm,
|
|
}: Props) {
|
|
const [oldPassword, setOldPassword] = useState("");
|
|
const [newPassword1, setNewPassword1] = useState("");
|
|
const [newPassword2, setNewPassword2] = useState("");
|
|
|
|
const submit = async () => {
|
|
if (oldPassword !== "" && newPassword1 !== "" && newPassword2 !== "") {
|
|
if (newPassword1 === newPassword2) {
|
|
setPasswordForm(oldPassword, newPassword1);
|
|
togglePasswordFormModal();
|
|
} else {
|
|
console.log("Passwords do not match.");
|
|
}
|
|
} else {
|
|
console.log("Please fill out all the fields.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="sm:w-[33rem] w-72">
|
|
<div className="max-w-sm mx-auto flex flex-col gap-3">
|
|
<p className="text-xl text-sky-500 mb-2 text-center">Change Password</p>
|
|
|
|
<p className="text-sm font-bold text-sky-300">Old Password</p>
|
|
|
|
<input
|
|
value={oldPassword}
|
|
onChange={(e) => setOldPassword(e.target.value)}
|
|
type="text"
|
|
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
|
/>
|
|
<p className="text-sm font-bold text-sky-300">New Password</p>
|
|
|
|
<input
|
|
value={newPassword1}
|
|
onChange={(e) => setNewPassword1(e.target.value)}
|
|
type="text"
|
|
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
|
/>
|
|
<p className="text-sm font-bold text-sky-300">Re-enter New Password</p>
|
|
|
|
<input
|
|
value={newPassword2}
|
|
onChange={(e) => setNewPassword2(e.target.value)}
|
|
type="text"
|
|
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
|
/>
|
|
|
|
<div
|
|
className="mx-auto mt-2 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 bg-sky-500 hover:bg-sky-400 cursor-pointer"
|
|
onClick={submit}
|
|
>
|
|
Save
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|