From 2d443fb50b21032e5ffbadbb6b2cfade4d340e7c Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Wed, 30 Dec 2020 23:48:01 +0000
Subject: [PATCH] fully functional invites tab, flesh out bugs

also:
* fix select chevrons appearing above modals
* add custom errors and use them for http errors, also now appear above
  modals.
* functional logout button
* slightly cleaned up admin.ts
---
 css/base.css          |   1 +
 css/modal.css         |   2 +-
 html/admin.html       | 158 ++++--------------------
 ts/admin.ts           |  97 ++++-----------
 ts/modules/common.ts  |  60 ++++++++--
 ts/modules/invites.ts | 273 +++++++++++++++++++++++++++++++-----------
 ts/typings/d.ts       |   5 +-
 7 files changed, 302 insertions(+), 294 deletions(-)

diff --git a/css/base.css b/css/base.css
index cd11b53..684be76 100644
--- a/css/base.css
+++ b/css/base.css
@@ -299,4 +299,5 @@ p.top {
     position: fixed;
     right: 1rem;
     bottom: 1rem;
+    z-index: 16;
 }
diff --git a/css/modal.css b/css/modal.css
index e544ff4..64e69ef 100644
--- a/css/modal.css
+++ b/css/modal.css
@@ -1,7 +1,7 @@
 .modal {
     display: none;
     position: fixed;
-    z-index: 1;
+    z-index: 12;
     top: 0;
     left: 0;
     width: 100%;
diff --git a/html/admin.html b/html/admin.html
index 3b5f6a3..a1a3440 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -15,7 +15,6 @@
                 <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">
-                <aside class="aside sm ~critical mb-half unfocused"></aside> 
                 <input type="submit" class="button ~urge !normal full-width center supra submit" value="Login">
             </form>
         </div>
@@ -30,7 +29,7 @@
         <div id="modal-about" class="modal">
             <div class="modal-content content card">
                 <span class="heading">About <span class="modal-close">&times;</span></span>
-                <img src="images/banner.svg" class="mt-1" alt="jfa-go banner">
+                <img src="/banner.svg" class="mt-1" alt="jfa-go banner">
                 <p><i class="icon ri-github-fill"></i><a href="https://github.com/hrfee/jfa-go">jfa-go</a></p>
                 <p>Version <span class="code monospace">{{ .version }}</span></p>
                 <p>Commit <span class="code monospace">{{ .commit }}</span></p>
@@ -126,174 +125,61 @@
             </div>
             <div class="mb-1">
                 <div class="text-neutral-700">
-                    <span class="button ~critical !normal mb-1">Logout</span>
+                    <span class="button ~critical !normal mb-1 unfocused" id="logout-button">Logout</span>
                     <span id="button-theme" class="button ~neutral !normal mb-1">Theme</span>
-                    <span id="modalButton" class="button ~neutral !normal mb-1">Trigger Login</span>
                 </div>
             </div>
             <div id="invitesTab">
                 <div class="card ~neutral !low invites mb-1">
                     <span class="heading">Invites</span>
-                    <div id="invites">
-                        <div class="inv">
-                            <div class="card ~neutral !normal inv-header flex-expand mt-half">
-                                <div class="inv-codearea">
-                                    <a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
-                                    <span class="button ~info !normal" title="Copy invite link"><i class="ri-file-copy-line"></i></span>
-                                    <span class="support ml-1">Failed to send to this.email@addre.ss</span>
-                                </div>
-                                <div class="inv-infoarea">
-                                    <span class="inv-expiry mr-1">Expires in 30m</span>
-                                    <span class="button ~critical !normal">Delete</span>
-                                    <label>
-                                        <i class="icon ri-arrow-down-s-line not-rotated"></i>
-                                        <input type="checkbox" class="toggle-details unfocused">
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
-                                <div class="inv-row flex-expand align-top">
-                                    <div class="inv-profilearea">
-                                        <p class="supra mb-1 top">Profile</p>
-                                        <div class="select ~neutral !normal inv-profileselect inline-block">
-                                            <select>
-                                                <option>Friends</option>
-                                                <option>Family</option>
-                                                <option>No Profile</option>
-                                            </select>
-                                        </div>
-                                        <p class="label supra">Notify on:</p>
-                                        <label class="switch block">
-                                            <input type="checkbox" class="inv-notify-expiry">
-                                            <span>On expiry</span>
-                                        </label>
-                                        <label class="switch block">
-                                            <input type="checkbox" class="inv-notify-creation">
-                                            <span>On user creation</span>
-                                        </label>
-                                    </div>
-                                    <div class="block">
-                                        <p class="supra mb-1 top">Created <strong class="inv-created">10/12/20 18:46</strong></p>
-                                        <p class="supra mb-1">Remaining uses <strong class="inv-remaining">8</strong></p>
-                                    </div>
-                                    <div class="card ~neutral !low inv-created-users">
-                                        <strong class="supra table-header">Created users</strong>
-                                        <table class="table inv-table">
-                                            <thead>
-                                                <tr>
-                                                    <th>Name</th>
-                                                    <th>Date</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <tr>
-                                                    <td>jeff</td>
-                                                    <td>10/12/20 19:00</td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="inv">
-                            <div class="card ~neutral !normal inv-header flex-expand mt-half">
-                                <div class="inv-codearea">
-                                    <a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
-                                    <span class="button ~info !normal">Copy</span>
-                                </div>
-                                <div class="inv-infoarea">
-                                    <span class="inv-expiry mr-1">Expires in 30m</span>
-                                    <span class="button ~critical !normal">Delete</span>
-                                    <label>
-                                        <i class="icon ri-arrow-down-s-line not-rotated"></i>
-                                        <input type="checkbox" class="toggle-details unfocused">
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
-                                <div class="inv-row flex-expand align-top">
-                                    <div class="inv-profilearea">
-                                        <p class="supra mb-1 top">Profile</p>
-                                        <div class="select ~neutral !normal inv-profileselect inline-block">
-                                            <select>
-                                                <option>Friends</option>
-                                                <option>Family</option>
-                                                <option>No Profile</option>
-                                            </select>
-                                        </div>
-                                        <p class="label supra">Notify on:</p>
-                                        <label class="switch block">
-                                            <input type="checkbox" class="inv-notify-expiry">
-                                            <span>On expiry</span>
-                                        </label>
-                                        <label class="switch block">
-                                            <input type="checkbox" class="inv-notify-creation">
-                                            <span>On user creation</span>
-                                        </label>
-                                    </div>
-                                    <div class="block">
-                                        <p class="supra mb-1 top">Created <strong class="inv-created">10/12/20 18:46</strong></p>
-                                        <p class="supra mb-1">Remaining uses <strong class="inv-remaining">8</strong></p>
-                                    </div>
-                                    <div class="card ~neutral !low inv-created-users empty">
-                                        <strong class="supra table-header">Created users</strong>
-                                        <p class="content">None yet!</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    <div id="invites"></div>
                 </div>
-                <div class="card ~neutral !low create-inv">
+                <div class="card ~neutral !low">
                     <span class="heading">Create</span>
-                    <div class="row">
+                    <div class="row" id="create-inv">
                         <div class="card ~neutral !normal col">
-                            <label class="label supra" for="inv-days">Days</label>
+                            <label class="label supra" for="create-days">Days</label>
                             <div class="select ~neutral !normal mb-1 mt-half">
-                                <select id="inv-days">
+                                <select id="create-days">
                                     <option>0</option>
                                 </select>
                             </div>
-                            <label class="label supra" for="inv-hours">Hours</label>
+                            <label class="label supra" for="create-hours">Hours</label>
                             <div class="select ~neutral !normal mb-1 mt-half">
-                                <select id="inv-hours">
+                                <select id="create-hours">
                                     <option>0</option>
                                 </select>
                             </div>
-                            <label class="label supra" for="inv-minutes">Minutes</label>
+                            <label class="label supra" for="create-minutes">Minutes</label>
                             <div class="select ~neutral !normal mb-1 mt-half">
-                                <select id="inv-minutes">
+                                <select id="create-minutes">
                                     <option>0</option>
                                 </select>
                             </div>
                         </div>
                         <div class="card ~neutral !normal col">
-                            <label class="label supra" for="inv-uses">Number of uses</label>
+                            <label class="label supra" for="create-uses">Number of uses</label>
                             <div class="flex-expand mb-1 mt-half">
-                                <input type="number" min="0" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
-                                <label for="inv-inf-uses" class="button ~neutral !normal">
+                                <input type="number" min="0" id="create-uses" class="input ~neutral !normal mr-1" value=1>
+                                <label for="create-inf-uses" class="button ~neutral !normal">
                                     <span>∞</span>
-                                    <input type="checkbox" class="unfocused" id="inv-inf-uses" aria-label="Set uses to infinite">
+                                    <input type="checkbox" class="unfocused" id="create-inf-uses" aria-label="Set uses to infinite">
                                 </label>
                             </div>
-                            <p class="support unfocused"><span class="badge ~critical">Warning</span> invites with infinite uses can be used abusively.</p>
+                            <p class="support unfocused" id="create-inf-uses-warning"><span class="badge ~critical">Warning</span> invites with infinite uses can be used abusively.</p>
                             <label class="label supra">Profile</label>
-                            <div class="select ~neutral !normal mb-1 mt-half" id="inv-profile">
-                                <select>
-                                    <option>Friends</option>
-                                    <option>Family</option>
-                                    <option>No Profile</option>
+                            <div class="select ~neutral !normal mb-1 mt-half">
+                                <select id="create-profile">
                                 </select>
                             </div>
                             <label class="label supra">Send to</label>
                             <div class="flex-expand mb-1 mt-half">
-                                <input type="email" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
-                                <label for="inv-email-enabled" class="button ~neutral !normal">
-                                    <input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled">
+                                <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">Create</span>
+                            <span class="button ~urge !normal supra full-width center lg" id="create-submit">Create</span>
                         </div>
                     </div>
                 </div>
diff --git a/ts/admin.ts b/ts/admin.ts
index ed601d9..05f96a3 100644
--- a/ts/admin.ts
+++ b/ts/admin.ts
@@ -1,74 +1,24 @@
 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";
+import { inviteList, createInvite } from "./modules/invites.js";
+import { _post, notificationBox, whichAnimationEvent } 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.token = "";
+
+window.availableProfiles = window.availableProfiles || [];
+
+var inviteCreator = new createInvite();
+
+window.invites = new inviteList();
+
 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);
