First registration/login interface

2021-11-27 11:59:13 +01:00
parent 11dde8b8ab
commit b87dce55a8
9 changed files with 408 additions and 4 deletions
--- a/Public/game.js
+++ b/Public/game.js
@@ -0,0 +1,52 @@
+function hideLoginWindow() {
+    document.getElementById("signup-window").style.display = "none"
+}
+
+async function registerUser() {
+    let username = document.getElementById("user-name").value
+    let password = document.getElementById("user-pwd").value
+    errorField = document.getElementById("login-error")
+
+    console.log("Registration started");
+
+    fetch("/create/user/" + username + "/" + password, { method: 'POST' })
+    .then(function(response) {
+        if (response.status == 200) { // Success
+            return response.text()
+        }
+        if (response.status == 400) { // Bad request
+            throw Error("The request had an error")
+        }
+        if (response.status == 409) { // Conflict
+            throw Error("A user with the same name is already registered")
+        }
+        throw Error("Unexpected response: " + response.statusText)
+    }).then(function(text) {
+        localStorage.setItem('token', text)
+        hideLoginWindow()
+        console.log("Registered")
+    }).catch(function(error) {
+        errorField.innerHTML = error.message
+        console.log(error)
+        return
+    })
+}
+
+function loadExistingSession() {
+    console.log("Checking to resume session");
+    const token = localStorage.getItem('token');
+    if (token) {
+        console.log("Resuming session with token " + token);
+        resumeSession(token);
+    }
+}
+
+function resumeSession(token) {
+
+    localStorage.removeItem('token');
+    hideLoginWindow()
+}
+
+function loginUser() {
+
+}
--- a/Public/schafkopf.html
+++ b/Public/schafkopf.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <title>Schafkopf</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
+</head>
+<body>
+    <div class="signup-backdrop" id="signup-window">
+        <div class="signup-window-vertical">
+            <div class="signup-window">
+                <label for="usrname">Username</label>
+                <input type="text" id="user-name" name="usrname" required>
+                
+                <label for="psw">Password</label>
+                <input type="password" id="user-pwd" name="psw" required>
+                
+                <button class="login-buttons" onclick="registerUser()">Register</button>
+                <button class="login-buttons" onclick="loginUser()">Log in</button>
+                <div id="login-error"></div>
+            </div>
+        </div>
+    </div>
+    <script src='game.js'></script>
+    <script>
+        loadExistingSession()
+    </script>
+</body>
+</html>
--- a/Public/style.css
+++ b/Public/style.css
@@ -0,0 +1,61 @@
+/* Style all input fields */
+input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 6px;
+    margin-bottom: 16px;
+}
+
+html * {
+    font-family:-apple-system, BlinkMacSystemFont, "SF Hello", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
+}
+
+body, html {
+    min-height: 100%;
+    height: 100%;
+}
+
+.signup-backdrop {
+    background-color: #fff;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: table;
+    position: absolute;
+}
+
+.signup-window-vertical {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.signup-window {
+    background-color: #f1f1f1;
+    margin-left: auto;
+    margin-right: auto;
+    width: 300px;
+    border-radius: 10px;
+    border-style: solid;
+    border-width: thin;
+    border-color: darkgray;
+    padding: 10px;
+}
+
+.login-buttons {
+    width: 100%;
+    padding: 10px;
+    background-color: #ccc;
+    color: #000;
+    border-style: hidden;
+    border-radius: 5px;
+    margin-top: 5px;
+    font-size: medium;
+}
+
+.login-buttons:hover {
+    background-color: #ddd;
+}