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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
import icons from 'icons';
import * as sfw from 'sfw';
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
#user
#username
#password
#comment
constructor() {
super({ css });
this.onlogin = () => {};
this.onpassword = () => {};
this.body.append(
this.#container = Div.new({
id: 'container',
children: [
Div.new({ id: 'title', innerText: 'Memora' }),
this.#user = Div.new({
id: 'username-label',
onclick: () => this.#reset(),
}),
Form.new({
id: 'box',
onsubmit: (e) => e.preventDefault(),
children: [
this.#username = Input.new({
id: 'username',
placeholder: 'Username',
autocomplete: 'username',
}),
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(),
}),
]
}),
this.#comment = Div.new({
id: 'comment',
onclick: () => this.#reset(),
}),
Div.new({
id: 'subtitle',
innerText: 'Where nostalgia is home.',
}),
]
})
);
}
#next() {
if (this.#username.style.display != 'none') {
this.#go_to_password();
} else {
this.#login();
}
}
#go_to_password() {
if (this.#username.value === '') return;
this.#user.innerText = this.#username.value;
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.#username.value = '';
this.#password.value = '';
this.#username.style.display = '';
this.#password.style.display = 'none';
}
set comment(value) {
this.#comment.innerText = value;
}
show() {
this.#container.classList.remove('hidden');
this.focus();
}
hide() {
this.#container.classList.add('hidden');
}
focus() {
this.#username.focus();
}
}
|
