Discord: split discord search into own module

Will also be used for "Send to" on the invite page.

html/admin.html

@@ -331,8 +331,8 @@
         {{ if .discord_enabled }}
         <div id="modal-discord" class="modal">
             <div class="modal-content card">
-                <span class="heading mb-1">{{ .strings.linkDiscord }}<span class="modal-close">&times;</span></span>
+                <span class="heading mb-1"><span id="discord-header"></span><span class="modal-close">&times;</span></span>
-                <p class="content mb-1">{{ .strings.searchDiscordUser }}</p>
+                <p class="content mb-1" id="discord-description"></p>
                 <div class="row">
                     <input type="search" class="col sm field ~neutral !normal input" id="discord-search" placeholder="user#1234">
                 </div>

lang/admin/en-us.json

@@ -21,6 +21,7 @@
         "apply": "Apply",
         "delete": "Delete",
         "add": "Add",
+        "select": "Select",
         "name": "Name",
         "date": "Date",
         "enabled": "Enabled",

ts/modules/accounts.ts

@@ -2,6 +2,7 @@ import { _get, _post, _delete, toggleLoader, addLoader, removeLoader, toDateStri
 import { templateEmail } from "../modules/settings.js";
 import { Marked } from "@ts-stack/markdown";
 import { stripMarkdown } from "../modules/stripmd.js";
+import { DiscordUser, newDiscordSearch } from "../modules/discord.js";
 
 interface User {
     id: string;
@@ -24,11 +25,7 @@ interface getPinResponse {
     username: string;
 }
         
-interface DiscordUser {
+var addDiscord: (passData: string) => void;
-    name: string;
-    avatar_url: string;
-    id: string;
-}
 
 class user implements User {
     private _row: HTMLTableRowElement;
@@ -51,7 +48,7 @@ class user implements User {
     private _expiryUnix: number;
     private _lastActive: HTMLTableDataCellElement;
     private _lastActiveUnix: number;
-    id: string;
+    id = "";
     private _selected: boolean;
 
     get selected(): boolean { return this._selected; }
@@ -226,7 +223,7 @@ class user implements User {
         this._discordUsername = u;
         if (u == "") {
             this._discord.innerHTML = `<span class="chip btn !low">Add</span>`;
-            (this._discord.querySelector("span") as HTMLSpanElement).onclick = this._addDiscord;
+            (this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
         } else {
             let innerHTML = `
             <div class="table-inline">
@@ -412,76 +409,6 @@ class user implements User {
         });
     }
     
-    private _timer: NodeJS.Timer;
-
-    private _discordKbListener = () => {
-        clearTimeout(this._timer);
-        const list = document.getElementById("discord-list") as HTMLTableElement;
-        const input = document.getElementById("discord-search") as HTMLInputElement;
-        if (input.value.length < 2) {
-            return;
-        }
-        list.innerHTML = ``;
-        addLoader(list);
-        list.parentElement.classList.add("mb-1", "mt-1");
-        this._timer = setTimeout(() => {
-            _get("/users/discord/" + input.value, null, (req: XMLHttpRequest) => {
-                if (req.readyState == 4) {
-                    if (req.status != 200) {
-                        removeLoader(list);
-                        list.parentElement.classList.remove("mb-1", "mt-1");
-                        return;
-                    }
-                    const users = req.response["users"] as Array<DiscordUser>;
-                    let innerHTML = ``;
-                    for (let i = 0; i < users.length; i++) {
-                        innerHTML += `
-                        <tr>
-                            <td class="img-circle sm">
-                                <img class="img-circle" src="${users[i].avatar_url}" width="32" height="32">
-                            </td>
-                            <td class="w-100 sm">
-                                <p class="content">${users[i].name}</p>
-                            </td>
-                            <td class="sm">
-                                <span id="discord-user-${users[i].id}" class="button ~info !high">${window.lang.strings("add")}</span>
-                            </td>
-                        </tr>
-                        `;
-                    }
-                    list.innerHTML = innerHTML;
-                    removeLoader(list);
-                    list.parentElement.classList.remove("mb-1", "mt-1");
-                    for (let i = 0; i < users.length; i++) {
-                        const button = document.getElementById(`discord-user-${users[i].id}`) as HTMLInputElement;
-                        button.onclick = () => _post("/users/discord", {jf_id: this.id, discord_id: users[i].id}, (req: XMLHttpRequest) => {
-                            if (req.readyState == 4) {
-                                document.dispatchEvent(new CustomEvent("accounts-reload"));
-                                if (req.status != 200) {
-                                    window.notifications.customError("errorConnectDiscord", window.lang.notif("errorFailureCheckLogs"));
-                                    return
-                                }
-                                window.notifications.customSuccess("discordConnected", window.lang.notif("accountConnected"));
-                                window.modals.discord.close()
-                            }
-                        });
-                    }
-                }
-            });
-        }, 750);
-    }
-
-    private _addDiscord = () => {
-        if (!window.discordEnabled) { return; }
-        const input = document.getElementById("discord-search") as HTMLInputElement;
-        const list = document.getElementById("discord-list") as HTMLDivElement;
-        list.innerHTML = ``;
-        input.value = "";
-        input.removeEventListener("keyup", this._discordKbListener);
-        input.addEventListener("keyup", this._discordKbListener);
-        window.modals.discord.show();
-    }
-
     private _addTelegram = () => _get("/telegram/pin", null, (req: XMLHttpRequest) => {
         if (req.readyState == 4 && req.status == 200) {
             const pin = document.getElementById("telegram-pin");
@@ -1149,6 +1076,19 @@ export class accountsList {
         };
 
         this._announceTextarea.onkeyup = this.loadPreview;
+        addDiscord = newDiscordSearch(window.lang.strings("linkDiscord"), window.lang.strings("searchDiscordUser"), window.lang.strings("add"), (user: DiscordUser, id: string) => { 
+            _post("/users/discord", {jf_id: id, discord_id: user.id}, (req: XMLHttpRequest) => {
+                if (req.readyState == 4) {
+                    document.dispatchEvent(new CustomEvent("accounts-reload"));
+                    if (req.status != 200) {
+                        window.notifications.customError("errorConnectDiscord", window.lang.notif("errorFailureCheckLogs"));
+                        return
+                    }
+                    window.notifications.customSuccess("discordConnected", window.lang.notif("accountConnected"));
+                    window.modals.discord.close()
+                }
+            });
+        });
     }
 
     reload = () => _get("/users", null, (req: XMLHttpRequest) => {

ts/modules/discord.ts

@@ -0,0 +1,79 @@
+import {addLoader, removeLoader, _get} from "../modules/common.js";
+
+export interface DiscordUser {
+    name: string;
+    avatar_url: string;
+    id: string;
+}
+
+var listeners: { [buttonText: string]: (event: CustomEvent) => void } = {};
+
+export function newDiscordSearch(title: string, description: string, buttonText: string, buttonFunction: (user: DiscordUser, passData: string) => void): (passData: string) => void {
+    if (!window.discordEnabled) {
+        return () => {};
+    }
+    let timer: NodeJS.Timer;
+    listeners[buttonText] = (event: CustomEvent) => {
+        clearTimeout(timer);
+        const list = document.getElementById("discord-list") as HTMLTableElement;
+        const input = document.getElementById("discord-search") as HTMLInputElement;
+        if (input.value.length < 2) {
+            return;
+        }
+        list.innerHTML = ``;
+        addLoader(list);
+        list.parentElement.classList.add("mb-1", "mt-1");
+        timer = setTimeout(() => {
+            _get("/users/discord/" + input.value, null, (req: XMLHttpRequest) => {
+                if (req.readyState == 4) {
+                    if (req.status != 200) {
+                        removeLoader(list);
+                        list.parentElement.classList.remove("mb-1", "mt-1");
+                        return;
+                    }
+                    const users = req.response["users"] as Array<DiscordUser>;
+                    let innerHTML = ``;
+                    for (let i = 0; i < users.length; i++) {
+                        innerHTML += `
+                        <tr>
+                            <td class="img-circle sm">
+                                <img class="img-circle" src="${users[i].avatar_url}" width="32" height="32">
+                            </td>
+                            <td class="w-100 sm">
+                                <p class="content">${users[i].name}</p>
+                            </td>
+                            <td class="sm">
+                                <span id="discord-user-${users[i].id}" class="button ~info !high">${buttonText}</span>
+                            </td>
+                        </tr>
+                        `;
+                    }
+                    list.innerHTML = innerHTML;
+                    removeLoader(list);
+                    list.parentElement.classList.remove("mb-1", "mt-1");
+                    for (let i = 0; i < users.length; i++) {
+                        const button = document.getElementById(`discord-user-${users[i].id}`) as HTMLInputElement;
+                        button.onclick = () => buttonFunction(users[i], event.detail);
+                    }
+                }
+            });
+        }, 750);
+    }
+
+    return (passData: string) => {
+        const input = document.getElementById("discord-search") as HTMLInputElement;
+        const list = document.getElementById("discord-list") as HTMLDivElement;
+        const header = document.getElementById("discord-header") as HTMLSpanElement;
+        const desc = document.getElementById("discord-description") as HTMLParagraphElement;
+        desc.textContent = description;
+        header.textContent = title;
+        list.innerHTML = ``;
+        input.value = "";
+        for (let key in listeners) {
+            input.removeEventListener("keyup", listeners[key]);
+        }
+        input.addEventListener("keyup", listeners[buttonText].bind(null, { detail: passData }));
+
+        window.modals.discord.show();
+    }
+}