Add react-hook-form
This commit is contained in:
parent
91b2a5024e
commit
876555dc99
@ -5,6 +5,9 @@ import { AxiosError } from "axios";
|
||||
import Loader from "@/shared/ui/Loader/Loader";
|
||||
import ChangePasswordInput from "./ChangePasswordInput/ChangePasswordInput";
|
||||
import { Link } from "@/shared/config/navigation";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
interface IChangePasswordProps {
|
||||
closeWindow: (bool: boolean) => void;
|
||||
@ -26,58 +29,37 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
|
||||
const [loader, setLoader] = useState<boolean>(false);
|
||||
const [success, setSuccess] = useState<boolean>(false);
|
||||
|
||||
const changePass = async () => {
|
||||
if (!oldPassword.trim()) {
|
||||
setError("");
|
||||
setWarningNewPassword("");
|
||||
setWarningConfirmNewPassword("");
|
||||
setWarningOldPassword("Пожалуйста введите старый пароль");
|
||||
return;
|
||||
}
|
||||
const changePasswordScheme = z
|
||||
.object({
|
||||
old_password: z.string().min(8, "Минимум 8 символов"),
|
||||
new_password1: z.string().min(8, "Минимум 8 символов"),
|
||||
new_password2: z.string().min(8, "Минимум 8 символов"),
|
||||
})
|
||||
.refine((data) => data.new_password1 === data.new_password2, {
|
||||
message: "Пароли не совпадают",
|
||||
path: ["new_password2"],
|
||||
});
|
||||
type FormFields = z.infer<typeof changePasswordScheme>;
|
||||
|
||||
if (!newPassword.trim()) {
|
||||
setError("");
|
||||
setWarningConfirmNewPassword("");
|
||||
setWarningOldPassword("");
|
||||
setWarningNewPassword("Пожалуйста введите новый пароль");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirmNewPassword.trim()) {
|
||||
setError("");
|
||||
setWarningNewPassword("");
|
||||
setWarningOldPassword("");
|
||||
setWarningConfirmNewPassword("Пожалуйста потвердите новый пароль");
|
||||
return;
|
||||
}
|
||||
|
||||
if (confirmNewPassword !== newPassword) {
|
||||
setError("");
|
||||
setWarningNewPassword("");
|
||||
setWarningOldPassword("");
|
||||
setWarningConfirmNewPassword("Пароли отличаются");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
old_password: oldPassword,
|
||||
new_password1: newPassword,
|
||||
new_password2: confirmNewPassword,
|
||||
};
|
||||
|
||||
const Authorization = `Bearer ${session.data?.access_token}`;
|
||||
const config = {
|
||||
headers: {
|
||||
Authorization,
|
||||
},
|
||||
};
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<FormFields>({
|
||||
resolver: zodResolver(changePasswordScheme),
|
||||
});
|
||||
|
||||
const onSubmit = async (data: FormFields) => {
|
||||
try {
|
||||
setError("");
|
||||
setWarningNewPassword("");
|
||||
setWarningOldPassword("");
|
||||
setWarningConfirmNewPassword("");
|
||||
setLoader(true);
|
||||
|
||||
const Authorization = `Bearer ${session.data?.access_token}`;
|
||||
const config = {
|
||||
headers: {
|
||||
Authorization,
|
||||
},
|
||||
};
|
||||
const res = await apiInstance.patch(
|
||||
"/auth/password_change/",
|
||||
data,
|
||||
@ -107,57 +89,58 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex w-full max-w-[400px] p-6 flex-col gap-4 rounded-md bg-white"
|
||||
>
|
||||
<h4 className="mb-2 text-[18px] font-bold leading-7 text-gray-900">
|
||||
Изменить пароль
|
||||
</h4>
|
||||
<ChangePasswordInput
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
value={oldPassword}
|
||||
placeholder="Введите старый пароль"
|
||||
label="Старый пароль"
|
||||
error={warningOldPassword}
|
||||
/>
|
||||
<Link
|
||||
href="/sign-in/forgot-password"
|
||||
className="self-end leading-8 text-blue"
|
||||
>
|
||||
Забыли пароль?
|
||||
</Link>
|
||||
<ChangePasswordInput
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
value={newPassword}
|
||||
placeholder="Введите новый пароль"
|
||||
label="Новый пароль"
|
||||
error={warningNewPassword}
|
||||
/>
|
||||
<ChangePasswordInput
|
||||
onChange={(e) => setConfirmNewPassword(e.target.value)}
|
||||
value={confirmNewPassword}
|
||||
placeholder="Повторите новый пароль"
|
||||
label="Потвердить новый пароль"
|
||||
error={warningConfirmNewPassword}
|
||||
/>
|
||||
{error ? <p className="text-red-500">{error}</p> : null}
|
||||
{success ? (
|
||||
<p className="text-light-blue">Вы успешно поменяли пароль!</p>
|
||||
) : null}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<h4 className="mb-2 text-[18px] font-bold leading-7 text-gray-900">
|
||||
Изменить пароль
|
||||
</h4>
|
||||
<ChangePasswordInput
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
value={oldPassword}
|
||||
placeholder="Введите старый пароль"
|
||||
label="Старый пароль"
|
||||
error={warningOldPassword}
|
||||
/>
|
||||
<Link
|
||||
href="/sign-in/forgot-password"
|
||||
className="self-end leading-8 text-blue"
|
||||
>
|
||||
Забыли пароль?
|
||||
</Link>
|
||||
<ChangePasswordInput
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
value={newPassword}
|
||||
placeholder="Введите новый пароль"
|
||||
label="Новый пароль"
|
||||
error={warningNewPassword}
|
||||
/>
|
||||
<ChangePasswordInput
|
||||
onChange={(e) => setConfirmNewPassword(e.target.value)}
|
||||
value={confirmNewPassword}
|
||||
placeholder="Повторите новый пароль"
|
||||
label="Потвердить новый пароль"
|
||||
error={warningConfirmNewPassword}
|
||||
/>
|
||||
{error ? <p className="text-red-500">{error}</p> : null}
|
||||
{success ? (
|
||||
<p className="text-light-blue">Вы успешно поменяли пароль!</p>
|
||||
) : null}
|
||||
|
||||
<div className="mt-9 flex flex-col gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={changePass}
|
||||
className="py-3 px-4 rounded-md font-bold leading-6 shadow-sm border border-blue bg-blue text-white"
|
||||
>
|
||||
{loader ? <Loader /> : "Сохранить"}
|
||||
</button>
|
||||
<button
|
||||
className="py-3 px-4 rounded-md font-bold leading-6 shadow-md border border-gray-300 bg-slate-200 text-gray-500"
|
||||
type="button"
|
||||
onClick={() => closeWindow(false)}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-9 flex flex-col gap-3">
|
||||
<button
|
||||
type="button"
|
||||
className="py-3 px-4 rounded-md font-bold leading-6 shadow-sm border border-blue bg-blue text-white"
|
||||
>
|
||||
{loader ? <Loader /> : "Сохранить"}
|
||||
</button>
|
||||
<button
|
||||
className="py-3 px-4 rounded-md font-bold leading-6 shadow-md border border-gray-300 bg-slate-200 text-gray-500"
|
||||
type="button"
|
||||
onClick={() => closeWindow(false)}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user