Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

discord: modularize user-facing code

Browse Source 
will be done for others too, code for discord account linking in form
and userpage is now in ts/modules/account-linking.ts as a configurable
class.
This commit is contained in:
Harvey Tindall
2023-06-19 11:58:09 +01:00
parent cf7983ca11
commit 765a749959
4 changed files with 185 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/user.ts
+16 -63
View File
@@ -1,8 +1,9 @@
import { ThemeManager } from "./modules/theme.js";
import { lang, LangFile, loadLangSelector } from "./modules/lang.js";
import { Modal } from "./modules/modal.js";
import { _get, _post, notificationBox, whichAnimationEvent, toDateString, toggleLoader, DiscordInvite } from "./modules/common.js";
import { _get, _post, notificationBox, whichAnimationEvent, toDateString, toggleLoader } from "./modules/common.js";
import { Login } from "./modules/login.js";
import { Discord, DiscordConfiguration } from "./modules/account-linking.js";
interface userWindow extends Window {
jellyfinID: string;
@@ -278,70 +279,22 @@ const addEditEmail = (add: boolean): void => {
window.modals.email.show();
}
let discordModalClosed = false;
let discordPIN = "";
const addEditDiscord = (add: boolean): void => {
if (window.discordInviteLink) {
_get("/my/discord/invite", null, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
if (req.status != 200) return;
const inv = req.response as DiscordInvite;
const link = document.getElementById("discord-invite") as HTMLAnchorElement;
link.href = inv.invite;
link.target = "_blank";
link.innerHTML = `<span class="img-circle lg mr-4"><img class="img-circle" src="${inv.icon}" width="64" height="64"></span>${window.discordServerName}`;
}
});
const discordConf: DiscordConfiguration = {
modal: window.modals.discord as Modal,
pin: "",
inviteURL: window.discordInviteLink ? "/my/discord/invite" : "",
pinURL: "/my/pin/discord",
verifiedURL: "/my/discord/verified/",
invalidCodeError: window.lang.notif("errorInvalidCode"),
accountLinkedError: window.lang.notif("errorAccountLinked"),
successError: window.lang.notif("verified"),
successFunc: (modalClosed: boolean) => {
if (modalClosed) window.location.reload();
}
_get("/my/pin/discord", null, (req: XMLHttpRequest) => {
if (req.readyState == 4 && req.status == 200) {
discordPIN = req.response["pin"];
window.modals.discord.modal.querySelector(".pin").textContent = discordPIN;
}
});
const waiting = document.getElementById("discord-waiting") as HTMLSpanElement;
toggleLoader(waiting);
window.modals.discord.show();
discordModalClosed = false;
window.modals.discord.onclose = () => {
discordModalClosed = true;
toggleLoader(waiting);
}
const checkVerified = () => {
if (discordPIN == "") {
setTimeout(checkVerified, 1500);
}
if (discordModalClosed) return;
_get("/my/discord/verified/" + discordPIN, null, (req: XMLHttpRequest) => {
if (req.readyState != 4) return;
if (req.status == 401) {
window.modals.discord.close();
window.notifications.customError("invalidCodeError", window.lang.notif("errorInvalidCode"));
return;
} else if (req.status == 400) {
window.modals.discord.close();
window.notifications.customError("accountLinkedError", window.lang.notif("errorAccountLinked"));
} else if (req.status == 200) {
if (req.response["success"] as boolean) {
waiting.classList.add("~positive");
waiting.classList.remove("~info");
window.notifications.customPositive("discordVerified", "", window.lang.notif("verified"));
setTimeout(() => {
window.modals.discord.close;
window.location.reload();
}, 2000);
} else if (!discordModalClosed) {
setTimeout(checkVerified, 1500);
}
}
});
};
checkVerified();
};
let discord = new Discord(discordConf);
document.addEventListener("details-reload", () => {
_get("/my/details", null, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
@@ -368,7 +321,7 @@ document.addEventListener("details-reload", () => {
const contactMethods: { name: string, icon: string, f: (add: boolean) => void }[] = [
{name: "email", icon: `<i class="ri-mail-fill ri-lg"></i>`, f: addEditEmail},
{name: "discord", icon: `<i class="ri-discord-fill ri-lg"></i>`, f: addEditDiscord},
{name: "discord", icon: `<i class="ri-discord-fill ri-lg"></i>`, f: discord.onclick},
{name: "telegram", icon: `<i class="ri-telegram-fill ri-lg"></i>`, f: null},
{name: "matrix", icon: `<span class="font-bold">[m]</span>`, f: null}
];