From 85eea23d98be29c66d524a76884d2185bbdac3cb Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Thu, 27 Nov 2025 10:50:18 +0000
Subject: [PATCH] accounts: share telegram linking modal with other pages

the one on the admin page was a little messed up anyway. Not relevant to
the other linking modals, as the process is different (simpler) on the
admin page.
---
 html/account-linking-discord.html  | 16 +++++++++
 html/account-linking-matrix.html   | 18 ++++++++++
 html/account-linking-telegram.html | 18 ++++++++++
 html/account-linking.html          | 55 ++----------------------------
 html/admin.html                    | 19 +----------
 ts/modules/accounts.ts             |  7 ++--
 6 files changed, 60 insertions(+), 73 deletions(-)
 create mode 100644 html/account-linking-discord.html
 create mode 100644 html/account-linking-matrix.html
 create mode 100644 html/account-linking-telegram.html

diff --git a/html/account-linking-discord.html b/html/account-linking-discord.html
new file mode 100644
index 0000000..4d25dd6
--- /dev/null
+++ b/html/account-linking-discord.html
@@ -0,0 +1,16 @@
+{{ if .discordEnabled }}
+<div id="modal-discord" class="modal">
+    <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+        <span class="heading mb-4">{{ .strings.linkDiscord }}</span>
+        <p class="content mb-4"> {{ .discordSendPINMessage }}</p>
+        <h1 class="text-center text-2xl mb-2 pin"></h1>
+        <div class="row center">
+            <a class="my-5 hover:underline">
+                <span class="mr-2">{{ .strings.joinTheServer }}</span>
+                <span id="discord-invite"></span>
+            </a>
+        </div>
+        <span class="button ~info @low full-width center mt-4" id="discord-waiting">{{ .strings.success }}</span>
+    </div>
+</div>
+{{ end }}
diff --git a/html/account-linking-matrix.html b/html/account-linking-matrix.html
new file mode 100644
index 0000000..02865ff
--- /dev/null
+++ b/html/account-linking-matrix.html
@@ -0,0 +1,18 @@
+{{ if .matrixEnabled }}
+<div id="modal-matrix" class="modal">
+    <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+        <span class="heading mb-4">{{ .strings.linkMatrix }}</span>
+        <p class="content mb-4"> {{ .strings.matrixEnterUser }}</p>
+        <input type="text" class="input ~neutral @high" placeholder="@user:riot.im" id="matrix-userid">
+        <div class="subheading link-center mt-4">
+            <span class="shield ~info mr-4">
+                <span class="icon">
+                    <i class="ri-chat-3-line"></i>
+                </span>
+            </span>
+            {{ .matrixUser }}
+        </div>
+        <span class="button ~info @low full-width center mt-4" id="matrix-send">{{ .strings.submit }}</span>
+    </div>
+</div>
+{{ end }}
diff --git a/html/account-linking-telegram.html b/html/account-linking-telegram.html
new file mode 100644
index 0000000..7c8fae7
--- /dev/null
+++ b/html/account-linking-telegram.html
@@ -0,0 +1,18 @@
+{{ if .telegramEnabled }}
+<div id="modal-telegram" class="modal">
+    <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+        <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
+        <p class="content mb-4">{{ .strings.sendPIN }}</p>
+        <p class="text-center text-2xl mb-2 pin"></p>
+        <a class="subheading link link-center" href="{{ .telegramURL }}" target="_blank">
+            <span class="shield ~info mr-4">
+                <span class="icon">
+                    <i class="ri-telegram-line"></i>
+                </span>
+            </span>
+            &#64;<span class="username">{{ .telegramUsername }}</span>
+        </a>
+        <span class="button ~info @low full-width center mt-4" id="telegram-waiting">{{ .strings.success }}</span>
+    </div>
+</div>
+{{ end }}
diff --git a/html/account-linking.html b/html/account-linking.html
index e38f013..2ff6525 100644
--- a/html/account-linking.html
+++ b/html/account-linking.html
@@ -1,52 +1,3 @@
-{{ if .discordEnabled }}
-<div id="modal-discord" class="modal">
-    <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
-        <span class="heading mb-4">{{ .strings.linkDiscord }}</span>
-        <p class="content mb-4"> {{ .discordSendPINMessage }}</p>
-        <h1 class="text-center text-2xl mb-2 pin"></h1>
-        <div class="row center">
-            <a class="my-5 hover:underline">
-                <span class="mr-2">{{ .strings.joinTheServer }}</span>
-                <span id="discord-invite"></span>
-            </a>
-        </div>
-        <span class="button ~info @low full-width center mt-4" id="discord-waiting">{{ .strings.success }}</span>
-    </div>
-</div>
-{{ end }}
-{{ if .telegramEnabled }}
-<div id="modal-telegram" class="modal">
-    <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
-        <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
-        <p class="content mb-4">{{ .strings.sendPIN }}</p>
-        <p class="text-center text-2xl mb-2 pin"></p>
-        <a class="subheading link-center" href="{{ .telegramURL }}" target="_blank">
-            <span class="shield ~info mr-4">
-                <span class="icon">
-                    <i class="ri-telegram-line"></i>
-                </span>
-            </span>
-            &#64;{{ .telegramUsername }}
-        </a>
-        <span class="button ~info @low full-width center mt-4" id="telegram-waiting">{{ .strings.success }}</span>
-    </div>
-</div>
-{{ end }}
-{{ if .matrixEnabled }}
-<div id="modal-matrix" class="modal">
-    <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
-        <span class="heading mb-4">{{ .strings.linkMatrix }}</span>
-        <p class="content mb-4"> {{ .strings.matrixEnterUser }}</p>
-        <input type="text" class="input ~neutral @high" placeholder="@user:riot.im" id="matrix-userid">
-        <div class="subheading link-center mt-4">
-            <span class="shield ~info mr-4">
-                <span class="icon">
-                    <i class="ri-chat-3-line"></i>
-                </span>
-            </span>
-            {{ .matrixUser }}
-        </div>
-        <span class="button ~info @low full-width center mt-4" id="matrix-send">{{ .strings.submit }}</span>
-    </div>
-</div>
-{{ end }}
+{{ template "account-linking-discord.html" . }}
+{{ template "account-linking-telegram.html" . }}
+{{ template "account-linking-matrix.html" . }}
diff --git a/html/admin.html b/html/admin.html
index 580963b..2be07c1 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -491,24 +491,7 @@
                 <span class="button ~urge @low full-width center mt-2" id="update-update">{{ .strings.update }}</span>
             </div>
         </div>
