From 9ffed2753c926a61dbf9b8f811e4d0c9f05c828d Mon Sep 17 00:00:00 2001
From: Mister-Mario <mariojr2003@gmail.com>
Date: Sat, 23 Mar 2024 19:31:21 +0100
Subject: [PATCH] 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 (
-    <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>
   );
 };
@@ -37,7 +74,7 @@ const AddUser = () => {
 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>
 //   );
-// };
-
+// };
\ No newline at end of file