Se crea el componente y los estilos para reiniciar la contraseña

* {

  user-select: none;

}

.reset-password-window {

  position: absolute;

  z-index: 99;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  width: 50vw;

  height: 40vh;

  display: flex;

  flex-direction: column;

  background: white;

  border: solid 2px black;

}

.reset-password-window .header {

  display: flex;

  width: 100%;

  align-items: center;

  justify-content: center;

  padding: 5px;

  background: #ccc;

  height: 10%;

}

.reset-pass-close-btn {

  display: inline-block;

  cursor: pointer;

  position: absolute;

  right: 5px;

}

.reset-password-window .body {

  height: 90%;

  width: 100%;

  position: relative;

  margin: 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

}

.error {

  color: red;

  font-size: 12px;

  padding: 0;

  margin: 0;

}

.panel {

  position: absolute;

  width: 100%;

  transition: transform 0.5s ease-in-out;

}

.panel-enter {

  transform: translateX(0);

}

.panel-enter-active {

  transform: translateX(-100%);

}

.panel-exit {

  transform: translateX(-100%);

}

.panel-exit-active {

  transform: translateX(0);

}

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

import "./assets/css/styles.css";

import {

  faEye,

  faEyeSlash,

  faWindowClose,

} from "@fortawesome/free-solid-svg-icons";

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

interface props {

  handleClickToClose: () => void;

}

export const ResetPasswordWindow = ({ handleClickToClose }: props) => {

  const {

    animating,

    step,

    register,

    handleSubmitEmail,

    onSubmitPassword,

    errors,

    handleSubmit,

    isChanging,

    valuesNewPassword,

    valuesNewPasswordConfirm,

    handleClickShowNewPassword,

    handleClickShowNewPasswordConfirm,

    handleMouseDownNewPassword,

    handleMouseDownNewPasswordConfirm,

  } = useResetPassword(handleClickToClose);

  return (

    <div className="reset-password-window">

      <div className="header">

        <FontAwesomeIcon

          icon={faWindowClose}

          className="reset-pass-close-btn"

          onClick={() => handleClickToClose()}

        />

      </div>

      <div className="body">

        <div

          className={`panel ${!isChanging ? "panel-enter" : "panel-exit"} ${

            animating ? "panel-enter-active" : ""

          }`}

        >

          {step === 1 && (

            <div className="email-panel">

              <h2>Ingrese su correo electrónico existente</h2>

              <input type="email" autoComplete="off" {...register("email")} />

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

              <button onClick={handleSubmitEmail}>Enviar</button>

            </div>

          )}

          {step === 2 && (

            <div className="code-panel">

              <form onSubmit={handleSubmit(onSubmitPassword)}>

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

                <div className="input_cnt">

                  <label>

                    Ingrese el código de 6 dígitos que llegó a su correo

                  </label>

                  <div className="password_cnt">

                    <input

                      type="text"

                      autoComplete="false"

                      {...register("code")}

                      maxLength={6}

                    />

                  </div>

                  <p className="error">{errors.code?.message}</p>

                </div>

                <div className="input_cnt">

                  <label>Nueva contraseña</label>

                  <div className="password_cnt">

                    <input

                      type={

                        valuesNewPassword.showPassword ? "text" : "password"

                      }

                      {...register("newPassword")}

                      autoComplete="off"

                    />

                    <FontAwesomeIcon

                      className="visibility-button"

                      onClick={handleClickShowNewPassword}

                      onMouseDown={handleMouseDownNewPassword}

                      icon={valuesNewPassword.showPassword ? faEye : faEyeSlash}

                    />

                  </div>

                  <p className="error">{errors.newPassword?.message}</p>

                </div>

                <div className="input_cnt">

                  <label>Confirmar nueva contraseña</label>

                  <div className="password_cnt">

                    <input

                      type={

                        valuesNewPasswordConfirm.showPassword

                          ? "text"

                          : "password"

                      }

                      {...register("confirmNewPassword")}

                      autoComplete="off"

                    />

                    <FontAwesomeIcon

                      className="visibility-button"

                      onClick={handleClickShowNewPasswordConfirm}

                      onMouseDown={handleMouseDownNewPasswordConfirm}

                      icon={

                        valuesNewPasswordConfirm.showPassword

                          ? faEye

                          : faEyeSlash

                      }

                    />

                  </div>

                  <p className="error">{errors.confirmNewPassword?.message}</p>

                </div>

                <div className="input_cnt">

                  <input

                    className="submit_btn"

                    type="submit"

                    content="Cambiar"

                  />

                </div>

              </form>

            </div>

          )}

        </div>

      </div>

    </div>

  );

};