diff --git a/site/modules/auth.js b/site/modules/auth.js index 0a6d7cb..b5f2323 100644 --- 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 987bee8..a610ac1 100644 --- 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 4279b3a..6ef1b18 100644 --- 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; } -- 2.34.1