writing the stub js to authenticate against the back end

cmd/web/templates/login.page.gohtml

@@ -5,8 +5,8 @@ Login
 {{ define "content" }}
 <form action=""
       method="post"
-      name=""
-      id=""
+      name="login-form"
+      id="login-form"
       class="d-blick needs-validation"
       autocomplete="off"
       novalidate="">
@@ -31,8 +31,14 @@ Login
                class="form-control">
     </div>
     <hr>
-    <a href="javascript:void(0)" class="btn btn-primary">Login</a>
+    <a href="javascript:void(0)" id="login-btn" class="btn btn-primary">Login</a>
 </form>
 {{ end }}
 {{define "js"}}
+<script type="module">
+    import {val} from "/static/js/login.js"
+    document.getElementById("login-btn").addEventListener("click", () => {
+        val({{.API}});
+    })
+</script>
 {{end}}

static/js/login.js

@@ -0,0 +1,33 @@
+export function val(api) {
+    let form = document.getElementById("login_form");
+
+    if (form.checkValidity() === false) {
+        this.event.preventDefault();
+        this.event.stopPropagation();
+        form.classList.add("was-validated");
+        return;
+    }
+    form.classList.add("was-validated");
+
+    let payload = {
+        email: document.getElementById("email").value,
+        password: document.getElementById("password").value,
+    };
+
+    const requestOptions = {
+        method: 'post',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+    };
+
+    fetch(api + "/api/authenticate", requestOptions)
+        .then(response => response.json())
+        .then(response => {
+            console.log(response)
+        });
+}
+
+