2024-04-22 04:41:09 +00:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import './LoginForm.css';
|
|
|
|
|
|
|
|
|
|
function LoginForm() {
|
|
|
|
|
const [loginVisible, setLoginVisible] = useState(true);
|
2024-04-26 19:49:27 +00:00
|
|
|
const [registerVisible, setRegisterVisible] = useState(false);
|
|
|
|
|
const [passwordVisible, setPasswordVisible] = useState(false);
|
2024-04-29 00:02:31 +00:00
|
|
|
|
2024-04-22 04:41:09 +00:00
|
|
|
const toggleLogin = () => {
|
|
|
|
|
setLoginVisible(true);
|
2024-04-26 19:49:27 +00:00
|
|
|
setRegisterVisible(false);
|
|
|
|
|
setPasswordVisible(false);
|
2024-04-22 04:41:09 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const toggleRegister = () => {
|
2024-04-26 19:49:27 +00:00
|
|
|
setRegisterVisible(true);
|
|
|
|
|
setLoginVisible(false);
|
|
|
|
|
setPasswordVisible(false);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const toggleRecuperar = () => {
|
|
|
|
|
setPasswordVisible(true);
|
2024-04-22 04:41:09 +00:00
|
|
|
setLoginVisible(false);
|
2024-04-26 19:49:27 +00:00
|
|
|
setRegisterVisible(false);
|
2024-04-22 04:41:09 +00:00
|
|
|
};
|
2024-05-06 22:53:21 +00:00
|
|
|
|
2024-04-22 04:41:09 +00:00
|
|
|
return (
|
|
|
|
|
<>
|
2024-05-06 22:53:21 +00:00
|
|
|
<body className='body-login'>
|
|
|
|
|
<div className="wrapper">
|
|
|
|
|
<div className="form-box">
|
|
|
|
|
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
|
|
|
|
|
<form>
|
|
|
|
|
<div className="top">
|
|
|
|
|
<span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
|
|
|
|
|
<header className='header-login'>Inicia Sesión</header>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
<input type="text" className="input-field" placeholder="Correo" />
|
|
|
|
|
<i className="bx bx-user"></i>
|
2024-04-29 00:02:31 +00:00
|
|
|
</div>
|
2024-05-06 22:53:21 +00:00
|
|
|
<div className="input-box">
|
|
|
|
|
<input type="password" className="input-field" placeholder="Contraseña" />
|
|
|
|
|
<i className="bx bx-lock-alt"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
{/*<input type="submit" className="submit" value="Entrar" />*/}
|
|
|
|
|
<button type="button" className="submit">Entrar</button>
|
2024-04-29 00:02:31 +00:00
|
|
|
</div>
|
2024-05-06 22:53:21 +00:00
|
|
|
<div className="two-col">
|
|
|
|
|
<div className="one">
|
|
|
|
|
<input type="checkbox" id="login-check" />
|
|
|
|
|
<label htmlFor="login-check"> Recuerdame</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="two">
|
|
|
|
|
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</div>
|
2024-04-29 00:02:31 +00:00
|
|
|
|
2024-05-06 22:53:21 +00:00
|
|
|
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
|
|
|
|
|
<form>
|
|
|
|
|
<div className="top">
|
|
|
|
|
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
|
|
|
|
<header className='header-login'>Registrarse</header>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="two-forms">
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
<input type="text" className="input-field" placeholder="Nombre" />
|
|
|
|
|
<i className="bx bx-user"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
<input type="text" className="input-field" placeholder="Apellido" />
|
|
|
|
|
<i className="bx bx-user"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-04-29 00:02:31 +00:00
|
|
|
<div className="input-box">
|
2024-05-06 22:53:21 +00:00
|
|
|
<input type="text" className="input-field" placeholder="Correo" />
|
|
|
|
|
<i className="bx bx-envelope"></i>
|
2024-04-29 00:02:31 +00:00
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
2024-05-06 22:53:21 +00:00
|
|
|
<input type="password" className="input-field" placeholder="Contraseña" />
|
|
|
|
|
<i className="bx bx-lock-alt"></i>
|
2024-04-29 00:02:31 +00:00
|
|
|
</div>
|
2024-05-06 22:53:21 +00:00
|
|
|
<div className="input-box">
|
|
|
|
|
{/*<input type="submit" className="submit" value="Registrarse"/>*/}
|
|
|
|
|
<button type="button" className="submit">Registrarse</button>
|
2024-04-29 00:02:31 +00:00
|
|
|
</div>
|
2024-05-06 22:53:21 +00:00
|
|
|
<div className="two-col">
|
|
|
|
|
<div className="one">
|
|
|
|
|
<input type="checkbox" id="register-check" />
|
|
|
|
|
<label htmlFor="register-check"> Recuerdame</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
|
|
|
|
|
<form>
|
|
|
|
|
<div className="top2">
|
|
|
|
|
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
|
|
|
|
<header className='header-login'>Recuperar Contraseña</header>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
<input type="text" className="input-field" placeholder="Correo" />
|
|
|
|
|
<i className="bx bx-envelope"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
<input type="password" className="input-field" placeholder="Nueva contraseña" />
|
|
|
|
|
<i className="bx bx-lock-alt"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
{/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
|
|
|
|
|
<button type="button" className="submit">Cambiar contraseña</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-04-26 19:49:27 +00:00
|
|
|
</div>
|
2024-04-22 04:41:09 +00:00
|
|
|
</div>
|
2024-05-06 22:53:21 +00:00
|
|
|
|
|
|
|
|
</body>
|
2024-04-22 04:41:09 +00:00
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-06 22:53:21 +00:00
|
|
|
export default LoginForm;
|
