matrix: modularize

ts/form.ts

@@ -3,7 +3,7 @@ import { notificationBox, whichAnimationEvent } from "./modules/common.js";
 import { _get, _post, toggleLoader, addLoader, removeLoader, toDateString } from "./modules/common.js";
 import { loadLangSelector } from "./modules/lang.js";
 import { initValidator } from "./modules/validator.js";
-import { Discord, Telegram, ServiceConfiguration } from "./modules/account-linking.js";
+import { Discord, Telegram, Matrix, ServiceConfiguration, MatrixConfiguration } from "./modules/account-linking.js";
 
 interface formWindow extends Window {
     invalidPassword: string;
@@ -56,7 +56,7 @@ if (window.telegramEnabled) {
         pin: window.telegramPIN,
         pinURL: "",
         verifiedURL: "/invite/" + window.code + "/telegram/verified/",
-        invalidCodeError: window.messages["errorInvalidCode"],
+        invalidCodeError: window.messages["errorInvalidPIN"],
         accountLinkedError: window.messages["errorAccountLinked"],
         successError: window.messages["verified"],
         successFunc: (modalClosed: boolean) => {
@@ -88,7 +88,7 @@ if (window.discordEnabled) {
         inviteURL: window.discordInviteLink ? ("/invite/" + window.code + "/discord/invite") : "",
         pinURL: "",
         verifiedURL: "/invite/" + window.code + "/discord/verified/",
-        invalidCodeError: window.messages["errorInvalidCode"],
+        invalidCodeError: window.messages["errorInvalidPIN"],
         accountLinkedError: window.messages["errorAccountLinked"],
         successError: window.messages["verified"],
         successFunc: (modalClosed: boolean) => {
@@ -114,69 +114,30 @@ var matrixPIN = "";
 if (window.matrixEnabled) {
     window.matrixModal = new Modal(document.getElementById("modal-matrix"), window.matrixRequired);
     const matrixButton = document.getElementById("link-matrix") as HTMLSpanElement;
-    matrixButton.onclick = window.matrixModal.show;
+    
-    const submitButton = document.getElementById("matrix-send") as HTMLSpanElement;
+    const matrixConf: MatrixConfiguration = {
-    const input = document.getElementById("matrix-userid") as HTMLInputElement;
+        modal: window.matrixModal as Modal,
-    let userID = "";
+        sendMessageURL: "/invite/" + window.code + "/matrix/user",
-    submitButton.onclick = () => {
+        verifiedURL: "/invite/" + window.code + "/matrix/verified/",
-        addLoader(submitButton);
+        invalidCodeError: window.messages["errorInvalidPIN"],
-        if (userID == "") {
+        accountLinkedError: window.messages["errorAccountLinked"],
-            const send = {
+        successError: window.messages["verified"],
-                user_id: input.value
+        successFunc: () => {
-            };
+            matrixVerified = true;
-            _post("/invite/" + window.code + "/matrix/user", send, (req: XMLHttpRequest) => {
+            matrixPIN = matrix.pin;
-                if (req.readyState == 4) {
+            matrixButton.classList.add("unfocused");
-                    if (req.status == 400 && req.response["error"] == "errorAccountLinked") {
+            document.getElementById("contact-via").classList.remove("unfocused");
-                        window.matrixModal.close();
+            document.getElementById("contact-via-email").parentElement.classList.remove("unfocused");
-                        window.notifications.customError("accountLinkedError", window.messages["errorAccountLinked"]);
+            const radio = document.getElementById("contact-via-matrix") as HTMLInputElement;
-                    }
+            radio.parentElement.classList.remove("unfocused");
-                    removeLoader(submitButton);
+            radio.checked = true;
-                    userID = input.value;
+            validatorFunc();
-                    if (req.status != 200) {
-                        window.notifications.customError("errorUnknown", window.messages["errorUnknown"]);
-                        window.matrixModal.close();
-                        return;
-                    }
-                    submitButton.classList.add("~positive");
-                    submitButton.classList.remove("~info");
-                    setTimeout(() => {
-                        submitButton.classList.add("~info");
-                        submitButton.classList.remove("~positive");
-                    }, 2000);
-                    input.placeholder = "PIN";
-                    input.value = "";
-                }
-            });
-        } else {
-            _get("/invite/" + window.code + "/matrix/verified/" + userID + "/" + input.value, null, (req: XMLHttpRequest) => {
-                if (req.readyState == 4) {
-                    removeLoader(submitButton)
-                    const valid = req.response["success"] as boolean;
-                    if (valid) {
-                        window.matrixModal.close();
-                        window.notifications.customPositive("successVerified", "", window.messages["verified"]);
-                        matrixVerified = true;
-                        matrixPIN = input.value;
-                        matrixButton.classList.add("unfocused");
-                        document.getElementById("contact-via").classList.remove("unfocused");
-                        document.getElementById("contact-via-email").parentElement.classList.remove("unfocused");
-                        const radio = document.getElementById("contact-via-matrix") as HTMLInputElement;
-                        radio.parentElement.classList.remove("unfocused");
-                        radio.checked = true;
-                        validatorFunc();
-                    } else {
-                        window.notifications.customError("errorInvalidPIN", window.messages["errorInvalidPIN"]);
-                        submitButton.classList.add("~critical");
-                        submitButton.classList.remove("~info");
-                        setTimeout(() => {
-                            submitButton.classList.add("~info");
-                            submitButton.classList.remove("~critical");
-                        }, 800);
-                    }
-                }
-            },);
         }
     };
+
+    const matrix = new Matrix(matrixConf);
+
+    matrixButton.onclick = () => { matrix.show(); };
 }
 
 if (window.confirmation) {

ts/modules/account-linking.ts

@@ -1,5 +1,5 @@
 import { Modal } from "../modules/modal.js";
-import { _get, _post, toggleLoader } from "../modules/common.js";
+import { _get, _post, toggleLoader, addLoader, removeLoader } from "../modules/common.js";
 
 interface formWindow extends Window {
     invalidPassword: string;
@@ -172,3 +172,92 @@ export class Telegram extends ServiceLinker {
         this._waiting = document.getElementById("telegram-waiting") as HTMLSpanElement;
     }
 };
+
+export interface MatrixConfiguration {
+    modal: Modal;
+    sendMessageURL: string;
+    verifiedURL: string;
+    invalidCodeError: string;
+    accountLinkedError: string;
+    unknownError: string;
+    successError: string;
+    successFunc: () => void;
+}
+
+export class Matrix {
+    private _conf: MatrixConfiguration;
+    private _verified = false;
+    private _name: string = "matrix";
+    private _userID: string;
+    private _pin: string = "";
+    private _input: HTMLInputElement;
+    private _submit: HTMLSpanElement;
+
+    get verified(): boolean { return this._verified; }
+    get pin(): string { return this._pin; }
+
+    constructor(conf: MatrixConfiguration) {
+        this._conf = conf;
+        this._input = document.getElementById("matrix-userid") as HTMLInputElement;
+        this._submit = document.getElementById("matrix-send") as HTMLSpanElement;
+        this._submit.onclick = () => { this._onclick(); };
+    }
+
+    private _onclick = () => {
+        addLoader(this._submit);
+        if (this._userID == "") {
+            this._sendMessage();
+        } else {
+            this._verifyCode();
+        }
+    };
+
+    show = () => { this._conf.modal.show(); }
+
+    private _sendMessage = () => _post(this._conf.sendMessageURL, { "user_id": this._input.value }, (req: XMLHttpRequest) => {
+        if (req.readyState != 4) return;
+        removeLoader(this._submit);
+        if (req.status == 400 && req.response["error"] == "errorAccountLinked") {
+            this._conf.modal.close();
+            window.notifications.customError("accountLinkedError", this._conf.accountLinkedError);
+            return;
+        } else if (req.status != 200) {
+            this._conf.modal.close();
+            window.notifications.customError("unknownError", this._conf.unknownError);
+            return;
+        }
+        this._userID = this._input.value;
+        this._submit.classList.add("~positive");
+        this._submit.classList.remove("~info");
+        setTimeout(() => {
+            this._submit.classList.add("~info");
+            this._submit.classList.remove("~positive");
+        }, 2000);
+        this._input.placeholder = "PIN";
+        this._input.value = "";
+    });
+
+    private _verifyCode = () => _post(this._conf.verifiedURL + this._userID + "/" + this._input.value, null, (req: XMLHttpRequest) => {
+        if (req.readyState != 4) return;
+        removeLoader(this._submit);
+        const valid = req.response["success"] as boolean;
+        if (valid) {
+            this._conf.modal.close();
+            window.notifications.customPositive(this._name + "Verified", "", this._conf.successError); 
+            this._verified = true;
+            this._pin = this._input.value;
+            if (this._conf.successFunc) {
+                this._conf.successFunc();
+            }
+        } else {
+            window.notifications.customError("invalidCodeError", this._conf.invalidCodeError);
+            this._submit.classList.add("~critical");
+            this._submit.classList.remove("~info");
+            setTimeout(() => {
+                this._submit.classList.add("~info");
+                this._submit.classList.remove("~critical");
+            }, 800);
+        }
+    });
+}
+

ts/user.ts

@@ -291,7 +291,7 @@ const discordConf: ServiceConfiguration = {
     inviteURL: window.discordInviteLink ? "/my/discord/invite" : "",
     pinURL: "/my/pin/discord",
     verifiedURL: "/my/discord/verified/",
-    invalidCodeError: window.lang.notif("errorInvalidCode"),
+    invalidCodeError: window.lang.notif("errorInvalidPIN"),
     accountLinkedError: window.lang.notif("errorAccountLinked"),
     successError: window.lang.notif("verified"),
     successFunc: (modalClosed: boolean) => {
@@ -306,7 +306,7 @@ const telegramConf: ServiceConfiguration = {
     pin: "",
     pinURL: "/my/pin/telegram",
     verifiedURL: "/my/telegram/verified/",
-    invalidCodeError: window.lang.notif("errorInvalidCode"),
+    invalidCodeError: window.lang.notif("errorInvalidPIN"),
     accountLinkedError: window.lang.notif("errorAccountLinked"),
     successError: window.lang.notif("verified"),
     successFunc: (modalClosed: boolean) => {