From 96c51af15ad6b2cf348a2ec5ef2391c3a8f3fa0c Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Tue, 20 Jun 2023 12:57:52 +0100 Subject: [PATCH] matrix: modularize --- ts/form.ts | 89 ++++++++++------------------------ ts/modules/account-linking.ts | 91 ++++++++++++++++++++++++++++++++++- ts/user.ts | 4 +- 3 files changed, 117 insertions(+), 67 deletions(-) diff --git a/ts/form.ts b/ts/form.ts index 59f4de2..3722c23 100644 --- a/ts/form.ts +++ b/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 input = document.getElementById("matrix-userid") as HTMLInputElement; - let userID = ""; - submitButton.onclick = () => { - addLoader(submitButton); - if (userID == "") { - const send = { - user_id: input.value - }; - _post("/invite/" + window.code + "/matrix/user", send, (req: XMLHttpRequest) => { - if (req.readyState == 4) { - if (req.status == 400 && req.response["error"] == "errorAccountLinked") { - window.matrixModal.close(); - window.notifications.customError("accountLinkedError", window.messages["errorAccountLinked"]); - } - removeLoader(submitButton); - userID = input.value; - 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 matrixConf: MatrixConfiguration = { + modal: window.matrixModal as Modal, + sendMessageURL: "/invite/" + window.code + "/matrix/user", + verifiedURL: "/invite/" + window.code + "/matrix/verified/", + invalidCodeError: window.messages["errorInvalidPIN"], + accountLinkedError: window.messages["errorAccountLinked"], + successError: window.messages["verified"], + successFunc: () => { + matrixVerified = true; + matrixPIN = matrix.pin; + 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(); } }; + + const matrix = new Matrix(matrixConf); + + matrixButton.onclick = () => { matrix.show(); }; } if (window.confirmation) { diff --git a/ts/modules/account-linking.ts b/ts/modules/account-linking.ts index 61bed1e..d14fcbb 100644 --- a/ts/modules/account-linking.ts +++ b/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); + } + }); +} + diff --git a/ts/user.ts b/ts/user.ts index bf621c1..7c334d8 100644 --- a/ts/user.ts +++ b/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) => {