add form, restructure ts

admin.html

@@ -145,7 +145,7 @@
                         <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">Profile</p>
+                                    <p class="supra mb-1 top">Profile</p>
                                     <div class="select ~neutral !normal inv-profileselect inline-block">
                                         <select>
                                             <option>Friends</option>
@@ -164,10 +164,10 @@
                                     </label>
                                 </div>
                                 <div class="block">
-                                    <p class="supra mb-1">Created <strong class="inv-created">10/12/20 18:46</strong></p>
+                                    <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">
+                                <div class="card ~neutral !low inv-created-users">
                                     <strong class="supra table-header">Created users</strong>
                                     <table class="table inv-table">
                                         <thead>
@@ -187,25 +187,72 @@
                             </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 class="card ~neutral !low create-inv">
                     <span class="heading">Create</span>
                     <div class="row">
                         <div class="card ~neutral !normal col">
                             <label class="label supra" for="inv-days">Days</label>
-                            <div class="select ~neutral !normal mb-1">
+                            <div class="select ~neutral !normal mb-1 mt-half">
                                 <select id="inv-days">
                                     <option>0</option>
                                 </select>
                             </div>
                             <label class="label supra" for="inv-hours">Hours</label>
-                            <div class="select ~neutral !normal mb-1">
+                            <div class="select ~neutral !normal mb-1 mt-half">
                                 <select id="inv-hours">
                                     <option>0</option>
                                 </select>
                             </div>
                             <label class="label supra" for="inv-minutes">Minutes</label>
-                            <div class="select ~neutral !normal mb-1">
+                            <div class="select ~neutral !normal mb-1 mt-half">
                                 <select id="inv-minutes">
                                     <option>0</option>
                                 </select>
@@ -213,7 +260,7 @@
                         </div>
                         <div class="card ~neutral !normal col">
                             <label class="label supra" for="inv-uses">Number of uses</label>
-                            <div class="flex-expand mb-1">
+                            <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">
                                     <span>∞</span>
@@ -222,7 +269,7 @@
                             </div>
                             <p class="support unfocused"><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" id="inv-profile">
+                            <div class="select ~neutral !normal mb-1 mt-half" id="inv-profile">
                                 <select>
                                     <option>Friends</option>
                                     <option>Family</option>
@@ -230,13 +277,13 @@
                                 </select>
                             </div>
                             <label class="label supra">Send to</label>
-                            <div class="flex-expand mb-1">
+                            <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">
                                 </label>
                             </div>
-                            <span class="button ~urge !normal supra full-width center button-lg">Create</span>
+                            <span class="button ~urge !normal supra full-width center lg">Create</span>
                         </div>
                     </div>
                 </div>
@@ -316,7 +363,6 @@
                 </div>
             </div>
         </div>
-        <script src="modal.js"></script>
+        <script src="js/main.js" type="module"></script>
-        <script src="main.js"></script>
     </body>
 </html>

base.css

@@ -104,6 +104,10 @@
     flex-wrap: wrap;
 }
 
