fix login dialog and logout

2 files changed, 44 insertions, 31 deletions

diff --git a/static/pages/login/index.css b/static/pages/login/index.css
index f4a99ba..d9d0f41 100644
--- a/static/pages/login/index.css
+++ b/static/pages/login/index.css
@@ -37,7 +37,7 @@
 	background: #0000;
 }
 
-#box button {
+#box #submit {
 	border-top-left-radius: 0px;
 	border-bottom-left-radius: 0px;
 	background: var(--page-background);
@@ -46,7 +46,7 @@
 	background: #0000;
 }
 
-#username {
+#username-label {
 	position: absolute;
 	top: calc(50% - 40px);
 	left: 50%;
diff --git a/static/pages/login/index.js b/static/pages/login/index.js
index 2cdd4c6..dae12e6 100644
--- a/static/pages/login/index.js
+++ b/static/pages/login/index.js
@@ -1,13 +1,14 @@
 import icons from 'icons';
 import * as sfw from 'sfw';
-const { Div, Label, H1: Title, Input, Button } = sfw.element.native;
+const { Div, Label, H1: Title, Input, Button, Form } = sfw.element.native;
 
 const css = await sfw.css(import.meta.url, './index.css');
 
 export default class LoginView extends sfw.element.Container {
 	#container
-	#input
 	#user
+	#username
+	#password
 	#comment
 
 	constructor() {
@@ -16,30 +17,43 @@ export default class LoginView extends sfw.element.Container {
 		this.onlogin = () => {};
 		this.onpassword = () => {};
 
-		this.#user = null;
-
 		this.body.append(
 			this.#container = Div.new({
 				id: 'container',
 				children: [
 					Div.new({ id: 'title', innerText: 'Memora' }),
 					this.#user = Div.new({
-						id: 'username',
+						id: 'username-label',
 						onclick: () => this.#reset(),
 					}),
-					Div.new({
+					Form.new({
 						id: 'box',
+						onsubmit: (e) => e.preventDefault(),
 						children: [
-							this.#input = Input.new({
+							this.#username = Input.new({
+								id: 'username',
 								placeholder: 'Username',
 								autocomplete: 'username',
 								onkeydown: (e) => {
 									if (e.key === 'Enter') {
-										return this.#next();
+										return this.#go_to_password();
+									}
+								},
+							}),
+							this.#password = Input.new({
+								id: 'password',
+								placeholder: 'Password',
+								autocomplete: 'current-password',
+								type: 'password',
+								style: { display: 'none' },
+								onkeydown: (e) => {
+									if (e.key === 'Enter') {
+										return this.#login();
 									}
 								},
 							}),
 							Button.new({
+								id: 'submit',
 								children: [ icons.next ],
 								onclick: () => this.#next(),
 							}),
@@ -58,31 +72,30 @@ export default class LoginView extends sfw.element.Container {
 		);
 	}
 
-	async #next() {
-		if (this.#input.value === '') return;
-
-		if (this.#user.innerText) {
-			await this.onlogin(this.#user.innerText, this.#input.value);
-			this.#user.innerText = '';
-			this.#input.value = '';
-			this.#input.placeholder = 'Username';
-			this.#input.autocomplete = 'username';
-			this.#input.type = 'text';
+	#next() {
+		if (this.#username.style.display == '') {
+			this.#login();
 		} else {
-			await this.onpassword(this.#input.value);
-			this.#user.innerText = this.#input.value;
-			this.#input.value = '';
-			this.#input.placeholder = 'Password';
-			this.#input.autocomplete = 'current-password';
-			this.#input.type = 'password';
+			this.#go_to_password();
 		}
 	}
 
+	#go_to_password() {
+		if (this.#username.value === '') return;
+
+		this.#username.style.display = 'none';
+		this.#password.style.display = '';
+		this.#password.focus();
+	}
+
+	async #login() {
+		await this.onlogin(this.#username.value, this.#password.value);
+		this.#reset();
+	}
+
 	#reset() {
-			this.#user.innerText = '';
-			this.#input.value = '';
-			this.#input.placeholder = 'Username';
-			this.#input.type = 'text';
+			this.#username.value = '';
+			this.#password.value = '';
 	}
 
 	set comment(value) {
@@ -99,6 +112,6 @@ export default class LoginView extends sfw.element.Container {
 	}
 
 	focus() {
-		this.#input.focus();
+		this.#username.focus();
 	}
 }