Añadida css de registro y cambiados tamaños de los contenedores.

Arquisoft · Mar 7, 2024 · 9eb838f · 9eb838f
1 parent 6a67e87
commit 9eb838f
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 45 deletions.
diff --git a/users/userservice/user-model.js b/users/userservice/user-model.js
@@ -13,15 +13,6 @@ const userSchema = new mongoose.Schema({
       type: Date,
       default: Date.now, 
     },
-    gamesPlayed:{ //Añadido para guardar las partidas en la bbdd
-      type: Number,
-    },
-    rigthAnswers:{
-      type:Number,
-    },
-    wrongAnswers:{
-      type:Number,
-    },
 
 });
 

diff --git a/webapp/src/components/Inicio.js b/webapp/src/components/Inicio.js
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-import Login from './Login';
-import AddUser from './AddUser';
+import Login from './login/Login';
+import AddUser from './register/AddUser';
 import Link from '@mui/material/Link';
 
 function Inicio() {
@@ -16,8 +16,8 @@ function Inicio() {
   return (
     <Container>
         <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to the 2024 edition of the Software Architecture course
+      <Typography component="h1" variant="h5" align="center"  sx={{ marginTop: 2, fontWeight:"bold" }}>
+        Welcome to WIQ
       </Typography>
       {showLogin ? <Login /> : <AddUser />}
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>

diff --git a/webapp/src/components/login/Login.js b/webapp/src/components/login/Login.js
@@ -4,7 +4,7 @@ import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 import './Login.css';
 import Link from '@mui/material/Link';
-import logo from './logo.png'
+import logo from '../logo.png'
 
 const Login = () => {
   const [username, setUsername] = useState('');
@@ -39,7 +39,7 @@ const Login = () => {
 
 
   return (
-    <Container component="main" maxWidth="s" sx={{ marginTop: 8 }}>
+    <Container component="main" maxWidth="xs" sx={{ marginTop: 8 }}>
        <div className='logo-container' >
          <img src={logo} alt='Logo wiq'></img>
        </div>

diff --git a/webapp/src/components/login/logo.png → webapp/src/components/logo.png b/webapp/src/components/login/logo.png → webapp/src/components/logo.png
diff --git a/webapp/src/components/register/AddUser.css b/webapp/src/components/register/AddUser.css
@@ -0,0 +1,65 @@
+.register-container {
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    padding-bottom: 1.5em;
+    border-radius: 1em;
+    width: 100%;
+  }
+
+.text{
+  margin-top: 20ev;
+  text-align: center;
+  font-size: 20ev;
+  font-weight: bold;
+  font-display: 'Fira Sans', sans-serif;
+}
+
+.underline{
+  width: 20%;
+  margin-top: 7ev;
+  height: 0.5em;
+  border-radius: 9px;
+  background: #EE0E51;
+  align-self: center;
+}
+
+.input{
+  display: flex;
+  flex-direction: column;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+.register-container button {
+  background-color: #EE0E51;
+}
+
+.register-container button:hover {
+  background-color: #A80032;
+}
+
+body {
+  height: 10vh;
+  background: radial-gradient(circle at 50% -20.71%, #ffdfda 0, #ffdfd8 6.25%, #ffe0d5 12.5%, #ffe1d3 18.75%, #fee2d1 25%, #fbe3cf 31.25%, #f8e4ce 37.5%, #f5e5cd 43.75%, #f2e6cd 50%, #eee7cd 56.25%, #ebe8ce 62.5%, #e7e9cf 68.75%, #e3ead0 75%, #dfebd2 81.25%, #dcecd4 87.5%, #d8edd7 93.75%, #d5edda 100%);
+}
+
+.button {
+  display: flex;
+  flex-direction: column;
+  margin-left: 1em;
+  margin-top: 1em;
+  margin-right: 1em;
+}
+
+.logo-container {
+    position: fixed;
+    top: 2em;
+    left: 2em;
+    z-index: 9999;
+}
+
+.logo-container img {
+    width: 30em; 
+    height: auto; 
+  }
diff --git a/webapp/src/components/register/AddUser.js b/webapp/src/components/register/AddUser.js
@@ -2,18 +2,29 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import './AddUser.css';
+import logo from '../logo.png'
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
 const AddUser = () => {
+  const [name, setName] = useState('');
+  const [surname, setSurName] = useState('');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [passwordRepeat, setPasswordRepeat] = useState('');
   const [error, setError] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   const addUser = async () => {
     try {
-      await axios.post(`${apiEndpoint}/adduser`, { username, password });
+      await axios.post(`${apiEndpoint}/adduser`, { 
+        name,
+        surname,
+        username, 
+        password,
+        passwordRepeat
+      });
       setOpenSnackbar(true);
     } catch (error) {
       setError(error.response.data.error);
@@ -25,36 +36,98 @@ const AddUser = () => {
   };
 
   return (
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-      <Typography component="h1" variant="h5">
-        Add User
-      </Typography>
-      <TextField
-        name="username"
-        margin="normal"
-        fullWidth
-        label="Username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-      />
-      <TextField
-        name="password"
-        margin="normal"
-        fullWidth
-        label="Password"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <Button variant="contained" color="primary" onClick={addUser}>
-        Add User
-      </Button>
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
-      {error && (
-        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-      )}
+    <Container component="main" maxWidth="xs"  className='container'>
+      <div className='logo-container'>
+        <img src={logo} alt='Logo wiq'></img>
+      </div>
+      <div className="register-container" >
+        <div className='text'>
+          <Typography variant="h4">
+            Añadir usuario
+          </Typography>
+        </div>
+        <div className="underline"></div>
+        <div className='input'>
+        <TextField
+          name="name"
+          margin="normal"
+          label="Nombre"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          id = "input"
+        />
+        </div>
+        <div className='input'>
+        <TextField
+          name="surname"
+          margin="normal"
+          fullWidth
+          label="Apellidos"
+          value={surname}
+          onChange={(e) => setSurName(e.target.value)}
+          id = "input"
+        />
+        </div>
+        <div className='input'>
+        <TextField
+          name="username"
+          margin="normal"
+          fullWidth
+          label="Nombre de usuario"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          id = "input"
+        />
+        </div>
+
+        <div className='input'>
+        <TextField
+          name="password"
+          margin="normal"
+          fullWidth
+          label="Contraseña"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          id = "input"
+        />
+        </div>
+
+        <div className='input'>
+        <TextField
+          name="passwordRepeat"
+          margin="normal"
+          fullWidth
+          label="Repetir contraseña"
+          type="password"
+          value={passwordRepeat}
+          onChange={(e) => setPasswordRepeat(e.target.value)}
+          id = "input"
+        />
+        </div>
+        <div className="underline"></div>
+        <div className='button'>
+        <Button variant="contained" onClick={addUser}>
+          Registrarse
+        </Button>
+        </div>
+        <Snackbar
+          open={openSnackbar}
+          autoHideDuration={6000}
+          onClose={handleCloseSnackbar}
+          message="User registrado correctamente"
+        />
+        {error && (
+          <Snackbar
+            open={!!error}
+            autoHideDuration={6000}
+            onClose={() => setError("")}
+            message={`Error: ${error}`}
+          />
+        )}
+      </div>
     </Container>
   );
 };
 
-export default AddUser;
+export default AddUser;