aboutsummaryrefslogtreecommitdiff
path: root/static/pages/login/index.js
diff options
context:
space:
mode:
Diffstat (limited to 'static/pages/login/index.js')
-rw-r--r--static/pages/login/index.js118
1 files changed, 0 insertions, 118 deletions
diff --git a/static/pages/login/index.js b/static/pages/login/index.js
deleted file mode 100644
index 0390cc0..0000000
--- a/static/pages/login/index.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import icons from 'icons';
-import * as sfw from 'sfw';
-const { Div, Label, H1: Title, Input, Button, Form } = sfw.element.native;
-
-import stylesheet from './index.css';
-
-const css = await sfw.css.sheet(stylesheet);
-
-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();
- }
-}