mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-09-19 19:00:11 +00:00
Harvey Tindall
1b41621569
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.
384 lines
24 KiB
HTML
384 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="light-theme">
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="css/base.css">
|
|
|
|
<script>
|
|
window.URLBase = "{{ .urlBase }}";
|
|
</script>
|
|
{{ template "header.html" . }}
|
|
<title>Admin - jfa-go</title>
|
|
</head>
|
|
<body class="max-w-full overflow-x-hidden section">
|
|
<div id="modal-login" class="modal">
|
|
<form class="modal-content card" id="form-login" href="">
|
|
<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>
|
|
<div id="modal-add-user" class="modal">
|
|
<form class="modal-content card" id="form-add-user" href="">
|
|
<span class="heading">New User <span class="modal-close">×</span></span>
|
|
<input type="text" class="field input ~neutral !high mt-half mb-1" placeholder="username" id="add-user-user">
|
|
<input type="password" class="field input ~neutral !high mb-1" placeholder="password" id="add-user-password">
|
|
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Create">
|
|
</form>
|
|
</div>
|
|
<div id="modal-about" class="modal">
|
|
<div class="modal-content content card">
|
|
<span class="heading">About <span class="modal-close">×</span></span>
|
|
<img src="images/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>
|
|
<p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
|
|
</div>
|
|
</div>
|
|
<div id="modal-modify-user" class="modal">
|
|
<form class="modal-content card" id="form-modify-user" href="">
|
|
<span class="heading"><span id="header-modify-user">Modify Settings</span> <span class="modal-close">×</span></span>
|
|
<p class="content">Apply settings from an existing profile, or source them directly from a user.</p>
|
|
<div class="flex-row mb-1">
|
|
<label class="flex-row-group mr-1">
|
|
<input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
|
|
<span class="button ~neutral !high supra full-width center">Profile</span>
|
|
</label>
|
|
<label class="flex-row-group ml-1">
|
|
<input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user">
|
|
<span class="button ~neutral !normal supra full-width center">User</span>
|
|
</label>
|
|
</div>
|
|
<div id="modify-user-profiles" class="select ~neutral !normal mb-1">
|
|
<select>
|
|
<option>Friends</option>
|
|
<option>Family</option>
|
|
<option>Default</option>
|
|
</select>
|
|
</div>
|
|
<div id="modify-user-users" class="select ~neutral !normal mb-1 unfocused">
|
|
<select>
|
|
<option>Person</option>
|
|
<option>Other person</option>
|
|
</select>
|
|
</div>
|
|
<label class="switch mb-1">
|
|
<input type="checkbox" id="modify-user-homescreen" checked>
|
|
<span>Apply homescreen layout</span>
|
|
</label>
|
|
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Apply">
|
|
</form>
|
|
</div>
|
|
<div id="modal-delete-user" class="modal">
|
|
<form class="modal-content card" id="form-delete-user" href="">
|
|
<span class="heading"><span id="header-delete-user">Delete User</span> <span class="modal-close">×</span></span>
|
|
<div class="content mt-half">
|
|
<label class="switch mb-1">
|
|
<input type="checkbox" id="delete-user-notify" checked>
|
|
<span>Send notification email</span>
|
|
</label>
|
|
<textarea id="textarea-delete-user" class="textarea full-width ~neutral !normal mb-1" placeholder="Your account has been deleted."></textarea>
|
|
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Apply">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="modal-restart" class="modal">
|
|
<div class="modal-content card ~critical !normal">
|
|
<span class="heading">Restart needed <span class="modal-close">×</span></span>
|
|
<p class="content pb-1">A restart is needed to apply some settings you changed. Do it now or later?</p>
|
|
<div class="fr">
|
|
<span class="button ~info !normal">Apply, restart later</span>
|
|
<span class="button ~critical !normal">Apply & restart</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-refresh" class="modal">
|
|
<div class="modal-content card ~urge !normal">
|
|
<span class="heading">Settings applied.</span>
|
|
<p class="content">Refresh the page in a few seconds.</p>
|
|
</div>
|
|
</div>
|
|
<div id="modal-ombi-defaults" class="modal">
|
|
<form class="modal-content card" id="form-ombi-defaults" href="">
|
|
<span class="heading">Ombi user defaults <span class="modal-close">×</span></span>
|
|
<p class="content">Create an Ombi user and configure it, then select it here. It's settings/permissions will be stored and applied to new ombi users created by jfa-go.</p>
|
|
<div class="select ~neutral !normal mb-1">
|
|
<select>
|
|
<option>Person</option>
|
|
<option>Other person</option>
|
|
</select>
|
|
</div>
|
|
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Submit">
|
|
</form>
|
|
</div>
|
|
<div class="page-container max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
|
|
<div class="mb-1">
|
|
<header class="flex flex-wrap items-center justify-between">
|
|
<div class="text-neutral-700">
|
|
<span id="invitesTab-button" class="tab-button portal ~urge active">Invites</span>
|
|
<span id="accountsTab-button" class="tab-button portal">Accounts</span>
|
|
<span id="settingsTab-button" class="tab-button portal">Settings</span>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<div class="mb-1">
|
|
<div class="text-neutral-700">
|
|
<span class="button ~critical !normal mb-1">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>
|
|
<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 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 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 mt-half">
|
|
<select id="inv-minutes">
|
|
<option>0</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="card ~neutral !normal col">
|
|
<label class="label supra" for="inv-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">
|
|
<span>∞</span>
|
|
<input type="checkbox" class="unfocused" id="inv-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>
|
|
<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>
|
|
</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">
|
|
</label>
|
|
</div>
|
|
<span class="button ~urge !normal supra full-width center lg">Create</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="accountsTab" class="unfocused">
|
|
<div class="card ~neutral !low accounts mb-1">
|
|
<span class="heading">Accounts</span>
|
|
<div class="fr">
|
|
<span class="button ~neutral !normal" id="accounts-add-user">Add User</span>
|
|
<span class="button ~urge !normal" id="accounts-modify-user">Modify Settings</span>
|
|
<span class="button ~critical !normal" id="accounts-delete-user">Delete User</span>
|
|
</div>
|
|
<div class="card ~neutral !normal accounts-header mt-half">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th><input type="checkbox" value="" id="accounts-select-all"></th>
|
|
<th>Username</th>
|
|
<th>Email Address</th>
|
|
<th>Last Active</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="accounts-list">
|
|
<tr>
|
|
<td><input type="checkbox" value=""></td>
|
|
<td>Person <span class="chip ~info ml-1">Admin</span></td>
|
|
<td><i class="icon ri-edit-line"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
|
|
<td>13/12/20 00:39</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" value=""></td>
|
|
<td>Other person</td>
|
|
<td><i class="icon ri-edit-line"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="eee@ma.il" readonly></td>
|
|
<td>12/12/20 17:46</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="settingsTab" class="unfocused">
|
|
<div class="card ~neutral !low settings">
|
|
<span class="heading">Settings</span>
|
|
<div class="fr">
|
|
<span class="button ~neutral !normal" id="accounts-add-user">Save</span>
|
|
</div>
|
|
<div class="row">
|
|
<div class="card ~neutral !normal col">
|
|
<aside class="aside sm ~info mb-half">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~critical">R</span> indicates changes require a restart.</aside>
|
|
<span class="button ~neutral !low settings-section-button mb-half" id="setting-about">About</span>
|
|
<span class="button ~neutral !low settings-section-button mb-half selected">User Profiles</span>
|
|
</div>
|
|
<div class="card ~neutral !normal col">
|
|
<div class="settings-section">
|
|
<p class="support lg mb-half">Settings section description.</p>
|
|
<div class="setting">
|
|
<label class="label" for="settings-select">Select <span class="badge ~critical">R</span></label>
|
|
<div class="select ~neutral !normal mt-half">
|
|
<select id="settings-select">
|
|
<option>Option 1</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="setting">
|
|
<label class="label" for="settings-input">
|
|
Input <span class="badge ~critical">*</span>
|
|
<div class="tooltip right">
|
|
<i class="icon ri-information-line"></i>
|
|
<span class="content sm">An example tooltip.</span>
|
|
</div>
|
|
</label>
|
|
<input type="text" class="input ~neutral !normal mt-half" placeholder="Value">
|
|
</div>
|
|
<div class="setting">
|
|
<label class="switch settings">
|
|
<input type="checkbox" id="settings-check">
|
|
<span>Checkbox <span class="badge ~critical">R</span></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/admin.js" type="module"></script>
|
|
</body>
|
|
</html>
|