Login page functionality

2023-07-17 17:42:12 +01:00
parent b3d846c6f4
commit b704db1ba1
2 changed files with 28 additions and 1 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="/frontend/index.css">
  </head>
  <body>
+    <script src="/frontend/index.js"></script>
    <div id="login" class="flex three" style="height: 100%">
      <div class="fourth two-fifth-1000"></div>
      <div class="flex one half fifth-1000" style="height: 100%">
@@ -17,7 +18,7 @@
          <input type="text" id="name"> <br>
          <label for="password">Password</label> <br>
          <input type="password" id="password"> <br>
-          <input type="submit" value="Login" style="width: 100%"> <br>
+          <input type="submit" value="Login" style="width: 100%" onclick="login()" id="loginSubmit"> <br>
        </article>
        <div class="loginSpacer"></div>
      </div>
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -0,0 +1,26 @@
+async function login() {
+    // this.preventDefault();
+    // get login details
+    let name = document.getElementById("name").value;
+    let password = document.getElementById("password").value;
+    // request login
+    let response = await fetch("/login", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            name: name,
+            password: password
+        })
+    });
+    // if failed red button
+    // else switch screen
+    if (response.status != 200) {
+        document.getElementById("loginSubmit").classList.add("error");
+    } else {
+        // switch screen
+        document.getElementById("login").setAttribute("style", "display: none;");
+        document.getElementById("mainPage").setAttribute("style", "");
+    }
+}