Add react-hook-form

This commit is contained in:
ariari04 2024-09-25 22:20:56 +06:00
parent 91b2a5024e
commit 876555dc99

View File

@ -5,6 +5,9 @@ import { AxiosError } from "axios";
import Loader from "@/shared/ui/Loader/Loader"; import Loader from "@/shared/ui/Loader/Loader";
import ChangePasswordInput from "./ChangePasswordInput/ChangePasswordInput"; import ChangePasswordInput from "./ChangePasswordInput/ChangePasswordInput";
import { Link } from "@/shared/config/navigation"; import { Link } from "@/shared/config/navigation";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
interface IChangePasswordProps { interface IChangePasswordProps {
closeWindow: (bool: boolean) => void; closeWindow: (bool: boolean) => void;
@ -26,44 +29,30 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
const [loader, setLoader] = useState<boolean>(false); const [loader, setLoader] = useState<boolean>(false);
const [success, setSuccess] = useState<boolean>(false); const [success, setSuccess] = useState<boolean>(false);
const changePass = async () => { const changePasswordScheme = z
if (!oldPassword.trim()) { .object({
setError(""); old_password: z.string().min(8, "Минимум 8 символов"),
setWarningNewPassword(""); new_password1: z.string().min(8, "Минимум 8 символов"),
setWarningConfirmNewPassword(""); new_password2: z.string().min(8, "Минимум 8 символов"),
setWarningOldPassword("Пожалуйста введите старый пароль"); })
return; .refine((data) => data.new_password1 === data.new_password2, {
} message: "Пароли не совпадают",
path: ["new_password2"],
});
type FormFields = z.infer<typeof changePasswordScheme>;
if (!newPassword.trim()) { const {
setError(""); register,
setWarningConfirmNewPassword(""); handleSubmit,
setWarningOldPassword(""); formState: { errors },
setWarningNewPassword("Пожалуйста введите новый пароль"); } = useForm<FormFields>({
return; resolver: zodResolver(changePasswordScheme),
} });
if (!confirmNewPassword.trim()) { const onSubmit = async (data: FormFields) => {
try {
setError(""); setError("");
setWarningNewPassword(""); setLoader(true);
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 Authorization = `Bearer ${session.data?.access_token}`;
const config = { const config = {
@ -71,13 +60,6 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
Authorization, Authorization,
}, },
}; };
try {
setError("");
setWarningNewPassword("");
setWarningOldPassword("");
setWarningConfirmNewPassword("");
setLoader(true);
const res = await apiInstance.patch( const res = await apiInstance.patch(
"/auth/password_change/", "/auth/password_change/",
data, data,
@ -107,6 +89,7 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="flex w-full max-w-[400px] p-6 flex-col gap-4 rounded-md bg-white" className="flex w-full max-w-[400px] p-6 flex-col gap-4 rounded-md bg-white"
> >
<form onSubmit={handleSubmit(onSubmit)}>
<h4 className="mb-2 text-[18px] font-bold leading-7 text-gray-900"> <h4 className="mb-2 text-[18px] font-bold leading-7 text-gray-900">
Изменить пароль Изменить пароль
</h4> </h4>
@ -145,7 +128,6 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
<div className="mt-9 flex flex-col gap-3"> <div className="mt-9 flex flex-col gap-3">
<button <button
type="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" className="py-3 px-4 rounded-md font-bold leading-6 shadow-sm border border-blue bg-blue text-white"
> >
{loader ? <Loader /> : "Сохранить"} {loader ? <Loader /> : "Сохранить"}
@ -158,6 +140,7 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
Отмена Отмена
</button> </button>
</div> </div>
</form>
</div> </div>
</div> </div>
); );