-        {{ if .telegramEnabled }}
-        <div id="modal-telegram" class="modal">
-            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
-                <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
-                <p class="content mb-4">{{ .strings.sendPIN }}</p>
-                <h1 class="ac" id="telegram-pin"></h1>
-                <a class="subheading link-center" id="telegram-link" target="_blank">
-                    <span class="shield ~info mr-2">
-                        <span class="icon">
-                            <i class="ri-telegram-line"></i>
-                        </span>
-                    </span>
-                    &#64;<span id="telegram-username">
-                </a>
-                <span class="button ~info @low full-width center mt-4" id="telegram-waiting">{{ .strings.success }}</span>
-            </div>
-        </div>
-        {{ end }}
+        {{ template "account-linking-telegram.html" . }}
         {{ if .discordEnabled }}
         <div id="modal-discord" class="modal">
             <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 8e9523d..a677c3a 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -750,9 +750,10 @@ class user implements User, SearchableItem {
     
     private _addTelegram = () => _get("/telegram/pin", null, (req: XMLHttpRequest) => {
         if (req.readyState == 4 && req.status == 200) {
-            const pin = document.getElementById("telegram-pin");
-            const link = document.getElementById("telegram-link") as HTMLAnchorElement;
-            const username = document.getElementById("telegram-username") as HTMLSpanElement;
+            const modal = window.modals.telegram.modal;
+            const pin = modal.getElementsByClassName("pin")[0] as HTMLElement;
+            const link = modal.getElementsByClassName("link")[0] as HTMLAnchorElement;
+            const username = modal.getElementsByClassName("username")[0] as HTMLElement;
             const waiting = document.getElementById("telegram-waiting") as HTMLSpanElement;
             let resp = req.response as getPinResponse;
             pin.textContent = resp.token;