implement login

1 files changed, 53 insertions, 13 deletions

diff --git a/static/pages/login/index.js b/static/pages/login/index.js
index fc14dbf..07c0aa2 100644
--- a/static/pages/login/index.js
+++ b/static/pages/login/index.js
@@ -1,42 +1,53 @@
 import * as sfw from 'sfw';
 const { Div, Label, H1: Title, Input, Button } = sfw.element.native;
 
+import icons from '../../icons/index.js';
+
 const css = await sfw.css(import.meta.url, './index.css');
 
 export default class LoginView extends sfw.element.Container {
+	#input
 	#user
-	#password
+	#comment
 
 	constructor() {
 		super({ css });
 
 		this.onlogin = () => {};
+		this.onpassword = () => {};
+
+		this.#user = null;
 
 		this.body.append(
 			Div.new({
 				id: 'container',
 				children: [
 					Div.new({ id: 'title', innerText: 'Memora' }),
+					this.#user = Div.new({
+						id: 'username',
+						onclick: () => this.#reset(),
+					}),
 					Div.new({
 						id: 'box',
 						children: [
-
-							Div.new({
-								id: 'form',
-								children: [
-									Label.new({ innerText: 'User' }),
-									this.#user = Input.new({ }),
-
-									Label.new({ innerText: 'Password' }),
-									this.#password = Input.new({ type: 'password' }),
-								]
+							this.#input = Input.new({
+								placeholder: 'Username',
+								onkeydown: (e) => {
+									if (e.key === 'Enter') {
+										return this.#next();
+									}
+								},
 							}),
 							Button.new({
-								innerText: 'Login',
-								onclick: () => this.onlogin(this.#user.value, this.#password.value),
+								children: [ icons.next ],
+								onclick: () => this.#next(),
 							}),
 						]
 					}),
+					this.#comment = Div.new({
+						id: 'comment',
+						onclick: () => this.#reset(),
+					}),
 					Div.new({
 						id: 'subtitle',
 						innerText: 'Where nostalgia is home.',
@@ -45,4 +56,33 @@ 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.type = 'text';
+		} else {
+			await this.onpassword(this.#input.value);
+			this.#user.innerText = this.#input.value;
+			this.#input.value = '';
+			this.#input.placeholder = 'Password';
+			this.#input.type = 'password';
+		}
+	}
+
+	#reset() {
+			this.#user.innerText = '';
+			this.#input.value = '';
+			this.#input.placeholder = 'Username';
+			this.#input.type = 'text';
+	}
+
+	set comment(value) {
+		this.#comment.innerText = value;
+	}
 }