+.row.baseline {
+    align-items: baseline;
+}
+
 .col {
     flex: 1;
     margin: 0.5rem;
@@ -139,11 +143,19 @@ sup.\~critical, .text-critical {
     font-size: 1rem;
 }
 
-.table-header {
+.badge.lg {
+    font-size: 1rem;
+}
+
+.inv-created-users strong,p {
     padding-left: 0.5rem;
     padding-bottom: 0.2rem;
 }
 
+.inv-created-users.empty strong,p {
+    padding: 0;
+}
+
 .inv {
     overflow: visible;
 }
@@ -160,8 +172,8 @@ sup.\~critical, .text-critical {
     box-sizing: border-box; /* fixes weird length issue with inputs */
 }
 
-.button-lg {
+.button.lg {
-    height: 3rem;
+    height: 2.5rem;
 }
 
 .submit {
@@ -269,3 +281,9 @@ input {
     color: inherit;
     border: 0 solid var(--color-neutral-300);
 }
+
+p.top {
+    margin-top: 0px;
+}
+
+

form.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" class="light-theme">
+    <head>
+        <link rel="stylesheet" type="text/css" href="base.css">
+        <title>create an account - jfa-no</title>
+    </head>
+    <body class="max-w-full overflow-x-hidden section">
+        <div id="modal-success" class="modal">
+            <div class="modal-content card">
+                <span class="heading mb-1">{{ .lang.successHeader }}</span>
+                <p class="content mb-1">{{ .successMessage }}</p>
+                <span class="button ~urge !normal full-width center supra submit" id="create-success-button">{{ .lang.successContinueButton }}</span>
+            </div>
+        </div>
+        <div class="page-container">
+            <div class="card ~neutral !low">
+                <div class="row baseline">
+                    <span class="col heading">{{ .lang.createAccountHeader }}</span>
+                    <span class="col subheading"> {{ .helpMessage }}</span>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <form class="card ~neutral !normal" href="">
+                            <label class="label supra" for="create-username">{{ .lang.username }}</label>
+                            <input type="text" class="input ~neutral !high mt-half mb-1" placeholder="{{ .lang.username }}" id="create-username" aria-label="{{ .lang.username }}">
+                            
+                            <label class="label supra" for="create-email">{{ .lang.emailAddress }}</label>
+                            <input type="email" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.emailAddress }}" id="create-email" aria-label="{{ .lang.emailAddress }}">
+                            
+                            <label class="label supra" for="create-password">{{ .lang.password }}</label>
+                            <input type="password" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.password }}" id="create-password" aria-label="{{ .lang.password }}">
+                            
+                            <input type="submit" class="button ~urge !normal full-width center supra submit" value="{{ .lang.createAccountButton }}">
+                        </form>
+                    </div>
+                    <div class="col">
+                        <div class="card ~neutral !normal">
+                            <span class="label supra" for="inv-uses">{{ .lang.passwordRequirementsHeader }}</span>
+                            <ul>
+                                <li class="content" id="{{ $key }}" min="${{ $value }}">
+                                    {{ requirement }} <span class="badge lg ~positive"><i class="icon ri-check-line"></i></span>
+                                </li>
+                                <li class="content" id="{{ $key }}" min="${{ $value }}">
+                                    {{ requirement }} <span class="badge lg ~critical"><i class="icon ri-close-line"></i></span>
+                                </li>
+                            </ul>
+                        </div>
+                        <aside class="col aside sm ~info">{{ .contactMessage }}</aside>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script src="modal.js"></script>
+    </body>
+</html>
+

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "ts": "nodemon -e ts --watch ts --exec 'sh -c \"esbuild ts/*.ts --sourcemap --outdir=./\"'",
+    "ts": "nodemon -e ts --watch ts --exec 'sh -c \"esbuild ts/*.ts ts/modules/*.ts --sourcemap --outdir=./js/\"'",
     "serve": "npx live-server --ignore=\"ts/**,node_modules/**\"",
     "serve-ts": "concurrently --kill-others \"npm run serve\" \"npm run ts\""
   },

ts/main.ts

@@ -1,13 +1,4 @@
-interface Window {
+import { Modal } from "./modules/modal.js";
-    transitionEvent: string;
-    animationEvent: string;
-}
-
-interface ArrayConstructor {
-    from(arrayLike: any, mapFn?, thisArg?): Array<any>;
-}
-
-declare var window: Window;
 
 function toggleTheme() {
     document.documentElement.classList.toggle('dark-theme');
@@ -170,28 +161,30 @@ for (let tab of tabs) {
     }
 }
 
-const modalLogin = new Modal(document.getElementById('modal-login'), true);
+window.modals = {} as Modals;
-document.getElementById('form-login').addEventListener('submit', modalLogin.close);
-document.getElementById('modalButton').onclick = modalLogin.toggle;
 
-const modalAddUser = new Modal(document.getElementById('modal-add-user'));
+window.modals.login = new Modal(document.getElementById('modal-login'), true);
-(document.getElementById('accounts-add-user') as HTMLSpanElement).onclick = modalAddUser.toggle;
+document.getElementById('form-login').addEventListener('submit', window.modals.login.close);
-document.getElementById('form-add-user').addEventListener('submit', modalAddUser.close);
+document.getElementById('modalButton').onclick = window.modals.login.toggle;
 
