DataScope26/WEB

1import "./LoginModal.css";2import { Eye, EyeOff, AtSign, Loader } from "lucide-react";3import { useState } from "react";4import { useForm } from "react-hook-form";5import { useNavigate } from "react-router-dom";6import { useAuth } from "../context/AuthContext.jsx";7import ButtonPrimary from "./ButtonPrimary.jsx";8import ButtonClose from "./ButtonClose.jsx";9import AccountRecoveryModal from "./AccountRecoveryModal.jsx";10 11export default function LoginModal({ onClose, onOpenRegister }) {12  const {13    register,14    handleSubmit,15    formState: { errors },16  } = useForm({17    mode: "onSubmit",18    defaultValues: { email: "", password: "", rememberMe: false },19  });20 21  const { login } = useAuth();22  const navigate = useNavigate();23 24  const [showPassword, setShowPassword] = useState(false);25  const [message, setMessage] = useState("");26  const [messageKey, setMessageKey] = useState(0);27  const [isLoading, setIsLoading] = useState(false);28  const [isRecoveryOpen, setIsRecoveryOpen] = useState(false);29 30  const onSubmit = async (data) => {31    setIsLoading(true);32    const result = await login(data.email, data.password, data.rememberMe);33 34    if (result === true) {35      const pendingPlan = sessionStorage.getItem("selectedPlan");36      onClose();37      if (pendingPlan) {38        navigate("/create-company");39      }40    } else {41      setMessage("Email o contraseña incorrectos");42      setMessageKey((prev) => prev + 1);43    }44    setIsLoading(false);45  };46 47  const submitHandler = handleSubmit(onSubmit);48 49  return (50    <>51      <div className="modal-backdrop" onClick={onClose} />52      <div className="login-modal" onKeyDown={(e) => { if (e.key === "Enter") submitHandler(e); }}>53        <ButtonClose onClick={onClose} />54        <h1>INICIO DE SESION</h1>55 56        <div className="input-group">57          <label>EMAIL ADDRESS</label>58 59          <div className="input-icon">60            <input61              type="email"62              placeholder="nombre@usuario.com"63              maxLength={50}64              {...register("email", {65                required: "Ingresá tu email",66                pattern: {67                  value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,68                  message: "Ingresá un email válido",69                },70              })}71            />72            <AtSign size={18} className="icon" />73          </div>74          {errors.email && (75            <p className="error-text error-text--animated">{errors.email.message}</p>76          )}77        </div>78 79        <div className="input-group">80          <label>PASSWORD</label>81 82          <div className="input-icon">83            <input84              type={showPassword ? "text" : "password"}85              placeholder="••••••••"86              maxLength={50}87              {...register("password", { required: "Ingresá tu contraseña" })}88            />89            {showPassword ? (90              <EyeOff size={18} className="icon" style={{ cursor: "pointer" }} onClick={() => setShowPassword(!showPassword)} />91            ) : (92              <Eye size={18} className="icon" style={{ cursor: "pointer" }} onClick={() => setShowPassword(!showPassword)} />93            )}94          </div>95          {errors.password && (96            <p className="error-text error-text--animated">{errors.password.message}</p>97          )}98        </div>99 100        <div className="remember">101          <input type="checkbox" {...register("rememberMe")} />102          <span>Recordar mi cuenta</span>103        </div>104 105        {message && (106          <p key={messageKey} className="error-text error-text--animated">{message}</p>107        )}108        {isLoading ? (109          <ButtonPrimary className="login-btn" style={{ cursor: "default" }}>110            <Loader size={18} className="loader-icon-animation" />111          </ButtonPrimary>112        ) : (113          <ButtonPrimary className="login-btn" onClick={submitHandler}>Iniciar</ButtonPrimary>114        )}115 116        <p className="bottom-text">117          ¿No tenes una cuenta? <span onClick={() => { onOpenRegister(); onClose(); }}>Registrate</span>118        </p>119 120        <p className="bottom-text recovery-inline-link">121          <span onClick={() => setIsRecoveryOpen(true)}>¿Olvidaste tu contraseña?</span>122        </p>123 124        <p className="copyright">© 2026 DataScope</p>125      </div>126      <AccountRecoveryModal isOpen={isRecoveryOpen} onClose={() => setIsRecoveryOpen(false)} onLoginClick={() => setIsRecoveryOpen(false)} />127    </>128  );129}