From 1b416215697ae6c2b38bd33d6108c4f90eb1be20 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Wed, 30 Dec 2020 15:32:44 +0000
Subject: [PATCH] implement invites as a class, use tooltip for email send
 status

the DOMInvite class represents an invite on the dom, and modifying its
attributes applies the changes on the web page. Email send status
message is now on the right of the invite and represented by an icon.
Hovering reveals the "Sent to"/"Failed to send to" message.
---
 css/base.css          |   4 +
 css/tooltip.css       |   8 +
 html/admin.html       | 201 +++++++++----------
 ts/admin.ts           |   9 +-
 ts/modules/common.ts  |  20 +-
 ts/modules/invites.ts | 436 ++++++++++++++++++++++++++++++++++++++++++
 ts/typings/d.ts       |  13 +-
 7 files changed, 585 insertions(+), 106 deletions(-)
 create mode 100644 ts/modules/invites.ts

diff --git a/css/base.css b/css/base.css
index 447b575..53f1bb0 100644
--- a/css/base.css
+++ b/css/base.css
@@ -135,6 +135,10 @@ sup.\~critical, .text-critical {
     color: var(--color-critical-normal-content);
 }
 
+.grey {
+    color: var(--color-neutral-500);
+}
+
 .aside.sm {
     font-size: 0.8rem;
     padding: 0.8rem;
diff --git a/css/tooltip.css b/css/tooltip.css
index e398c5c..4566f30 100644
--- a/css/tooltip.css
+++ b/css/tooltip.css
@@ -16,9 +16,17 @@
 
     position: absolute;
     z-index: 1;
+    top: -1rem;
+}
+
+.tooltip.right .content {
     left: 120%;
 }
 
+.tooltip.left .content {
+    right: 120%;
+}
+
 .tooltip .content.sm {
     font-size: 0.8rem;
 }
diff --git a/html/admin.html b/html/admin.html
index be0b4aa..f795f92 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -133,109 +133,112 @@
             <div id="invitesTab">
                 <div class="card ~neutral !low invites mb-1">
                     <span class="heading">Invites</span>
-                    <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 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="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 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>
-                                    <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 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>
-                                    <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>
+                                    <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 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 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>
@@ -356,7 +359,7 @@
                                 <div class="setting">
                                     <label class="label" for="settings-input">
                                         Input <span class="badge ~critical">*</span>
-                                        <div class="tooltip">
+                                        <div class="tooltip right">
                                             <i class="icon ri-information-line"></i>
                                             <span class="content sm">An example tooltip.</span>
                                         </div>
