Webapp interface

docker-compose.yml

@@ -139,7 +139,7 @@ services:
   prometheus:
     image: prom/prometheus
     container_name: prometheus-${teamname:-defaultASW}
-    profiles: ["dev"]
+    profiles: ["dev", "prod"]
     networks:
       - mynetwork
     volumes:
@@ -153,7 +153,7 @@ services:
   grafana:
     image: grafana/grafana
     container_name: grafana-${teamname:-defaultASW}
-    profiles: ["dev"]
+    profiles: ["dev", "prod"]
     networks:
       - mynetwork
     volumes:

gameservice/game-service.js

@@ -27,7 +27,7 @@ app.use(cors());
 
 var gameId = 0;
 
-app.get('/generateGameUnlimitedQuestions', async (req, res) => {
+app.get('/generateGame', async (req, res) => {
   try {
     console.log("Llegamos a crear un id del juego")
     var gameId = generateAleatoryString()
@@ -39,12 +39,14 @@ app.get('/generateGameUnlimitedQuestions', async (req, res) => {
 
 
 // Route for getting questions
-app.get('/gameUnlimitedQuestions', async (req, res) => {
+app.get('/questions', async (req, res) => {
   try {
     // TODO: Implement logic to fetch questions from MongoDB and send response 
     // const questions = await Question.find()
     console.log("Llegamos a pedir preguntas")
-    const questionGenerated = await axios.get(`${questionService}/questions?n_preguntas=${1}`);
+    console.log(req.body.n_preg)
+    console.log(req.body.topics)
+    const questionGenerated = await axios.get(questionService + req.url);
     console.log("Pedimos las preguntas")
     res.json(questionGenerated.data);
   } catch (error) {
@@ -69,6 +71,15 @@ app.post('/storeGame', async (req, res) => {
   }
 })
 
+app.get('/topics', async (req, res) => {
+  try {
+    const topics = await axios.get(`${questionService}/topics`)
+    res.json(topics.data)
+  } catch (error) { 
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+})
+
 app.use((err, req, res, next) => {
   console.error(`An error occurred: ${err}`);
   res.status(500).send(`An error occurred: ${err.message}`);

gatewayservice/gateway-service.js

@@ -88,19 +88,21 @@ app.get('/history/questions', async (req, res) => {
 //   }
 // })
 
-app.get('/generateGameUnlimitedQuestions', async (req, res) => {
+app.get('/generateGame', async (req, res) => {
   try {
-    const response = await axios.get(gameService + '/generateGameUnlimitedQuestions')
+    const response = await axios.get(gameService + '/generateGame')
     res.json(response.data)
   } catch (error) {
     catchAction(error, res)
   }
 })
 
-app.get('/gameUnlimitedQuestions', async (req, res) => {
+app.get('/questions', async (req, res) => {
   try {
     console.log("Antes de la llamada")
-    const response = await axios.get(gameService + `/gameUnlimitedQuestions`, req.body)
+    console.log(req.query)
+
+    const response = await axios.get(gameService + req.url)
     console.log(response.data)
     res.json(response.data)
   } catch (error) {
@@ -124,6 +126,15 @@ app.post('/storeGame', async (req, res) => {
   }
 })
 
+app.get('/topics', async (req, res) => {
+  try {
+    const response = await axios.get(`${gameService}/topics`)
+    res.json(response.data)
+  } catch (error) {
+    catchAction(error, res)
+  }
+})
+
 //libraries required for OpenAPI-Swagger
 const swaggerUi = require('swagger-ui-express'); 
 const fs = require("fs")

questionsservice/questiongeneratorservice/questiongenerator-service.js

@@ -47,6 +47,7 @@ function validateFields(query) {
 // Route for getting questions
 app.get('/questions', async (req, res) => {
   try {
+
     const { preguntas, respuestas, temas } = validateFields(req.query);
     try {
       const retQuestions = await QuestionGenerator.generateQuestions(preguntas, respuestas, temas);
@@ -66,6 +67,17 @@ app.get('/questions', async (req, res) => {
   }
 });
 
+// Route for getting topics for questions
+app.get('/topics', async (req, res) => {
+  try {
+    const topics = QuestionGenerator.getAvailableTopics();
+    res.send(topics);
+  } catch (error) {
+    console.error(`An error occurred: ${error.message}`);
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+});
+
 app.use((err, req, res, next) => {
   console.error(`An error occurred: ${err}`);
   res.status(500).send(`An error occurred: ${err.message}`);

questionsservice/questiongeneratorservice/questiongenerator.js

@@ -36,6 +36,10 @@ class QuestionGenerator {
         // }
     ];
 
+    static getAvailableTopics(){
+        return [ ...this.temas.keys() ];
+    }
+
     static async generateQuestion(plantilla, respuestas) {
         console.log("\nPlantilla:");
         console.log(plantilla);

webapp/public/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#f0f0f0" />
     <meta name="color-scheme" content="dark">

webapp/src/components/AddUser.js

@@ -7,17 +7,28 @@ 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 [confirmPassword, setConfirmPassword] = 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() === '' || surname.trim() === '') {
+      setError('Por favor, introduzca tanto el nombre como los apellidos.');
+    } else if(password !== confirmPassword){
+      setError('Las contraseñas no coinciden.');
+    } else {
+      try {
+        await axios.post(`${apiEndpoint}/adduser`, { username, password });
+        setOpenSnackbar(true);
+      } catch (error) {
+        setError(error.response.data.error);
+      }
     }
   };
 
@@ -27,31 +38,65 @@ const AddUser = () => {
 
   return (
     <Container className='addUser' component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+
       <Typography component="h1" variant="h5">
-        Add User
+        Añadir Usuario
       </Typography>
+
+      <TextField
+        name="name"
+        margin="normal"
+        fullWidth
+        label="Nombre"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+
+      <TextField
+        name="surname"
+        margin="normal"
+        fullWidth
+        label="Apellidos"
+        value={surname}
+        onChange={(e) => setSurname(e.target.value)}
+      />
+
       <TextField
         name="username"
         margin="normal"
         fullWidth
-        label="Username"
+        label="Usuario"
         value={username}
         onChange={(e) => setUsername(e.target.value)}
       />
+
       <TextField
         name="password"
         margin="normal"
         fullWidth
-        label="Password"
+        label="Contraseña"
         type="password"
         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" />
+
+      <TextField
+        name="confirmPassword"
+        margin="normal"
+        fullWidth
+        label="Repetir contraseña"
+        type="password"
+        value={confirmPassword}
+        onChange={(e) => setConfirmPassword(e.target.value)}
+      />
+
+      <Button text="Añadir" onClick={addUser} name = "Add user"/>
+
+      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Usuario añadido correctamente" />
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}
+
     </Container>
   );
 };

webapp/src/components/AddUser.test.js

@@ -14,42 +14,80 @@ describe('AddUser component', () => {
   it('should add user successfully', async () => {
     render(<AddUser />);
 
-    const usernameInput = screen.getByLabelText(/Username/i);
-    const passwordInput = screen.getByLabelText(/Password/i);
+    const nameInput = screen.getByLabelText(/Nombre/);
+    const surnameInput = screen.getByLabelText(/Apellidos/i);
+    const usernameInput = screen.getByLabelText(/Usuario/i);
+    const passwordInput = screen.getAllByLabelText(/Contraseña/i)[0];
+    const confirmPasswordInput = screen.getByLabelText(/Repetir contraseña/i);
     const addUserButton = document.getElementsByClassName('inner')[0]
 
     // Mock the axios.post request to simulate a successful response
     mockAxios.onPost('http://localhost:8000/adduser').reply(200);
 
     // Simulate user input
+    fireEvent.change(nameInput, { target: { value: 'testUser' } });
+    fireEvent.change(surnameInput, { target: { value: 'testUser' } });
     fireEvent.change(usernameInput, { target: { value: 'testUser' } });
     fireEvent.change(passwordInput, { target: { value: 'testPassword' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'testPassword' } });
 
     // Trigger the add user button click
     fireEvent.click(addUserButton);
 
     // Wait for the Snackbar to be open
     await waitFor(() => {
-      expect(screen.getByText(/User added successfully/i)).toBeInTheDocument();
+      expect(screen.getByText(/Usuario añadido correctamente/i)).toBeInTheDocument();
     });
   });
 
-  it('should handle error when adding user', async () => {
+  it('try to add user but not introduce name', async () => {
     render(<AddUser />);
 
-    const usernameInput = screen.getByLabelText(/Username/i);
-    const passwordInput = screen.getByLabelText(/Password/i);
-    const addUserButton = document.getElementsByClassName('inner')[0]
+    const addUserButton = document.getElementsByClassName('inner')[0];
+
+    // Trigger the add user button click
+    fireEvent.click(addUserButton);
+
+    // Wait for the Snackbar to be open
+    await waitFor(() => {
+      expect(screen.getByText(/Por favor, introduzca tanto el nombre como los apellidos./i)).toBeInTheDocument();
+    });
+  });
+
+  it('try to add user but different passwords', async () => {
+    render(<AddUser />);
+
+    // Simulate user input
+    fireEvent.change(screen.getByLabelText(/Nombre/), { target: { value: 'userForTest' } });
+    fireEvent.change(screen.getByLabelText(/Apellidos/i), { target: { value: 'userForTest' } });
+    fireEvent.change(screen.getByLabelText(/Usuario/i), { target: { value: 'userForTest' } });
+    fireEvent.change(screen.getAllByLabelText(/Contraseña/i)[0], { target: { value: 'testPassword' } });
+    fireEvent.change(screen.getByLabelText(/Repetir contraseña/i), { target: { value: 'password' } });
+
+    // Trigger the add user button click
+    fireEvent.click(document.getElementsByClassName('inner')[0]);
 
+    // Wait for the Snackbar to be open
+    await waitFor(() => {
+      expect(screen.getByText(/Las contraseñas no coinciden./i)).toBeInTheDocument();
+    });
+  });
+
+  it('should handle error when adding user', async () => {
+    render(<AddUser />);
+
     // Mock the axios.post request to simulate an error response
     mockAxios.onPost('http://localhost:8000/adduser').reply(500, { error: 'Internal Server Error' });
 
     // Simulate user input
-    fireEvent.change(usernameInput, { target: { value: 'testUser' } });
-    fireEvent.change(passwordInput, { target: { value: 'testPassword' } });
+    fireEvent.change(screen.getByLabelText(/Nombre/), { target: { value: 'testUser' } });
+    fireEvent.change(screen.getByLabelText(/Apellidos/i), { target: { value: 'testUser' } });
+    fireEvent.change(screen.getByLabelText(/Usuario/i), { target: { value: 'testUser' } });
+    fireEvent.change(screen.getAllByLabelText(/Contraseña/i)[0], { target: { value: 'testPassword' } });
+    fireEvent.change(screen.getByLabelText(/Repetir contraseña/i), { target: { value: 'testPassword' } });
 
     // Trigger the add user button click
-    fireEvent.click(addUserButton);
+    fireEvent.click(document.getElementsByClassName('inner')[0]);
 
     // Wait for the error Snackbar to be open
     await waitFor(() => {