diff --git a/src/widgets/forms/ProfileForm/ChangePassword/ChangePassword.tsx b/src/widgets/forms/ProfileForm/ChangePassword/ChangePassword.tsx index d9f6ec0..0dc7742 100644 --- a/src/widgets/forms/ProfileForm/ChangePassword/ChangePassword.tsx +++ b/src/widgets/forms/ProfileForm/ChangePassword/ChangePassword.tsx @@ -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 = ({ const [loader, setLoader] = useState(false); const [success, setSuccess] = useState(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; - 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({ + 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 = ({ onClick={(e) => e.stopPropagation()} className="flex w-full max-w-[400px] p-6 flex-col gap-4 rounded-md bg-white" > -

- Изменить пароль -

- setOldPassword(e.target.value)} - value={oldPassword} - placeholder="Введите старый пароль" - label="Старый пароль" - error={warningOldPassword} - /> - - Забыли пароль? - - setNewPassword(e.target.value)} - value={newPassword} - placeholder="Введите новый пароль" - label="Новый пароль" - error={warningNewPassword} - /> - setConfirmNewPassword(e.target.value)} - value={confirmNewPassword} - placeholder="Повторите новый пароль" - label="Потвердить новый пароль" - error={warningConfirmNewPassword} - /> - {error ?

{error}

: null} - {success ? ( -

Вы успешно поменяли пароль!

- ) : null} +
+

+ Изменить пароль +

+ setOldPassword(e.target.value)} + value={oldPassword} + placeholder="Введите старый пароль" + label="Старый пароль" + error={warningOldPassword} + /> + + Забыли пароль? + + setNewPassword(e.target.value)} + value={newPassword} + placeholder="Введите новый пароль" + label="Новый пароль" + error={warningNewPassword} + /> + setConfirmNewPassword(e.target.value)} + value={confirmNewPassword} + placeholder="Повторите новый пароль" + label="Потвердить новый пароль" + error={warningConfirmNewPassword} + /> + {error ?

{error}

: null} + {success ? ( +

Вы успешно поменяли пароль!

+ ) : null} -
- - -
+
+ + +
+ );