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

Commit cambios LoginForm y css

This commit is contained in:
NataliaCancinoV 2024-04-28 18:02:31 -06:00
parent 4c62ae9ba0
commit 1a47b68afe
2 changed files with 96 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/LoginForm.css
View File

@ -48,7 +48,6 @@ body{
height: 420px; height: 420px;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;
} }
.login-container{ .login-container{
position: absolute; position: absolute;
@ -58,7 +57,6 @@ body{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: .5s ease-in-out; transition: .5s ease-in-out;
gap: 7px;
} }
.register-container{ .register-container{
position: absolute; position: absolute;
@ -85,6 +83,13 @@ body{
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.top2 span{
color: #fff;
font-size: small;
padding: 10px 0;
display: flex;
justify-content: center;
}
.two span a{ .two span a{
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
@ -121,6 +126,7 @@ header{
border-radius: 30px; border-radius: 30px;
outline: none; outline: none;
transition: .2s ease; transition: .2s ease;
margin-bottom: 10px; /*para separar los componentes agregando un margen por debajo*/
} }
.input-field:hover, .input-field:focus{ .input-field:hover, .input-field:focus{
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.25);
@ -130,6 +136,16 @@ header{
} }
.input-box i{ .input-box i{
position: relative; position: relative;
margin-top: 10px;
margin-bottom: 10px;
top: -35px;
left: 17px;
color: #fff;
}
.input-box i{
position: relative;
margin-top: 10px;
margin-bottom: 10px;
top: -35px; top: -35px;
left: 17px; left: 17px;
color: #fff; color: #fff;

146
frontend/src/LoginForm.jsx
View File

@ -5,6 +5,7 @@ function LoginForm() {
const [loginVisible, setLoginVisible] = useState(true); const [loginVisible, setLoginVisible] = useState(true);
const [registerVisible, setRegisterVisible] = useState(false); const [registerVisible, setRegisterVisible] = useState(false);
const [passwordVisible, setPasswordVisible] = useState(false); const [passwordVisible, setPasswordVisible] = useState(false);
const toggleLogin = () => { const toggleLogin = () => {
setLoginVisible(true); setLoginVisible(true);
setRegisterVisible(false); setRegisterVisible(false);
@ -23,100 +24,101 @@ function LoginForm() {
setRegisterVisible(false); setRegisterVisible(false);
}; };
return ( return (
<> <>
<div className="wrapper"> <div className="wrapper">
<div className="form-box"> <div className="form-box">
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}> <div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
<div className="top"> <form>
<span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span> <div className="top">
<header>Inicia Sesión</header> <span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
</div> <header>Inicia Sesión</header>
<div className="input-box">
<input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-user"></i>
</div>
<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" />
</div>
<div className="two-col">
<div className="one">
<input type="checkbox" id="login-check" />
<label htmlFor="login-check"> Recuerdame</label>
</div> </div>
<div className="two"> <div className="input-box">
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span> <input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-user"></i>
</div> </div>
</div> <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>
</div>
<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> </div>
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}> <div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
<div className="top"> <form>
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span> <div className="top">
<header>Registrarse</header> <span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
</div> <header>Registrarse</header>
<div className="two-forms"> </div>
<div className="input-box"> <div className="two-forms">
<input type="text" className="input-field" placeholder="Nombre" /> <div className="input-box">
<i className="bx bx-user"></i> <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>
<div className="input-box"> <div className="input-box">
<input type="text" className="input-field" placeholder="Apellido" /> <input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-user"></i> <i className="bx bx-envelope"></i>
</div> </div>
</div> <div className="input-box">
<div className="input-box"> <input type="password" className="input-field" placeholder="Contraseña" />
<input type="text" className="input-field" placeholder="Correo" /> <i className="bx bx-lock-alt"></i>
<i className="bx bx-envelope"></i>
</div>
<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="Registrarse" />
</div>
<div className="two-col">
<div className="one">
<input type="checkbox" id="register-check" />
<label htmlFor="register-check"> Recuerdame</label>
</div> </div>
</div> <div className="input-box">
{/*<input type="submit" className="submit" value="Registrarse"/>*/}
<button type="button" className="submit">Registrarse</button>
</div>
<div className="two-col">
<div className="one">
<input type="checkbox" id="register-check" />
<label htmlFor="register-check"> Recuerdame</label>
</div>
</div>
</form>
</div> </div>
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}> <div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
<div className="top2"> <form>
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span> <div className="top2">
<header>Recuperar Contraseña</header> <span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
</div> <header>Recuperar Contraseña</header>
<div className="two-forms">
<div className="input-box">
<input type="text" className="input-field" placeholder="Nombre" />
<i className="bx bx-user"></i>
</div> </div>
<div className="input-box"> <div className="input-box">
<input type="text" className="input-field" placeholder="Apellido" /> <input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-user"></i> <i className="bx bx-envelope"></i>
</div> </div>
</div> <div className="input-box">
<div className="input-box"> <input type="password" className="input-field" placeholder="Nueva contraseña" />
<input type="text" className="input-field" placeholder="Correo" /> <i className="bx bx-lock-alt"></i>
<i className="bx bx-envelope"></i> </div>
</div> <div className="input-box">
<div className="input-box"> {/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
<input type="password" className="input-field" placeholder="Nueva contraseña" /> <button type="button" className="submit">Cambiar contraseña</button>
<i className="bx bx-lock-alt"></i> </div>
</div> </form>
<div className="input-box">
<input type="submit" className="submit" value="Cambiar contraseña" />
</div>
</div> </div>
</div> </div>
</div> </div>
</> </>