From b0ff1ddfd2037bb6b76a703e5ef53a09202c3578 Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Mon, 28 Dec 2020 18:15:52 +0000 Subject: [PATCH] add form, restructure ts --- index.html => admin.html | 70 ++++++++++++++++++++++++++++++++------- base.css | 24 ++++++++++++-- form.html | 56 +++++++++++++++++++++++++++++++ package.json | 2 +- ts/main.ts | 49 ++++++++++++--------------- ts/{ => modules}/modal.ts | 6 ++-- ts/tsconfig.json | 8 +++++ ts/typings/d.ts | 52 +++++++++++++++++++++++++++++ 8 files changed, 220 insertions(+), 47 deletions(-) rename index.html => admin.html (84%) create mode 100644 form.html rename ts/{ => modules}/modal.ts (90%) create mode 100644 ts/tsconfig.json create mode 100644 ts/typings/d.ts diff --git a/index.html b/admin.html similarity index 84% rename from index.html rename to admin.html index c96db48..0d2128b 100644 --- a/index.html +++ b/admin.html @@ -145,7 +145,7 @@
-

Profile

+

Profile

+ +
+
+
+
+
+

Profile

+
+ +
+

Notify on:

+ + +
+
+

Created 10/12/20 18:46

+

Remaining uses 8

+
+
+ Created users +

None yet!

+
+
+
+
Create
-
+
-
+
-
+
@@ -213,7 +260,7 @@
-
+

Warning invites with infinite uses can be used abusively.

-
+
-
+
- Create + Create
@@ -316,7 +363,6 @@
- - + diff --git a/base.css b/base.css index 906ecd6..25e4563 100644 --- a/base.css +++ b/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 { - height: 3rem; +.button.lg { + height: 2.5rem; } .submit { @@ -269,3 +281,9 @@ input { color: inherit; border: 0 solid var(--color-neutral-300); } + +p.top { + margin-top: 0px; +} + + diff --git a/form.html b/form.html new file mode 100644 index 0000000..4fae877 --- /dev/null +++ b/form.html @@ -0,0 +1,56 @@ + + + + + create an account - jfa-no + + + +
+
+
+ {{ .lang.createAccountHeader }} + {{ .helpMessage }} +
+
+
+
+ + + + + + + + + + +
+
+
+
+ {{ .lang.passwordRequirementsHeader }} +
    +
  • + {{ requirement }} +
    • +
  • + {{ requirement }} +
    • +
+
+ +
+
+
+
+ + + + diff --git a/package.json b/package.json index ba1437a..22613e8 100644 --- a/package.json +++ b/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\"" }, diff --git a/ts/main.ts b/ts/main.ts index bf68df8..8dbf8b5 100644 --- a/ts/main.ts +++ b/ts/main.ts @@ -1,13 +1,4 @@ -interface Window { - transitionEvent: string; - animationEvent: string; -} - -interface ArrayConstructor { - from(arrayLike: any, mapFn?, thisArg?): Array; -} - -declare var window: Window; +import { Modal } from "./modules/modal.js"; 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); -document.getElementById('form-login').addEventListener('submit', modalLogin.close); -document.getElementById('modalButton').onclick = modalLogin.toggle; +window.modals = {} as Modals; -const modalAddUser = new Modal(document.getElementById('modal-add-user')); -(document.getElementById('accounts-add-user') as HTMLSpanElement).onclick = modalAddUser.toggle; -document.getElementById('form-add-user').addEventListener('submit', modalAddUser.close); +window.modals.login = new Modal(document.getElementById('modal-login'), true); +document.getElementById('form-login').addEventListener('submit', window.modals.login.close); +document.getElementById('modalButton').onclick = window.modals.login.toggle; -const modalAbout = new Modal(document.getElementById('modal-about')); -(document.getElementById('setting-about') as HTMLSpanElement).onclick = modalAbout.toggle; +window.modals.addUser = new Modal(document.getElementById('modal-add-user')); +(document.getElementById('accounts-add-user') as HTMLSpanElement).onclick = window.modals.addUser.toggle; +document.getElementById('form-add-user').addEventListener('submit', window.modals.addUser.close); -const modalModifyUser = new Modal(document.getElementById('modal-modify-user')); -document.getElementById('form-modify-user').addEventListener('submit', modalModifyUser.close); -(document.getElementById('accounts-modify-user') as HTMLSpanElement).onclick = modalModifyUser.toggle; +window.modals.about = new Modal(document.getElementById('modal-about')); +(document.getElementById('setting-about') as HTMLSpanElement).onclick = window.modals.about.toggle; -const modalDeleteUser = new Modal(document.getElementById('modal-delete-user')); -document.getElementById('form-delete-user').addEventListener('submit', modalDeleteUser.close); -(document.getElementById('accounts-delete-user') as HTMLSpanElement).onclick = modalDeleteUser.toggle; +window.modals.modifyUser = new Modal(document.getElementById('modal-modify-user')); +document.getElementById('form-modify-user').addEventListener('submit', window.modals.modifyUser.close); +(document.getElementById('accounts-modify-user') as HTMLSpanElement).onclick = window.modals.modifyUser.toggle; -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')); -document.getElementById('form-ombi-defaults').addEventListener('submit', modalOmbiDefaults.close); +window.modals.settingsRefresh = new Modal(document.getElementById('modal-refresh')); + +window.modals.ombiDefaults = new Modal(document.getElementById('modal-ombi-defaults')); +document.getElementById('form-ombi-defaults').addEventListener('submit', window.modals.ombiDefaults.close); diff --git a/ts/modal.ts b/ts/modules/modal.ts similarity index 90% rename from ts/modal.ts rename to ts/modules/modal.ts index cd09828..398df93 100644 --- a/ts/modal.ts +++ b/ts/modules/modal.ts @@ -1,9 +1,9 @@ declare var window: Window; -class Modal { - modal: HTMLDivElement; +export class Modal implements Modal { + 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) { diff --git a/ts/tsconfig.json b/ts/tsconfig.json new file mode 100644 index 0000000..95903f5 --- /dev/null +++ b/ts/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "outDir": "../js", + "target": "es6", + "lib": ["dom", "es2017"], + "typeRoots": ["./node_modules/@types", "./typings"] + } +} diff --git a/ts/typings/d.ts b/ts/typings/d.ts new file mode 100644 index 0000000..826d398 --- /dev/null +++ b/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; +} + +declare interface Window { + URLBase: string; + modals: Modals; + cssFile: string; + availableProfiles: Array; + jfUsers: Array; + 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>; + created?: string; + notifyExpiry?: boolean; + notifyCreation?: boolean; + profile?: string; +} + +declare var config: Object; +declare var modifiedConfig: Object;