Login page functionality

This commit is contained in:
2023-07-17 17:42:12 +01:00
parent b3d846c6f4
commit b704db1ba1
2 changed files with 28 additions and 1 deletions

View File

@@ -8,6 +8,7 @@
<link rel="stylesheet" href="/frontend/index.css"> <link rel="stylesheet" href="/frontend/index.css">
</head> </head>
<body> <body>
<script src="/frontend/index.js"></script>
<div id="login" class="flex three" style="height: 100%"> <div id="login" class="flex three" style="height: 100%">
<div class="fourth two-fifth-1000"></div> <div class="fourth two-fifth-1000"></div>
<div class="flex one half fifth-1000" style="height: 100%"> <div class="flex one half fifth-1000" style="height: 100%">
@@ -17,7 +18,7 @@
<input type="text" id="name"> <br> <input type="text" id="name"> <br>
<label for="password">Password</label> <br> <label for="password">Password</label> <br>
<input type="password" id="password"> <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> </article>
<div class="loginSpacer"></div> <div class="loginSpacer"></div>
</div> </div>

26
frontend/index.js Normal file
View File

@@ -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", "");
}
}