From 65c5583accb365e4a3d12021d6810e3cc08b4838 Mon Sep 17 00:00:00 2001
From: NataliaCancinoV <nataliacancinovega@hotmail.com>
Date: Mon, 6 May 2024 16:53:21 -0600
Subject: [PATCH] Commit correcciones login

---
 frontend/src/App.css       |  42 ---------
 frontend/src/App.jsx       |  13 ---
 frontend/src/LoginForm.css |  35 +++----
 frontend/src/LoginForm.jsx | 186 ++++++++++++++++++-------------------
 frontend/src/main.jsx      |   2 +
 5 files changed, 114 insertions(+), 164 deletions(-)
 delete mode 100644 frontend/src/App.css
 delete mode 100644 frontend/src/App.jsx

diff --git a/frontend/src/App.css b/frontend/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/frontend/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
deleted file mode 100644
index 5c4531b..0000000
--- a/frontend/src/App.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import './App.css'
-import LoginForm from './LoginForm'
-
-function App() {
-  return (
-    <>
-      <div className="App">
-      </div>
-    </>
-  )
-}
-
-export default App
diff --git a/frontend/src/LoginForm.css b/frontend/src/LoginForm.css
index f478c3c..e74cc31 100644
--- a/frontend/src/LoginForm.css
+++ b/frontend/src/LoginForm.css
@@ -1,26 +1,27 @@
 /* POPPINS FONT */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
 
-*{  
+.body-login{
+    background: url("fondo_pasteles.jpg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    background-attachment: fixed;
+    display: flex;
+    height: 100%;
+    position: relative;
+    justify-content: center;
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-body{
-    background: url("fondo_pasteles.jpg");
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    overflow: hidden;
 }
+
 .wrapper{
     display: flex;
-    justify-content: center;
+    width: 40%;
+    height: 100vh;
+    padding-left: 4px;
     align-items: center;
-    min-height: 80vh;
-    border-radius: 4%;
-    background: rgba(39, 39, 39, 0.5);
+    justify-content: center;
 }
 
 .link:hover, .active{
@@ -45,9 +46,11 @@ body{
     align-items: center;
     justify-content: center;
     width: 512px;
-    height: 420px;
+    height: 500px;
     overflow: hidden;
     z-index: 2;
+    border-radius: 4%;
+    background: rgba(39, 39, 39, 0.5);
 }
 .login-container{
     position: absolute;
@@ -105,7 +108,7 @@ body{
     color: #fff;
     margin-left: 5px;
 }
-header{
+.header-login{
     color: #fff;
     font-size: 30px;
     text-align: center;
diff --git a/frontend/src/LoginForm.jsx b/frontend/src/LoginForm.jsx
index e56a2d5..bd8ee2f 100644
--- a/frontend/src/LoginForm.jsx
+++ b/frontend/src/LoginForm.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import './LoginForm.css';
-import './App.css'
 
 function LoginForm() {
   const [loginVisible, setLoginVisible] = useState(true);
@@ -24,106 +23,107 @@ function LoginForm() {
     setLoginVisible(false);
     setRegisterVisible(false);
   };
-
-  
+ 
   return (
     <>
-      <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>Inicia Sesión</header>
-              </div>
-              <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" />*/}
-                <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>
+      <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="two">
-                  <span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
+                <div className="input-box">
+                  <input type="text" className="input-field" placeholder="Correo" />
+                  <i className="bx bx-user"></i>
                 </div>
-              </div>
-            </form>
+                <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 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>
+                <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="Contraseña" />
+                  <i className="bx bx-lock-alt"></i>
+                </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 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>
             
           </div>
-          
-          <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>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>
-              <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="Contraseña" />
-                <i className="bx bx-lock-alt"></i>
-              </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 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>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>
-          
         </div>
-      </div>
+       
+      </body>
     </>
   );
 }
 
-export default LoginForm;
+export default LoginForm;
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 7cc69b7..bf71533 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -5,6 +5,7 @@ import AppInicio from './AppInicio.jsx'
 import PersPastel1 from './PersPastel1.jsx'
 import Pedidos from './Pedidos.jsx'
 import Pasteles from './Pasteles.jsx'
+import LoginForm from './LoginForm.jsx';
 
 
 createRoot(document.getElementById('root')).render(
@@ -15,6 +16,7 @@ createRoot(document.getElementById('root')).render(
         <Route path = "/PersonalizarPastel/PastelArcoiris" element = {<PersPastel1/>}/>
         <Route path = "/Pedidos" element = {<Pedidos/>}/>
         <Route path = "/Pasteles" element = {<Pasteles/>}/>
+        <Route path = "/Login" element = {<LoginForm/>}/>
       </Routes>
     </Router>
   </React.StrictMode>,