mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-11-09 20:00:12 +00:00
Compare commits
No commits in common. "8b2f6fbb8afb66aa0c8a8c0f1314039882dac1e1" and "2d443fb50b21032e5ffbadbb6b2cfade4d340e7c" have entirely different histories.
8b2f6fbb8a
...
2d443fb50b
52
css/base.css
52
css/base.css
@ -3,7 +3,6 @@
|
||||
@import "modal.css";
|
||||
@import "dark.css";
|
||||
@import "tooltip.css";
|
||||
@import "loader.css";
|
||||
|
||||
:root {
|
||||
--border-width-default: 2px;
|
||||
@ -30,16 +29,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
:root {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.table-responsive table {
|
||||
min-width: 660px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab-button {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@ -180,41 +169,10 @@ sup.\~critical, .text-critical {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.inv-profilearea {
|
||||
min-width: 20%;
|
||||
}
|
||||
|
||||
.inv-profileselect {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.inv-codearea {
|
||||
max-width: 40%;
|
||||
min-width: 10rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.invite-link {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.no-pad {
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.elem-pad > * {
|
||||
margin: var(--spacing-4, 1rem);
|
||||
}
|
||||
|
||||
.icon.clickable {
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
box-sizing: border-box; /* fixes weird length issue with inputs */
|
||||
}
|
||||
@ -275,7 +233,7 @@ sup.\~critical, .text-critical {
|
||||
padding-bottom: 0.1rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
max-width: 75%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.stealth-input-hidden {
|
||||
@ -320,10 +278,6 @@ sup.\~critical, .text-critical {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.overflow-y {
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
select {
|
||||
color: inherit;
|
||||
border: 0 solid var(--color-neutral-300);
|
||||
@ -341,10 +295,6 @@ p.top {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#notification-box {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
.loader {
|
||||
height: auto;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.loader .dot {
|
||||
--diameter: 0.5rem;
|
||||
--radius: calc(var(--diameter) / 2);
|
||||
--deviation: 20%;
|
||||
height: var(--diameter);
|
||||
width: var(--diameter);
|
||||
background-color: var(--color-content);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: calc(50% - var(--radius));
|
||||
animation: osc 1s cubic-bezier(.72,.16,.31,.97) infinite;
|
||||
}
|
||||
.loader.loader-sm .dot {
|
||||
--deviation: 10%;
|
||||
}
|
||||
|
||||
@keyframes osc {
|
||||
25% {
|
||||
left: calc(50% + var(--deviation) - var(--radius));
|
||||
}
|
||||
75% {
|
||||
left: calc(50% - var(--deviation));
|
||||
}
|
||||
0%, 50%, 100% {
|
||||
left: calc(50% - var(--radius));
|
||||
}
|
||||
/*
|
||||
0%, 100% {
|
||||
left: calc(50% - var(--deviation))
|
||||
}
|
||||
50% {
|
||||
left: calc(50% + var(--deviation) - var(--radius));
|
||||
}
|
||||
*/
|
||||
}
|
||||
@ -5,10 +5,6 @@
|
||||
|
||||
<script>
|
||||
window.URLBase = "{{ .urlBase }}";
|
||||
window.notificationsEnabled = {{ .notifications }};
|
||||
window.emailEnabled = {{ .email_enabled }};
|
||||
window.ombiEnabled = {{ .ombiEnabled }};
|
||||
window.usernamesEnabled = {{ .username }};
|
||||
</script>
|
||||
{{ template "header.html" . }}
|
||||
<title>Admin - jfa-go</title>
|
||||
@ -19,22 +15,15 @@
|
||||
<span class="heading">Login</span>
|
||||
<input type="text" class="field input ~neutral !high mt-half mb-1" placeholder="username" id="login-user">
|
||||
<input type="password" class="field input ~neutral !high mb-1" placeholder="password" id="login-password">
|
||||
<label>
|
||||
<input type="submit" class="unfocused">
|
||||
<span class="button ~urge !normal full-width center supra submit">Login</span>
|
||||
</label>
|
||||
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Login">
|
||||
</form>
|
||||
</div>
|
||||
<div id="modal-add-user" class="modal">
|
||||
<form class="modal-content card" id="form-add-user" href="">
|
||||
<span class="heading">New User <span class="modal-close">×</span></span>
|
||||
<input type="text" class="field input ~neutral !high mt-half mb-1" placeholder="username" id="add-user-user">
|
||||
<input type="email" class="field input ~neutral !high mt-half mb-1" placeholder="email address">
|
||||
<input type="password" class="field input ~neutral !high mb-1" placeholder="password" id="add-user-password">
|
||||
<label>
|
||||
<input type="submit" class="unfocused">
|
||||
<span class="button ~urge !normal full-width center supra submit">Create</span>
|
||||
</label>
|
||||
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Create">
|
||||
</form>
|
||||
</div>
|
||||
<div id="modal-about" class="modal">
|
||||
@ -49,7 +38,7 @@
|
||||
</div>
|
||||
<div id="modal-modify-user" class="modal">
|
||||
<form class="modal-content card" id="form-modify-user" href="">
|
||||
<span class="heading">Modify Settings for <span id="header-modify-user"></span> <span class="modal-close">×</span></span>
|
||||
<span class="heading"><span id="header-modify-user">Modify Settings</span> <span class="modal-close">×</span></span>
|
||||
<p class="content">Apply settings from an existing profile, or source them directly from a user.</p>
|
||||
<div class="flex-row mb-1">
|
||||
<label class="flex-row-group mr-1">
|
||||
@ -61,15 +50,15 @@
|
||||
<span class="button ~neutral !normal supra full-width center">User</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="select ~neutral !normal mb-1">
|
||||
<select id="modify-user-profiles">
|
||||
<div id="modify-user-profiles" class="select ~neutral !normal mb-1">
|
||||
<select>
|
||||
<option>Friends</option>
|
||||
<option>Family</option>
|
||||
<option>Default</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select ~neutral !normal mb-1 unfocused">
|
||||
<select id="modify-user-users">
|
||||
<div id="modify-user-users" class="select ~neutral !normal mb-1 unfocused">
|
||||
<select>
|
||||
<option>Person</option>
|
||||
<option>Other person</option>
|
||||
</select>
|
||||
@ -78,25 +67,19 @@
|
||||
<input type="checkbox" id="modify-user-homescreen" checked>
|
||||
<span>Apply homescreen layout</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="submit" class="unfocused">
|
||||
<span class="button ~urge !normal full-width center supra submit">Apply</span>
|
||||
</label>
|
||||
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Apply">
|
||||
</form>
|
||||
</div>
|
||||
<div id="modal-delete-user" class="modal">
|
||||
<form class="modal-content card" id="form-delete-user" href="">
|
||||
<span class="heading">Delete <span id="header-delete-user"></span> <span class="modal-close">×</span></span>
|
||||
<span class="heading"><span id="header-delete-user">Delete User</span> <span class="modal-close">×</span></span>
|
||||
<div class="content mt-half">
|
||||
<label class="switch mb-1">
|
||||
<input type="checkbox" id="delete-user-notify" checked>
|
||||
<span>Send notification email</span>
|
||||
</label>
|
||||
<textarea id="textarea-delete-user" class="textarea full-width ~neutral !normal mb-1" placeholder="Your account has been deleted."></textarea>
|
||||
<label>
|
||||
<input type="submit" class="unfocused">
|
||||
<span class="button ~critical !normal full-width center supra submit">Delete</span>
|
||||
</label>
|
||||
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Apply">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -126,10 +109,7 @@
|
||||
<option>Other person</option>
|
||||
</select>
|
||||
</div>
|
||||
<label>
|
||||
<input type="submit" class="unfocused">
|
||||
<span class="button ~urge !normal full-width center supra submit">Submit</span>
|
||||
</label>
|
||||
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
<div id="notification-box"></div>
|
||||
@ -192,14 +172,12 @@
|
||||
<select id="create-profile">
|
||||
</select>
|
||||
</div>
|
||||
<div id="create-send-to-container">
|
||||
<label class="label supra">Send to</label>
|
||||
<div class="flex-expand mb-1 mt-half">
|
||||
<input type="email" id="create-send-to" class="input ~neutral !normal mr-1" placeholder="example@example.com">
|
||||
<label for="create-send-to-enabled" class="button ~neutral !normal">
|
||||
<input type="checkbox" id="create-send-to-enabled" aria-label="Send to address enabled">
|
||||
</label>
|
||||
</div>
|
||||
<label class="label supra">Send to</label>
|
||||
<div class="flex-expand mb-1 mt-half">
|
||||
<input type="email" id="create-send-to" class="input ~neutral !normal mr-1" placeholder="example@example.com">
|
||||
<label for="create-send-to-enabled" class="button ~neutral !normal">
|
||||
<input type="checkbox" id="create-send-to-enabled" aria-label="Send to address enabled">
|
||||
</label>
|
||||
</div>
|
||||
<span class="button ~urge !normal supra full-width center lg" id="create-submit">Create</span>
|
||||
</div>
|
||||
@ -214,7 +192,7 @@
|
||||
<span class="button ~urge !normal" id="accounts-modify-user">Modify Settings</span>
|
||||
<span class="button ~critical !normal" id="accounts-delete-user">Delete User</span>
|
||||
</div>
|
||||
<div class="card ~neutral !normal accounts-header table-responsive mt-half">
|
||||
<div class="card ~neutral !normal accounts-header mt-half">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -224,7 +202,20 @@
|
||||
<th>Last Active</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="accounts-list"></tbody>
|
||||
<tbody id="accounts-list">
|
||||
<tr>
|
||||
<td><input type="checkbox" value=""></td>
|
||||
<td>Person <span class="chip ~info ml-1">Admin</span></td>
|
||||
<td><i class="icon ri-edit-line"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
|
||||
<td>13/12/20 00:39</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" value=""></td>
|
||||
<td>Other person</td>
|
||||
<td><i class="icon ri-edit-line"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="eee@ma.il" readonly></td>
|
||||
<td>12/12/20 17:46</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
177
ts/admin.ts
177
ts/admin.ts
@ -2,8 +2,7 @@ import { toggleTheme, loadTheme } from "./modules/theme.js";
|
||||
import { Modal } from "./modules/modal.js";
|
||||
import { Tabs } from "./modules/tabs.js";
|
||||
import { inviteList, createInvite } from "./modules/invites.js";
|
||||
import { accountsList } from "./modules/accounts.js";
|
||||
import { _post, notificationBox, whichAnimationEvent, toggleLoader } from "./modules/common.js";
|
||||
import { _post, notificationBox, whichAnimationEvent } from "./modules/common.js";
|
||||
|
||||
loadTheme();
|
||||
(document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme;
|
||||
@ -14,37 +13,75 @@ window.token = "";
|
||||
|
||||
window.availableProfiles = window.availableProfiles || [];
|
||||
|
||||
// load modals
|
||||
(() => {
|
||||
window.modals = {} as Modals;
|
||||
|
||||
window.modals.login = new Modal(document.getElementById('modal-login'), true);
|
||||
|
||||
window.modals.addUser = new Modal(document.getElementById('modal-add-user'));
|
||||
|
||||
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'));
|
||||
|
||||
window.modals.deleteUser = new Modal(document.getElementById('modal-delete-user'));
|
||||
|
||||
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);
|
||||
})();
|
||||
|
||||
var inviteCreator = new createInvite();
|
||||
var accounts = new accountsList();
|
||||
|
||||
window.invites = new inviteList();
|
||||
|
||||
window.notifications = new notificationBox(document.getElementById('notification-box') as HTMLDivElement, 5);
|
||||
|
||||
/*const modifySettingsSource = function () {
|
||||
|
||||
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;
|
||||
@ -55,16 +92,64 @@ window.notifications = new notificationBox(document.getElementById('notification
|
||||
(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", "settingsTab"]) {
|
||||
for (let tabID of ["invitesTab", "accountsTab", "settingsTab"]) {
|
||||
window.tabs.addTab(tabID);
|
||||
}
|
||||
window.tabs.addTab("accountsTab", null, accounts.reload);
|
||||
window.tabs.addTab("accountsTab", loadAccounts);
|
||||
|
||||
function login(username: string, password: string, run?: (state?: number) => void) {
|
||||
// load modals
|
||||
(() => {
|
||||
window.modals = {} as Modals;
|
||||
|
||||
window.modals.login = new Modal(document.getElementById('modal-login'), true);
|
||||
|
||||
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 login(username: string, password: string) {
|
||||
const req = new XMLHttpRequest();
|
||||
req.responseType = 'json';
|
||||
let url = window.URLBase;
|
||||
@ -98,28 +183,41 @@ function login(username: string, password: string, run?: (state?: number) => voi
|
||||
window.token = data["token"];
|
||||
window.modals.login.close();
|
||||
window.invites.reload();
|
||||
accounts.reload();
|
||||
setInterval(() => { window.invites.reload(); accounts.reload(); }, 30*1000);
|
||||
setInterval(window.invites.reload, 30*1000);
|
||||
document.getElementById("logout-button").classList.remove("unfocused");
|
||||
|
||||
/*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);
|
||||
}*/
|
||||
}
|
||||
if (run) { run(+this.status); }
|
||||
}
|
||||
};
|
||||
req.send();
|
||||
}
|
||||
|
||||
(document.getElementById('form-login') as HTMLFormElement).onsubmit = (event: SubmitEvent) => {
|
||||
document.getElementById('form-login').addEventListener('submit', (event: Event) => {
|
||||
event.preventDefault();
|
||||
const button = (event.target as HTMLElement).querySelector(".submit") as HTMLSpanElement;
|
||||
const username = (document.getElementById("login-user") as HTMLInputElement).value;
|
||||
const password = (document.getElementById("login-password") as HTMLInputElement).value;
|
||||
if (!username || !password) {
|
||||
window.notifications.customError("loginError", "The username and/or password were left blank.");
|
||||
return;
|
||||
}
|
||||
toggleLoader(button);
|
||||
login(username, password, () => toggleLoader(button));
|
||||
};
|
||||
login(username, password);
|
||||
});
|
||||
|
||||
login("", "");
|
||||
|
||||
@ -130,4 +228,3 @@ login("", "");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1,409 +0,0 @@
|
||||
import { _get, _post, _delete, toggleLoader } from "../modules/common.js";
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string | undefined;
|
||||
last_active: string;
|
||||
admin: boolean;
|
||||
}
|
||||
|
||||
class user implements User {
|
||||
private _row: HTMLTableRowElement;
|
||||
private _check: HTMLInputElement;
|
||||
private _username: HTMLSpanElement;
|
||||
private _admin: HTMLSpanElement;
|
||||
private _email: HTMLInputElement;
|
||||
private _emailAddress: string;
|
||||
private _emailEditButton: HTMLElement;
|
||||
private _lastActive: HTMLTableDataCellElement;
|
||||
id: string;
|
||||
private _selected: boolean;
|
||||
|
||||
get selected(): boolean { return this._selected; }
|
||||
set selected(state: boolean) {
|
||||
this._selected = state;
|
||||
this._check.checked = state;
|
||||
state ? document.dispatchEvent(this._checkEvent) : document.dispatchEvent(this._uncheckEvent);
|
||||
}
|
||||
|
||||
get name(): string { return this._username.textContent; }
|
||||
set name(value: string) { this._username.textContent = value; }
|
||||
|
||||
get admin(): boolean { return this._admin.classList.contains("chip"); }
|
||||
set admin(state: boolean) {
|
||||
if (state) {
|
||||
this._admin.classList.add("chip", "~info", "ml-1");
|
||||
this._admin.textContent = "Admin";
|
||||
} else {
|
||||
this._admin.classList.remove("chip", "~info", "ml-1");
|
||||
this._admin.textContent = ""
|
||||
}
|
||||
}
|
||||
|
||||
get email(): string { return this._emailAddress; }
|
||||
set email(value: string) { this._email.value = value; this._emailAddress = value; }
|
||||
|
||||
get last_active(): string { return this._lastActive.textContent; }
|
||||
set last_active(value: string) { this._lastActive.textContent = value; }
|
||||
|
||||
private _checkEvent = new CustomEvent("accountCheckEvent");
|
||||
private _uncheckEvent = new CustomEvent("accountUncheckEvent");
|
||||
|
||||
constructor(user: User) {
|
||||
this._row = document.createElement("tr") as HTMLTableRowElement;
|
||||
this._row.innerHTML = `
|
||||
<td><input type="checkbox" value=""></td>
|
||||
<td><span class="accounts-username"></span> <span class="accounts-admin"></span></td>
|
||||
<td><i class="icon ri-edit-line accounts-email-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden accounts-email" readonly></td>
|
||||
<td class="accounts-last-active"></td>
|
||||
`;
|
||||
this._check = this._row.querySelector("input[type=checkbox]") as HTMLInputElement;
|
||||
this._username = this._row.querySelector(".accounts-username") as HTMLSpanElement;
|
||||
this._admin = this._row.querySelector(".accounts-admin") as HTMLSpanElement;
|
||||
this._email = this._row.querySelector(".accounts-email") as HTMLInputElement;
|
||||
this._emailEditButton = this._row.querySelector(".accounts-email-edit") as HTMLElement;
|
||||
this._lastActive = this._row.querySelector(".accounts-last-active") as HTMLTableDataCellElement;
|
||||
this._check.onchange = () => { this.selected = this._check.checked; }
|
||||
|
||||
const toggleStealthInput = () => {
|
||||
this._email.classList.toggle("stealth-input-hidden");
|
||||
this._email.readOnly = !this._email.readOnly;
|
||||
this._emailEditButton.classList.toggle("ri-check-line");
|
||||
this._emailEditButton.classList.toggle("ri-edit-line");
|
||||
};
|
||||
const outerClickListener = (event: Event) => {
|
||||
if (!(event.target instanceof HTMLElement && (this._email.contains(event.target) || this._emailEditButton.contains(event.target)))) {
|
||||
toggleStealthInput();
|
||||
this.email = this.email;
|
||||
document.removeEventListener("click", outerClickListener);
|
||||
}
|
||||
};
|
||||
this._emailEditButton.onclick = () => {
|
||||
if (this._email.classList.contains("stealth-input-hidden")) {
|
||||
document.addEventListener('click', outerClickListener);
|
||||
} else {
|
||||
this._updateEmail();
|
||||
document.removeEventListener('click', outerClickListener);
|
||||
}
|
||||
toggleStealthInput();
|
||||
};
|
||||
|
||||
this.update(user);
|
||||
}
|
||||
|
||||
private _updateEmail = () => {
|
||||
let oldEmail = this.email;
|
||||
this.email = this._email.value;
|
||||
let send = {};
|
||||
send[this.id] = this.email;
|
||||
_post("/users/emails", send, (req: XMLHttpRequest) => {
|
||||
if (req.readyState == 4) {
|
||||
if (req.status == 200) {
|
||||
window.notifications.customPositive("emailChanged", "Success:", `Changed email address of "${this.name}".`);
|
||||
} else {
|
||||
this.email = oldEmail;
|
||||
window.notifications.customError("emailChanged", `Couldn't change email address of "${this.name}".`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
update = (user: User) => {
|
||||
this.id = user.id;
|
||||
this.name = user.name;
|
||||
this.email = user.email || "";
|
||||
this.last_active = user.last_active;
|
||||
this.admin = user.admin;
|
||||
}
|
||||
|
||||
asElement = (): HTMLTableRowElement => { return this._row; }
|
||||
remove = () => {
|
||||
if (this.selected) {
|
||||
document.dispatchEvent(this._uncheckEvent);
|
||||
}
|
||||
this._row.remove();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export class accountsList {
|
||||
private _table = document.getElementById("accounts-list") as HTMLTableSectionElement;
|
||||
|
||||
private _addUserButton = document.getElementById("accounts-add-user") as HTMLSpanElement;
|
||||
private _deleteUser = document.getElementById("accounts-delete-user") as HTMLSpanElement;
|
||||
private _deleteNotify = document.getElementById("delete-user-notify") as HTMLInputElement;
|
||||
private _deleteReason = document.getElementById("textarea-delete-user") as HTMLTextAreaElement;
|
||||
private _modifySettings = document.getElementById("accounts-modify-user") as HTMLSpanElement;
|
||||
private _modifySettingsProfile = document.getElementById("radio-use-profile") as HTMLInputElement;
|
||||
private _modifySettingsUser = document.getElementById("radio-use-user") as HTMLInputElement;
|
||||
private _profileSelect = document.getElementById("modify-user-profiles") as HTMLSelectElement;
|
||||
private _userSelect = document.getElementById("modify-user-users") as HTMLSelectElement;
|
||||
|
||||
private _selectAll = document.getElementById("accounts-select-all") as HTMLInputElement;
|
||||
private _users: { [id: string]: user };
|
||||
private _checkCount: number = 0;
|
||||
|
||||
private _addUserForm = document.getElementById("form-add-user") as HTMLFormElement;
|
||||
private _addUserName = this._addUserForm.querySelector("input[type=text]") as HTMLInputElement;
|
||||
private _addUserEmail = this._addUserForm.querySelector("input[type=email]") as HTMLInputElement;
|
||||
private _addUserPassword = this._addUserForm.querySelector("input[type=password]") as HTMLInputElement;
|
||||
|
||||
get selectAll(): boolean { return this._selectAll.checked; }
|
||||
set selectAll(state: boolean) {
|
||||
for (let id in this._users) {
|
||||
this._users[id].selected = state;
|
||||
}
|
||||
this._selectAll.checked = state;
|
||||
this._selectAll.indeterminate = false;
|
||||
state ? this._checkCount = Object.keys(this._users).length : 0;
|
||||
|
||||
}
|
||||
|
||||
add = (u: User) => {
|
||||
let domAccount = new user(u);
|
||||
this._users[u.id] = domAccount;
|
||||
this._table.appendChild(domAccount.asElement());
|
||||
}
|
||||
|
||||
private _checkCheckCount = () => {
|
||||
if (this._checkCount == 0) {
|
||||
this._selectAll.indeterminate = false;
|
||||
this._selectAll.checked = false;
|
||||
this._modifySettings.classList.add("unfocused");
|
||||
this._deleteUser.classList.add("unfocused");
|
||||
} else {
|
||||
if (this._checkCount == Object.keys(this._users).length) {
|
||||
this._selectAll.checked = true;
|
||||
this._selectAll.indeterminate = false;
|
||||
} else {
|
||||
this._selectAll.checked = false;
|
||||
this._selectAll.indeterminate = true;
|
||||
}
|
||||
this._modifySettings.classList.remove("unfocused");
|
||||
this._deleteUser.classList.remove("unfocused");
|
||||
(this._checkCount == 1) ? this._deleteUser.textContent = "Delete User" : this._deleteUser.textContent = "Delete Users";
|
||||
}
|
||||
}
|
||||
|
||||
private _genCountString = (): string => { return `${this._checkCount} user${(this._checkCount > 1) ? "s" : ""}`; }
|
||||
|
||||
private _collectUsers = (): string[] => {
|
||||
let list: string[] = [];
|
||||
for (let id in this._users) {
|
||||
if (this._users[id].selected) { list.push(id); }
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
private _addUser = (event: Event) => {
|
||||
event.preventDefault();
|
||||
const button = this._addUserForm.querySelector("span.submit") as HTMLSpanElement;
|
||||
const send = {
|
||||
"username": this._addUserName.value,
|
||||
"email": this._addUserEmail.value,
|
||||
"password": this._addUserPassword.value
|
||||
};
|
||||
for (let field in send) {
|
||||
if (!send[field]) {
|
||||
window.notifications.customError("addUserBlankField", "Fields were left blank.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
toggleLoader(button);
|
||||
_post("/users", send, (req: XMLHttpRequest) => {
|
||||
if (req.readyState == 4) {
|
||||
toggleLoader(button);
|
||||
if (req.status == 200) {
|
||||
window.notifications.customPositive("addUser", "Success:", `user "${send['username']}" created.`);
|
||||
}
|
||||
this.reload();
|
||||
window.modals.addUser.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteUsers = () => {
|
||||
const modalHeader = document.getElementById("header-delete-user");
|
||||
modalHeader.textContent = this._genCountString();
|
||||
let list = this._collectUsers();
|
||||
const form = document.getElementById("form-delete-user") as HTMLFormElement;
|
||||
const button = form.querySelector("span.submit") as HTMLSpanElement;
|
||||
this._deleteNotify.checked = false;
|
||||
this._deleteReason.value = "";
|
||||
this._deleteReason.classList.add("unfocused");
|
||||
form.onsubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
toggleLoader(button);
|
||||
let send = {
|
||||
"users": list,
|
||||
"notify": this._deleteNotify.checked,
|
||||
"reason": this._deleteNotify ? this._deleteReason.value : ""
|
||||
};
|
||||
_delete("/users", send, (req: XMLHttpRequest) => {
|
||||
if (req.readyState == 4) {
|
||||
toggleLoader(button);
|
||||
window.modals.deleteUser.close();
|
||||
if (req.status != 200 && req.status != 204) {
|
||||
let errorMsg = "Failed (check console/logs).";
|
||||
if (!("error" in req.response)) {
|
||||
errorMsg = "Partial failure (check console/logs).";
|
||||
}
|
||||
window.notifications.customError("deleteUserError", errorMsg);
|
||||
} else {
|
||||
window.notifications.customPositive("deleteUserSuccess", "Success:", `deleted ${this._genCountString()}.`);
|
||||
}
|
||||
this.reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
window.modals.deleteUser.show();
|
||||
}
|
||||
|
||||
modifyUsers = () => {
|
||||
const modalHeader = document.getElementById("header-modify-user");
|
||||
modalHeader.textContent = this._genCountString();
|
||||
let list = this._collectUsers();
|
||||
(() => {
|
||||
let innerHTML = "";
|
||||
for (const profile of window.availableProfiles) {
|
||||
innerHTML += `<option value="${profile}">${profile}</option>`;
|
||||
}
|
||||
this._profileSelect.innerHTML = innerHTML;
|
||||
})();
|
||||
|
||||
(() => {
|
||||
let innerHTML = "";
|
||||
for (let id in this._users) {
|
||||
innerHTML += `<option value="${id}">${this._users[id].name}</option>`;
|
||||
}
|
||||
this._userSelect.innerHTML = innerHTML;
|
||||
})();
|
||||
|
||||
const form = document.getElementById("form-modify-user") as HTMLFormElement;
|
||||
const button = form.querySelector("span.submit") as HTMLSpanElement;
|
||||
this._modifySettingsProfile.checked = true;
|
||||
this._modifySettingsUser.checked = false;
|
||||
form.onsubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
toggleLoader(button);
|
||||
let send = {
|
||||
"apply_to": list,
|
||||
"homescreen": (document.getElementById("modify-user-homescreen") as HTMLInputElement).checked
|
||||
};
|
||||
if (this._modifySettingsProfile.checked && !this._modifySettingsUser.checked) {
|
||||
send["from"] = "profile";
|
||||
send["profile"] = this._profileSelect.value;
|
||||
} else if (this._modifySettingsUser.checked && !this._modifySettingsProfile.checked) {
|
||||
send["from"] = "user";
|
||||
send["id"] = this._userSelect.value;
|
||||
}
|
||||
_post("/users/settings", send, (req: XMLHttpRequest) => {
|
||||
if (req.readyState == 4) {
|
||||
toggleLoader(button);
|
||||
if (req.status == 500) {
|
||||
let response = JSON.parse(req.response);
|
||||
let errorMsg = "";
|
||||
if ("homescreen" in response && "policy" in response) {
|
||||
const homescreen = Object.keys(response["homescreen"]).length;
|
||||
const policy = Object.keys(response["policy"]).length;
|
||||
if (homescreen != 0 && policy == 0) {
|
||||
errorMsg = "Settings were applied, but applying homescreen layout may have failed.";
|
||||
} else if (policy != 0 && homescreen == 0) {
|
||||
errorMsg = "Homescreen layout was applied, but applying settings may have failed.";
|
||||
} else if (policy != 0 && homescreen != 0) {
|
||||
errorMsg = "Application failed.";
|
||||
}
|
||||
} else if ("error" in response) {
|
||||
errorMsg = response["error"];
|
||||
}
|
||||
window.notifications.customError("modifySettingsError", errorMsg);
|
||||
} else if (req.status == 200 || req.status == 204) {
|
||||
window.notifications.customPositive("modifySettingsSuccess", "Success:", `applied settings to ${this._genCountString()}.`);
|
||||
}
|
||||
this.reload();
|
||||
window.modals.modifyUser.close();
|
||||
}
|
||||
});
|
||||
};
|
||||
window.modals.modifyUser.show();
|
||||
}
|
||||
|
||||
|
||||
|
||||
constructor() {
|
||||
this._users = {};
|
||||
this._selectAll.checked = false;
|
||||
this._selectAll.onchange = () => { this.selectAll = this._selectAll.checked };
|
||||
document.addEventListener("accountCheckEvent", () => { this._checkCount++; this._checkCheckCount(); });
|
||||
document.addEventListener("accountUncheckEvent", () => { this._checkCount--; this._checkCheckCount(); });
|
||||
this._addUserButton.onclick = window.modals.addUser.toggle;
|
||||
this._addUserForm.addEventListener("submit", this._addUser);
|
||||
|
||||
this._deleteNotify.onchange = () => {
|
||||
if (this._deleteNotify.checked) {
|
||||
this._deleteReason.classList.remove("unfocused");
|
||||
} else {
|
||||
this._deleteReason.classList.add("unfocused");
|
||||
}
|
||||
};
|
||||
this._modifySettings.onclick = this.modifyUsers;
|
||||
this._modifySettings.classList.add("unfocused");
|
||||
const checkSource = () => {
|
||||
const profileSpan = this._modifySettingsProfile.nextElementSibling as HTMLSpanElement;
|
||||
const userSpan = this._modifySettingsUser.nextElementSibling as HTMLSpanElement;
|
||||
if (this._modifySettingsProfile.checked) {
|
||||
this._userSelect.parentElement.classList.add("unfocused");
|
||||
this._profileSelect.parentElement.classList.remove("unfocused")
|
||||
profileSpan.classList.add("!high");
|
||||
profileSpan.classList.remove("!normal");
|
||||
userSpan.classList.remove("!high");
|
||||
userSpan.classList.add("!normal");
|
||||
} else {
|
||||
this._userSelect.parentElement.classList.remove("unfocused");
|
||||
this._profileSelect.parentElement.classList.add("unfocused");
|
||||
userSpan.classList.add("!high");
|
||||
userSpan.classList.remove("!normal");
|
||||
profileSpan.classList.remove("!high");
|
||||
profileSpan.classList.add("!normal");
|
||||
}
|
||||
};
|
||||
this._modifySettingsProfile.onchange = checkSource;
|
||||
this._modifySettingsUser.onchange = checkSource;
|
||||
|
||||
this._deleteUser.onclick = this.deleteUsers;
|
||||
this._deleteUser.classList.add("unfocused");
|
||||
|
||||
if (!window.usernameEnabled) {
|
||||
this._addUserName.classList.add("unfocused");
|
||||
this._addUserName = this._addUserEmail;
|
||||
}
|
||||
/*if (!window.emailEnabled) {
|
||||
this._deleteNotify.parentElement.classList.add("unfocused");
|
||||
this._deleteNotify.checked = false;
|
||||
}*/
|
||||
}
|
||||
|
||||
reload = () => _get("/users", null, (req: XMLHttpRequest) => {
|
||||
if (req.readyState == 4 && req.status == 200) {
|
||||
// same method as inviteList.reload()
|
||||
let accountsOnDOM: { [id: string]: boolean } = {};
|
||||
for (let id in this._users) { accountsOnDOM[id] = true; }
|
||||
for (let u of (req.response["users"] as User[])) {
|
||||
if (u.id in this._users) {
|
||||
this._users[u.id].update(u);
|
||||
delete accountsOnDOM[u.id];
|
||||
} else {
|
||||
this.add(u);
|
||||
}
|
||||
}
|
||||
for (let id in accountsOnDOM) {
|
||||
this._users[id].remove();
|
||||
delete this._users[id];
|
||||
}
|
||||
this._checkCheckCount;
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -124,7 +124,6 @@ export function toClipboard (str: string) {
|
||||
export class notificationBox implements NotificationBox {
|
||||
private _box: HTMLDivElement;
|
||||
private _errorTypes: { [type: string]: boolean } = {};
|
||||
private _positiveTypes: { [type: string]: boolean } = {};
|
||||
timeout: number;
|
||||
constructor(box: HTMLDivElement, timeout?: number) { this._box = box; this.timeout = timeout || 5; }
|
||||
|
||||
@ -140,19 +139,7 @@ export class notificationBox implements NotificationBox {
|
||||
return noti;
|
||||
}
|
||||
|
||||
private _positive = (bold: string, message: string): HTMLElement => {
|
||||
const noti = document.createElement('aside');
|
||||
noti.classList.add("aside", "~positive", "!normal", "mt-half", "notification-positive");
|
||||
noti.innerHTML = `<strong>${bold}</strong> ${message}`;
|
||||
const closeButton = document.createElement('span') as HTMLSpanElement;
|
||||
closeButton.classList.add("button", "~positive", "!low", "ml-1");
|
||||
closeButton.innerHTML = `<i class="icon ri-close-line"></i>`;
|
||||
closeButton.onclick = () => { this._box.removeChild(noti); };
|
||||
noti.appendChild(closeButton);
|
||||
return noti;
|
||||
}
|
||||
|
||||
connectionError = () => { this.customError("connectionError", "Couldn't connect to jfa-go."); }
|
||||
connectionError = () => { this.customError("connectionError", "Couldn't connect to jfa-go"); }
|
||||
|
||||
customError = (type: string, message: string) => {
|
||||
this._errorTypes[type] = this._errorTypes[type] || false;
|
||||
@ -166,19 +153,6 @@ export class notificationBox implements NotificationBox {
|
||||
this._errorTypes[type] = true;
|
||||
setTimeout(() => { if (this._box.contains(noti)) { this._box.removeChild(noti); this._errorTypes[type] = false; } }, this.timeout*1000);
|
||||
}
|
||||
|
||||
customPositive = (type: string, bold: string, message: string) => {
|
||||
this._positiveTypes[type] = this._positiveTypes[type] || false;
|
||||
const noti = this._positive(bold, message);
|
||||
noti.classList.add("positive-" + type);
|
||||
const previousNoti: HTMLElement | undefined = this._box.querySelector("aside.positive-" + type);
|
||||
if (this._positiveTypes[type] && previousNoti !== undefined && previousNoti != null) {
|
||||
previousNoti.remove();
|
||||
}
|
||||
this._box.appendChild(noti);
|
||||
this._positiveTypes[type] = true;
|
||||
setTimeout(() => { if (this._box.contains(noti)) { this._box.removeChild(noti); this._positiveTypes[type] = false; } }, this.timeout*1000);
|
||||
}
|
||||
}
|
||||
|
||||
export const whichAnimationEvent = () => {
|
||||
@ -188,18 +162,3 @@ export const whichAnimationEvent = () => {
|
||||
}
|
||||
return "webkitAnimationEnd";
|
||||
}
|
||||
|
||||
export function toggleLoader(el: HTMLElement, small: boolean = true) {
|
||||
if (el.classList.contains("loader")) {
|
||||
el.classList.remove("loader");
|
||||
el.classList.remove("loader-sm");
|
||||
const dot = el.querySelector("span.dot");
|
||||
if (dot) { dot.remove(); }
|
||||
} else {
|
||||
el.classList.add("loader");
|
||||
if (small) { el.classList.add("loader-sm"); }
|
||||
const dot = document.createElement("span") as HTMLSpanElement;
|
||||
dot.classList.add("dot")
|
||||
el.appendChild(dot);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import { _get, _post, _delete, toClipboard, toggleLoader } from "../modules/common.js";
|
||||
import { _get, _post, _delete, toClipboard } from "../modules/common.js";
|
||||
|
||||
export class DOMInvite implements Invite {
|
||||
// TODO
|
||||
// add setProfile
|
||||
//
|
||||
updateNotify = (checkbox: HTMLInputElement) => {
|
||||
let state: { [code: string]: { [type: string]: boolean } } = {};
|
||||
let revertChanges: () => void;
|
||||
@ -55,19 +58,16 @@ export class DOMInvite implements Invite {
|
||||
get email(): string { return this._email };
|
||||
set email(address: string) {
|
||||
this._email = address;
|
||||
const container = this._infoArea.querySelector(".tooltip") as HTMLDivElement;
|
||||
const icon = container.querySelector("i");
|
||||
const chip = container.querySelector("span.inv-email-chip");
|
||||
const tooltip = container.querySelector("span.content") as HTMLSpanElement;
|
||||
const icon = this._infoArea.querySelector(".tooltip i");
|
||||
const chip = this._infoArea.querySelector(".tooltip span.inv-email-chip");
|
||||
const tooltip = this._infoArea.querySelector(".tooltip span.content") as HTMLSpanElement;
|
||||
if (address == "") {
|
||||
container.classList.remove("mr-1");
|
||||
icon.classList.remove("ri-mail-line");
|
||||
icon.classList.remove("ri-mail-close-line");
|
||||
chip.classList.remove("~neutral");
|
||||
chip.classList.remove("~critical");
|
||||
chip.classList.remove("chip");
|
||||
} else {
|
||||
container.classList.add("mr-1");
|
||||
chip.classList.add("chip");
|
||||
if (address.includes("Failed to send to")) {
|
||||
icon.classList.remove("ri-mail-line");
|
||||
@ -214,13 +214,13 @@ export class DOMInvite implements Invite {
|
||||
|
||||
this._header = document.createElement('div') as HTMLDivElement;
|
||||
this._container.appendChild(this._header);
|
||||
this._header.classList.add("card", "~neutral", "!normal", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-half", "overflow-y");
|
||||
this._header.classList.add("card", "~neutral", "!normal", "inv-header", "flex-expand", "mt-half", "overflow");
|
||||
|
||||
this._codeArea = document.createElement('div') as HTMLDivElement;
|
||||
this._header.appendChild(this._codeArea);
|
||||
this._codeArea.classList.add("inv-codearea");
|
||||
this._codeArea.innerHTML = `
|
||||
<a class="invite-link code monospace mr-1" href=""></a>
|
||||
<a class="code monospace mr-1" href=""></a>
|
||||
<span class="button ~info !normal" title="Copy invite link"><i class="ri-file-copy-line"></i></span>
|
||||
`;
|
||||
const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
|
||||
@ -243,14 +243,14 @@ export class DOMInvite implements Invite {
|
||||
this._header.appendChild(this._infoArea);
|
||||
this._infoArea.classList.add("inv-infoarea");
|
||||
this._infoArea.innerHTML = `
|
||||
<div class="tooltip left">
|
||||
<div class="tooltip left mr-1">
|
||||
<span class="inv-email-chip"><i></i></span>
|
||||
<span class="content sm"></span>
|
||||
</div>
|
||||
<span class="inv-expiry mr-1"></span>
|
||||
<span class="button ~critical !normal inv-delete">Delete</span>
|
||||
<label>
|
||||
<i class="icon clickable ri-arrow-down-s-line not-rotated"></i>
|
||||
<i class="icon ri-arrow-down-s-line not-rotated"></i>
|
||||
<input class="inv-toggle-details unfocused" type="checkbox">
|
||||
</label>
|
||||
`;
|
||||
@ -262,45 +262,38 @@ export class DOMInvite implements Invite {
|
||||
|
||||
this._details = document.createElement('div') as HTMLDivElement;
|
||||
this._container.appendChild(this._details);
|
||||
this._details.classList.add("card", "~neutral", "!normal", "mt-half", "no-pad", "inv-details");
|
||||
this._details.classList.add("card", "~neutral", "!normal", "mt-half", "inv-details");
|
||||
const detailsInner = document.createElement('div') as HTMLDivElement;
|
||||
this._details.appendChild(detailsInner);
|
||||
detailsInner.classList.add("inv-row", "flex-expand", "row", "elem-pad", "align-top");
|
||||
detailsInner.classList.add("inv-row", "flex-expand", "align-top");
|
||||
|
||||
this._left = document.createElement('div') as HTMLDivElement;
|
||||
detailsInner.appendChild(this._left);
|
||||
this._left.classList.add("inv-profilearea");
|
||||
let innerHTML = `
|
||||
this._left.innerHTML = `
|
||||
<p class="supra mb-1 top">Profile</p>
|
||||
<div class="select ~neutral !normal inv-profileselect inline-block">
|
||||
<select>
|
||||
<option value="noProfile" selected>No Profile</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="label supra">Notify on:</p>
|
||||
<label class="switch block">
|
||||
<input class="inv-notify-expiry" type="checkbox">
|
||||
<span>On expiry</span>
|
||||
</label>
|
||||
<label class="switch block">
|
||||
<input class="inv-notify-creation" type="checkbox">
|
||||
<span>On user creation</span>
|
||||
</label>
|
||||
`;
|
||||
if (window.notificationsEnabled) {
|
||||
innerHTML += `
|
||||
<p class="label supra">Notify on:</p>
|
||||
<label class="switch block">
|
||||
<input class="inv-notify-expiry" type="checkbox">
|
||||
<span>On expiry</span>
|
||||
</label>
|
||||
<label class="switch block">
|
||||
<input class="inv-notify-creation" type="checkbox">
|
||||
<span>On user creation</span>
|
||||
</label>
|
||||
`;
|
||||
}
|
||||
this._left.innerHTML = innerHTML;
|
||||
(this._left.querySelector("select") as HTMLSelectElement).onchange = this.updateProfile;
|
||||
|
||||
if (window.notificationsEnabled) {
|
||||
const notifyExpiry = this._left.querySelector("input.inv-notify-expiry") as HTMLInputElement;
|
||||
notifyExpiry.onchange = () => { this._notifyExpiry = notifyExpiry.checked; this.updateNotify(notifyExpiry); };
|
||||
|
||||
const notifyCreation = this._left.querySelector("input.inv-notify-creation") as HTMLInputElement;
|
||||
notifyCreation.onchange = () => { this._notifyCreation = notifyCreation.checked; this.updateNotify(notifyCreation); };
|
||||
}
|
||||
const notifyExpiry = this._left.querySelector("input.inv-notify-expiry") as HTMLInputElement;
|
||||
notifyExpiry.onchange = () => { this._notifyExpiry = notifyExpiry.checked; this.updateNotify(notifyExpiry); };
|
||||
|
||||
const notifyCreation = this._left.querySelector("input.inv-notify-creation") as HTMLInputElement;
|
||||
notifyCreation.onchange = () => { this._notifyCreation = notifyCreation.checked; this.updateNotify(notifyCreation); };
|
||||
|
||||
this._middle = document.createElement('div') as HTMLDivElement;
|
||||
detailsInner.appendChild(this._middle);
|
||||
@ -329,10 +322,8 @@ export class DOMInvite implements Invite {
|
||||
this.created = invite.created;
|
||||
this.email = invite.email;
|
||||
this.expiresIn = invite.expiresIn;
|
||||
if (window.notificationsEnabled) {
|
||||
this.notifyCreation = invite.notifyCreation;
|
||||
this.notifyExpiry = invite.notifyExpiry;
|
||||
}
|
||||
this.notifyCreation = invite.notifyCreation;
|
||||
this.notifyExpiry = invite.notifyExpiry;
|
||||
this.profile = invite.profile;
|
||||
this.remainingUses = invite.remainingUses;
|
||||
this.usedBy = invite.usedBy;
|
||||
@ -399,10 +390,8 @@ export class inviteList implements inviteList {
|
||||
reload = () => _get("/invites", null, (req: XMLHttpRequest) => {
|
||||
if (req.readyState == 4) {
|
||||
let data = req.response;
|
||||
if (req.status == 200) {
|
||||
window.availableProfiles = data["profiles"];
|
||||
document.dispatchEvent(this._profileLoadEvent);
|
||||
}
|
||||
window.availableProfiles = data["profiles"];
|
||||
document.dispatchEvent(this._profileLoadEvent);
|
||||
if (data["invites"] === undefined || data["invites"] == null || data["invites"].length == 0) {
|
||||
this.empty = true;
|
||||
return;
|
||||
@ -457,13 +446,8 @@ export class createInvite {
|
||||
private _uses = document.getElementById('create-uses') as HTMLInputElement;
|
||||
private _infUses = document.getElementById("create-inf-uses") as HTMLInputElement;
|
||||
private _infUsesWarning = document.getElementById('create-inf-uses-warning') as HTMLParagraphElement;
|
||||
private _createButton = document.getElementById("create-submit") as HTMLSpanElement;
|
||||
private _createButton = document.getElementById("create-submit") as HTMLInputElement; // Actually a <span> but this allows "disabled"
|
||||
private _profile = document.getElementById("create-profile") as HTMLSelectElement;
|
||||
|
||||
private _days = document.getElementById("create-days") as HTMLSelectElement;
|
||||
private _hours = document.getElementById("create-hours") as HTMLSelectElement;
|
||||
private _minutes = document.getElementById("create-minutes") as HTMLSelectElement;
|
||||
|
||||
// Broadcast when new invite created
|
||||
private _newInviteEvent = new CustomEvent("newInviteEvent");
|
||||
private _firstLoad = true;
|
||||
@ -519,34 +503,28 @@ export class createInvite {
|
||||
set uses(n: number) { this._uses.valueAsNumber = n; }
|
||||
|
||||
private _checkDurationValidity = () => {
|
||||
if (this.days + this.hours + this.minutes == 0) {
|
||||
this._createButton.setAttribute("disabled", "");
|
||||
this._createButton.onclick = null;
|
||||
} else {
|
||||
this._createButton.removeAttribute("disabled");
|
||||
this._createButton.onclick = this.create;
|
||||
}
|
||||
this._createButton.disabled = (this.days + this.hours + this.minutes == 0);
|
||||
}
|
||||
|
||||
get days(): number {
|
||||
return +this._days.value;
|
||||
return +(document.getElementById("create-days") as HTMLSelectElement).value;
|
||||
}
|
||||
set days(n: number) {
|
||||
this._days.value = ""+n;
|
||||
(document.getElementById("create-days") as HTMLSelectElement).value = ""+n;
|
||||
this._checkDurationValidity();
|
||||
}
|
||||
get hours(): number {
|
||||
return +this._hours.value;
|
||||
return +(document.getElementById("create-hours") as HTMLSelectElement).value;
|
||||
}
|
||||
set hours(n: number) {
|
||||
this._hours.value = ""+n;
|
||||
(document.getElementById("create-hours") as HTMLSelectElement).value = ""+n;
|
||||
this._checkDurationValidity();
|
||||
}
|
||||
get minutes(): number {
|
||||
return +this._minutes.value;
|
||||
return +(document.getElementById("create-minutes") as HTMLSelectElement).value;
|
||||
}
|
||||
set minutes(n: number) {
|
||||
this._minutes.value = ""+n;
|
||||
(document.getElementById("create-minutes") as HTMLSelectElement).value = ""+n;
|
||||
this._checkDurationValidity();
|
||||
}
|
||||
|
||||
@ -581,7 +559,6 @@ export class createInvite {
|
||||
}
|
||||
|
||||
create = () => {
|
||||
toggleLoader(this._createButton);
|
||||
let send = {
|
||||
"days": this.days,
|
||||
"hours": this.hours,
|
||||
@ -593,11 +570,8 @@ export class createInvite {
|
||||
"profile": this.profile
|
||||
};
|
||||
_post("/invites", send, (req: XMLHttpRequest) => {
|
||||
if (req.readyState == 4) {
|
||||
if (req.status == 200 || req.status == 204) {
|
||||
document.dispatchEvent(this._newInviteEvent);
|
||||
}
|
||||
toggleLoader(this._createButton);
|
||||
if (req.readyState == 4 && (req.status == 200 || req.status == 204)) {
|
||||
document.dispatchEvent(this._newInviteEvent);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -614,15 +588,7 @@ export class createInvite {
|
||||
this._createButton.onclick = this.create;
|
||||
this.sendTo = "";
|
||||
this.uses = 1;
|
||||
|
||||
this._days.onchange = this._checkDurationValidity;
|
||||
this._hours.onchange = this._checkDurationValidity;
|
||||
this._minutes.onchange = this._checkDurationValidity;
|
||||
document.addEventListener("profileLoadEvent", () => { this.loadProfiles(); }, false);
|
||||
|
||||
if (!window.emailEnabled) {
|
||||
document.getElementById("create-send-to-container").classList.add("unfocused");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,14 +20,14 @@ export class Tabs implements Tabs {
|
||||
for (let t of this.tabs) {
|
||||
if (t.tabID == tabID) {
|
||||
t.buttonEl.classList.add("active", "~urge");
|
||||
if (t.preFunc) { t.preFunc(); }
|
||||
t.preFunc();
|
||||
t.tabEl.classList.remove("unfocused");
|
||||
if (t.postFunc) { t.postFunc(); }
|
||||
} else {
|
||||
t.buttonEl.classList.remove("active");
|
||||
t.buttonEl.classList.remove("~urge");
|
||||
t.tabEl.classList.add("unfocused");
|
||||
}
|
||||
t.postFunc();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,10 +16,7 @@ declare interface Window {
|
||||
cssFile: string;
|
||||
availableProfiles: string[];
|
||||
jfUsers: Array<Object>;
|
||||
notificationsEnabled: boolean;
|
||||
emailEnabled: boolean;
|
||||
ombiEnabled: boolean;
|
||||
usernameEnabled: boolean;
|
||||
notifications_enabled: boolean;
|
||||
token: string;
|
||||
buttonWidth: number;
|
||||
transitionEvent: string;
|
||||
@ -32,7 +29,6 @@ declare interface Window {
|
||||
declare interface NotificationBox {
|
||||
connectionError: () => void;
|
||||
customError: (type: string, message: string) => void;
|
||||
customPositive: (type: string, bold: string, message: string) => void;
|
||||
}
|
||||
|
||||
declare interface Tabs {
|
||||
@ -81,9 +77,5 @@ interface inviteList {
|
||||
reload: () => void;
|
||||
}
|
||||
|
||||
declare interface SubmitEvent extends Event {
|
||||
submitter: HTMLInputElement;
|
||||
}
|
||||
|
||||
declare var config: Object;
|
||||
declare var modifiedConfig: Object;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user