Más mejoras en el login

Arquisoft · Mar 12, 2024 · 58359a1 · 58359a1
1 parent ee6ae2f
commit 58359a1
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 51 deletions.
diff --git a/webapp/src/components/Login/Login.css b/webapp/src/components/Login/Login.css
@@ -3,6 +3,7 @@
     grid-template-columns: 1fr;
     gap: 1rem;
     justify-content: center;
+    margin: auto 0;
 }
 
 .login-container h1{

diff --git a/webapp/src/components/Login/Login.js b/webapp/src/components/Login/Login.js
@@ -35,35 +35,37 @@ const Login = () => {
   };
 
   return (
-    <div className="login-container">
-      {loginSuccess ? (
-        navigate("/home")
-      ) : (
-        <>
-          <h1 className="login-header">Identifícate</h1>
-          <input
-            className="login-input"
-            type="text"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-          <input
-            className="login-input"
-            type="password"
-            placeholder="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-          <button className="login-button" onClick={loginUser}>
-            Login
-          </button>
-          {openSnackbar && (
-            <div className="login-snackbar">Login successful</div>
-          )}
-          {error && <div className="login-error">Error: {error}</div>}
-        </>
-      )}
+    <div className="main">
+      <div className="login-container">
+        {loginSuccess ? (
+          navigate("/home")
+        ) : (
+          <>
+            <h1 className="login-header">Identifícate</h1>
+            <input
+              className="login-input"
+              type="text"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+            <input
+              className="login-input"
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <button className="login-button" onClick={loginUser}>
+              Login
+            </button>
+            {openSnackbar && (
+              <div className="login-snackbar">Login successful</div>
+            )}
+            {error && <div className="login-error">Error: {error}</div>}
+          </>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/webapp/src/components/Nav/Nav.css b/webapp/src/components/Nav/Nav.css
@@ -5,7 +5,6 @@
   font-weight: 700;
   margin: 0;
   text-shadow: 4px 4px 0 var(--shadow);
-  margin-right: 3rem;
 }
 
 nav {

diff --git a/webapp/src/pages/Authenticate/Authenticate.css b/webapp/src/pages/Authenticate/Authenticate.css
@@ -6,3 +6,12 @@
   padding: 0.2rem;
   margin-top: 1rem;
 }
+
+.main{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
diff --git a/webapp/src/pages/Authenticate/Authenticate.js b/webapp/src/pages/Authenticate/Authenticate.js
@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
-import AddUser from '../../components/Register/Register';
-import Login from '../../components/Login/Login';
-import CssBaseline from '@mui/material/CssBaseline';
-import Footer from '../../components/Footer/Footer.js';
-import './Authenticate.css';
+import React, { useState } from "react";
+import AddUser from "../../components/Register/Register";
+import Login from "../../components/Login/Login";
+import Footer from "../../components/Footer/Footer.js";
+import "./Authenticate.css";
 
 function Authenticate() {
   const [showLogin, setShowLogin] = useState(true);
@@ -13,22 +12,21 @@ function Authenticate() {
   };
 
   return (
-    <div component="main" maxWidth="xs">
-      <CssBaseline />
-      <h1 className="logo">
-        WIQ
-      </h1>
-      {showLogin ? <Login /> : <AddUser />}
+    <div className="main">
+      <h1 className="logo">WIQ</h1>
       <div>
-        {showLogin ? (
-          <button className="gotoregister" onClick={handleToggleView}>
-            ¿No tienes cuenta? Regístrate.
-          </button>
-        ) : (
-          <button className="gotologin" onClick={handleToggleView}>
-            Ya tienes cuenta? Inicia sesión.
-          </button>
-        )}
+        {showLogin ? <Login /> : <AddUser />}
+        <div>
+          {showLogin ? (
+            <button className="gotoregister" onClick={handleToggleView}>
+              ¿No tienes cuenta? Regístrate.
+            </button>
+          ) : (
+            <button className="gotologin" onClick={handleToggleView}>
+              Ya tienes cuenta? Inicia sesión.
+            </button>
+          )}
+        </div>
       </div>
       <Footer />
     </div>