projects / pokerwave.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e1569f4)
support creating users from the website
authorGeoffrey Allott <geoffrey@allott.email>
Sun, 14 Mar 2021 01:06:03 +0000 (01:06 +0000)
committerGeoffrey Allott <geoffrey@allott.email>
Sun, 14 Mar 2021 01:06:03 +0000 (01:06 +0000)
site/index.html patch | blob | history
site/modules/auth.js patch | blob | history
site/modules/socket.js patch | blob | history
site/style/login.css patch | blob | history

diff --git a/site/index.html b/site/index.html
index 972705166e35dce2e043e6ba3cbe39465aeb894c..837abcfc9da5f554e6da623dc9ea028c9c57aeca 100644 (file)
--- a/site/index.html
+++ b/site/index.html
@@ -8,12 +8,17 @@
     <body>
         <div id="login-background">
             <div id="login">
-                <label id="username-label" for="username">username</label>
+                <label id="username-label" for="username-input">username</label>
                 <input id="username-input" />
-                <label id="password-label" for="password">password</label>
+                <label id="password-label" for="password-input">password</label>
                 <input id="password-input" type="password" />
+                <label id="password-confirm-label" class="hidden" for="password-confirm-input">confirm password</label>
+                <input id="password-confirm-input" class="hidden" type="password" />
                 <button id="login-button">Sign In</button>
-                <p id="login-error"></p>
+                <div id="login-text-container">
+                    <p id="login-error"></p>
+                    <p id="sign-up">Sign Up</p>
+                </div>
             </div>
         </div>
         <div id="game-tile-background">
diff --git a/site/modules/auth.js b/site/modules/auth.js
index 0a6d7cb4fe9edd480c9c52d188df7acaf5c3a223..b5f2323dab801db2690e232e767b926d924dc8eb 100644 (file)
--- a/site/modules/auth.js
+++ b/site/modules/auth.js
@@ -11,6 +11,18 @@ export class Auth {
         };
     }
 
+    create_user_message() {
+        return {
+            type: "CreateUser",
+            username: this.username,
+            auth: {
+                method: "Scrypt",
+                password: this.password,
+            },
+            nickname: this.username,
+        };
+    }
+
     challenge_response(challenge) {
         return {
             type: "LoginAuthResponse",
diff --git a/site/modules/socket.js b/site/modules/socket.js
index 987bee811a4e81faf440d2660162a907d7962053..a610ac1a866acd2b3b0282aa2c25224281289752 100644 (file)
--- a/site/modules/socket.js
+++ b/site/modules/socket.js
@@ -1,5 +1,6 @@
 const svgns = "http://www.w3.org/2000/svg";
 
+import { Auth } from "./auth.js";
 import { MainMenu } from "./mainmenu.js";
 import { GameList } from "./gamelist.js";
 import { Chatroom } from "./chatroom.js";
@@ -43,6 +44,16 @@ export class Socket {
         const message = JSON.parse(msg.data);
         console.log("<<", message);
         switch (message.type) {
+            case "CreateUserSuccess":
+                document.getElementById("password-input").value = "";
+                document.getElementById("password-confirm-input").value = "";
+                this.show_login("New user created");
+                this.state = "Connected";
+                break;
+            case "CreateUserFailure":
+                this.show_create_user(message.reason);
+                this.state = "Connected";
+                break;
             case "LoginAuthChallenge":
                 this.send(this.auth.challenge_response(message.challenge));
                 this.state = "LoginAuthResponseSent";
@@ -109,8 +120,38 @@ export class Socket {
             document.getElementById("login-error").innerText = "";
         }
         document.getElementById("login-background").classList.remove("hidden");
+        document.getElementById("password-confirm-label").classList.add("hidden");
+        document.getElementById("password-confirm-input").classList.add("hidden");
         document.getElementById("login-button").onclick = this.login_all_sockets;
         document.getElementById("password-input").onchange = this.login_all_sockets;
+        document.getElementById("login-button").innerText = "Sign In";
+        document.getElementById("sign-up").onclick = () => this.show_create_user();
+    }
+
+    show_create_user(error) {
+        if (error) {
+            document.getElementById("login-error").classList.remove("hidden");
+            document.getElementById("login-error").innerText = error;
+        } else {
+            document.getElementById("login-error").classList.add("hidden");
+            document.getElementById("login-error").innerText = "";
+        }
+        document.getElementById("login-background").classList.remove("hidden");
+        document.getElementById("password-confirm-label").classList.remove("hidden");
+        document.getElementById("password-confirm-input").classList.remove("hidden");
+        document.getElementById("sign-up").classList.add("hidden");
+        document.getElementById("login-button").innerText = "Sign Up";
+        document.getElementById("password-input").onchange = () => {};
+        document.getElementById("login-button").onclick = () => {
+            const username = document.getElementById("username-input").value;
+            const password = document.getElementById("password-input").value;
+            const confirm = document.getElementById("password-confirm-input").value;
+            if (confirm != password) {
+                this.show_create_user("Passwords do not match");
+            } else {
+                this.send(new Auth(username, password).create_user_message());
+            }
+        };
     }
 
     create_game_display(summary, actions) {
diff --git a/site/style/login.css b/site/style/login.css
index 4279b3ad0e822af5c006cf66280e95128a12649c..6ef1b18d7372610a3fc69277dee9ee651148c255 100644 (file)
--- a/site/style/login.css
+++ b/site/style/login.css
@@ -32,8 +32,25 @@
     margin-top: 2vw;
 }
 
-#login > #login-error {
+#login-text-container {
+    display: flex;
+    flex-direction: row;
+}
+
+#sign-up {
+    font-size: 2vw;
+    text-align: right;
+    flex-grow: 1;
+    cursor: pointer;
+}
+
+#sign-up:hover {
+    text-decoration: underline;
+}
+
+#login-error {
     font-size: 2vw;
     color: red;
     margin-bottom: 0;
+    flex-grow: 4;
 }
online poker and card games