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

start accounts tab

Browse Source
This commit is contained in:
Harvey Tindall 2020-12-13 22:00:44 +00:00
parent 6efb7c4ecb
commit 5d5ba7a12c
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
1 changed files with 226 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

330
index.html
View File

@ -37,9 +37,15 @@
.pb-1 { .pb-1 {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.pl-1 {
padding-left: 1rem;
}
.mr-1 { .mr-1 {
margin-right: 1rem; margin-right: 1rem;
} }
.ml-1 {
margin-left: 1rem;
}
.mb-2 { .mb-2 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -181,6 +187,32 @@
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
.unfocused {
display: none;
}
.fr {
float: right;
}
.stealth-input-hidden {
border-style: none;
--fallback-box-shadow: none;
--field-hover-box-shadow: none;
--field-focus-box-shadow: none;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
.stealth-input {
font-size: 1rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
margin-left: 0.5rem;
margin-right: 1rem;
max-width: 50%;
}
</style> </style>
<title>{{ .lang.pageTitle }}</title> <title>{{ .lang.pageTitle }}</title>
</head> </head>
@ -201,114 +233,153 @@
<span class="button ~neutral !normal mb-1">Theme</span> <span class="button ~neutral !normal mb-1">Theme</span>
</div> </div>
</div> </div>
<div class="card ~neutral !high invites mb-1"> <div id="invitesTab" class="unfocused">
<span class="heading">Invites</span> <div class="card ~neutral !high invites mb-1">
<div class="inv"> <span class="heading">Invites</span>
<div class="card ~neutral !normal inv-header mt-half"> <div class="inv">
<div class="inv-codearea"> <div class="card ~neutral !normal inv-header mt-half">
<a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a> <div class="inv-codearea">
<span class="button ~info !normal">Copy</span> <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 icon-arrow-down not-rotated"></i>
<input type="checkbox" class="toggle-details">
</label>
</div>
</div> </div>
<div class="inv-infoarea"> <div class="card ~neutral !normal mt-half inv-details mt-half hidden">
<span class="inv-expiry mr-1">Expires in 30m</span> <div class="inv-row">
<span class="button ~critical !normal">Delete</span> <div class="inv-profilearea">
<label> <p class="supra mb-1">Profile</p>
<i class="icon icon-arrow-down not-rotated"></i> <div class="select ~neutral !normal inv-profileselect ib">
<input type="checkbox" class="toggle-details"> <select>
</label> <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">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">
<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> </div>
<div class="card ~neutral !normal mt-half inv-details mt-half hidden"> </div>
<div class="inv-row"> <div class="card ~neutral !high create-inv">
<div class="inv-profilearea"> <span class="heading">Create</span>
<p class="supra mb-1">Profile</p> <div class="row">
<div class="select ~neutral !normal inv-profileselect ib"> <div class="card ~neutral !low col">
<select> <label class="label supra" for="inv-days">Days</label>
<option>Friends</option> <div class="select ~neutral !normal mb-1">
<option>Family</option> <select id="inv-days">
<option>No Profile</option> <option>0</option>
</select> </select>
</div> </div>
<p class="label supra">Notify on:</p> <label class="label supra" for="inv-hours">Hours</label>
<label class="switch block"> <div class="select ~neutral !normal mb-1">
<input type="checkbox" class="inv-notify-expiry"> <select id="inv-hours">
<span>On expiry</span> <option>0</option>
</label> </select>
<label class="switch block"> </div>
<input type="checkbox" class="inv-notify-creation"> <label class="label supra" for="inv-minutes">Minutes</label>
<span>On user creation</span> <div class="select ~neutral !normal mb-1">
<select id="inv-minutes">
<option>0</option>
</select>
</div>
</div>
<div class="card ~neutral !low col">
<label class="label supra" for="inv-uses">Number of uses</label>
<div class="button-input mb-1">
<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> </label>
</div> </div>
<div class="block"> <label class="label supra">Profile</label>
<p class="supra mb-1">Created <strong class="inv-created">10/12/20 18:46</strong></p> <div class="select ~neutral !normal mb-1" id="inv-profile">
<p class="supra mb-1">Remaining uses <strong class="inv-remaining">8</strong></p> <select>
<option>Friends</option>
<option>Family</option>
<option>No Profile</option>
</select>
</div> </div>
<div class="card ~neutral !low"> <label class="label supra">Send to</label>
<strong class="supra table-header">Created users</strong> <div class="button-input mb-1">
<table class="table inv-table"> <input type="text" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
<thead> <label for="inv-email-enabled" class="button ~neutral !normal">
<tr> <input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled">
<th>Name</th> </label>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>jeff</td>
<td>10/12/20 19:00</td>
</tr>
</tbody>
</table>
</div> </div>
<span class="button ~positive !normal supra full-width button-lg">Create</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card ~neutral !high create-inv"> <div id="accountsTab">
<span class="heading">Create</span> <div class="card ~neutral !high accounts mb-1">
<div class="row"> <span class="heading">Accounts</span>
<div class="card ~neutral !low col"> <div class="card ~neutral !normal accounts-header mt-half">
<label class="label supra" for="inv-days">Days</label> <div class="fr">
<div class="select ~neutral !normal mb-1"> <span class="button ~neutral !normal" id="accounts-add-user">Add User</span>
<select id="inv-days"> <span class="button ~positive !normal" id="accounts-modify-user">Modify Settings</span>
<option>0</option> <span class="button ~critical !normal" id="accounts-delte-user">Delete User</span>
</select>
</div> </div>
<label class="label supra" for="inv-hours">Hours</label> <table class="table">
<div class="select ~neutral !normal mb-1"> <thead>
<select id="inv-hours"> <tr>
<option>0</option> <th><input type="checkbox" value="" id="accounts-select-all"></th>
</select> <th>Username</th>
</div> <th>Email Address</th>
<label class="label supra" for="inv-minutes">Minutes</label> <th>Last Active</th>
<div class="select ~neutral !normal mb-1"> </tr>
<select id="inv-minutes"> </thead>
<option>0</option> <tbody id="accounts-list">
</select> <tr>
</div> <td><input type="checkbox" value=""></td>
</div> <td>Person <span class="chip ~info ml-1">Admin</span></td>
<div class="card ~neutral !low col"> <td><i class="icon icon-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
<label class="label supra" for="inv-uses">Number of uses</label> <td>13/12/20 00:39</td>
<div class="button-input mb-1"> </tr>
<input type="number" id="inv-uses" class="input ~neutral !normal mr-1" value=1> </tbody>
<span id="inv-inf-uses" class="button ~neutral !normal" aria-label="Infinite uses">∞</span> </table>
</div>
<label class="label supra">Profile</label>
<div class="select ~neutral !normal mb-1" 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="button-input mb-1">
<input type="text" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
<span id="inv-email-enabled" class="button ~neutral !normal" aria-label="Send to enabled">✓</span>
</div>
<span class="button ~positive !normal supra full-width button-lg">Create</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
@ -349,21 +420,70 @@
//el.classList.toggle("hidden"); //el.classList.toggle("hidden");
}; };
} }
document.getElementById('inv-inf-uses').onclick = function () { const checkInfUses = function (check, mode = 2) {
const uses = document.getElementById('inv-uses'); const uses = document.getElementById('inv-uses');
uses.disabled = (this.classList.contains('!normal')); if (mode == 2) {
this.classList.toggle('!normal'); uses.disabled = check.checked;
this.classList.toggle('!high'); check.parentElement.classList.toggle('!normal');
this.classList.toggle('inf'); check.parentElement.classList.toggle('!high');
} else if (mode == 1) {
uses.disabled = true;
check.checked = true;
check.parentElement.classList.remove('!normal');
check.parentElement.classList.add('!high');
} else {
uses.disabled = false;
check.checked = false;
check.parentElement.classList.remove('!high');
check.parentElement.classList.add('!normal');
}
}; };
document.getElementById('inv-email-enabled').onclick = function () { let invInfUses = document.getElementById('inv-inf-uses');
const uses = document.getElementById('inv-email'); invInfUses.onclick = () => { checkInfUses(invInfUses, 2); };
uses.disabled = !(this.classList.contains('!normal'));
this.classList.toggle('!normal'); const checkEmailEnabled = function (check, mode = 2) {
this.classList.toggle('!high'); const input = document.getElementById('inv-email');
this.classList.toggle('enabled'); if (mode == 2) {
input.disabled = !check.checked;
check.parentElement.classList.toggle('!normal');
check.parentElement.classList.toggle('!high');
} else if (mode == 1) {
input.disabled = false;
check.checked = true;
check.parentElement.classList.remove('!normal');
check.parentElement.classList.add('!high');
} else {
input.disabled = true;
check.checked = false;
check.parentElement.classList.remove('!high');
check.parentElement.classList.add('!normal');
}
}; };
let invEmailEnabled = document.getElementById('inv-email-enabled')
invEmailEnabled.onchange = () => { checkEmailEnabled(invEmailEnabled, 2); };
checkInfUses(invInfUses, 0);
checkEmailEnabled(invEmailEnabled, 0);
const loadAccounts = function () {
const rows = document.getElementById("accounts-list").children;
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const editButton = row.querySelector(".icon");
const emailInput = row.querySelector(".input");
editButton.onclick = function () {
emailInput.classList.toggle('stealth-input-hidden');
emailInput.readOnly = !emailInput.readOnly;
editButton.classList.toggle('icon-edit');
editButton.classList.toggle('icon-check');
};
}
};
loadAccounts();
</script> </script>
</body> </body>