Add react-hook-form

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<IChangePasswordProps> = ({
   const [loader, setLoader] = 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()) {
-      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 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">
+        <form onSubmit={handleSubmit(onSubmit)}>
-          Изменить пароль
+          <h4 className="mb-2 text-[18px] font-bold leading-7 text-gray-900">
-        </h4>
+            Изменить пароль
-        <ChangePasswordInput
+          </h4>
-          onChange={(e) => setOldPassword(e.target.value)}
+          <ChangePasswordInput
-          value={oldPassword}
+            onChange={(e) => setOldPassword(e.target.value)}
-          placeholder="Введите старый пароль"
+            value={oldPassword}
-          label="Старый пароль"
+            placeholder="Введите старый пароль"
-          error={warningOldPassword}
+            label="Старый пароль"
-        />
+            error={warningOldPassword}
-        <Link
+          />
-          href="/sign-in/forgot-password"
+          <Link
-          className="self-end leading-8 text-blue"
+            href="/sign-in/forgot-password"
-        >
+            className="self-end leading-8 text-blue"
-          Забыли пароль?
+          >
-        </Link>
+            Забыли пароль?
-        <ChangePasswordInput
+          </Link>
-          onChange={(e) => setNewPassword(e.target.value)}
+          <ChangePasswordInput
-          value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
-          placeholder="Введите новый пароль"
+            value={newPassword}
-          label="Новый пароль"
+            placeholder="Введите новый пароль"
-          error={warningNewPassword}
+            label="Новый пароль"
-        />
+            error={warningNewPassword}
-        <ChangePasswordInput
+          />
-          onChange={(e) => setConfirmNewPassword(e.target.value)}
+          <ChangePasswordInput
-          value={confirmNewPassword}
+            onChange={(e) => setConfirmNewPassword(e.target.value)}
-          placeholder="Повторите новый пароль"
+            value={confirmNewPassword}
-          label="Потвердить новый пароль"
+            placeholder="Повторите новый пароль"
-          error={warningConfirmNewPassword}
+            label="Потвердить новый пароль"
-        />
+            error={warningConfirmNewPassword}
-        {error ? <p className="text-red-500">{error}</p> : null}
+          />
-        {success ? (
+          {error ? <p className="text-red-500">{error}</p> : null}
-          <p className="text-light-blue">Вы успешно поменяли пароль!</p>
+          {success ? (
-        ) : null}
+            <p className="text-light-blue">Вы успешно поменяли пароль!</p>
+          ) : null}
 
-        <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 /> : "Сохранить"}
+            </button>
-          </button>
+            <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"
-            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"
-            type="button"
+              onClick={() => closeWindow(false)}
-            onClick={() => closeWindow(false)}
+            >
-          >
+              Отмена
-            Отмена
+            </button>
-          </button>
+          </div>
-        </div>
+        </form>
       </div>
     </div>
   );