Commit con agregrar contrasena

frontend/src/LoginForm.css

@@ -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;

frontend/src/LoginForm.jsx

@@ -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>
     </>