login: modularize frontend code

all in ts/modules/login.ts

html/login-modal.html

@@ -1,5 +1,5 @@
 <div id="modal-login" class="modal">
-    <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-login" href="">
+    <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 form-login" href="">
         <span class="heading">{{ .strings.login }}</span>
         <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
         <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">

ts/admin.ts

@@ -6,8 +6,9 @@ import { inviteList, createInvite } from "./modules/invites.js";
 import { accountsList } from "./modules/accounts.js";
 import { settingsList } from "./modules/settings.js";
 import { ProfileEditor } from "./modules/profiles.js";
-import { _get, _post, notificationBox, whichAnimationEvent, toggleLoader } from "./modules/common.js";
+import { _get, _post, notificationBox, whichAnimationEvent } from "./modules/common.js";
 import { Updater } from "./modules/update.js";
+import { Login } from "./modules/login.js";
 
 let theme = new nightwind();
 
@@ -165,75 +166,25 @@ window.onpopstate = (event: PopStateEvent) => {
     window.tabs.switch(event.state);
 }
 
-function login(username: string, password: string, run?: (state?: number) => void) {
+const login = new Login(window.modals.login as Modal, "/");
-    const req = new XMLHttpRequest();
+login.onLogin = () => {
-    req.responseType = 'json';
+    window.updater = new Updater();
-    let url = window.URLBase;
+    setInterval(() => { window.invites.reload(); accounts.reload(); }, 30*1000);
-    const refresh = (username == "" && password == "");
+    const currentTab = window.tabs.current;
-    if (refresh) {
+    switch (currentTab) {
-        url += "/token/refresh";
+        case "invites":
-    } else {
+            window.invites.reload();
-        url += "/token/login";
+            break;
+        case "accounts":
+            accounts.reload();
+            break;
+        case "settings":
+            settings.reload();
+            break;
     }
-    req.open("GET", url, true);
-    if (!refresh) {
-        req.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
-    }
-    req.onreadystatechange = function (): void {
-        if (this.readyState == 4) {
-            if (this.status != 200) {
-                let errorMsg = window.lang.notif("errorConnection");
-                if (this.response) {
-                    errorMsg = this.response["error"];
-                }
-                if (!errorMsg) {
-                    errorMsg = window.lang.notif("errorUnknown");
-                }
-                if (!refresh) {
-                    window.notifications.customError("loginError", errorMsg);
-                } else {
-                    window.modals.login.show();
-                }
-            } else {
-                const data = this.response;
-                window.token = data["token"];
-                window.updater = new Updater(); // mmm, a race condition
-                window.modals.login.close();
-                setInterval(() => { window.invites.reload(); accounts.reload(); }, 30*1000);
-                const currentTab = window.tabs.current;
-                switch (currentTab) {
-                    case "invites":
-                        window.invites.reload();
-                        break;
-                    case "accounts":
-                        accounts.reload();
-                        break;
-                    case "settings":
-                        settings.reload();
-                        break;
-                }
-                document.getElementById("logout-button").classList.remove("unfocused");
-            }
-            if (run) { run(+this.status); }
-        }
-    };
-    req.send();
 }
 
-(document.getElementById('form-login') as HTMLFormElement).onsubmit = (event: SubmitEvent) => {
+login.login("", "");
-    event.preventDefault();
-    const button = (event.target as HTMLElement).querySelector(".submit") as HTMLSpanElement;
-    const username = (document.getElementById("login-user") as HTMLInputElement).value;
-    const password = (document.getElementById("login-password") as HTMLInputElement).value;
-    if (!username || !password) {
-        window.notifications.customError("loginError", window.lang.notif("errorLoginBlank"));
-        return;
-    }
-    toggleLoader(button);
-    login(username, password, () => toggleLoader(button));
-};
-
-login("", "");
 
 (document.getElementById('logout-button') as HTMLButtonElement).onclick = () => _post("/logout", null, (req: XMLHttpRequest): boolean => {
     if (req.readyState == 4 && req.status == 200) {

ts/modules/login.ts

@@ -0,0 +1,73 @@
+import { Modal } from "../modules/modal.js";
+import { toggleLoader } from "../modules/common.js";
+
+export class Login {
+    private _modal: Modal;
+    private _form: HTMLFormElement;
+    private _url: string;
+    private _onLogin: (username: string, password: string) => void;
+
+    constructor(modal: Modal, endpoint: string) {
+
+        this._url = window.URLBase + endpoint;
+        if (this._url[this._url.length-1] != '/') this._url += "/";
+        this._url += "token/";
+
+        this._modal = modal;
+        this._form = this._modal.asElement().querySelector(".form-login") as HTMLFormElement;
+        this._form.onsubmit = (event: SubmitEvent) => {
+            event.preventDefault();
+            const button = (event.target as HTMLElement).querySelector(".submit") as HTMLSpanElement;
+            const username = (document.getElementById("login-user") as HTMLInputElement).value;
+            const password = (document.getElementById("login-password") as HTMLInputElement).value;
+            if (!username || !password) {
+                window.notifications.customError("loginError", window.lang.notif("errorLoginBlank"));
+                return;
+            }
+            toggleLoader(button);
+            this.login(username, password, () => toggleLoader(button));
+        };
+    }
+
+    get onLogin() { return this._onLogin; }
+    set onLogin(f: (username: string, password: string) => void) { this._onLogin = f; }
+
+    login = (username: string, password: string, run?: (state?: number) => void) => {
+        const req = new XMLHttpRequest();
+        req.responseType = 'json';
+        const refresh = (username == "" && password == "");
+        req.open("GET", this._url + (refresh ? "refresh" : "login"), true);
+        if (!refresh) {
+            req.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
+        }
+        req.onreadystatechange = ((req: XMLHttpRequest, _: Event): any => {
+            if (req.readyState == 4) {
+                if (req.status != 200) {
+                    let errorMsg = window.lang.notif("errorConnection");
+                    if (req.response) {
+                        errorMsg = req.response["error"];
+                    }
+                    if (!errorMsg) {
+                        errorMsg = window.lang.notif("errorUnknown");
+                    }
+                    if (!refresh) {
+                        window.notifications.customError("loginError", errorMsg);
+                    } else {
+                        this._modal.show();
+                    }
+                } else {
+                    const data = req.response;
+                    window.token = data["token"];
+                    if (this._onLogin) {
+                        this._onLogin(username, password);
+                    }
+                    this._modal.close();
+                    document.getElementById("logout-button").classList.remove("unfocused");
+                }
+                if (run) { run(+req.status); }
+            }
+        }).bind(this, req);
+        req.send();
+    };
+}
+

ts/modules/modal.ts

@@ -54,4 +54,6 @@ export class Modal implements Modal {
             this.show();
         }
     }
+
+    asElement = () => { return this.modal; }
 }