_
+Generating code makes it easier for the programmer to create functions without wasting a lot of time and simply focusing on the correct implementation of the code, an example is for example generating the getters and setters
-__
+=== Migration
-=== __
+Migrating from one software application or platform to another, such as switching from a legacy system to a modern one, or from a local server to a cloud service.
-__
+=== Configurability
-=== __
+Configurability is the ability to modify or customize something, especially in computing, electronics, or devices
-__
+=== Administration
-=== __
+The process or activity of managing, directing, or organizing something or someone.
-__
+Administering an application consists of managing all the resources, users to be able to maintain it in a correct way
-=== __
+=== Management
-__
+Management is the process of organizing and directing the resources of a business or organization to achieve its goals.
-=== __
+=== Disaster-Recovery
-__
+Is the process of restoring the functionality and data of software applications after a disaster, such as a natural calamity, a cyberattack, or a human error.
-=== __
+It is important to have a plan to recover the data in case of a system failure, it is usually a backup.
-__
+=== Architecture and design patterns
+Architecture and design patterns are concepts that help software developers and architects design and build software systems that are efficient, scalable, and maintainable.
+Design patterns are important so that your application can scale without cascading changes.
-=== __
-__
diff --git a/docs/src/09_architecture_decisions.adoc b/docs/src/09_architecture_decisions.adoc
index 806c71f7..c569aca3 100644
--- a/docs/src/09_architecture_decisions.adoc
+++ b/docs/src/09_architecture_decisions.adoc
@@ -3,53 +3,28 @@ ifndef::imagesdir[:imagesdir: ../images]
[[section-design-decisions]]
== Architecture Decisions
JavaScript:
- We will use the JavaScript language to create both the front-end and the backend of the application, is the default technology of the initial project.
-ReactJS:
- The base project they have given us uses ReactJS for the front-end of the application, although it is a framework with which we are not familiar.
- We think that is a good oportunity to start using this framework.
-
-NodeJS:
- We use NodeJS for the back-end of the application, this is the default technology of the initial project and all the group thought it was a good idea
- to use it.
+https://github.com/Arquisoft/wiq_es1a/wiki/(ADR-%231)-JavaScript[ADR#1]
-MongoDB
- The base project they have given us uses MongoDB for the back-end of the application, a DBMS with which we are not familiar, but it seemed like a
- good idea to learn this GBD system.
+ReactJS:
-Docker:
- We will use Docker to package the application modules in containers, it is the initial technology of the project
+https://github.com/Arquisoft/wiq_es1a/wiki/(ADR-%232)-ReactJS[ADR#2]
-MySQL:
- The base project that they have given us uses MongoDB for the back-end of the application, a DBMS with which we are not familiar, however MySQL is another
-database management system that we have used in other subjects. We decided to discard this option to learn how to use MongoDB
+NodeJS:
-[role="arc42help"]
-****
-.Contents
-Important, expensive, large scale or risky architecture decisions including rationales.
-With "decisions" we mean selecting one alternative based on given criteria.
+https://github.com/Arquisoft/wiq_es1a/wiki/(ADR-%233)-NodeJS[ADR#3]
-Please use your judgement to decide whether an architectural decision should be documented
-here in this central section or whether you better document it locally
-(e.g. within the white box template of one building block).
+MongoDB:
-Avoid redundancy.
-Refer to section 4, where you already captured the most important decisions of your architecture.
+https://github.com/Arquisoft/wiq_es1a/wiki/(ADR-%234)-MongoDB[ADR#4]
-.Motivation
-Stakeholders of your system should be able to comprehend and retrace your decisions.
+Docker:
-.Form
-Various options:
+https://github.com/Arquisoft/wiq_es1a/wiki/(ADR-%235)-Docker[ADR#5]
-* ADR (https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions[Documenting Architecture Decisions]) for every important decision
-* List or table, ordered by importance and consequences or:
-* more detailed in form of separate sections per decision
+MySQL:
+
+https://github.com/Arquisoft/wiq_es1a/wiki/(ADR-%236)-MySQL[ADR#6]
-.Further Information
-See https://docs.arc42.org/section-9/[Architecture Decisions] in the arc42 documentation.
-There you will find links and examples about ADR.
-****
diff --git a/docs/src/10_quality_requirements.adoc b/docs/src/10_quality_requirements.adoc
index 57305a91..c775e2b4 100644
--- a/docs/src/10_quality_requirements.adoc
+++ b/docs/src/10_quality_requirements.adoc
@@ -8,8 +8,6 @@ These are:
* Performance: ability of the software system to respond well to user interactions and perform tasks efficiently.
-* Security: protection of the system from unauthorized access, data breaches, and malicious activities, ensuring safety of sensitive information.
-
* Usability: intuitiveness of the software interface, making it easy for users to interact with the system.
* Maintainability: how easily the software system can be modified, updated, and extended without significant effort or risk.
@@ -19,13 +17,11 @@ These are:
* Quality
- Performance
- - Security
- Usability
- Maintainability
* Relationships
- Quality -> Performance
- - Quality -> Security
- Quality -> Usability
- Quality -> Maintainability
@@ -37,9 +33,8 @@ These are:
|===
|Aspect|Source|Stimulus|Artefact|Environment|Response|Response Measurement
| Performance |User |While playing, a user selects a response to a question.|User Interface|Normal gameplay conditions.|The system updates its interface very fast and the user knows if they responded correctly, so they can keep playing.|Interface update time is less than 0.5 seconds.
-|Security|User|A new user registers in the game by providing their username and password.|Encrypting system|User registration process.|The server encrypts the user's password before storing it in the MongoDB database, so it is safe from data leaks.|Passwords are encrypted using a strong hashing algorithm.
-|Usability|User|A new user starts playing the game.|User Interface|Initial game setup.|The user interface displays available options and provides clear instructions on how to play, including a 'Help' button.|User can navigate through the interface without guidance.
-|Performance|User|A user finishes playing a game and wants to start a new one.|System and User Interface|Post-game completion.|The system ends the current game, displays the user's score, resets all game elements, and offers the option to start a new game.|Score is saved accurately, and game restarts without errors.
+| Usability |User|A new user starts playing the game.|User Interface|Initial game setup.|The user interface displays available options and provides clear instructions on how to play, including a 'Help' button.|User can navigate through the interface without guidance.
+| Performance |User|A user finishes playing a game and wants to start a new one.|System and User Interface|Post-game completion.|The system ends the current game, displays the user's score, resets all game elements, and offers the option to start a new game.|Score is saved accurately, and game restarts without errors.
|===
@@ -48,8 +43,7 @@ These are:
[options="header"]
|===
| Aspect | Source | Stimulus | Artefact | Environment | Response | Response Measurement
-| Security / Maintainability | Developers | We want to add the option of logging in with an e-mail instead of an username | Login system is well structured so it is easy to modify it or add new ways of logging in | Normal conditions | The development team implements the new login method easily, ensuring that neither the current data or the new credentials will be compromised | Successful integration of the new login method without compromising data
-| Security | Developers | The decision is made to transition from MongoDB to another database system | User data migration to a new database system is secured | Database migration phase | The system initiates a secure data migration process, ensuring all user data, including usernames and passwords, is transferred to the new database system intact and encrypted | Successful transfer of user data without compromise
+| Maintainability | Developers | We want to add the option of logging in with an e-mail instead of an username | Login system is well structured so it is easy to modify it or add new ways of logging in | Normal conditions | The development team implements the new login method easily, ensuring that neither the current data or the new credentials will be compromised | Successful integration of the new login method without compromising data
| Maintainability | Developers | Developers want to add a new game mode | The game's code is well-structured and documented | Development phase | Due to code being well-structured and documented, it is easy to add new functionality to our system without risking our already implemented functionality | Successful addition of new game mode
| Maintainability | Developers | An error is identified in the game that needs to be corrected. | The game's code is well-structured and documented | Error identification and resolution phase | Due to code being well-structured and documented, developers can easily locate the error and correct it | Successful identification and correction of the error
|===
\ No newline at end of file
diff --git a/docs/src/11_technical_risks.adoc b/docs/src/11_technical_risks.adoc
index 319aea3e..0af49a6f 100644
--- a/docs/src/11_technical_risks.adoc
+++ b/docs/src/11_technical_risks.adoc
@@ -5,10 +5,11 @@ ifndef::imagesdir[:imagesdir: ../images]
[options="header"]
|===
-| Priority | Description of Risk/Technical Debt | Suggested Measures
-| High | Vulnerabilities in user authentication | Implement additional security measures, such as password encryption
+| Priority | Description of Risk/Technical Debt | Suggested Measures
| High | Potential application malfunctions | Implement unit tests for key components and critical functions, along with extensive testing with real users
| Medium | Slow performance of database queries | Optimize database queries, avoid unnecessary queries
+| Medium | Potential unavailability of Wikidata | Design the UI to handle missing or incomplete data from Wikidata.
| Low | Unoptimized styles | Optimize CSS styles to improve application performance and loading times
| Low | Insufficient documentation | Provide comprehensive documentation of architecture, code structure, development processes, and deployment to facilitate team maintenance and collaboration
+| Low | Vulnerabilities in user authentication | Implement additional security measures, such as password encryption
|===
diff --git a/docs/src/12_glossary.adoc b/docs/src/12_glossary.adoc
index 810bb367..b4774116 100644
--- a/docs/src/12_glossary.adoc
+++ b/docs/src/12_glossary.adoc
@@ -7,20 +7,20 @@ ifndef::imagesdir[:imagesdir: ../images]
|===
|Term |Definition
-|Quality Tree
-| Structured representation of quality attributes and their relationships.
+|WIQ
+| Application or game based on the TV show "Saber y Ganar".
-|Quality Scenarios
-| Specific instances or situations that show the behavior of a system under various quality attributes.
+|Login
+| Process of authenticating a user's identity to access the application.
-|Change Scenarios
-| Scenarios depicting how a system responds or adapts to changes, like fixes or addings.
+|Wikidata
+| Online collaborative database storing structured data and linking information across different projects and languages.
-|Usage Scenarios
-| Instances demonstrating how users interact with a system in various contexts.
+|User
+| Person who interacts with a system, service, or application to perform tasks.
-|User Interface
-| The visual and interactive part of a computer program or system through which users interact.
+|Admin
+| Person with special rights or authority to manageaspects of an application.
|Query
| Request for information from a database.
@@ -31,6 +31,9 @@ ifndef::imagesdir[:imagesdir: ../images]
|Documentation
| Written information regarding a system's design, functionality, or usage.
+|Distractors
+| Incorrect or irrelevant options or elements included in a question.
+
|NodeJS
| Runtime environment that allows the execution of JavaScript code outside of a web browser.
diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index 5df3cc1b..c46904c2 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -12,6 +12,7 @@ const questionServiceUrl =
process.env.QUESTION_SERVICE_URL || "http://localhost:8003";
const statsServiceUrl = process.env.AUTH_SERVICE_URL || "http://localhost:8004";
+
app.use(cors());
app.use(express.json());
diff --git a/package-lock.json b/package-lock.json
index d2381195..c26dfd20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,11 +5,13 @@
"packages": {
"": {
"dependencies": {
+
"axios": "^1.6.7",
"cors": "^2.8.5",
"cron": "^3.1.6",
"cross-fetch": "^4.0.0",
"date-fns": "^3.3.1",
+
"react-auth-kit": "^3.0.2-alpha.19"
}
},
@@ -230,6 +232,7 @@
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
"peer": true
},
+
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -319,6 +322,7 @@
"node": ">= 6"
}
},
+
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -442,6 +446,7 @@
}
}
},
+
"node_modules/node-fetch": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -469,6 +474,7 @@
"node": ">=0.10.0"
}
},
+
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -605,15 +611,11 @@
}
}
},
- "node_modules/tr46": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
- "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
- },
"node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+
},
"node_modules/vary": {
"version": "1.1.2",
@@ -636,6 +638,7 @@
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
}
+
}
}
}
diff --git a/package.json b/package.json
index 3352cf06..8b36ab8f 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"cron": "^3.1.6",
"cross-fetch": "^4.0.0",
"date-fns": "^3.3.1",
+
"react-auth-kit": "^3.0.2-alpha.19"
}
}
diff --git a/webapp/src/App.css b/webapp/src/App.css
index a5ff5dde..625dd1c8 100644
--- a/webapp/src/App.css
+++ b/webapp/src/App.css
@@ -55,6 +55,7 @@ a {
-webkit-box-shadow: 10px 10px 6px 0px var(--shadow);
-moz-box-shadow: 10px 10px 6px 0px var(--shadow);
box-shadow: 5px 5px 6px 0px var(--shadow);
+
}
input:hover,
diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js
index d7bbd29f..e390801e 100644
--- a/webapp/src/App.test.js
+++ b/webapp/src/App.test.js
@@ -90,5 +90,6 @@ describe('Footer Component', () => {
/*test('renders learn react link', () => {
render( );
const linkElement = screen.getByText(/Welcome to wiq_es1a/i);
- expaect(linkElement).toBeInTheDocument();
-});*/
\ No newline at end of file
+ expect(linkElement).toBeInTheDocument();
+});*/
+
diff --git a/webapp/src/components/Login/Login.js b/webapp/src/components/Login/Login.js
index 7ff7e05d..b395e1a4 100644
--- a/webapp/src/components/Login/Login.js
+++ b/webapp/src/components/Login/Login.js
@@ -2,26 +2,35 @@
import React, { useState } from 'react';
import axios from 'axios';
import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+
import {useNavigate} from "react-router-dom";
+import useSignIn from 'react-auth-kit/hooks/useSignIn';
+import './Login.css';
+
const Login = () => {
+ const signIn = useSignIn();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
+ const [token, setToken] = useState('');
const [error, setError] = useState('');
const [loginSuccess, setLoginSuccess] = useState(false);
const [createdAt, setCreatedAt] = useState('');
const [openSnackbar, setOpenSnackbar] = useState(false);
const navigate = useNavigate();
+ const navigate = useNavigate();
+
const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
const loginUser = async () => {
try {
const response = await axios.post(`${apiEndpoint}/login`, { username, password });
-
+ console.log(response);
// Extract data from the response
const { createdAt: userCreatedAt } = response.data;
const { token: token } = response.data;
+
setCreatedAt(userCreatedAt);
setLoginSuccess(true);
@@ -29,9 +38,10 @@ const Login = () => {
localStorage.setItem('token', token);
localStorage.setItem('username', username);
-
+
} catch (error) {
- setError(error.response.data.error);
+ //console.log(error);
+ //setError(error.response.data.error);
}
};
@@ -40,40 +50,43 @@ const Login = () => {
};
return (
-
+
{loginSuccess ? (
navigate("/home")
) : (
-
-
- Login
-
-
+ Login
+ setUsername(e.target.value)}
/>
- setPassword(e.target.value)}
/>
-
+ {openSnackbar && (
+
+ Login successful
+
+ )}
{error && (
- setError('')} message={`Error: ${error}`} />
+
+ Error: {error}
+
)}
-
+ >
)}
-
- );
-};
+
+ )
+}
-export default Login;
\ No newline at end of file
+export default Login;
diff --git a/webapp/src/components/Login/Login.test.js b/webapp/src/components/Login/Login.test.js
index a844eae4..af102dcf 100644
--- a/webapp/src/components/Login/Login.test.js
+++ b/webapp/src/components/Login/Login.test.js
@@ -59,4 +59,4 @@ describe('Login component', () => {
expect(screen.queryByText(/Hello testUser!/i)).toBeNull();
expect(screen.queryByText(/Your account was created on/i)).toBeNull();
});
-});
\ No newline at end of file
+});
diff --git a/webapp/src/components/Register/Register.test.js b/webapp/src/components/Register/Register.test.js
index c2272b0d..87334886 100644
--- a/webapp/src/components/Register/Register.test.js
+++ b/webapp/src/components/Register/Register.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
-import Register from './Register';
+import AddUser from './AddUser';
const mockAxios = new MockAdapter(axios);
@@ -12,7 +12,7 @@ describe('AddUser component', () => {
});
it('should add user successfully', async () => {
- render( );
+ render( );
const usernameInput = screen.getByLabelText(/Username/i);
const passwordInput = screen.getByLabelText(/Password/i);
@@ -35,7 +35,7 @@ describe('AddUser component', () => {
});
it('should handle error when adding user', async () => {
- render( );
+ render( );
const usernameInput = screen.getByLabelText(/Username/i);
const passwordInput = screen.getByLabelText(/Password/i);
@@ -56,4 +56,4 @@ describe('AddUser component', () => {
expect(screen.getByText(/Error: Internal Server Error/i)).toBeInTheDocument();
});
});
-});
\ No newline at end of file
+});
diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js
index b38f0807..b0a23d5e 100644
--- a/webapp/src/pages/Home/Home.js
+++ b/webapp/src/pages/Home/Home.js
@@ -3,6 +3,7 @@ import "./Home.css";
import Nav from '../../components/Nav/Nav.js';
import Footer from '../../components/Footer/Footer.js';
import { Link } from "react-router-dom";
+
import { useLocation } from "react-router-dom";
const Home = () => {