import { toggleTheme, loadTheme } from "./modules/theme.js"; import { Modal } from "./modules/modal.js"; import { Tabs } from "./modules/tabs.js"; import { inviteList } from "./modules/invites.js"; import { notificationBox } from "./modules/common.js"; loadTheme(); (document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme; const whichAnimationEvent = () => { const el = document.createElement("fakeElement"); if (el.style["animation"] !== void 0) { return "animationend"; } return "webkitAnimationEnd"; } window.animationEvent = whichAnimationEvent(); window.notifications = new notificationBox(document.getElementById('notification-box') as HTMLDivElement, 5); const checkInfUses = function (check: HTMLInputElement, mode = 2) { const uses = document.getElementById('inv-uses') as HTMLInputElement; if (mode == 2) { uses.disabled = check.checked; check.parentElement.classList.toggle('~neutral'); check.parentElement.classList.toggle('~urge'); check.parentElement.parentElement.nextElementSibling.classList.toggle('unfocused'); } else if (mode == 1) { uses.disabled = true; check.checked = true; check.parentElement.classList.remove('~neutral'); check.parentElement.classList.add('~urge'); check.parentElement.parentElement.nextElementSibling.classList.remove('unfocused'); } else { uses.disabled = false; check.checked = false; check.parentElement.classList.remove('~urge'); check.parentElement.classList.add('~neutral'); check.parentElement.parentElement.nextElementSibling.classList.add('unfocused'); } }; let invInfUses = document.getElementById('inv-inf-uses') as HTMLInputElement; invInfUses.onclick = () => { checkInfUses(invInfUses, 2); }; const checkEmailEnabled = function (check: HTMLInputElement, mode = 2) { const input = document.getElementById('inv-email') as HTMLInputElement; if (mode == 2) { input.disabled = !check.checked; check.parentElement.classList.toggle('~neutral'); check.parentElement.classList.toggle('~urge'); } else if (mode == 1) { input.disabled = false; check.checked = true; check.parentElement.classList.remove('~neutral'); check.parentElement.classList.add('~urge'); } else { input.disabled = true; check.checked = false; check.parentElement.classList.remove('~urge'); check.parentElement.classList.add('~neutral'); } }; let invEmailEnabled = document.getElementById('inv-email-enabled') as HTMLInputElement; invEmailEnabled.onchange = () => { checkEmailEnabled(invEmailEnabled, 2); }; checkInfUses(invInfUses, 0); checkEmailEnabled(invEmailEnabled, 0); const loadAccounts = function () { const rows: HTMLTableRowElement[] = Array.from(document.getElementById("accounts-list").children); const selectAll = document.getElementById("accounts-select-all") as HTMLInputElement; selectAll.onchange = () => { for (let i = 0; i < rows.length; i++) { (rows[i].querySelector("input[type=checkbox]") as HTMLInputElement).checked = selectAll.checked; } } const checkAllChecks = (state: boolean): boolean => { let s = true; for (let i = 0; i < rows.length; i++) { const selectCheck = rows[i].querySelector("input[type=checkbox]") as HTMLInputElement; if (selectCheck.checked != state) { s = false; break; } } return s } for (let i = 0; i < rows.length; i++) { const row = rows[i]; const selectCheck = row.querySelector("input[type=checkbox]") as HTMLInputElement; selectCheck.addEventListener("change", () => { if (checkAllChecks(false)) { selectAll.indeterminate = false; selectAll.checked = false; } else if (checkAllChecks(true)) { selectAll.checked = true; selectAll.indeterminate = false; } else { selectAll.indeterminate = true; selectAll.checked = false; } }); const editButton = row.querySelector(".icon") as HTMLElement; const emailInput = row.querySelector(".input") as HTMLInputElement; const outerClickListener = (event: Event) => { if (!(event.target instanceof HTMLElement && (emailInput.contains(event.target) || editButton.contains(event.target)))) { emailInput.classList.toggle('stealth-input-hidden'); emailInput.readOnly = !emailInput.readOnly; editButton.classList.toggle('ri-edit-line'); editButton.classList.toggle('ri-check-line'); document.removeEventListener('click', outerClickListener); } }; editButton.onclick = function () { emailInput.classList.toggle('stealth-input-hidden'); emailInput.readOnly = !emailInput.readOnly; editButton.classList.toggle('ri-edit-line'); editButton.classList.toggle('ri-check-line'); if (editButton.classList.contains('ri-check-line')) { document.addEventListener('click', outerClickListener); } }; } }; const modifySettingsSource = function () { const profile = document.getElementById('radio-use-profile') as HTMLInputElement; const user = document.getElementById('radio-use-user') as HTMLInputElement; const profileSelect = document.getElementById('modify-user-profiles') as HTMLDivElement; const userSelect = document.getElementById('modify-user-users') as HTMLDivElement; (user.nextElementSibling as HTMLSpanElement).classList.toggle('!normal'); (user.nextElementSibling as HTMLSpanElement).classList.toggle('!high'); (profile.nextElementSibling as HTMLSpanElement).classList.toggle('!normal'); (profile.nextElementSibling as HTMLSpanElement).classList.toggle('!high'); profileSelect.classList.toggle('unfocused'); userSelect.classList.toggle('unfocused'); } const radioUseProfile = document.getElementById('radio-use-profile') as HTMLInputElement; radioUseProfile.addEventListener("change", modifySettingsSource); radioUseProfile.checked = true; const radioUseUser = document.getElementById('radio-use-user') as HTMLInputElement; radioUseUser.addEventListener("change", modifySettingsSource); radioUseUser.checked = false; const checkDeleteUserNotify = function () { if ((document.getElementById('delete-user-notify') as HTMLInputElement).checked) { document.getElementById('textarea-delete-user').classList.remove('unfocused'); } else { document.getElementById('textarea-delete-user').classList.add('unfocused'); } }; (document.getElementById('delete-user-notify') as HTMLInputElement).onchange = checkDeleteUserNotify; checkDeleteUserNotify(); // load tabs window.tabs = new Tabs(); for (let tabID of ["invitesTab", "accountsTab", "settingsTab"]) { window.tabs.addTab(tabID); } window.tabs.addTab("accountsTab", loadAccounts); // load modals (() => { window.modals = {} as Modals; window.modals.login = new Modal(document.getElementById('modal-login'), true); document.getElementById('modalButton').onclick = window.modals.login.toggle; window.modals.addUser = new Modal(document.getElementById('modal-add-user')); (document.getElementById('accounts-add-user') as HTMLSpanElement).onclick = window.modals.addUser.toggle; document.getElementById('form-add-user').addEventListener('submit', window.modals.addUser.close); window.modals.about = new Modal(document.getElementById('modal-about')); (document.getElementById('setting-about') as HTMLSpanElement).onclick = window.modals.about.toggle; window.modals.modifyUser = new Modal(document.getElementById('modal-modify-user')); document.getElementById('form-modify-user').addEventListener('submit', window.modals.modifyUser.close); (document.getElementById('accounts-modify-user') as HTMLSpanElement).onclick = window.modals.modifyUser.toggle; window.modals.deleteUser = new Modal(document.getElementById('modal-delete-user')); document.getElementById('form-delete-user').addEventListener('submit', window.modals.deleteUser.close); (document.getElementById('accounts-delete-user') as HTMLSpanElement).onclick = window.modals.deleteUser.toggle; window.modals.settingsRestart = new Modal(document.getElementById('modal-restart')); window.modals.settingsRefresh = new Modal(document.getElementById('modal-refresh')); window.modals.ombiDefaults = new Modal(document.getElementById('modal-ombi-defaults')); document.getElementById('form-ombi-defaults').addEventListener('submit', window.modals.ombiDefaults.close); })(); function errorMessage(aside: HTMLElement, content: string, timeout: number = 4) { aside.textContent = content; aside.classList.remove("unfocused"); setTimeout(() => { aside.classList.add("unfocused"); }, timeout*1000); } window.token = ""; function login(username: string, password: string) { const req = new XMLHttpRequest(); req.responseType = 'json'; let url = window.URLBase; const refresh = (username == "" && password == ""); if (refresh) { url += "/token/refresh"; } else { url += "/token/login"; } req.open("GET", url, true); if (!refresh) { req.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password)); } req.onreadystatechange = function (): void { if (this.readyState == 4) { if (this.status != 200) { let errorMsg = "Connection error."; if (this.response) { errorMsg = this.response["error"]; } if (!errorMsg) { errorMsg = "Unknown error"; } if (!refresh) { errorMessage(window.modals.login.modal.querySelector("aside"), errorMsg, 5); } else { window.modals.login.show(); } } else { const data = this.response; window.token = data["token"]; window.modals.login.close(); window.invites.reload(); setInterval(window.invites.reload, 30*1000); /*generateInvites(); setInterval((): void => generateInvites(), 60 * 1000); addOptions(30, document.getElementById('days') as HTMLSelectElement); addOptions(24, document.getElementById('hours') as HTMLSelectElement); const minutes = document.getElementById('minutes') as HTMLSelectElement; addOptions(59, minutes); minutes.value = "30"; checkDuration(); if (modal) { window.Modals.login.hide(); } Focus(document.getElementById('logoutButton')); } if (run) { run(+this.status); }*/ } } }; req.send(); } document.getElementById('form-login').addEventListener('submit', (event: Event) => { event.preventDefault(); const username = (document.getElementById("login-user") as HTMLInputElement).value; const password = (document.getElementById("login-password") as HTMLInputElement).value; if (!username || !password) { errorMessage(window.modals.login.modal.querySelector("aside"), "The username and/or password were left blank." , 4); return; } login(username, password, true); }); login("", ""); window.invites = new inviteList();