Extract login pages to own files

Fix api Remove login window
2022-10-12 19:55:22 +02:00
parent fe429ea7d5
commit 213bb1c179
12 changed files with 459 additions and 135 deletions
--- a/Public/register.html
+++ b/Public/register.html
@ -0,0 +1,75 @@
+<!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'/>
+        <link rel='stylesheet' type='text/css' href='login.css'/>
+        <script src='api.js'></script>
+        <script src='storage.js'></script>
+        <script src='login.js'></script>
+</head>
+<body id="login-window">
+    <div id="login-window-vertical-center">
+        <div id="login-window-inner">
+            <div id="sheephead-logo">\_______/<br>\ - - /<br>\ | /<br>\_/<br><br>Sheephead</div>
+            <label for="usrname">Username<span id="field-note">Required</span><a href="login.html">Log in instead</a></label>
+            <input type="text" id="user-name" name="usrname" required autofocus/>
+
+            <label for="psw">Password<span id="field-note">Required</span></label>
+            <input type="password" id="user-pwd" name="psw" required/>
+
+            <label for="email">Email<span id="field-note">Optional, for password reset</span></label>
+            <input type="email" id="user-email" name="email"/>
+
+            <button class="login-buttons standard-button" onclick="registerUser()">Create account</button>
+            <div id="user-hint"></div>
+        </div>
+    </div>
+    <script>
+
+        // Email address validation regex
+        const mailformat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+
+        /*
+         * Register a new account.
+         *
+         * The function extracts the fields from the form, and attempts to create the account.
+         * Invalid emails are checked using basic validation.
+         *
+         * In case the registration fails, then we show an error to the user.
+         */
+        function registerUser() {
+            const username = getLoginName();
+            if (username == "") {
+                setTextHint("Please enter your user name");
+                return;
+            }
+            const password = getLoginPassword();
+            if (password == "") {
+                setTextHint("Please enter a password");
+                return;
+            }
+            const email = getLoginEmail();
+            if (email != "" && !email.match(mailformat)) {
+                setTextHint("Invalid email address");
+                return;
+            }
+
+            performRegisterPlayerRequest(username, password, email)
+            .then(function(token) {
+                storePlayerNameAndToken(username, token);
+                window.location.href = "list.html";
+            }).catch(function(error) {
+                // TODO: Show better error messages to user
+                console.log("Registration failed.");
+                console.log(error);
+                setTextHint(error);
+            })
+        }
+
+        loadExistingSession();
+    </script>
+</body>
+</html>