Commit 3559b78f authored by Omar Luna Hernández's avatar Omar Luna Hernández
Browse files

Se agregan errores debajo de los input en caso de que la entrada no sea... 

Se agregan errores debajo de los input en caso de que la entrada no sea válida, una ventana que indica si no hay conexión con el servidor y un cargador que indica que se están subiendo los datos
parent d5772781

web/src/pages/login_page/login_page.tsx

+44 −9
Original line number Diff line number Diff line 
import { usePasswoordVisibility } from "../../hooks/usePasswordVisibility"

import "./styles/styles.css"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faEye , faEyeSlash} from "@fortawesome/free-solid-svg-icons";

import { faCircleExclamation, faEye , faEyeSlash, faWindowClose} from "@fortawesome/free-solid-svg-icons";

import { useLogin } from "../../hooks/useLogin";

import { useState } from "react";

import { LoadingScreen } from "../../components/loading_screen/loading_screen";



export const LoginPage = () => {

  const {
@@ -11,15 +13,38 @@ export const LoginPage = () => { 
    handleMouseDownPassword,

  } = usePasswoordVisibility();



  const [isLoading, setIsLoading] = useState(false);



  const {

    register, 

    handleSubmit, 

    errors, 

    onSubmit

  } = useLogin();

    onSubmit,

    clearErrors,

  } = useLogin(setIsLoading);



  return (

    <div className="login-page-root">

      {errors.root?.serverError.type==500 && 

        <div className="server-error-window">

          <div className="window-error-header">

            <div className="window-title">

              Error

            </div>

            <FontAwesomeIcon

              icon={faWindowClose} 

              className="window-close-button"

              onClick={() => {clearErrors("root.serverError")}}

            />

          </div>

          <div className="window-error-body">

            <FontAwesomeIcon icon={faCircleExclamation} className="circle-exclamation-icon"/>

            {errors.root?.serverError.message}

          </div>

        </div>

      }



      {isLoading && <div className="loading_spinner"/>}

      <div className="login-form-container">

        <div className="title">

          Inicia sesión
@@ -27,11 +52,14 @@ export const LoginPage = () => { 
        <form onSubmit={handleSubmit(onSubmit)}>

          <div className="login-form-field">

            <input

              type="email" 

              type="text" 

              {...register('email')}

              required placeholder=""/>

              placeholder=""

              />

            <label>Email</label>

            

          </div>

          <p className="login_error">{errors.email?.message}</p>

          <div className="login-form-field">

            <input 

              type={
@@ -40,8 +68,7 @@ export const LoginPage = () => { 
                  : "password"

              }

              {...register('password')} 

              required 

              

              autoComplete="off"

            />

            <label>Contraseña</label>

            <FontAwesomeIcon className="pass-visibility-button"
@@ -50,8 +77,16 @@ export const LoginPage = () => { 
              icon={values.showPassword ? faEye : faEyeSlash}

            />

          </div>

          <p className="login_error">{errors.password?.message}</p>

          <p className="login_error">{errors.root?.serverError.type==401 && errors.root?.serverError.message}</p>

          <div className="login-form-button">

            <input type="submit" value="Entrar"/>

            <input type="submit" value="Entrar" 

              disabled={

                isLoading

                ? true

                :

                  false

              }/>

          </div>

        </form>

      </div>