@@ -175,7 +125,6 @@ window.tabs.addTab("accountsTab", loadAccounts);
     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;
@@ -200,15 +149,6 @@ window.tabs.addTab("accountsTab", loadAccounts);
     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';
@@ -234,8 +174,7 @@ function login(username: string, password: string) {
                     errorMsg = "Unknown error";
                 }
                 if (!refresh) {
-                    errorMessage(window.modals.login.modal.querySelector("aside"), errorMsg, 5);
-                    
+                    window.notifications.customError("loginError", errorMsg);
                 } else {
                     window.modals.login.show();
                 }
@@ -245,6 +184,8 @@ function login(username: string, password: string) {
                 window.modals.login.close();
                 window.invites.reload();
                 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);
@@ -272,12 +213,18 @@ document.getElementById('form-login').addEventListener('submit', (event: Event)
     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);
+        window.notifications.customError("loginError", "The username and/or password were left blank.");
         return;
     }
-    login(username, password, true);
+    login(username, password);
 });
 
 login("", "");
 
-window.invites = new inviteList();
+(document.getElementById('logout-button') as HTMLButtonElement).onclick = () => _post("/logout", null, (req: XMLHttpRequest): boolean => {
+    if (req.readyState == 4 && req.status == 200) {
+        window.token = "";
+        location.reload();
+        return false;
+    }
+});
diff --git a/ts/modules/common.ts b/ts/modules/common.ts
index 3a1937f..0ba7821 100644
--- a/ts/modules/common.ts
+++ b/ts/modules/common.ts
@@ -49,14 +49,21 @@ export const rmAttr = (el: HTMLElement, attr: string): void => {
 };
 
 export const addAttr = (el: HTMLElement, attr: string): void => el.classList.add(attr);
