Se agrega el botón para abrir la ventana para reiniciar la contraseña

import { usePasswoordVisibility } from "../../hooks/usePasswordVisibility"

import "./styles/styles.css"

import { usePasswoordVisibility } from "../../hooks/usePasswordVisibility";

import "./styles/styles.css";

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

import { faCircleExclamation, faEye , faEyeSlash, faWindowClose} 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";

import { ResetPasswordWindow } from "../../components/reset_password_window/reset_password_window";

export const LoginPage = () => {

  const {

    values,

    handleClickShowPassword,

    handleMouseDownPassword,

  } = usePasswoordVisibility();

  const { values, handleClickShowPassword, handleMouseDownPassword } =

    usePasswoordVisibility();

  const [isWindowActive, setIsWindowActive] = useState(false);

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

  const {

    register, 

    handleSubmit, 

    errors, 

    onSubmit,

    clearErrors,

  } = useLogin(setIsLoading);

  const { register, handleSubmit, errors, onSubmit, clearErrors } =

    useLogin(setIsLoading);

  const handleClickToClose = () => {

    setIsWindowActive(false);

  };

  return (

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

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

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

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

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

            <div className="window-title">

              Error

            </div>

            <div className="window-title">Error</div>

            <FontAwesomeIcon

              icon={faWindowClose}

              className="window-close-button"

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

              onClick={() => {

                clearErrors("root.serverError");

              }}

            />

          </div>

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

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

            <FontAwesomeIcon

              icon={faCircleExclamation}

              className="circle-exclamation-icon"

            />

            {errors.root?.serverError.message}

          </div>

        </div>

      }

      )}

      {isWindowActive && (

        <ResetPasswordWindow handleClickToClose={handleClickToClose} />

      )}

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

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

        <div className="title">

          Inicia sesión

        </div>

        <div className="title">Inicia sesión</div>

        <form onSubmit={handleSubmit(onSubmit)}>

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

            <input

              type="text" 

              {...register('email')}

              placeholder=""

              />

            <input type="text" {...register("email")} placeholder="" />

            <label>Email</label>

          </div>

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

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

            <input

              type={

                  values.showPassword

                  ? "text"

                  : "password"

              }

              {...register('password')} 

              type={values.showPassword ? "text" : "password"}

              {...register("password")}

              autoComplete="off"

              readOnly={isLoading || isWindowActive}

            />

            <label>Contraseña</label>

            <FontAwesomeIcon className="pass-visibility-button"

            <FontAwesomeIcon

              className="pass-visibility-button"

              onClick={handleClickShowPassword}

              onMouseDown={handleMouseDownPassword}

              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>

          <p className="login_error">

            {errors.root?.serverError.type === "401" &&

              errors.root?.serverError.message}

          </p>

          <p

            className="reset_password_btn"

            onClick={() => setIsWindowActive(true)}

          >

            ¿Contraseña olvidada?

          </p>

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

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

              disabled={

                isLoading

                ? true

                :

                  false

              }/>

            <input

              type="submit"

              value="Entrar"

              disabled={isLoading || isWindowActive}

            />

          </div>

        </form>

      </div>

    </div>

  )     

}

 No newline at end of file

  );

};