write to file when register

Author: DefinitelyNotSimon13

labs/lab5/dynamic-site/index.js

@@ -7,12 +7,13 @@ const host = "localhost";
 
 const requestListener = (req, res) => {
     console.log("Method: ", req.method);
+    console.log("Url: ", req.url);
     if (req.method == "GET") {
         getHandler(req, res);
-    } else if(req.method == "POST") {
-        if (req.url = "/login") {
+    } else if (req.method == "POST") {
+        if (req.url === "/login") {
             loginHandler(req, res);
-        } else if (req.url = "/register") {
+        } else if (req.url === "/register") {
             registerHandler(req, res);
         }
     }
@@ -27,14 +28,14 @@ function getHandler(req, res) {
     const url = req.url;
     let filePath = './public' + (url === "/" ? '/index.html' : url);
     let ext = path.extname(filePath);
-    if(ext == "") {
+    if (ext == "") {
         filePath += ".html";
         ext = ".html";
     }
 
 
     fs.readFile(filePath, (err, data) => {
-        if (err)  {
+        if (err) {
             console.error(err);
             res.writeHead(404, { 'Content-Type': 'text/html' });
             res.end("<h1>404 Not Found</h1>");
@@ -50,24 +51,74 @@ function getHandler(req, res) {
 
         const contentType = mimeTypes[ext] || 'text/html';
 
-        res.writeHead(200, {'Content-Type': contentType});
+        res.writeHead(200, { 'Content-Type': contentType });
         res.write(data);
         res.end();
     })
 }
 
 function loginHandler(req, res) {
-    res.writeHead(500, {'Content-Type': 'application/json'})
+    res.writeHead(500, { 'Content-Type': 'application/json' })
     const response = {
-        message: "error"
+        message: "login error"
     };
     res.end(JSON.stringify(response));
 }
 
 function registerHandler(req, res) {
-    res.writeHead(500, {'Content-Type': 'application/json'})
-    const response = {
-        message: "error"
-    };
-    res.end(JSON.stringify(response));
+    let body = '';
+
+    req.on('data', chunk => {
+        body += chunk.toString();
+    });
+
+    req.on('end', () => {
+        let data;
+        try {
+            data = JSON.parse(body);
+        } catch (error) {
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ message: "Invalid Request" }));
+        }
+
+        const requiredFields = ["first_name", "last_name", "username", "password", "gender", "topic"];
+        const missingFields = requiredFields.filter(field => !data[field]);
+
+        if (missingFields.length > 0) {
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            return res.end(JSON.stringify({ message: `Missing fields: ${missingFields.join(', ')}` }));
+        }
+
+        const filePath = path.join("./", 'users.json');
+
+        fs.readFile(filePath, 'utf8', (err, fileData) => {
+            let users = [];
+
+            if (!err && fileData) {
+                try {
+                    users = JSON.parse(fileData);
+                } catch (jsonErr) {
+                    users = [];
+                }
+            }
+
+            const existingUser = users.find(user => user.username === data.username);
+            if (existingUser) {
+                res.writeHead(409, { 'Content-Type': 'application/json' });
+                return res.end(JSON.stringify({ message: "Username already exists" }));
+            }
+            users.push(data);
+
+            fs.writeFile(filePath, JSON.stringify(users, null, 2), err => {
+                if (err) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    return res.end(JSON.stringify({ message: "Internal Server Error" }));
+                }
+
+                res.writeHead(201, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ message: "User registered successfully" }));
+            });
+        });
+
+    });
 }

labs/lab5/dynamic-site/public/css/logins.css

@@ -7,22 +7,26 @@ body {
   align-items: center;
   height: 100vh;
 }
