Agregar verificacion al form de Login

[Durphan]

Se deberia de agregar un sistema de verificacion al momento de intentar logearse, el mismo debe de ser uno simple para usuario y contraseña que tenga lo siguiente:

Gmail: Verificar que el string que coloque el usuario sea un gmail

Contraseña: Verificar que la contraseña tenga un minimo de 4 caracteres y un numero

Si no se cumple una condicion entonces debe aparecer un mensaje al usuario indicando que requisito no cumplio

[Durphan]

Se soluciono el problema utilizando expresiones regulares con JavaScript puro, de la siguiente forma

 const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  function validateEmail(emailToValidate){
    const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(!emailRegex.test(emailToValidate)) {
      console.log("El email debe contener un @ y .com");
    }
  }

function validatePassword(passwordToValidate){
  const passwordRegex = /[0-9]/
  if(passwordToValidate.length < 5 && (typeof passwordToValidate == `string` || !passwordRegex.test(passwordToValidate))){
    console.log("La contraseña debe tener al menos 5 caracteres y un numero")
  }
}

  function handleClick(){
      event.preventDefault()
      validateEmail(email)
      validatePassword(password)
  } 



const ButtonPrimary = ({text, disable, className, typeOfButton, handleClick}) => {


  return disable ? (
    <ButtonAble disabled className={className}>
      {text}
    </ButtonAble>
  ) : (
    <ButtonAble className={className} onClick={() => handleClick()} type={typeOfButton}>
      {text}
    </ButtonAble>
  );
};

export default ButtonPrimary;

Al mismo tiempo se realizaron cambios en componentes tales como ButtonPrimary, agregandole dos props, un hancleClick y un typeOfButton el cual indicaria el tipo de boton que se quiere colocar.

Por el momento de prescindio de usar Formik o Yup debido a que el proyecto de momento no es tan complejo, sin embargo, de querer implementarlo me dicen y lo implemento.

[brahianpdev]

@Durphan Lo ideal sería que ese código esté solamente en el PR, mientras que en la descripción del mismo, agregar la razón del cambio, así como por qué se fue por una rgx en lugar de otra estrategia. Asociado a esto, un mini resumen de las pruebas hechas para comprobar dicho cambio :)

De esta forma, el issue queda con el detalle concreto de lo que se debe solucionar, mientras que en el PR la solución del mismo