implement login

2 files changed, 95 insertions, 40 deletions

diff --git a/static/pages/login/index.css b/static/pages/login/index.css
index 8a59d83..aa6726e 100644
--- a/static/pages/login/index.css
+++ b/static/pages/login/index.css
@@ -12,12 +12,52 @@
 	transform: translate(-50%, -50%);
 	max-width: 300px;
 	width: 100%;
-	padding: 20px;
+	padding: 0px;
 	box-shadow: #223223aa 1px 1px 4px;
 	border-radius: var(--border-radius);
+	z-index: 2000;
+	display: grid;
+	grid-template-columns: auto 30px;
 	background: #ffffff99;
 	backdrop-filter: blur(10px);
-	z-index: 2000;
+}
+
+#box input {
+	border-top-right-radius: 0px;
+	border-bottom-right-radius: 0px;
+	background: #0000;
+}
+
+#box button {
+	border-top-left-radius: 0px;
+	border-bottom-left-radius: 0px;
+	background: var(--page-background);
+	color: var(--fg);
+	padding: 5px;
+	background: #0000;
+}
+
+#username {
+	position: absolute;
+	top: calc(50% - 40px);
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 10000;
+	user-select: none;
+	color: var(--fg-primary);
+	font-size: 0.8em;
+	cursor: pointer;
+}
+#comment {
+	position: absolute;
+	top: calc(50% + 40px);
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 10000;
+	user-select: none;
+	color: var(--primary);
+	font-size: 0.8em;
+	cursor: pointer;
 }
 
 #title {
@@ -88,31 +128,6 @@
 	z-index: -2;
 	animation: right-bubble 1s normal forwards ease;
 }
-
-#form {
-	display: grid;
-	grid-template-columns: 100px auto;
-	max-width: 300px;
-	width: 100%;
-	margin: 0;
-	margin-bottom: 20px;
-	border-radius: 3px;
-	gap: 10px;
-}
-
-#form input {
-	width: 100%;
-}
-
-#form label {
-	margin: auto 0px;
-	font-weight: bold;
-}
-
-button {
-	width: 100%;
-}
-
 #subtitle {
 	position: absolute;
 	bottom: 50px;
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;
+	}
 }