-
 export const _get = (url: string, data: Object, onreadystatechange: (req: XMLHttpRequest) => void): void => {
     let req = new XMLHttpRequest();
     req.open("GET", window.URLBase + url, true);
     req.responseType = 'json';
     req.setRequestHeader("Authorization", "Bearer " + window.token);
     req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-    req.onreadystatechange = () => { if (req.status == 0) { window.notifications.connectionError(); } else { onreadystatechange(req); } };
+    req.onreadystatechange = () => {
+        if (req.status == 0) {
+            window.notifications.connectionError();
+            return;
+        } else if (req.status == 401) {
+            window.notifications.customError("401Error", "Unauthorized. Try logging back in.");
+        }
+        onreadystatechange(req);
+    };
     req.send(JSON.stringify(data));
 };
 
@@ -68,7 +75,15 @@ export const _post = (url: string, data: Object, onreadystatechange: (req: XMLHt
     }
     req.setRequestHeader("Authorization", "Bearer " + window.token);
     req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-    req.onreadystatechange = () => { if (req.status == 0) { window.notifications.connectionError(); } else { onreadystatechange(req); } };
+    req.onreadystatechange = () => {
+        if (req.status == 0) {
+            window.notifications.connectionError();
+            return;
+        } else if (req.status == 401) {
+            window.notifications.customError("401Error", "Unauthorized. Try logging back in.");
+        }
+        onreadystatechange(req);
+    };
     req.send(JSON.stringify(data));
 };
 
