added fields for requesting first and last name information from add …

…users
Arquisoft · Apr 23, 2024 · c136963 · c136963
1 parent 3dbe634
commit c136963
Showing 1 changed file with 36 additions and 5 deletions.
diff --git a/webapp/src/components/AddUser.js b/webapp/src/components/AddUser.js
@@ -7,17 +7,24 @@ import Button from './Button';
 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 [error, setError] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   const addUser = async () => {
-    try {
-      await axios.post(`${apiEndpoint}/adduser`, { username, password });
-      setOpenSnackbar(true);
-    } catch (error) {
-      setError(error.response.data.error);
+    if (name.trim() === '' || lastName.trim() === '') {
+      setError('Por favor, introduce tanto el nombre como los apellidos.');
+    } else {
+      try {
+        await axios.post(`${apiEndpoint}/adduser`, { username, password });
+        setOpenSnackbar(true);
+      } catch (error) {
+        setError(error.response.data.error);
+      }
     }
   };
 
@@ -27,9 +34,29 @@ const AddUser = () => {
 
   return (
     <Container className='addUser' component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+
       <Typography component="h1" variant="h5">
         Add User
       </Typography>
+
+      <TextField
+        name="name"
+        margin="normal"
+        fullWidth
+        label="Name"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+
+      <TextField
+        name="surname"
+        margin="normal"
+        fullWidth
+        label="Surname"
+        value={surname}
+        onChange={(e) => setSurname(e.target.value)}
+      />
+
       <TextField
         name="username"
         margin="normal"
@@ -38,6 +65,7 @@ const AddUser = () => {
         value={username}
         onChange={(e) => setUsername(e.target.value)}
       />
+
       <TextField
         name="password"
         margin="normal"
@@ -47,11 +75,14 @@ const AddUser = () => {
         value={password}
         onChange={(e) => setPassword(e.target.value)}
       />
+
       <Button text="Add user" onClick={addUser} name = "Add user"/>
+
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}
+
     </Container>
   );
 };