-const modalAbout = new Modal(document.getElementById('modal-about'));
+window.modals.addUser = new Modal(document.getElementById('modal-add-user'));
-(document.getElementById('setting-about') as HTMLSpanElement).onclick = modalAbout.toggle;
+(document.getElementById('accounts-add-user') as HTMLSpanElement).onclick = window.modals.addUser.toggle;
+document.getElementById('form-add-user').addEventListener('submit', window.modals.addUser.close);
 
-const modalModifyUser = new Modal(document.getElementById('modal-modify-user'));
+window.modals.about = new Modal(document.getElementById('modal-about'));
-document.getElementById('form-modify-user').addEventListener('submit', modalModifyUser.close);
+(document.getElementById('setting-about') as HTMLSpanElement).onclick = window.modals.about.toggle;
-(document.getElementById('accounts-modify-user') as HTMLSpanElement).onclick = modalModifyUser.toggle;
 
-const modalDeleteUser = new Modal(document.getElementById('modal-delete-user'));
+window.modals.modifyUser = new Modal(document.getElementById('modal-modify-user'));
-document.getElementById('form-delete-user').addEventListener('submit', modalDeleteUser.close);
+document.getElementById('form-modify-user').addEventListener('submit', window.modals.modifyUser.close);
-(document.getElementById('accounts-delete-user') as HTMLSpanElement).onclick = modalDeleteUser.toggle;
+(document.getElementById('accounts-modify-user') as HTMLSpanElement).onclick = window.modals.modifyUser.toggle;
 
-const modalRestart = new Modal(document.getElementById('modal-restart'));
+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;
 
-const modalRefresh = new Modal(document.getElementById('modal-refresh'));
+window.modals.settingsRestart = new Modal(document.getElementById('modal-restart'));
 
-const modalOmbiDefaults = new Modal(document.getElementById('modal-ombi-defaults'));
+window.modals.settingsRefresh = new Modal(document.getElementById('modal-refresh'));
-document.getElementById('form-ombi-defaults').addEventListener('submit', modalOmbiDefaults.close);
+
+window.modals.ombiDefaults = new Modal(document.getElementById('modal-ombi-defaults'));
+document.getElementById('form-ombi-defaults').addEventListener('submit', window.modals.ombiDefaults.close);

ts/modules/modal.ts

@@ -1,9 +1,9 @@
 declare var window: Window;
 
-class Modal {
+export class Modal implements Modal {
-    modal: HTMLDivElement;
+    modal: HTMLElement;
     closeButton: HTMLSpanElement;
-    constructor(modal: HTMLDivElement, important: boolean = false) {
+    constructor(modal: HTMLElement, important: boolean = false) {
         this.modal = modal;
         const closeButton = this.modal.querySelector('span.modal-close')
         if (closeButton !== null) {

ts/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "outDir": "../js",
+        "target": "es6",
+        "lib": ["dom", "es2017"],
+        "typeRoots": ["./node_modules/@types", "./typings"]
+    }
+}

ts/typings/d.ts

@@ -0,0 +1,52 @@
+declare interface Modal {
+    modal: HTMLElement;
+    closeButton: HTMLSpanElement
+    show: () => void;
+    close: (event?: Event) => void;
+    toggle: () => void;
+}
+
+interface ArrayConstructor {
+    from(arrayLike: any, mapFn?, thisArg?): Array<any>;
+}
+
+declare interface Window {
+    URLBase: string;
+    modals: Modals;
+    cssFile: string;
+    availableProfiles: Array<any>;
+    jfUsers: Array<Object>;
+    notifications_enabled: boolean;
+    token: string;
+    buttonWidth: number;
+    transitionEvent: string;
+    animationEvent: string;
+}
+
+declare interface Modals {
+    about: Modal;
+    login: Modal;
+    addUser: Modal;
+    modifyUser: Modal;
+    deleteUser: Modal;
+    settingsRestart: Modal;
+    settingsRefresh: Modal;
+    ombiDefaults?: Modal;
+    newAccountSuccess?: Modal;
+}
+
+interface Invite {
+    code?: string;
+    expiresIn?: string;
+    empty: boolean;
+    remainingUses?: string;
+    email?: string;
+    usedBy?: Array<Array<string>>;
+    created?: string;
+    notifyExpiry?: boolean;
+    notifyCreation?: boolean;
+    profile?: string;
+}
+
+declare var config: Object;
+declare var modifiedConfig: Object;