Merge branch 'master' into 132-add-a-forget-password-functionality

README.md

@@ -4,24 +4,32 @@
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_wiq_en1b&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Arquisoft_wiq_en1b)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_wiq_en1b&metric=coverage)](https://sonarcloud.io/summary/new_code?id=Arquisoft_wiq_en1b)
 
-This is a base repo for the [Software Architecture course](http://arquisoft.github.io/) in [2023/2024 edition](https://arquisoft.github.io/course2324.html). 
+<b>To access the game simply follow the link [here](http://wiqen1b.serveminecraft.net:3000)</b><br>
+The documentation of the system can be found [here](https://arquisoft.github.io/wiq_en1b/)<br>
+And the API documentation can be seen [here](http://wiqen1b.serveminecraft.net:8000/api-doc/)<br>
 
+![wiq-icon-improved](https://github.com/Arquisoft/wiq_en1b/assets/124193979/cfa27b39-d039-4502-9299-da424cd04151)
 
-This repo is a basic application composed of several components.
+## Application components
+
+This repo is an application made from several components.
 
 - **Gateway service**. Express service that is exposed to the public and serves as a proxy to the two previous ones.
 - **User service**. Express service that handles the insertion of new users in the system.
 - **Auth service**. Express service that handles the authentication of users.
-- **Webapp**. React web application that uses the gateway service to allow basic login and new user features.
+- **Record service**. Express service that handles the game results of all the users and shows a ranking.
+- **Webapp**. React web application that uses the gateway service to allow users to play the game, in addition to registering, logging in, view the ranking and much more.
+- **Question generator**. Java application that generates questions from Wikidata which are later used in the game.
+- **Question service**. Express service that handles the database (MongoDB) and retrieves the previously generated question to be used in the game.
 
-Both the user and auth service share a Mongo database that is accessed with mongoose.
+Both the <i>User service</i> and <i>Auth service</i> share a Mongo database that is accessed with mongoose. The <i>Question generator</i> and <i>Question service</i> also share a MongoDB connection.
 
 ## Quick start guide
 In order to deployed it locally you can check out the docker configuration below:
 
 ### Using docker
 
-The fastest way for launching this sample project is using docker. Just clone the project:
+If you want to try it out by yourself, the fastest way for launching this project is using docker. Just clone the project:
 
 ```sh
 git clone https://github.com/Arquisoft/wiq_en1b.git
@@ -33,9 +41,9 @@ and launch it with docker compose:
 docker compose --profile dev up --build
 ```
 
-### Deployed in Cloud
-In order to view the application deploy in the cloud click [here](http://wiqen1b.serveminecraft.net:3000)
-### Members
+## Members
+
+The members of the great team that made this incredible application.
 
 - Lucía Ruiz Núñez [email protected]
 - Mario Junquera Rojas [email protected]

docs/src/04_solution_strategy.adoc

@@ -33,25 +33,29 @@ See https://docs.arc42.org/section-4/[Solution Strategy] in the arc42 documentat
 === Technology decisions
 
 The technologies chosen for developing the WIQ web app are ::
+* **Java** : Java is a high-level, object-oriented programming language developed by Sun Microsystems. It is known for its portability, security features, and wide range of applications, from mobile to enterprise systems.
+
+* **Nodejs** : Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside of a web browser, allowing developers to build scalable network applications.
+
 * **ReactJS** : A JavaScript library that facilitates the creation of interactive grafical interfaces.
-* **Sass** : A scripting language that is compiled into CSS. It extends CSS by providing several mechanisms such as variables, nested rules, mixins, functions, and inheritance. (Not used)
-* **TypeScript** : A superset of JavaScript that adds various features that can resolve code errors before running the actual code. (Not used)
-* **SpringBoot** : An extension of the Spring framework for creating Java applications. SpringBoot offers many preconfigurations that accelerate the code production process. (Not used)
+
 * **Wikidata Toolkit** : Wikidata Toolkit is a Java library for accessing Wikidata and other Wikibase installations. It can be used to create bots, to perform data extraction tasks (e.g., convert all data in Wikidata to a new format), and to do large-scale analyses that are too complex for using a simple SPARQL query service.
-* **Docker** : Docker provides tools and a runtime environment to manage these containers efficiently, allowing developers to build, ship, and run applications consistently across different environments.
-* **MySql** : MySQL is an open-source relational database management system that uses SQL for managing and manipulating data. (Not used)
-* **Mongo DB** : MongoDB is a popular open-source NoSQL database management system that stores data flexible, JSON-like documents with dynamic schemas.
 
 * **Express** : Express is a minimal and flexible Node.js web application framework that provides a robust set of features for building web and mobile applications.
 
-* **Nodejs** : Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside of a web browser, allowing developers to build scalable network applications.
+* **Mongo DB** : MongoDB is a popular open-source NoSQL database management system that stores data flexible, JSON-like documents with dynamic schemas.
+
+* **Docker** : Docker provides tools and a runtime environment to manage these containers efficiently, allowing developers to build, ship, and run applications consistently across different environments.
 
-* **Java** : Java is a high-level, object-oriented programming language developed by Sun Microsystems. It is known for its portability, security features, and wide range of applications, from mobile to enterprise systems.
 
-* **TO BE ORGANIZED**
+This decisions were eventually discarded ::
+* **Sass** : A scripting language that is compiled into CSS. It extends CSS by providing several mechanisms such as variables, nested rules, mixins, functions, and inheritance.
 
+* **TypeScript** : A superset of JavaScript that adds various features that can resolve code errors before running the actual code.
 
+* **SpringBoot** : An extension of the Spring framework for creating Java applications. SpringBoot offers many preconfigurations that accelerate the code production process.
 
+* **MySql** : MySQL is an open-source relational database management system that uses SQL for managing and manipulating data.
 
 
 === Top-level Decomposition

docs/src/10_quality_requirements.adoc

@@ -62,7 +62,7 @@ In any case the tree should include links to the scenarios of the following sect
 | The personal information of a user will only be viewable by him/her and user data must be stored securely.
 
 | Performance
-| The application must not have fast response times.
+| The application must have fast response times.
 
 | Robustness
 | The application must answer as expected under all conditions.

webapp/src/App.js

@@ -2,6 +2,9 @@ import React,{ useEffect }  from 'react';
 import QuestionView from './components/questionView/QuestionView';
 import GameMenu from './components/GameMenu/GameMenu';
 import Navbar from './components/fragments/NavBar';
+import Footer from './components/fragments/Footer';
+import About from './components/fragments/About';
+
 import ErrorPage from './components/fragments/ErrorPage';
 import Home from './components/Home/Home';
 import Login from './components/loginAndRegistration/Login';
@@ -29,7 +32,8 @@ function App() {
     <Router>
         <div style={{ position: 'relative', minHeight: '100vh' }}>
           <Navbar style={{ width: '100%' }} /> 
-          <Container component="main" className="main" maxWidth="lg" style={{ paddingTop: '64px' }}>
+        <Container component="main" className="main" maxWidth="lg" style={{ paddingTop: '64px' }}>
+
             <Routes>
               <Route path="/" element={<Navigate to="/home" />} /> 
               <Route path="/home" element={isLoggedIn ? <GameMenu /> : <Home />} />
@@ -41,11 +45,15 @@ function App() {
               <Route path="/historical" element={isLoggedIn ? <HistoricalView /> : <Login />} />
               <Route path="/configurator" element={isLoggedIn ? <GameConfigurator /> : <Login />}/>
               <Route path="/ranking" element={isLoggedIn ? <RankingView /> : <Login />} />
+              <Route path="/about" element={<About /> } />
               <Route path="/restorePassword" element={<ForgetPassword />} />
               <Route path="*" element={<ErrorPage />} />
             </Routes>
           </Container>
+          <Footer style={{ width: '100%' }} /> 
+
         </div>
+
     </Router>
   );
 }

webapp/src/components/fragments/About.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import '../../custom.css';
+
+function About() {    
+    const t = useTranslation("global").t;
+
+    const imageNames = ["person1.jpg", "person2.jpg", "person3.jpg", "person4.jpg", "person5.jpg", "person6.jpg"];
+
+    return (
+        <div>
+            <h1>{t("about.hello")}</h1>
+            <h2>{t("about.team")}</h2>
+            <ul className="person-list">
+                {imageNames.map((imageName, index) => (
+                    <li key={index} className="person-item">
+                        <img src={`/${imageName}`} alt={`Person ${index + 1}`} className="person-image" />
+                        {t(`about.name${index + 1}`)}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export default About;

webapp/src/components/fragments/About.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import About from './About';
+
+
+// Mocking useTranslation hook
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: key => key }),
+  }));
+
+  describe('About', () => {
+    test('renders about page', () => {
+      render(
+        <Router>
+            <About />
+        </Router>
+      );
+
+      expect(screen.getByText('about.hello')).toBeInTheDocument();
+
+      expect(screen.getByText('about.name1')).toBeInTheDocument();
+      expect(screen.getByText('about.name2')).toBeInTheDocument();
+      expect(screen.getByText('about.name3')).toBeInTheDocument();
+      expect(screen.getByText('about.name4')).toBeInTheDocument();
+      expect(screen.getByText('about.name5')).toBeInTheDocument();
+      expect(screen.getByText('about.name6')).toBeInTheDocument();
+
+
+    });
+  });

webapp/src/components/fragments/BackButtonToGameMenu.test.js

@@ -18,7 +18,7 @@ global.i18en = i18en;
 describe('BackButtonToGameMenu component', () => {
 
     it('renders option to go back to the game menu', () => {
-        render(<MemoryRouter><BackButtonToGameMenu t={i18n.t} /></MemoryRouter>);
+        render(<MemoryRouter><BackButtonToGameMenu t={i18en.t} /></MemoryRouter>);
         const text = screen.getByText((content, element) => {
             const regex = new RegExp(i18en.t("gameMenu.back"));
             return regex.test(content);

webapp/src/components/fragments/Footer.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import '../../custom.css';
+import { Link } from 'react-router-dom';
+import { useTranslation } from "react-i18next";
+
+function Footer() {
+    const [t] = useTranslation("global");
+
+    return (
+        <footer className="footer-container">
+            <div></div>
+                <a href="http://wiqen1b.serveminecraft.net:8000/api-doc/" className="API" target="_blank" rel="noopener noreferrer">
+                    <p className='link-text'>{t("footer.API")}</p>
+                </a>
+
+                    <Link to="/about" className="about">
+                        <p className='link-text'>{t("footer.about")}</p>
+                    </Link>
+
+                    <a href="https://arquisoft.github.io/wiq_en1b/" className="ARC" target="_blank" rel="noopener noreferrer">
+                        <p className='link-text'>{t("footer.ARC")}</p>
+                     </a>
+                     <div></div>
+
+        </footer>
+    );
+}
+
+export default Footer;

webapp/src/components/fragments/Footer.test.js

@@ -0,0 +1,34 @@
+import { render , screen } from '@testing-library/react';
+import { initReactI18next } from 'react-i18next';
+import i18en from 'i18next';
+
+import App from '../../App'
+
+i18en.use(initReactI18next).init({
+    resources: {},
+    lng: 'en',
+    interpolation:{
+        escapeValue: false,
+    }
+});
+global.i18en = i18en;
+
+describe('Footer fragment', () => {
+
+
+
+    test('Footer renders correctly', async () => {
+        render(
+            <App />
+        );
+        expect(screen.getByText('footer.about')).toBeInTheDocument();
+        expect(screen.getByText('footer.API')).toBeInTheDocument();
+        expect(screen.getByText('footer.ARC')).toBeInTheDocument();
+
+
+
+
+
+      });
+});
+

webapp/src/custom.css

@@ -20,7 +20,23 @@
   overflow: hidden;
   height: 100vh;
 }
+/* About.css */
+.person-list {
+  list-style: none;
+  padding: 0;
+}
+
+.person-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
 
+.person-image {
+  width: 50px; 
+  height: auto; 
+  margin-right: 10px; 
+}
 
 
 /*---------------------------Navbar---------------------------*/
@@ -36,6 +52,31 @@
   left: 0;
   top: 0;
 }
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #000;
+  color: white;
+  width: 100vw;
+  padding: 5px;
+  box-sizing: border-box;
+  position: fixed;
+  height: 30px;
+}
+
+
+
+.about, .API, .ARC{
+  color: white;
+}
+
+
+
 .left-nav{
   display:flex;
   align-items: left;
@@ -104,7 +145,8 @@
   .form {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 10px;
+    padding-top: 0;
     padding-left: 2em;
     padding-right: 2em;
     padding-bottom: 0.4em;
@@ -116,7 +158,7 @@
 
   .card {
     background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
-    border-radius: 22px;
+    border-radius: 15px;
     transition: all 0.3s;
   }
 
@@ -139,7 +181,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-bottom: 20px; 
+    margin-bottom: 10px; 
   }
 
   .input-box p {

webapp/src/translations/en/global.json

@@ -140,7 +140,22 @@
           "enter_email_button": "Send email",
           "send_code": "Send code",
           "enter_password_button":"Send password"
-        }
+      },
+      "footer":{
+        "about": "About us",
+        "API": "API-Doc",
+        "ARC": "Arc42-Doc"
+      },
+      "about":{
+        "hello": "Hello there!",
+        "team": "We're the awesome bunch from en01b! We hope you like our game.",
+        "name1": "Mario Junquera Rojas",
+        "name2": "Lucia Ruiz Núñez",
+        "name3": "Daniel Sinne Argüelles",
+        "name4": "Jorge Cano Martínez",
+        "name5": "Ahmet Erdem Yabaci",
+        "name6": "Laura Gómez Menéndez"
+      }
 }