natalia.cancino
/
FrontPastel
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Commit con agregrar contrasena

This commit is contained in:
NataliaCancinoV 2024-04-26 13:49:27 -06:00
parent 8c1cfbfa1a
commit 4c62ae9ba0
2 changed files with 64 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/LoginForm.css
View File

@ -18,7 +18,8 @@ body{
display: flex;
justify-content: center;
align-items: center;
min-height: 110vh;
min-height: 80vh;
border-radius: 4%;
background: rgba(39, 39, 39, 0.5);
}
@ -68,6 +69,15 @@ body{
transition: .5s ease-in-out;
gap: 7px;
}
.password-container{
position: absolute;
right: -520px;
width: 500px;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
gap: 7px;
}
.top span{
color: #fff;
font-size: small;
@ -75,11 +85,21 @@ body{
display: flex;
justify-content: center;
}
.two span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
.top span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
.top2 span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
header{
color: #fff;
font-size: 30px;
@ -138,6 +158,7 @@ header{
font-size: small;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.two-col .one{
display: flex;

45
frontend/src/LoginForm.jsx
View File

@ -3,13 +3,24 @@ import './LoginForm.css';
function LoginForm() {
const [loginVisible, setLoginVisible] = useState(true);
const [registerVisible, setRegisterVisible] = useState(false);
const [passwordVisible, setPasswordVisible] = useState(false);
const toggleLogin = () => {
setLoginVisible(true);
setRegisterVisible(false);
setPasswordVisible(false);
};
const toggleRegister = () => {
setRegisterVisible(true);
setLoginVisible(false);
setPasswordVisible(false);
};
const toggleRecuperar = () => {
setPasswordVisible(true);
setLoginVisible(false);
setRegisterVisible(false);
};
return (
@ -40,12 +51,12 @@ function LoginForm() {
<label htmlFor="login-check"> Recuerdame</label>
</div>
<div className="two">
<label><a href="#">Olvidaste la contraseña?</a></label>
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
</div>
</div>
</div>
<div className="register-container" id="register" style={{ right: loginVisible ? '-520px' : '5px', opacity: loginVisible ? 0 : 1 }}>
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
<div className="top">
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
<header>Registrarse</header>
@ -78,6 +89,34 @@ function LoginForm() {
</div>
</div>
</div>
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
<div className="top2">
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
<header>Recuperar Contraseña</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>
<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" />
</div>
</div>
</div>
</div>
</>