fix register and login handler for future edits

Lab01/app/.idea/dataSources.xml

@@ -1,12 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="sqlite" uuid="90df965d-ff21-4af2-b1e2-02d2ad7754f1">
+    <data-source source="LOCAL" name="sqlite" uuid="04bed346-bd1a-4d2b-b6a4-c55783174fc1">
       <driver-ref>sqlite.xerial</driver-ref>
       <synchronize>true</synchronize>
       <jdbc-driver>org.sqlite.JDBC</jdbc-driver>
-      <jdbc-url>jdbc:sqlite:C:\Users\FlorianHoss\Documents\GitHub\SWB6-ITSec\Lab01\app\sqlite.db</jdbc-url>
+      <jdbc-url>jdbc:sqlite:$PROJECT_DIR$/sqlite.db</jdbc-url>
       <working-dir>$ProjectFileDir$</working-dir>
+      <libraries>
+        <library>
+          <url>file://$APPLICATION_CONFIG_DIR$/jdbc-drivers/Xerial SQLiteJDBC/3.36.0.3/sqlite-jdbc-3.36.0.3.jar</url>
+        </library>
+        <library>
+          <url>file://$APPLICATION_CONFIG_DIR$/jdbc-drivers/Xerial SQLiteJDBC/3.34.0/sqlite-jdbc-3.34.0.jar</url>
+        </library>
+      </libraries>
     </data-source>
   </component>
 </project>

Lab01/app/templates/index.tmpl

@@ -9,8 +9,10 @@
 {{template "navbar" .}}
 
 <div class="position-absolute top-50 start-50 translate-middle text-center">
-    <div>Welcome to the Super Save Store.</div>
+    <div>Welcome to the {{ .title }}.</div>
-    <div>Login to continue.</div>
+    <div>
+        <a class="link-secondary" href="/login">Login</a> to continue.
+    </div>
 </div>
 
 {{template "scripts" .}}
@@ -43,17 +45,61 @@
                     <li class="nav-item">
                         <a class="btn btn-primary" href="/login">Login</a>
                     </li>
-                    <li class="nav-item">
-                        <a class="btn btn-secondary" href="/register">Register</a>
-                    </li>
                 </ul>
             </div>
         </div>
     </nav>
 {{end}}
 
+{{define "userForm"}}
+    <form class="row g-3 needs-validation mb-3" novalidate>
+        <div class="col-12">
+            <label for="username" class="form-label">Username</label>
+            <div class="input-group has-validation">
+                <span class="input-group-text" id="inputGroupPrepend">@</span>
+                <input type="text" class="form-control" id="username"
+                       aria-describedby="inputGroupPrepend" required>
+                <div class="invalid-feedback">
+                    Please choose a username.
+                </div>
+            </div>
+        </div>
+        <div class="col-12">
+            <label for="password" class="form-label">Password</label>
+            <input type="password" class="form-control" id="password" aria-describedby="passwordHelp" required>
+            <div id="invalidPassword" class="invalid-feedback">
+                Please choose a password.
+            </div>
+        </div>
+        <div class="col-12">
+            <button class="btn btn-primary" id="button" type="submit">Submit form</button>
+        </div>
+    </form>
+{{end}}
+
 {{define "scripts"}}
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
             crossorigin="anonymous"></script>
+    <script>
+        let form = document.querySelector('.needs-validation')
+        if (form) {
+            form.addEventListener('submit', function (event) {
+                if (!form.checkValidity()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                } else {
+                    document.getElementById("button").disabled = true;
+                    event.preventDefault();
+                    let data = new FormData();
+                    let form_element = document.getElementsByClassName('form-control');
+                    for (let i = 0; i < form_element.length; i++) {
+                        data.append(form_element[i].id, form_element[i].value);
+                    }
+                    submitForm(data);
+                }
+                form.classList.add('was-validated');
+            }, false);
+        }
+    </script>
 {{end}}

Lab01/app/templates/login.tmpl

@@ -9,21 +9,22 @@
 {{template "navbar" .}}
 
 <div class="position-absolute top-50 start-50 translate-middle">
