procurement-frontend2/src/widgets/forms/ResetCodeForm.tsx

"use client";

import AuthInput from "@/features/AuthInput/AuthInput";
import { useState } from "react";
import { apiInstance } from "@/shared/config/apiConfig";
import { ITokens } from "@/shared/types/token-type";
import { useRouter } from "@/shared/config/navigation";
import { AxiosError } from "axios";
import Loader from "@/shared/ui/Loader/Loader";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Image from "next/image";
import eye_off from "./icons/eye-off.svg";
import eye_on from "./icons/eye-on.svg";
import alert from "./icons/alert-circle.svg";
import { useTranslations } from "next-intl";

const ResetCodeForm = () => {
  const t = useTranslations("resetCode");
  const [error, setError] = useState<string>("");
  const [loader, setLoader] = useState<boolean>(false);
  const [showPasswordOne, setShowPasswordOne] = useState(false);
  const [showPasswordTwo, setShowPasswordTwo] = useState(false);

  const router = useRouter();

  const resetCodeFormScheme = z
    .object({
      new_password1: z.string().min(8, t("passInfo")),
      new_password2: z.string().min(8, t("passInfo")),
    })
    .refine((data) => data.new_password1 === data.new_password2, {
      message: t("noMatch"),
      path: ["new_password2"],
    });
  type FormFields = z.infer<typeof resetCodeFormScheme>;

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormFields>({
    resolver: zodResolver(resetCodeFormScheme),
  });

  const onSubmit = async (data: FormFields) => {
    try {
      setError("");
      setLoader(true);

      const storage = localStorage.getItem("transitional");
      if (storage === null) return;
      const transitional: ITokens = JSON.parse(storage);

      const Authorization = `Bearer ${transitional.access_token}`;

      const config = {
        headers: {
          Authorization,
        },
      };

      const response = await apiInstance.patch(
        "/auth/password_reset/",
        data,
        config
      );

      if ([200, 201].includes(response.status)) {
        localStorage.removeItem("transitional");
        router.push("/sign-in");
      }
    } catch (error) {
      if (error instanceof AxiosError) {
        if (
          [500, 501, 502, 503, 504].includes(error.response?.status as number)
        ) {
          setError(t("serverError"));
        } else if ([400, 404].includes(error.response?.status as number)) {
          setError(t("noPassword"));
        }
      } else {
        setError(t("errorOccured"));
      }
    } finally {
      setLoader(false);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="w-[360px] flex flex-col">
      <div className="flex flex-col gap-8">
        <div>
          <label className="text-[14px] leading-5 text-gray-700">
            {t("enterPass")}
          </label>
          <div
            className={`flex items-center border border-gray-300 rounded-lg shadow-sm bg-white${
              errors?.new_password1?.message && "border border-red-400"
            }`}
          >
            <input
              placeholder={t("enterPassword")}
              className="w-full text-[16px] leading-6 text-gray-900 px-[10px] py-[14px]"
              type={showPasswordOne ? "text" : "password"}
              {...register("new_password1", { required: true })}
            />
            <button
              onClick={() => setShowPasswordOne((prev) => !prev)}
              type="button"
              className="pr-2"
            >
              <Image src={showPasswordOne ? eye_on : eye_off} alt="Eye Icon" />
            </button>
          </div>
          {errors?.new_password1?.message && (
            <p className="flex items-center justify-between text-[14px] font-normal leading-5 text-red-500">
              {errors.new_password1.message}{" "}
              <Image src={alert} alt="Alert Icon" />
            </p>
          )}
        </div>
        <div>
          <label className="text-[14px] leading-5 text-gray-700">
            {t("repeatPassword")}
          </label>
          <div
            className={`flex items-center border border-gray-300 rounded-lg shadow-sm bg-white${
              errors?.new_password2?.message && "border border-red-400"
            }`}
          >
            <input
              placeholder={t("repeatPass")}
              className="w-full text-[16px] leading-6 text-gray-900 px-[10px] py-[14px]"
              type={showPasswordTwo ? "text" : "password"}
              {...register("new_password2", { required: true })}
            />
            <button
              onClick={() => setShowPasswordTwo((prev) => !prev)}
              type="button"
              className="pr-2"
            >
              <Image src={showPasswordTwo ? eye_on : eye_off} alt="Eye Icon" />
            </button>
          </div>
          {errors?.new_password2?.message && (
            <p className="flex items-center justify-between text-[14px] font-normal leading-5 text-red-500">
              {errors.new_password2.message}{" "}
              <Image src={alert} alt="Alert Icon" />
            </p>
          )}
        </div>
      </div>
      {errors.root && (
        <p className="text-sm leading-5 text-red-500">{errors.root.message}</p>
      )}
      {error ? <p className="text-red-500 leading-5 text-sm">{error}</p> : null}
      <button
        className="mt-8 h-[44px] w-full rounded-md shadow-sm bg-light-blue font-bold leading-6 text-white"
        type="submit"
      >
        {loader ? <Loader /> : t("save")}
      </button>
    </form>
  );
};

export default ResetCodeForm;