From 9ffed2753c926a61dbf9b8f811e4d0c9f05c828d Mon Sep 17 00:00:00 2001 From: Mister-Mario Date: Sat, 23 Mar 2024 19:31:21 +0100 Subject: [PATCH 1/2] Now we can add a user to the system There are some TODOs left for validating the data --- users/userservice/user-service.js | 3 +- .../loginAndRegistration/AddUser.js | 86 +++++++++++++------ 2 files changed, 63 insertions(+), 26 deletions(-) diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js index be958427..7a49e593 100644 --- a/users/userservice/user-service.js +++ b/users/userservice/user-service.js @@ -19,6 +19,7 @@ mongoose.connect(mongoUri); // Function to validate required fields in the request body function validateRequiredFields(req, requiredFields) { + //TODO: Add more validations for (const field of requiredFields) { if (!(field in req.body)) { throw new Error(`Missing required field: ${field}`); @@ -40,7 +41,7 @@ app.post('/adduser', async (req, res) => { }); await newUser.save(); - res.json(newUser); + res.json({username: newUser.username}); } catch (error) { res.status(400).json({ error: error.message }); }}); diff --git a/webapp/src/components/loginAndRegistration/AddUser.js b/webapp/src/components/loginAndRegistration/AddUser.js index 5911c7f5..c7158150 100644 --- a/webapp/src/components/loginAndRegistration/AddUser.js +++ b/webapp/src/components/loginAndRegistration/AddUser.js @@ -1,35 +1,72 @@ import React from "react"; -import { FaUser, FaLock } from "react-icons/fa"; import "../../custom.css"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; +import axios from 'axios'; +import { useState } from 'react'; const AddUser = () => { + const apiUrl = (process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000') + "/adduser"; const { t } = useTranslation("global"); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [repeatPassword, setRepeatPassword] = useState(''); - return ( -
-
-
-

{t("addUser.title")}

-
- - -
-
- - -
-
- - -
+ const handleSubmit = async (event) => { + event.preventDefault(); + try { + //TODO: Add more validations + if(password === repeatPassword){ //User put the same password + const response = await axios.post(apiUrl, { username, password }); + console.log("Registered user: " + response.username); + } + else{ + //TODO: Show some errors to the user + } - + } catch (error) { + console.error('Error adding user:', error); + } + }; - -
-
+ return ( +
+
+
+
+

{t("addUser.title")}

+
+ setUsername(e.target.value)} + /> +
+
+ setPassword(e.target.value)} + /> +
+
+ setRepeatPassword(e.target.value)} + /> +
+ + + +
+
); }; @@ -37,7 +74,7 @@ const AddUser = () => { function LinkLogin() { const { t } = useTranslation("global"); return ( - + {t("addUser.login_link")} ); @@ -94,5 +131,4 @@ export default AddUser; // )} // // ); -// }; - +// }; \ No newline at end of file From 2631d2e3d4205b947826a5954d6723cb80f486b2 Mon Sep 17 00:00:00 2001 From: Mister-Mario Date: Sat, 23 Mar 2024 20:34:08 +0100 Subject: [PATCH 2/2] Now we can login as a user registered --- webapp/package-lock.json | 26 +++---- webapp/package.json | 2 +- .../components/loginAndRegistration/Login.js | 77 +++++++++++++------ 3 files changed, 67 insertions(+), 38 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index ad42295e..9ae1d63d 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -21,7 +21,7 @@ "react-dom": "^18.2.0", "react-i18next": "^14.0.5", "react-icons": "^5.0.1", - "react-router-dom": "^6.22.2", + "react-router-dom": "^6.22.3", "react-scripts": "^5.0.1", "web-vitals": "^3.5.1" }, @@ -5050,9 +5050,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz", - "integrity": "sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==", + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", "engines": { "node": ">=14.0.0" } @@ -22195,11 +22195,11 @@ } }, "node_modules/react-router": { - "version": "6.22.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz", - "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==", + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", "dependencies": { - "@remix-run/router": "1.15.2" + "@remix-run/router": "1.15.3" }, "engines": { "node": ">=14.0.0" @@ -22209,12 +22209,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.22.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz", - "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==", + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", "dependencies": { - "@remix-run/router": "1.15.2", - "react-router": "6.22.2" + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" }, "engines": { "node": ">=14.0.0" diff --git a/webapp/package.json b/webapp/package.json index f31b2a0c..aab06447 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -16,7 +16,7 @@ "react-dom": "^18.2.0", "react-i18next": "^14.0.5", "react-icons": "^5.0.1", - "react-router-dom": "^6.22.2", + "react-router-dom": "^6.22.3", "react-scripts": "^5.0.1", "web-vitals": "^3.5.1" }, diff --git a/webapp/src/components/loginAndRegistration/Login.js b/webapp/src/components/loginAndRegistration/Login.js index 167b5ca8..b33e629c 100644 --- a/webapp/src/components/loginAndRegistration/Login.js +++ b/webapp/src/components/loginAndRegistration/Login.js @@ -1,50 +1,80 @@ import React from "react"; -import { FaUser, FaLock } from "react-icons/fa"; import { Link } from "react-router-dom"; -import Button from "@mui/material/Button"; import { useTranslation } from "react-i18next"; import "../../custom.css"; +import axios from 'axios'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; const Login = () => { + const navigate = useNavigate(); + const apiUrl = (process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000') + "/login"; const { t } = useTranslation("global"); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const handleSubmit = async (event) => { + event.preventDefault(); + try { + const response = await axios.post(apiUrl, { username, password }); + console.log("Hello " + response.username); + //Used to redirect to the menu to start playing + navigate('/menu'); + } catch (error) { + console.error('Error adding user:', error); + } + }; return ( -
-
-
+
+ +
+
+

{t("login.title")}

- - + setUsername(e.target.value)} + />
- - + setPassword(e.target.value)} + />
- + {//TODO: Study this option and see if it is viable + }
- {t("login.forgot_password")}
- + -
- + +
+
); }; -function ButtonMenu() { - const { t } = useTranslation("global"); - return ( - - - - ); -} +// function ButtonMenu() { +// const { t } = useTranslation("global"); +// return ( +// + +// +// ); +// } function LinkRegister() { const { t } = useTranslation("global"); @@ -57,7 +87,6 @@ function LinkRegister() { export default Login; - // // src/components/Login.js // import React, { useState } from 'react'; // import axios from 'axios'; @@ -137,4 +166,4 @@ export default Login; // ); // }; -// export default Login; +// export default Login; \ No newline at end of file