-    <form action="http://localhost:8080/register" method="POST">
+    <div class="fs-3">{{ .title }}</div>
-        <div class="mb-3">
+    <hr>
-            <label for="username" class="form-label">Username</label>
+    {{template "userForm" .}}
-            <input type="text" class="form-control" id="username" aria-describedby="emailHelp">
+    <a class="link-secondary" href="/register">Register instead</a>
-            <div id="emailHelp" class="form-text">The username needs to be unique</div>
-        </div>
-        <div class="mb-3">
-            <label for="password" class="form-label">Password</label>
-            <input type="password" class="form-control" id="password" aria-describedby="passwordHelp">
-            <div id="passwordHelp" class="form-text">The password needs to be different from the username</div>
-        </div>
-        <button type="submit" class="btn btn-primary">Submit</button>
-    </form>
 </div>
 
 {{template "scripts" .}}
+<script>
+    function submitForm(formData) {
+        fetch("/login", {method: 'POST', body: formData, redirect: 'follow'})
+            .then(response => response.json())
+            .then((json) => {
+                    console.log(json)
+                }
+            ).catch(error => console.log(error));
+    }
+</script>
 </body>
 </html>

Lab01/app/templates/register.tmpl

@@ -9,29 +9,16 @@
 {{template "navbar" .}}
 
 <div class="position-absolute top-50 start-50 translate-middle">
-    <div class="mb-3">
+    <div class="fs-3">{{ .title }}</div>
-        <label for="username" class="form-label">Username</label>
+    <hr>
-        <input type="text" class="form-control" id="username" aria-describedby="emailHelp">
+    {{template "userForm" .}}
-        <div id="emailHelp" class="form-text">The username needs to be unique</div>
+    <a class="link-secondary" href="/login">Login instead</a>
-    </div>
-    <div class="mb-3">
-        <label for="password" class="form-label">Password</label>
-        <input type="password" class="form-control" id="password" aria-describedby="passwordHelp">
-        <div id="passwordHelp" class="form-text">The password needs to be different from the username</div>
-    </div>
-    <button onclick="registerUser()" class="btn btn-primary">Submit</button>
 </div>
 
 
 {{template "scripts" .}}
 <script>
-    function registerUser() {
+    function submitForm(formData) {
-        const username = document.getElementById("username").value;
-        const password = document.getElementById("password").value;
-        let formData = new FormData();
-        formData.append("username", username);
-        formData.append("password", password);
-
         fetch("/register", {method: 'POST', body: formData, redirect: 'follow'})
             .then(response => response.json())
             .then(() => {

Lab01/app/webpage/webpage.go

@@ -2,6 +2,7 @@ package webpage
 
 import (
 	"app/database"
+	"fmt"
 	"github.com/gin-contrib/static"
 	"github.com/gin-gonic/gin"
 	"net/http"
@@ -12,7 +13,7 @@ func (wp *Webpage) defineRoutes() {
 
 	wp.Router.GET("/", func(c *gin.Context) {
 		c.HTML(http.StatusOK, "index.tmpl", gin.H{
-			"title": "Register",
+			"title": "SuperSafe",
 		})
 	})
 	wp.Router.GET("/login", func(c *gin.Context) {
@@ -35,10 +36,21 @@ func (wp *Webpage) defineRoutes() {
 		c.Redirect(http.StatusTemporaryRedirect, "/")
 	})
 
+	wp.Router.POST("/login", func(c *gin.Context) {
+		username, existing := c.GetPostForm("username")
+		password, existing := c.GetPostForm("password")
+		if existing == false || username == "" || password == "" {
+			c.JSON(400, gin.H{"message": "bad post form"})
+			return
+		}
+		fmt.Println(username, password)
+		c.JSON(200, gin.H{"message": "login successfull"})
+	})
+
 	wp.Router.POST("/register", func(c *gin.Context) {
-		username, err := c.GetPostForm("username")
+		username, existing := c.GetPostForm("username")
-		password, err := c.GetPostForm("password")
+		password, existing := c.GetPostForm("password")
-		if err == false {
+		if existing == false || username == "" || password == "" {
 			c.JSON(400, gin.H{"message": "bad post form"})
 			return
 		}