+
 .login-container {
   background: white;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
+
 .login-container h2 {
   margin-bottom: 20px;
 }
+
 .login-container input {
   width: 100%;
   padding: 10px;
   margin: 10px 0;
   border: 1px solid #ccc;
   border-radius: 5px;
 }
+
 .login-container button {
   width: 100%;
   padding: 10px;
@@ -32,6 +36,23 @@ body {
   border-radius: 5px;
   cursor: pointer;
 }
+
 .login-container button:hover {
   background-color: #218838;
-}
+}
+
+
+.radio-input {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+
+  input {
+    width: auto;
+    margin: 0 1em;
+  }
+}
+
+.radio-group {
+  margin-bottom: 1em;
+}

labs/lab5/dynamic-site/public/js/register.js

@@ -2,16 +2,21 @@ document.getElementById('registerForm').addEventListener('submit', async (event)
     event.preventDefault(); // Verhindert das Standardverhalten des Formulars
 
     const form = event.target;
-      const formData = new FormData(form);
+    const formData = new FormData(form);
+
+    const jsonData = Object.fromEntries(formData.entries());
 
     const response = await fetch(form.action, {
         method: form.method,
-        body: JSON.stringify(formData),
-      });
+        body: JSON.stringify(jsonData),
+        headers: {
+            "Content-Type": "application/json"
+        }
+    });
 
     const body = await response.json();
 
-    if(!response.ok) {
+    if (!response.ok) {
         const message = document.getElementById('message');
         message.style.color = 'red';
         message.textContent = body.message;

labs/lab5/dynamic-site/public/registration.html

@@ -13,15 +13,29 @@
     <div class="login-container">
         <h2>Login</h2>
         <form id="registerForm" method="POST" action="/register">
-            <input type="text" id="first-name" placeholder="Vorname" maxlength="20" required>
-            <input type="text" id="last-name" placeholder="Nachname" maxlength="20" required>
-            <input type="text" id="username" placeholder="Benutzername" maxlength="20" required>
-            <input type="password" id="password" placeholder="Passwort" maxlength="20" minlength="8" required>
-            <label for="male">Männlich</label>
-            <input type="radio" id="male" name="gender" value="male" checked>
+            <input type="text" name="first_name" id="first-name" placeholder="Vorname" maxlength="20" required>
+            <input type="text" name="last_name" id="last-name" placeholder="Nachname" maxlength="20" required>
+            <input type="text" name="username" id="username" placeholder="Benutzername" maxlength="20" required>
+            <input type="password" name="password" id="password" placeholder="Passwort" maxlength="20" minlength="8" required>
+
+            <h3>Geschlecht</h3>
+            <div class="radio-group">
+                    <div class ="radio-input">
+                        <input type="radio" id="male" name="gender" value="male">
+                        <label for="male">Männlich</label>
+                    </div>
+
+                    <div class ="radio-input">
+                        <input type="radio" id="female" name="gender" value="female">
+                        <label for="female">Weiblich</label>
+                    </div>
+
+                    <div class ="radio-input">
+                        <input type="radio" id="divers" name="gender" value="divers">
+                        <label for="divers">Divers</label>
+                    </div>
+            </div>
 
-            <label for="female">Weiblich</label>
-            <input type="radio" id="female" name="gender" value="female">
 
             <label for="topic">Wähle eine Interessenskategorie</label>
             <select name="topic" id="topic">
@@ -31,9 +45,9 @@ <h2>Login</h2>
                 <option value="flexbox">FlexBox</option>
                 <option value="gridbox">GridBox</option>
             </select>
-            <input type="text" id="comment" placeholder="Kommentar" maxlength="100">
+            <input name="comment" type="text" id="comment" placeholder="Kommentar" maxlength="100">
             <label for="conditions"> Ich akzeptiere die Nutzungsbedingungen</label>
-            <input type="checkbox" id="conditions" name="conditions_accepted" value="yes">
+            <input type="checkbox" id="conditions" value="yes" required>
 
             <button type="submit">Registrieren</button>
         </form>

labs/lab5/dynamic-site/users.json

@@ -0,0 +1,11 @@
+[
+  {
+    "first_name": "test123",
+    "last_name": "123test",
+    "username": "123test",
+    "password": "1fgddrfg",
+    "gender": "male",
+    "topic": "html",
+    "comment": "test123"
+  }
+]