Update lab5

Author: DosKobold

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

@@ -0,0 +1,50 @@
+//import * as fs from "fs";
+import fs from 'fs';
+
+document.getElementById('loginForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const user = {
+        firstname : document.getElementById('first-name').value,
+        lastname : document.getElementById('last-name').value,
+        username : document.getElementById('username').value,
+        password : document.getElementById('password').value,
+        gender : document.getElementsByName('gender').value,
+        topic : document.getElementById('topic').value,
+        comment : document.getElementById('comment').value,
+        conditions_accepted : document.getElementById('conditions').checked,
+    }
+
+    const message = document.getElementById('message');
+
+    message.textContent = '';
+
+    regex = /[^A-Za-z0-9-_]/;
+    if (regex.test(user.firstname) || regex.test(user.lastname) || regex.test(user.username)) {
+        message.style.color = 'red';
+        message.append('Eines der oberen drei Eingabefelder enthält ungültige Sonderzeichen. ');
+    }
+
+    regex = /[!#_,+\-?]/;
+    if (!regex.test(user.password)) {
+        message.style.color = 'red';
+        message.append('Passwort enthält keines der folgenden Zeichen: !#,+-_?. ');
+    }
+
+    regex = /[0-9]/;
+    if (!regex.test(user.password)) {
+        message.style.color = 'red';
+        message.append('Passwort enthält keine Zahl. ');
+    }
+
+    if (!(user.conditions_accepted == true)) {
+        message.style.color = 'red';
+        message.append('Nutzungsbedingungen nicht akzeptiert. ');
+    } 
+
+    const data = JSON.stringify(user);
+
+    
+    FileSystem.writeFileSync("data.json", data);
+    
+});

labs/lab5/dynamic-site/registration.html

@@ -12,10 +12,10 @@
     <div class="login-container">
         <h2>Login</h2>
         <form id="loginForm">
-            <input type="text" id="first-name" placeholder="Vorname" required>
-            <input type="text" id="last-name" placeholder="Nachname" required>
-            <input type="text" id="username" placeholder="Benutzername" required>
-            <input type="password" id="password" placeholder="Passwort" required>
+            <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>
 
@@ -30,15 +30,19 @@ <h2>Login</h2>
               <option value="flexbox">FlexBox</option>
               <option value="gridbox">GridBox</option>
             </select> 
-            <input type="text" id="comments" placeholder="Kommentare" required>
+            <input 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="true">
+            <input type="checkbox" id="conditions" name="conditions_accepted" value="yes">
 
             <button type="submit">Registrieren</button>
         </form>
         <p id="message" style="color: red;"></p>
     </div>
 
+    <br>
+
+    <a href="index.html">Einloggen</a>
+
     <script src="js/register.js"></script>
 
 </body>