hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-11-12 21:30:10 +00:00
Code Issues Projects Releases Wiki Activity

add form, restructure ts

Browse Source
This commit is contained in:
Harvey Tindall 2020-12-28 18:15:52 +00:00
parent 9ae90e0a0f
commit b0ff1ddfd2
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
8 changed files with 220 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html → admin.html
View File

@ -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="main.js"></script>
<script src="js/main.js" type="module"></script>
</body>
</html>

24
base.css
View File

@ -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;
}

56
form.html Normal file
View File

@ -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>

2
package.json
View File

@ -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\""
},

49
ts/main.ts
View File

@ -1,13 +1,4 @@
interface Window {
transitionEvent: string;
animationEvent: string;
}
interface ArrayConstructor {
from(arrayLike: any, mapFn?, thisArg?): Array<any>;
}
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);

6
ts/modal.ts → ts/modules/modal.ts
View File

@ -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) {

8
ts/tsconfig.json Normal file
View File

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

52
ts/typings/d.ts Normal file
View File

@ -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;