Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useForm } from "react-hook-form";
import { useDispatch, useSelector } from "react-redux";
import { styled, Typography } from "@mui/material";
import { Mail, Lock, Person, CheckCircleOutline } from "@mui/icons-material";
import Recaptcha from "react-recaptcha";

import { axios } from "@utils";
import { useFetchHelper } from "@hooks";
import { addNotification } from "@store/notification/notification.actions";
import CryptoJSAesJson from "@utils/crypto-js/cryptojs-aes-format";

import Input from "@components/UI/inputs/Input";
import Button from "@components/UI/buttons/Buttons";
import Select from "@components/UI/inputs/Select";
import Spinner from "@components/UI/Spinner";
import Form from "@components/common/form";
import SwitchInput from "@components/UI/SwitchInput";
import CheckboxInput from "@components/UI/inputs/Checkbox";

const StyledCheck = styled("div")`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  p {
    text-align: center;
  }
`;
const StyledSpinnerContainer = styled("div")`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;

const Signup = () => {
  const [registered, setRegistered] = useState(false);
  const [loading, setloading] = useState(false);
  const [isAdult, setIsAdult] = useState(false);
  const [isVerified, setIsVerified] = useState(false);
  const reCaptchaInstance = useRef(null);
  const reCaptchaToken = useRef("");
  const dispatch = useDispatch();
  const { site_key, aes } = useSelector(({ auth }) => auth);

  const { data: timezones } = useFetchHelper("timezones");

  const {
    control,
    handleSubmit,
    setError,
    watch,
    formState: { errors },
  } = useForm({
    mode: "all",
  });

  const signupVerifyCallbackHandler = (response) => {
    if (!response) return;
    reCaptchaToken.current = response;
    setIsVerified(true);
  };

  const signupExpiredCallbackHandler = () => {
    reCaptchaToken.current = "";
    setIsVerified(false);
  };

  const handleOnRecaptchaLoad = () => {
    reCaptchaToken.current = "";
  };

  const onSubmitHandler = handleSubmit(
    async ({
      email,
      first_name,
      last_name,
      password,
      confirmation,
      terms_and_conditions,
    }) => {
      setloading(true);
      const formData = new FormData();
      formData.append("first_name", first_name);
      formData.append("last_name", last_name);
      formData.append("email", CryptoJSAesJson.encrypt(email, aes));
      formData.append("password", CryptoJSAesJson.encrypt(password, aes));
      formData.append(
        "confirmation",
        CryptoJSAesJson.encrypt(confirmation, aes)
      );
      formData.append("terms_and_conditions", terms_and_conditions ? 1 : 0);

      formData.append("captcha", reCaptchaToken.current);
      formData.append("is_adult", isAdult ? "y" : "n");

      await axios
        .post("/signup", formData)
        .then(({ data }) => {
          if (!data.success) {
            if (typeof data.data !== "string") {
              Object.entries(data.data).forEach(([key, value]) => {
                setError(key, {
                  type: "manual",
                  message: Array.isArray(value) ? value[0] : value,
                });
              });
              return;
            }

            dispatch(addNotification({ style: "danger", msg: data.data }));
            reCaptchaInstance.current.reset();
            signupVerifyCallbackHandler();
            return;
          }

          reCaptchaInstance.current.reset();
          signupExpiredCallbackHandler();
          setRegistered(true);
        })
        .catch((err) => {
          console.log(`Error: ${err}`);
          dispatch(
            addNotification({
              style: "danger",
              msg: "Disculpe, ha ocurrido un error",
            })
          );
        })
        .finally(() => setloading(false));
    }
  );

  useEffect(() => {
    reCaptchaInstance.current?.reset();
  }, []);

  if (registered) {
    return (
      <StyledCheck>
        <CheckCircleOutline sx={{ color: "#7FFF00", fontSize: "3rem" }} />

        <Typography>
          Se ha registrado correctamente. Por favor, active la cuenta desde su
          correo
        </Typography>

        <Link to="/signin">
          <button className="btn btn-primary">Entrar</button>
        </Link>
      </StyledCheck>
    );
  }

  return (
    <Form onSubmit={onSubmitHandler}>
      <Typography variant="h3">Registrarse</Typography>

      <Input
        type="email"
        name="email"
        placeholder="Correo electrónico"
        icon={<Mail />}
        control={control}
        rules={{
          required: "Este campo es requerido",
          pattern: {
            value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,}$/i,
            message: "Debe ser una dirección de correo electrónico valida",
          },
        }}
        error={errors.email?.message}
      />

      <Input
        type="text"
        name="first_name"
        icon={<Person />}
        placeholder="Nombre"
        control={control}
        rules={{
          required: "Este campo es requerido",
          maxLength: {
            value: 64,
            message: "Limite de carateres superior al permitido",
          },
        }}
        error={errors.first_name?.message}
      />

      <Input
        type="text"
        name="last_name"
        icon={<Person />}
        placeholder="Apellido"
        control={control}
        rules={{
          required: "Este campo es requerido",
          maxLength: {
            value: 64,
            message: "Limite de carateres superior al permitido",
          },
        }}
        error={errors.last_name?.message}
      />

      <Input
        type="password"
        name="password"
        icon={<Lock />}
        placeholder="Clave"
        control={control}
        rules={{
          required: "Este campo es requerido",
          pattern: {
            value:
              /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
            message:
              "Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-",
          },
        }}
        error={errors.password?.message}
      />

      <Input
        type="password"
        name="confirmation"
        icon={<Lock />}
        placeholder="Confirme su clave"
        control={control}
        rules={{
          required: "Este campo es requerido",
          validate: (v) =>
            v === watch("password") ||
            "Disculpe, las claves tienen que coincidir",
        }}
        error={errors.confirmation?.message}
      />

      <Select
        label="Zona horaria"
        name="timezone"
        control={control}
        rules={{ required: "Este campo es requerido" }}
        error={errors.timezone?.message}
        options={Object.entries(timezones).map(([key, value]) => ({
          name: key,
          value,
        }))}
      />

      <SwitchInput
        label="Eres mayor de 18"
        setValue={(value) => setIsAdult(value)}
      />

      <CheckboxInput
        name="terms_and_conditions"
        control={control}
        label="Si, acepto los Términos y Condiciones."
        rules={{ required: "Este campo es requerido" }}
        error={errors.terms_and_conditions?.message}
      />

      <Recaptcha
        sitekey={site_key}
        verifyCallback={signupVerifyCallbackHandler}
        verifyCallbackName="signupVerifyCallbackHandler"
        expiredCallback={signupExpiredCallbackHandler}
        expiredCallbackName="signupExpiredCallbackHandler"
        ref={reCaptchaInstance}
        render="explicit"
        onloadCallback={handleOnRecaptchaLoad}
        hl="es"
      />

      <div className="links">
        <Link to="/signin">¿Ya tienes cuenta?</Link>
      </div>

      <Button color="secondary" type="submit" disabled={!isVerified}>
        Registrarse
      </Button>

      {loading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
    </Form>
  );
};

export default Signup;