account creation dialog in webclient

srcjs/stendhal.css

@@ -17,6 +17,19 @@ body {
   display: none;
 }
 
+input:invalid {
+  border: 2px dashed red;
+}
+
+.credential-dialog label {
+  min-width: 8em;
+  display: inline-block;
+}
+
+.credential-dialog a {
+  color: #FFF;
+}
+
 li.online {
   color: var(--text-color-online);
 }

srcjs/stendhal.html

@@ -103,11 +103,25 @@
 		<div></div>
 	</template>
 
+	<template id="createaccountdialog-template">
+		<div>
+			<form class="credential-dialog">
+			<label for="username">Username*:</label> <input id="username" minlength="6" maxlength="20" required><br>
+			<label for="password">Password*:</label> <input id="password" type="password" minlength="6" maxlength="50" required><br>
+			<label for="passwordrepeat">Repeat Password*:</label> <input id="passwordrepeat" type="password" minlength="6" maxlength="50" required><br>
+			<label for="password">Email:</label> <input id="email" type="email"><br>
+			<input type="submit" id="loginbutton" value="Create Account"> <a id="loginlink" href="#login">Login with existing account...</a>
+			</form>
+		</div>
+	</template>
+
 	<template id="logindialog-template">
 		<div>
-			<label for="username">Username:</label> <input id="username"><br>
-			<label for="password">Password:</label> <input id="password" type="password"><br>
-			<button id="loginbutton">Login</button>
+			<form class="credential-dialog">
+			<label for="username">Username*:</label> <input id="username" required><br>
+			<label for="password">Password*:</label> <input id="password" type="password" required><br>
+			<button id="loginbutton">Login</button> <a id="createlink" href="#create">Create new account...</a>
+			</form>
 		</div>
 	</template>
 

srcjs/stendhal/Client.ts

@@ -35,6 +35,8 @@ import { LoginDialog } from "./ui/dialog/LoginDialog";
 
 import { DesktopUserInterfaceFactory } from "./ui/factory/DesktopUserInterfaceFactory";
 
+import { SingletonFloatingWindow } from "./ui/toolkit/SingletonFloatingWindow";
+
 import { Chat } from "./util/Chat";
 import { DialogHandler } from "./util/DialogHandler";
 
@@ -44,6 +46,7 @@ export class Client {
 	private initialized = false;
 	private errorCounter = 0;
 	private unloading = false;
+	public username?: string;
 
 	/** Singleton instance. */
 	private static instance: Client;
@@ -246,7 +249,16 @@ export class Client {
 				"Login",
 				new LoginDialog(),
 				100, 50);
+		};
+
+		marauroa.clientFramework.onCreateAccountAck = function(username: string) {
+			// TODO: We should login automatically
+			alert("Account succesfully created, please login.");
+			window.location.reload();
+		};
 
+		marauroa.clientFramework.onCreateCharacterAck = function(charname: string, _template: any) {
+			// Client.get().chooseCharacter(charname);
 		};
 
 		marauroa.clientFramework.onLoginFailed = function(_reason: string, _text: string) {
@@ -256,6 +268,11 @@ export class Client {
 		};
 
 		marauroa.clientFramework.onAvailableCharacterDetails = function(characters: {[key: string]: RPObject}) {
+			SingletonFloatingWindow.closeAll();
+			if (!Object.keys(characters).length && this.username) {
+				marauroa.clientFramework.createCharacter(this.username, {});
+				return;
+			}
 			if (window.location.hash) {
 				let name = window.location.hash.substring(1);
 				stendhal.session.setCharName(name);

srcjs/stendhal/ui/dialog/CreateAccountDialog.ts

@@ -0,0 +1,53 @@
+/***************************************************************************
+ *                (C) Copyright 2015-2023 - Faiumoni e. V.                 *
+ ***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU Affero General Public License as        *
+ *   published by the Free Software Foundation; either version 3 of the    *
+ *   License, or (at your option) any later version.                       *
+ *                                                                         *
+ ***************************************************************************/
+
+import { ui } from "../UI";
+import { DialogContentComponent } from "../toolkit/DialogContentComponent";
+import { LoginDialog } from "./LoginDialog";
+
+declare var marauroa: any;
+
+/**
+ * a dialog to enter username and password
+ */
+export class CreateAccountDialog extends DialogContentComponent {
+
+	constructor() {
+		super("createaccountdialog-template");
+		this.child("input[type=submit]")!.addEventListener("click", (event: Event) => {
+			event.preventDefault();
+			let username = (this.child("#username") as HTMLInputElement).value;
+			let password = (this.child("#password") as HTMLInputElement).value;
+			let passwordRepeat = (this.child("#passwordrepeat") as HTMLInputElement).value;
+			let email = (this.child("#email") as HTMLInputElement).value;
+			if (!username || !password || !passwordRepeat) {
+				alert("Please fill in all required fields.");
+				return;
+			}
+			if (password != passwordRepeat) {
+				alert("Password and password repetition do not match.");
+				return;
+			}
+			marauroa.clientFramework.createAccount(username, password, email);
+		});
+
+		this.child("a")!.addEventListener("click", (event: Event) => {
+			event.preventDefault();
+			this.close();
+			ui.createSingletonFloatingWindow(
+				"Login",
+				new LoginDialog(),
+				100, 50);
+		});
+	}
+
+
+}

srcjs/stendhal/ui/dialog/LoginDialog.ts

@@ -9,7 +9,10 @@
  *                                                                         *
  ***************************************************************************/
 
+import { Client } from "../../Client";
+import { ui } from "../UI";
 import { DialogContentComponent } from "../toolkit/DialogContentComponent";
+import { CreateAccountDialog } from "./CreateAccountDialog";
 
 declare var marauroa: any;
 
@@ -20,12 +23,24 @@ export class LoginDialog extends DialogContentComponent {
 
 	constructor() {
 		super("logindialog-template");
-		this.child("button")!.addEventListener("click", () => {
+
+		this.child("button")!.addEventListener("click", (event: Event) => {
+			event.preventDefault();
 			let username = (this.child("#username") as HTMLInputElement).value;
 			let password = (this.child("#password") as HTMLInputElement).value;
+			Client.get().username = username;
 			marauroa.clientFramework.login(username, password);
 			this.close();
 		});
+
+		this.child("a")!.addEventListener("click", (event: Event) => {
+			event.preventDefault();
+			this.close();
+			ui.createSingletonFloatingWindow(
+				"Create Account",
+				new CreateAccountDialog(),
+				100, 50);
+		});
 	}
 
 }

srcjs/stendhal/ui/toolkit/SingletonFloatingWindow.ts

@@ -16,6 +16,7 @@ import { FloatingWindow } from "./FloatingWindow";
  * A popup or dialog window that will disappear if another SingletonFloatingWindow is opened
  */
 export class SingletonFloatingWindow extends FloatingWindow {
+
 	private static visiblePopup?: SingletonFloatingWindow;
 
 	/**
@@ -40,4 +41,10 @@ export class SingletonFloatingWindow extends FloatingWindow {
 			SingletonFloatingWindow.visiblePopup = undefined;
 		}
 	}
+
+	static closeAll() {
+		if (SingletonFloatingWindow.visiblePopup) {
+			SingletonFloatingWindow.visiblePopup.close();
+		}
+	}
 }