@@ -77,7 +92,15 @@ export function _delete(url: string, data: Object, onreadystatechange: (req: XML
     req.open("DELETE", window.URLBase + url, true);
     req.setRequestHeader("Authorization", "Bearer " + window.token);
     req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-    req.onreadystatechange = () => { if (req.status == 0) { window.notifications.connectionError(); } else { onreadystatechange(req); } };
+    req.onreadystatechange = () => {
+        if (req.status == 0) {
+            window.notifications.connectionError();
+            return;
+        } else if (req.status == 401) {
+            window.notifications.customError("401Error", "Unauthorized. Try logging back in.");
+        }
+        onreadystatechange(req);
+    };
     req.send(JSON.stringify(data));
 }
 
@@ -100,7 +123,8 @@ export function toClipboard (str: string) {
 
 export class notificationBox implements NotificationBox {
     private _box: HTMLDivElement;
-    timeout: number
+    private _errorTypes: { [type: string]: boolean } = {};
+    timeout: number;
     constructor(box: HTMLDivElement, timeout?: number) { this._box = box; this.timeout = timeout || 5; }
 
     private _error = (message: string): HTMLElement => {
@@ -115,14 +139,26 @@ export class notificationBox implements NotificationBox {
         return noti;
     }
     
-    private _connectionError: boolean = false;
-    connectionError = () => {
-        const noti = this._error("Couldn't connect to jfa-go.");
-        if (this._connectionError) {
-            this._box.querySelector("aside.notification-error").remove();
+    connectionError = () => { this.customError("connectionError", "Couldn't connect to jfa-go"); }
+
+    customError = (type: string, message: string) => {
+        this._errorTypes[type] = this._errorTypes[type] || false;
+        const noti = this._error(message);
+        noti.classList.add("error-" + type);
+        const previousNoti: HTMLElement | undefined = this._box.querySelector("aside.error-" + type);
+        if (this._errorTypes[type] && previousNoti !== undefined && previousNoti != null) {
+            previousNoti.remove();
         }
         this._box.appendChild(noti);
-        this._connectionError = true;
-        setTimeout(() => { this._box.removeChild(noti); this._connectionError = false; }, this.timeout*1000);
+        this._errorTypes[type] = true;
+        setTimeout(() => { if (this._box.contains(noti)) { this._box.removeChild(noti); this._errorTypes[type] = false; } }, this.timeout*1000);
     }
 }
+
+export const whichAnimationEvent = () => {
+    const el = document.createElement("fakeElement");
+    if (el.style["animation"] !== void 0) {
+        return "animationend";
+    }
+    return "webkitAnimationEnd";
+}
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
index 112def4..dcaf8a9 100644
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@@ -1,6 +1,9 @@
 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;
@@ -18,11 +21,13 @@ export class DOMInvite implements Invite {
         });
     }
 
-    delete = () => { _delete("/invites", { "code": this.code }, (req: XMLHttpRequest) => {
+    delete = () => _delete("/invites", { "code": this.code }, (req: XMLHttpRequest) => {
         if (req.readyState == 4 && (req.status == 200 || req.status == 204)) {
             this.remove();
+            const inviteDeletedEvent = new CustomEvent("inviteDeletedEvent", { "detail": this.code });
+            document.dispatchEvent(inviteDeletedEvent);
         }
-    }); }
+    })
     
     private _code: string = "None";
     get code(): string { return this._code; }
@@ -153,7 +158,23 @@ export class DOMInvite implements Invite {
             innerHTML += `<option value="${profile}" ${((profile == selected) && !noProfile) ? "selected" : ""}>${profile}</option>`;
         }
         select.innerHTML = innerHTML;
+        this._profile = selected;
     };
+    updateProfile = () => {
+        const select = this._left.querySelector("select") as HTMLSelectElement;
+        const previous = this.profile;
+        let profile = select.value;
+        if (profile == "noProfile") { profile = ""; }
+        _post("/invites/profile", { "invite": this.code, "profile": profile }, (req: XMLHttpRequest) => {
+            if (req.readyState == 4) {
+                if (!(req.status == 200 || req.status == 204)) {
+                    select.value = previous || "noProfile";
+                } else {
+                    this._profile = profile;
+                }
+            }
+        });
+    }
 
     private _container: HTMLDivElement;
 
@@ -202,7 +223,21 @@ export class DOMInvite implements Invite {
         <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>
         `;
-        (this._codeArea.querySelector("span.button") as HTMLSpanElement).onclick = () => { toClipboard(this._codeLink); };
+        const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
+        copyButton.onclick = () => { 
+            toClipboard(this._codeLink);
+            const icon = copyButton.children[0];
+            icon.classList.remove("ri-file-copy-line");
+            icon.classList.add("ri-check-line");
+            copyButton.classList.remove("~info");
+            copyButton.classList.add("~positive");
+            setTimeout(() => {
+                icon.classList.remove("ri-check-line");
+                icon.classList.add("ri-file-copy-line");
+                copyButton.classList.remove("~positive");
+                copyButton.classList.add("~info");
+            }, 800);
+        };
 
         this._infoArea = document.createElement('div') as HTMLDivElement;
         this._header.appendChild(this._infoArea);
@@ -252,6 +287,8 @@ export class DOMInvite implements Invite {
             <span>On user creation</span>
         </label>
         `;
+        (this._left.querySelector("select") as HTMLSelectElement).onchange = this.updateProfile;
+
         const notifyExpiry = this._left.querySelector("input.inv-notify-expiry") as HTMLInputElement;
         notifyExpiry.onchange = () => { this._notifyExpiry = notifyExpiry.checked; this.updateNotify(notifyExpiry); };
 
@@ -276,6 +313,8 @@ export class DOMInvite implements Invite {
 
         this.expanded = false;
         this.update(invite);
+
+        document.addEventListener("profileLoadEvent", () => { this.loadProfiles(); }, false);
     }
 
     update = (invite: Invite) => {
@@ -295,19 +334,27 @@ export class DOMInvite implements Invite {
     remove = () => { this._container.remove(); }
 }
 
-// TODO:
-// implement inviteList as a class
-// inviteList has empty boolean value, set true adds an emptyInvite
-
 export class inviteList implements inviteList {
     private _list: HTMLDivElement;
     private _empty: boolean;
+    // since invite reload sends profiles, this event it broadcast so the createInvite object can load them.
+    private _profileLoadEvent = new CustomEvent("profileLoadEvent");
+
     invites: { [code: string]: DOMInvite };
 
     constructor() {
         this._list = document.getElementById('invites') as HTMLDivElement;
         this.empty = true;
         this.invites = {};
+        document.addEventListener("newInviteEvent", () => { this.reload(); }, false);
+        document.addEventListener("inviteDeletedEvent", (event: CustomEvent) => {
+            const code = event.detail;
+            const length = Object.keys(this.invites).length - 1; // store prior as Object.keys is undefined when there are no keys
+            delete this.invites[code];
+            if (length == 0) {
+                this.empty = true;
+            }
+        }, false);
     }
 
     get empty(): boolean { return this._empty; }
@@ -340,14 +387,12 @@ export class inviteList implements inviteList {
         this._list.appendChild(domInv.asElement());
     }
 
-    reload = () => { _get("/invites", null, (req: XMLHttpRequest) => {
+    reload = () => _get("/invites", null, (req: XMLHttpRequest) => {
         if (req.readyState == 4) {
             let data = req.response;
             window.availableProfiles = data["profiles"];
-            for (let code in this.invites) {
-                this.invites[code].loadProfiles();
-            }
-            if (data["invites"] === undefined || data["invites"].length == 0) {
+            document.dispatchEvent(this._profileLoadEvent);
+            if (data["invites"] === undefined || data["invites"] == null || data["invites"].length == 0) {
                 this.empty = true;
                 return;
             }
@@ -370,7 +415,7 @@ export class inviteList implements inviteList {
                 delete this.invites[code];
             }
         }
-    }) }
+    })
 }
     
 
@@ -394,66 +439,158 @@ function parseInvite(invite: { [f: string]: string | number | string[][] | boole
     parsed.notifyCreation = invite["notify-creation"] as boolean || false;
     return parsed;
 }
+
+export class createInvite {
+    private _sendToEnabled = document.getElementById("create-send-to-enabled") as HTMLInputElement;
+    private _sendTo = document.getElementById("create-send-to") as HTMLInputElement;
+    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 HTMLInputElement; // Actually a <span> but this allows "disabled"
+    private _profile = document.getElementById("create-profile") as HTMLSelectElement;
+    // Broadcast when new invite created
+    private _newInviteEvent = new CustomEvent("newInviteEvent");
+    private _firstLoad = true;
+
+    private _count: Number = 30;
+    private _populateNumbers = () => {
+        const fieldIDs = ["create-days", "create-hours", "create-minutes"];
+        for (let i = 0; i < fieldIDs.length; i++) {
+            const field = document.getElementById(fieldIDs[i]);
+            field.textContent = '';
+            for (let n = 0; n <= this._count; n++) {
+               const opt = document.createElement("option") as HTMLOptionElement;
+               opt.textContent = ""+n;
+               opt.value = ""+n;
+               field.appendChild(opt);
+            }
+        }
+    }
+
+    get sendToEnabled(): boolean {
+        return this._sendToEnabled.checked;
+    }
+    set sendToEnabled(state: boolean) {
+        this._sendToEnabled.checked = state;
+        this._sendTo.disabled = !state;
+        if (state) {
+            this._sendToEnabled.parentElement.classList.remove("~neutral");
+            this._sendToEnabled.parentElement.classList.add("~urge");
+        } else {
+            this._sendToEnabled.parentElement.classList.remove("~urge");
+            this._sendToEnabled.parentElement.classList.add("~neutral");
+        }
+    }
+
+    get infiniteUses(): boolean {
+        return this._infUses.checked;
+    }
+    set infiniteUses(state: boolean) {
+        this._infUses.checked = state;
+        this._uses.disabled = state;
+        if (state) {
+            this._infUses.parentElement.classList.remove("~neutral");
+            this._infUses.parentElement.classList.add("~urge");
+            this._infUsesWarning.classList.remove("unfocused");
+        } else {
+            this._infUses.parentElement.classList.remove("~urge");
+            this._infUses.parentElement.classList.add("~neutral");
+            this._infUsesWarning.classList.add("unfocused");
+        }
+    }
     
+    get uses(): number { return this._uses.valueAsNumber; }
+    set uses(n: number) { this._uses.valueAsNumber = n; }
 
+    private _checkDurationValidity = () => {
+        this._createButton.disabled = (this.days + this.hours + this.minutes == 0);
+    }
 
-/*
-function addInvite(invite: Invite): void {
-    const list = document.getElementById('invites') as HTMLDivElement;
-    const container = document.createElement('div') as HTMLDivElement;
-    container.classList.add("inv");
-    container.id = "invite-" + invite.code;
-    // invite header
-    const header = document.createElement("div") as HTMLDivElement;
-    (() => {
-        header.classList.add("card", "~neutral", "!normal", "inv-header", "flex-expand", "mt-half");
-        // code area (code, copy button, "sent to" message)
-        const codeArea = document.createElement('div') as HTMLDivElement;
-        (() => {
-            codeArea.classList.add('inv-codearea');
-            if (invite.empty) {
-                codeArea.innerHTML = `
-                <a class="code monospace">None</a>
-                `;
-                return;
+    get days(): number {
+        return +(document.getElementById("create-days") as HTMLSelectElement).value;
+    }
+    set days(n: number) {
+        (document.getElementById("create-days") as HTMLSelectElement).value = ""+n;
+        this._checkDurationValidity();
+    }
+    get hours(): number {
+        return +(document.getElementById("create-hours") as HTMLSelectElement).value;
+    }
+    set hours(n: number) {
+        (document.getElementById("create-hours") as HTMLSelectElement).value = ""+n;
+        this._checkDurationValidity();
+    }
+    get minutes(): number {
+        return +(document.getElementById("create-minutes") as HTMLSelectElement).value;
+    }
+    set minutes(n: number) {
+        (document.getElementById("create-minutes") as HTMLSelectElement).value = ""+n;
+        this._checkDurationValidity();
+    }
+
+    get sendTo(): string { return this._sendTo.value; }
+    set sendTo(address: string) { this._sendTo.value = address; }
+
+    get profile(): string { 
+        const val = this._profile.value;
+        if (val == "noProfile") {
+            return "";
+        }
+        return val;
+    }
+    set profile(p: string) {
+        if (p == "") { p = "noProfile"; }
+        this._profile.value = p;
+    }
+
+    loadProfiles = () => {
+        let innerHTML = `<option value="noProfile">No Profile</option>`;
+        for (let profile of window.availableProfiles) {
+            innerHTML += `<option value="${profile}">${profile}</option>`;
+        }
+        let selected = this.profile;
+        this._profile.innerHTML = innerHTML;
+        if (this._firstLoad) {
+            this.profile = window.availableProfiles[0] || "";
+            this._firstLoad = false;
+        } else {
+            this.profile = selected;
+        }
+    }
+
+    create = () => {
+        let send = {
+            "days": this.days,
+            "hours": this.hours,
+            "minutes": this.minutes,
+            "multiple-uses": (this.uses > 1 || this.infiniteUses),
+            "no-limit": this.infiniteUses,
+            "remaining-uses": this.uses,
+            "email": this.sendToEnabled ? this.sendTo : "",
+            "profile": this.profile
+        };
+        _post("/invites", send, (req: XMLHttpRequest) => {
+            if (req.readyState == 4 && (req.status == 200 || req.status == 204)) {
+                document.dispatchEvent(this._newInviteEvent);
             }
-            const link = window.location.href.split("#")[0] + "invite/" + invite.code;
-            let innerHTML = `
-            <a class="code monospace mr-1" href="${link}">${invite.code.replace(/-/g, '-')}</a>
-            <span class="button ~info !normal" title="Copy invite link"><i class="ri-file-copy-line"></i></span>
-            `;
-            if (invite.email) {
-                let email = invite.email;
-                if (!invite.email.includes("Failed to send to")) {
-                    email = "Sent to " + email;
-                }
-                innerHTML += `
-                <span class="support ml-1">${email}</span>
-                `;
-            }
-            codeArea.innerHTML = innerHTML;
-        })();
-        header.appendChild(codeArea);
+        });
+    }
 
-        // info area (expiry, delete, dropdown button)
-        const infoArea = document.createElement('div') as HTMLDivElement;
-        (() => {
-            infoArea.classList.add("inv-infoarea");
-            infoArea.innerHTML = `
-            <span class="inv-expiry mr-1">${invite.expiresIn}</span>
-            <span class="button ~critical !normal inv-delete">Delete</span>
-            <label>
-                <i class="icon ri-arrow-down-s-line not-rotated"></i>
-                <input class="toggle-details
-                `; /// LINE 70
-        })();
-            
-    })();
-    if (invite.empty) {
-        container.appendChild(header);
-        list.appendChild(container);
-        return;
+    constructor() {
+        this._populateNumbers();
+        this.days = 0;
+        this.hours = 0;
+        this.minutes = 30;
+        this._infUses.onchange = () => { this.infiniteUses = this.infiniteUses; };
+        this.infiniteUses = false;
+        this._sendToEnabled.onchange = () => { this.sendToEnabled = this.sendToEnabled; };
+        this.sendToEnabled = false;
+        this._createButton.onclick = this.create;
+        this.sendTo = "";
+        this.uses = 1;
+        document.addEventListener("profileLoadEvent", () => { this.loadProfiles(); }, false);
     }
 }
 
-*/
+
+
diff --git a/ts/typings/d.ts b/ts/typings/d.ts
index c92eadd..9442ad7 100644
--- a/ts/typings/d.ts
+++ b/ts/typings/d.ts
@@ -14,7 +14,7 @@ declare interface Window {
     URLBase: string;
     modals: Modals;
     cssFile: string;
-    availableProfiles: Array<any>;
+    availableProfiles: string[];
     jfUsers: Array<Object>;
     notifications_enabled: boolean;
     token: string;
@@ -27,7 +27,8 @@ declare interface Window {
 }
 
 declare interface NotificationBox {
-    connectionError: (timeout: number) => void;
+    connectionError: () => void;
+    customError: (type: string, message: string) => void;
 }
 
 declare interface Tabs {