kgroad-frontend2/src/widgets/SignUpForm/SignUpForm.tsx

"use client";

import "./SignUpForm.scss";
import { useState } from "react";
import AuthInput from "@/features/AuthInput/AuthInput";
import Loader from "@/shared/ui/components/Loader/Loader";
import GoogleButton from "@/features/GoogleButton/GoogleButton";
import { useRouter } from "next/navigation";
import { apiInstance } from "@/shared/config/apiConfig";
import { AxiosError } from "axios";

const SignUpForm = () => {
  const [emailWarning, setEmailWarning] = useState<string>("");
  const [passwordWarning, setPasswordWarning] = useState<string>("");
  const [passwordConfirmWarning, setPasswordConfirmWarning] =
    useState<string>("");
  const [error, setError] = useState<string>("");
  const [loader, setLoader] = useState<boolean>(false);

  const router = useRouter();

  const handleSubmit: React.MouseEventHandler<
    HTMLFormElement
  > = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);

    if (!formData.get("email")?.toString()) {
      setError("");
      setPasswordWarning("");
      setPasswordConfirmWarning("");
      setEmailWarning("Заполните поле Email");
      return;
    }

    if (!formData.get("password")?.toString()) {
      setError("");
      setEmailWarning("");
      setPasswordConfirmWarning("");
      setPasswordWarning("Заполните поле Пароль");
      return;
    }

    if (!formData.get("password2")?.toString()) {
      setError("");
      setEmailWarning("");
      setPasswordWarning("");
      setPasswordConfirmWarning("Заполните поле потверждения");
      return;
    }

    if (
      formData.get("password")?.toString() !==
      formData.get("password2")?.toString()
    ) {
      setError("");
      setEmailWarning("");
      setPasswordWarning("");
      setPasswordConfirmWarning("Пароли не совпадают");
      return;
    }

    try {
      setError("");
      setEmailWarning("");
      setPasswordWarning("");
      setPasswordConfirmWarning("");
      setLoader(true);

      const res = await apiInstance.post(
        "/users/register/",
        formData
      );

      if (res.status === 200 || res.status === 201) {
        router.push(
          `/sign-up/confirm-email/?email=${formData.get("email")}`
        );
      }
    } catch (error: unknown) {
      if (error instanceof AxiosError) {
        setError("Произошла непредвиденная ошибка");
      } else {
        setError("An error ocured");
      }
    } finally {
      setLoader(false);
    }
  };

  return (
    <form className="sign-up-form" onSubmit={handleSubmit}>
      <div className="sign-up-form__inputs">
        <AuthInput
          type="email"
          label="Email"
          placeholder="Введите email"
          error={emailWarning}
          name="email"
        />
        <AuthInput
          isPassword
          label="Пароль"
          placeholder="Введите пароль"
          error={passwordWarning}
          name="password"
        />
        <AuthInput
          isPassword
          label="Пароль потверждения"
          placeholder="Повторите пароль"
          error={passwordConfirmWarning}
          name="password2"
        />
      </div>
      {error ? <p className="sign-up-form__error">{error}</p> : null}

      <div className="sign-up-form__btns">
        <button className="sign-up-form__btns_first" type="submit">
          {loader ? <Loader /> : "Войти"}
        </button>

        {/*
        <GoogleButton />
  */}
      </div>
    </form>
  );
};

export default SignUpForm;