Merge branch 'master' into 60-add-questions-more-efficiently-to-database

Arquisoft · Mar 24, 2024 · 84399c1 · 84399c1
2 parents 095aa0f + 3057e3e
commit 84399c1
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 64 deletions.
diff --git 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/package-lock.json b/webapp/package-lock.json
diff --git 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/AddUser.js b/webapp/src/components/loginAndRegistration/AddUser.js
@@ -1,43 +1,80 @@
 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 (
-    <div className="wrapper">
-      <form action="">
-        <div className="wrapper2">
-          <h1>{t("addUser.title")}</h1>
-          <div className="input-box">
-            <input type="text" placeholder={t("addUser.username_placeholder")} required />
-            <FaUser className="icon" />
-          </div>
-          <div className="input-box">
-            <input type="password" placeholder={t("addUser.password_placeholder")} required />
-            <FaLock className="icon" />
-          </div>
-          <div className="input-box">
-            <input type="password" placeholder={t("addUser.repeat_password_placeholder")} required />
-            <FaLock className="icon" />
-          </div>
+  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
+      }
 
-          <button type="submit">{t("addUser.register_button")}</button>
+    } catch (error) {
+      console.error('Error adding user:', error);
+    }
+  };
 
-          <LinkLogin />
-        </div>
-      </form>
+  return (
+    <div className="general">
+    <div className="card">
+      <div className="card2">
+        <form className="form" onSubmit={handleSubmit}>
+            <h1>{t("addUser.title")}</h1>
+            <div className="input-box">
+              <input
+                type="text"
+                placeholder={t("addUser.username_placeholder")}
+                required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </div>
+            <div className="input-box">
+              <input
+                type="password"
+                placeholder={t("addUser.password_placeholder")}
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            <div className="input-box">
+              <input
+                type="password"
+                placeholder={t("addUser.repeat_password_placeholder")}
+                required
+                value={repeatPassword}
+                onChange={(e) => setRepeatPassword(e.target.value)}
+              />
+            </div>
+            <button type="submit">{t("addUser.register_button")}</button>
+            <LinkLogin />
+        </form>
+      </div>
+    </div>
     </div>
   );
 };
 
 function LinkLogin() {
   const { t } = useTranslation("global");
   return (
-    <Link to="/login" className="button-login" variant="body2" >
+    <Link to="/login" className="button-login" variant="body2">
       {t("addUser.login_link")}
     </Link>
   );
@@ -94,5 +131,4 @@ export default AddUser;
 //       )}
 //     </Container>
 //   );
-// };
-
+// };
diff --git 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 (
-    <div className="wrapper">
-      <form action="">
-        <div className="wrapper2">
+    <div className="general">
+
+    <div className="card">
+      <div className="card2">
+        <form className="form" onSubmit={handleSubmit}>
           <h1>{t("login.title")}</h1>
           <div className="input-box">
-            <input type="text" placeholder={t("login.username_placeholder")} />
-            <FaUser className="icon" />
+              <input
+                type="text"
+                placeholder={t("addUser.username_placeholder")}
+                required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
           </div>
           <div className="input-box">
-            <input type="password" placeholder={t("login.password_placeholder")} />
-            <FaLock className="icon" />
+              <input
+                type="password"
+                placeholder={t("addUser.password_placeholder")}
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
           </div>
-
+          {//TODO: Study this option and see if it is viable
+          } 
           <div className="remember-forgot">
             <label>
               <input type="checkbox" /> {t("login.remember_me")}
             </label>
-            <a href="#">{t("login.forgot_password")}</a>
           </div>
 
-          <ButtonMenu />
+          <button type="submit">{t("login.login_button")}</button>
           <LinkRegister />
-        </div>
-      </form>
+        </form>
+      </div>
+    </div>
     </div>
   );
 };
 
-function ButtonMenu() {
-  const { t } = useTranslation("global");
-  return (
-    <Link to="/menu" className="button-menu">
-      <Button>{t("login.login_button")}</Button>
-    </Link>
-  );
-}
+// function ButtonMenu() {
+//   const { t } = useTranslation("global");
+//   return (
+//     <Link to="/menu" className="button-menu">
+
+//     </Link>
+//   );
+// }
 
 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;