1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import icons from 'icons';
import * as sfw from 'sfw';
const { Div, Label, H1: Title, Input, Button } = sfw.element.native;
const css = await sfw.css(import.meta.url, './index.css');
export default class LoginView extends sfw.element.Container {
#container
#input
#user
#comment
constructor() {
super({ css });
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',
onclick: () => this.#reset(),
}),
Div.new({
id: 'box',
children: [
this.#input = Input.new({
placeholder: 'Username',
onkeydown: (e) => {
if (e.key === 'Enter') {
return this.#next();
}
},
}),
Button.new({
children: [ icons.next ],
onclick: () => this.#next(),
}),
]
}),
this.#comment = Div.new({
id: 'comment',
onclick: () => this.#reset(),
}),
Div.new({
id: 'subtitle',
innerText: 'Where nostalgia is home.',
}),
]
})
);
}
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;
}
show() {
this.#container.classList.remove('hidden');
this.focus();
}
hide() {
this.#container.classList.add('hidden');
}
focus() {
this.#input.focus();
}
}
|