diff --git a/ts/admin.ts b/ts/admin.ts
index be0e53c..b4947e9 100644
--- a/ts/admin.ts
+++ b/ts/admin.ts
@@ -1,6 +1,7 @@
 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";
 
 loadTheme();
 (document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme;
@@ -13,7 +14,7 @@ const whichAnimationEvent = () => {
     return "webkitAnimationEnd";
 }
 window.animationEvent = whichAnimationEvent();
-const toggles: HTMLInputElement[] = Array.from(document.getElementsByClassName('toggle-details'));
+/*const toggles: HTMLInputElement[] = Array.from(document.getElementsByClassName('toggle-details'));
 for (let toggle of toggles) {
     toggle.onclick = () => {
         const el = toggle.parentElement.parentElement.parentElement.nextElementSibling as HTMLDivElement;
@@ -27,7 +28,7 @@ for (let toggle of toggles) {
         toggle.previousElementSibling.classList.toggle("rotated");
         toggle.previousElementSibling.classList.toggle("not-rotated");
     };
-}
+}*/
 
 const checkInfUses = function (check: HTMLInputElement, mode = 2) {
     const uses = document.getElementById('inv-uses') as HTMLInputElement;
@@ -254,6 +255,8 @@ function login(username: string, password: string) {
                 const data = this.response;
                 window.token = data["token"];
                 window.modals.login.close();
+                window.invites.reload();
+                setInterval(window.invites.reload, 30*1000);
                 /*generateInvites();
                 setInterval((): void => generateInvites(), 60 * 1000);
                 addOptions(30, document.getElementById('days') as HTMLSelectElement);
@@ -288,3 +291,5 @@ document.getElementById('form-login').addEventListener('submit', (event: Event)
 });
 
 login("", "");
+
+window.invites = new inviteList();
diff --git a/ts/modules/common.ts b/ts/modules/common.ts
index 39ba0d2..a7a0041 100644
--- a/ts/modules/common.ts
+++ b/ts/modules/common.ts
@@ -50,13 +50,13 @@ 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: () => void): void => {
+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 = onreadystatechange;
+    req.onreadystatechange = () => { onreadystatechange(req); };
     req.send(JSON.stringify(data));
 };
 
@@ -81,3 +81,19 @@ export function _delete(url: string, data: Object, onreadystatechange: () => voi
     req.send(JSON.stringify(data));
 }
 
+export function toClipboard (str: string) {
+    const el = document.createElement('textarea') as HTMLTextAreaElement;
+    el.value = str;
+    el.readOnly = true;
+    el.style.position = "absolute";
+    el.style.left = "-9999px";
+    document.body.appendChild(el);
+    const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
+    el.select();
+    document.execCommand("copy");
+    document.body.removeChild(el);
+    if (selected) {
+        document.getSelection().removeAllRanges();
+        document.getSelection().addRange(selected);
+    }
+}
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
new file mode 100644
index 0000000..39a57ca
--- /dev/null
+++ b/ts/modules/invites.ts
@@ -0,0 +1,436 @@
+import { _get, _post, _delete, toClipboard } from "../modules/common.js";
+
+export class DOMInvite implements Invite {
+    
+    // TODO
+    updateNotify = () => {}; // SetNotify
+    delete = () => {}; // deleteInvite
+    
+    private _code: string = "None";
+    get code(): string { return this._code; }
+    set code(code: string) {
+        this._code = code;
+        this._codeLink = window.location.href.split("#")[0] + "invite/" + code;
+        const linkEl = this._codeArea.querySelector("a") as HTMLAnchorElement;
+        linkEl.textContent = code.replace(/-/g, '-');
+        linkEl.href = this._codeLink;
+    }
+    private _codeLink: string;
+
+    private _expiresIn: string;
+    get expiresIn(): string { return this._expiresIn }
+    set expiresIn(expiry: string) {
+        this._expiresIn = expiry;
+        this._infoArea.querySelector("span.inv-expiry").textContent = expiry;
+    }
+
+    private _remainingUses: string = "1";
+    get remainingUses(): string { return this._remainingUses; }
+    set remainingUses(remaining: string) {
+        this._remainingUses = remaining;
+        this._middle.querySelector("strong.inv-remaining").textContent = remaining;
+    }
+
+    private _email: string = "";
+    get email(): string { return this._email };
+    set email(address: string) {
+        this._email = address;
+        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 == "") {
+            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 {
+            chip.classList.add("chip");
+            if (address.includes("Failed to send to")) {
+                icon.classList.remove("ri-mail-line");
+                icon.classList.add("ri-mail-close-line");
+                chip.classList.remove("~neutral");
+                chip.classList.add("~critical");
+            } else {
+                address = "Sent to " + address;
+                icon.classList.remove("ri-mail-close-line");
+                icon.classList.add("ri-mail-line");
+                chip.classList.remove("~critical");
+                chip.classList.add("~neutral");
+            }
+        }
+        tooltip.textContent = address;
+    }
+
+    private _usedBy: string[][];
+    get usedBy(): string[][] { return this._usedBy; }
+    set usedBy(uB: string[][]) {
+        // ub[i][0]: username, ub[i][1]: date
+        this._usedBy = uB;
+        if (uB.length == 0) {
+            this._right.classList.add("empty");
+            this._userTable.innerHTML = `<p class="content">None yet!</p>`;
+            return;
+        }
+        this._right.classList.remove("empty");
+        let innerHTML = `
+        <table class="table inv-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Date</th>
+                </tr>
+            </thead>
+            <tbody>
+        `;
+        for (let user of uB) {
+            innerHTML += `
+                <tr>
+                    <td>${user[0]}</td>
+                    <td>${user[1]}</td>
+                </tr>
+            `;
+        }
+        innerHTML += `
+            </tbody>
+        </table>
+        `;
+        this._userTable.innerHTML = innerHTML;
+    }
+
+    private _created: string;
+    get created(): string { return this._created; }
+    set created(created: string) {
+        this._created = created;
+        this._middle.querySelector("strong.inv-created").textContent = created;
+    }
+    
+    private _notifyExpiry: boolean = false;
+    get notifyExpiry(): boolean { return this._notifyExpiry }
+    set notifyExpiry(state: boolean) {
+        this._notifyExpiry = state;
+        (this._left.querySelector("input.inv-notify-expiry") as HTMLInputElement).checked = state;
+    }
+
+    private _notifyCreation: boolean = false;
+    get notifyCreation(): boolean { return this._notifyCreation }
+    set notifyCreation(state: boolean) {
+        this._notifyCreation = state;
+        (this._left.querySelector("input.inv-notify-creation") as HTMLInputElement).checked = state;
+    }
+
+    private _profile: string;
+    get profile(): string { return this._profile; }
+    set profile(profile: string) { this.loadProfiles(profile); }
+    loadProfiles = (selected?: string) => {
+        const select = this._left.querySelector("select") as HTMLSelectElement;
+        let noProfile = false;
+        if (selected === "") {
+            noProfile = true; 
+        } else {
+            selected = selected || select.value;
+        }
+        let innerHTML = `<option value="noProfile" ${noProfile ? "selected" : ""}>No Profile</option>`;
+        for (let profile of window.availableProfiles) {
+            innerHTML += `<option value="${profile}" ${((profile == selected) && !noProfile) ? "selected" : ""}>${profile}</option>`;
+        }
+        select.innerHTML = innerHTML;
+    };
+
+    private _container: HTMLDivElement;
+
+    private _header: HTMLDivElement;
+    private _codeArea: HTMLDivElement;
+    private _infoArea: HTMLDivElement;
+
+    private _details: HTMLDivElement;
+    private _left: HTMLDivElement;
+    private _middle: HTMLDivElement;
+    private _right: HTMLDivElement;
+    private _userTable: HTMLDivElement;
+
+    // whether the details card is expanded.
+    get expanded(): boolean {
+        return this._details.classList.contains("focused");
+    }
+    set expanded(state: boolean) {
+        const toggle = (this._infoArea.querySelector("input.inv-toggle-details") as HTMLInputElement);
+        if (state) {
+            this._details.classList.remove("unfocused");
+            this._details.classList.add("focused");
+            toggle.previousElementSibling.classList.add("rotated");
+            toggle.previousElementSibling.classList.remove("not-rotated");
+        } else {
+            this._details.classList.add("unfocused");
+            this._details.classList.remove("focused");
+            toggle.previousElementSibling.classList.remove("rotated");
+            toggle.previousElementSibling.classList.add("not-rotated");
+        }
+    }
+
+    constructor(invite: Invite) {
+        // first create the invite structure, then use our setter methods to fill in the data.
+        this._container = document.createElement('div') as HTMLDivElement;
+        this._container.classList.add("inv");
+
+        this._header = document.createElement('div') as HTMLDivElement;
+        this._container.appendChild(this._header);
+        this._header.classList.add("card", "~neutral", "!normal", "inv-header", "flex-expand", "mt-half");
+
+        this._codeArea = document.createElement('div') as HTMLDivElement;
+        this._header.appendChild(this._codeArea);
+        this._codeArea.classList.add("inv-codearea");
+        this._codeArea.innerHTML = `
+        <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); };
+
+        this._infoArea = document.createElement('div') as HTMLDivElement;
+        this._header.appendChild(this._infoArea);
+        this._infoArea.classList.add("inv-infoarea");
+        this._infoArea.innerHTML = `
+        <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 ri-arrow-down-s-line not-rotated"></i>
+            <input class="inv-toggle-details unfocused" type="checkbox">
+        </label>
+        `;
+        
+        (this._infoArea.querySelector(".inv-delete") as HTMLSpanElement).onclick = this.delete;
+
+        const toggle = (this._infoArea.querySelector("input.inv-toggle-details") as HTMLInputElement);
+        toggle.onchange = () => { this.expanded = !this.expanded; };
+
+        this._details = document.createElement('div') as HTMLDivElement;
+        this._container.appendChild(this._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", "align-top");
+
+        this._left = document.createElement('div') as HTMLDivElement;
+        detailsInner.appendChild(this._left);
+        this._left.classList.add("inv-profilearea");
+        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>
+        `;
+
+        this._middle = document.createElement('div') as HTMLDivElement;
+        detailsInner.appendChild(this._middle);
+        this._middle.classList.add("block");
+        this._middle.innerHTML = `
+        <p class="supra mb-1 top">Created <strong class="inv-created"></strong></p>
+        <p class="supra mb-1">Remaining uses <strong class="inv-remaining"></strong></p>
+        `;
+
+        this._right = document.createElement('div') as HTMLDivElement;
+        detailsInner.appendChild(this._right);
+        this._right.classList.add("card", "~neutral", "!low", "inv-created-users");
+        this._right.innerHTML = `<strong class="supra table-header">Created users</strong>`;
+        this._userTable = document.createElement('div') as HTMLDivElement;
+        this._right.appendChild(this._userTable);
+
+
+        this.expanded = false;
+        this.update(invite);
+    }
+
+    update = (invite: Invite) => {
+        this.code = invite.code;
+        this.created = invite.created;
+        this.email = invite.email;
+        this.expiresIn = invite.expiresIn;
+        this.notifyCreation = invite.notifyCreation;
+        this.notifyExpiry = invite.notifyExpiry;
+        this.profile = invite.profile;
+        this.remainingUses = invite.remainingUses;
+        this.usedBy = invite.usedBy;
+    }
+
+    asElement = (): HTMLDivElement => { return this._container; }
+
+    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;
+    invites: { [code: string]: DOMInvite };
+
+    constructor() {
+        this._list = document.getElementById('invites') as HTMLDivElement;
+        this.empty = true;
+        this.invites = {};
+    }
+
+    get empty(): boolean { return this._empty; }
+    set empty(state: boolean) {
+        this._empty = state;
+        if (state) {
+            this.invites = {};
+            this._list.classList.add("empty");
+            this._list.innerHTML = `
+            <div class="inv inv-empty">
+                <div class="card ~neutral !normal inv-header flex-expand mt-half">
+                    <div class="inv-codearea">
+                        <span class="code monospace">None</span>
+                    </div>
+                </div>
+            </div>
+            `;
+        } else {
+            this._list.classList.remove("empty");
+            if (this._list.querySelector(".inv-empty")) {
+                this._list.textContent = '';
+            }
+        }
+    }
+
+    add = (invite: Invite) => {
+        let domInv = new DOMInvite(invite);
+        this.invites[invite.code] = domInv;
+        if (this.empty) { this.empty = false; }
+        this._list.appendChild(domInv.asElement());
+    }
+
+    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) {
+                this.empty = true;
+                return;
+            }
+            // get a list of all current inv codes on dom
+            // every time we find a match in resp, delete from list
+            // at end delete all remaining in list from dom
+            let invitesOnDOM: { [code: string]: boolean } = {};
+            for (let code in this.invites) { invitesOnDOM[code] = true; }
+            for (let inv of (data["invites"] as Array<any>)) {
+                const invite = parseInvite(inv);
+                if (invite.code in this.invites) {
+                    this.invites[invite.code].update(invite);
+                    delete invitesOnDOM[invite.code];
+                } else {
+                    this.add(invite);
+                }
+            }
+            for (let code in invitesOnDOM) {
+                this.invites[code].remove();
+                delete this.invites[code];
+            }
+        }
+    }) }
+}
+    
+
+function parseInvite(invite: { [f: string]: string | number | string[][] | boolean }): Invite {
+    let parsed: Invite = {};
+    parsed.code = invite["code"] as string;
+    parsed.email = invite["email"] as string || "";
+    let time = "";
+    const fields = ["days", "hours", "minutes"];
+    for (let i = 0; i < fields.length; i++) {
+        if (invite[fields[i]] != 0) {
+            time += `${invite[fields[i]]}${fields[i][0]} `;
+        }
+    }
+    parsed.expiresIn = `Expires in ${time.slice(0, -1)}`;
+    parsed.remainingUses = invite["no-limit"] ? "∞" : String(invite["remaining-uses"])
+    parsed.usedBy = invite["used-by"] as string[][] || [];
+    parsed.created = invite["created"] as string || "Unknown";
+    parsed.profile = invite["profile"] as string || "";
+    parsed.notifyExpiry = invite["notify-expiry"] as boolean || false;
+    parsed.notifyCreation = invite["notify-creation"] as boolean || false;
+    return parsed;
+}
+    
+
+
+/*
+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;
+            }
+            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;
+    }
+}
+
+*/
diff --git a/ts/typings/d.ts b/ts/typings/d.ts
index cf0ea07..b3b53a4 100644
--- a/ts/typings/d.ts
+++ b/ts/typings/d.ts
@@ -21,7 +21,8 @@ declare interface Window {
     buttonWidth: number;
     transitionEvent: string;
     animationEvent: string;
-    tabs: Tabs
+    tabs: Tabs;
+    invites: inviteList;
 }
 
 declare interface Tabs {
@@ -54,15 +55,21 @@ declare interface Modals {
 interface Invite {
     code?: string;
     expiresIn?: string;
-    empty: boolean;
     remainingUses?: string;
     email?: string;
-    usedBy?: Array<Array<string>>;
+    usedBy?: string[][];
     created?: string;
     notifyExpiry?: boolean;
     notifyCreation?: boolean;
     profile?: string;
 }
 
+interface inviteList {
+    empty: boolean;
+    invites: { [code: string]: Invite }
+    add: (invite: Invite) => void;
+    reload: () => void;
+}
+
 declare var config: Object;
 declare var modifiedConfig: Object;