Fixed invite alignment on admin page

Invites and the generate invite form are now displayed as cards. Invite
codes are displayed in a monospace font so they are always aligned with
eachother. The delete button is now inline with the rest of the text.
This commit is contained in:
Harvey Tindall 2020-04-17 15:24:56 +01:00
parent 4df78a22c5
commit dc6a3b9af2
3 changed files with 30 additions and 27 deletions

View File

@ -19,30 +19,30 @@ function addItem(invite) {
var links = document.getElementById('invites'); var links = document.getElementById('invites');
var listItem = document.createElement('li'); var listItem = document.createElement('li');
listItem.id = invite[0] listItem.id = invite[0]
listItem.classList.add('list-group-item', 'align-middle'); listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'd-inline-block');
var listCode = document.createElement('div'); var listCode = document.createElement('div');
listCode.classList.add('float-left'); listCode.classList.add('d-flex', 'align-items-center', 'text-monospace');
var codeLink = document.createElement('a'); var codeLink = document.createElement('a');
codeLink.appendChild(document.createTextNode(invite[0])); codeLink.setAttribute('style', 'margin-right: 2%;');
codeLink.appendChild(document.createTextNode(invite[0].replace(/-/g, '')));
listCode.appendChild(codeLink); listCode.appendChild(codeLink);
listItem.appendChild(listCode); listItem.appendChild(listCode);
var listRight = document.createElement('div'); var listRight = document.createElement('div');
listRight.classList.add('float-right'); listText = document.createElement('span');
listText = document.createElement('div');
listText.id = invite[0] + '_expiry' listText.id = invite[0] + '_expiry'
listText.appendChild(document.createTextNode(invite[1])); listText.appendChild(document.createTextNode(invite[1]));
listRight.appendChild(listText); listRight.appendChild(listText);
if (invite[2] == 0) { if (invite[2] == 0) {
var inviteCode = window.location.href + 'invite/' + invite[0]; var inviteCode = window.location.href + 'invite/' + invite[0];
codeLink.href = inviteCode; codeLink.href = inviteCode;
listCode.appendChild(document.createTextNode(" ")); // listCode.appendChild(document.createTextNode(" "));
var codeCopy = document.createElement('i'); var codeCopy = document.createElement('i');
codeCopy.onclick = function(){toClipboard(inviteCode)}; codeCopy.onclick = function(){toClipboard(inviteCode)};
codeCopy.classList.add('fa', 'fa-clipboard'); codeCopy.classList.add('fa', 'fa-clipboard');
listCode.appendChild(codeCopy); listCode.appendChild(codeCopy);
var listDelete = document.createElement('button'); var listDelete = document.createElement('button');
listDelete.onclick = function(){deleteInvite(invite[0])}; listDelete.onclick = function(){deleteInvite(invite[0])};
listDelete.classList.add('btn', 'btn-outline-danger', 'float-right'); listDelete.classList.add('btn', 'btn-outline-danger');
listDelete.appendChild(document.createTextNode('Delete')); listDelete.appendChild(document.createTextNode('Delete'));
listRight.appendChild(listDelete); listRight.appendChild(listDelete);
}; };

View File

@ -68,29 +68,31 @@
<h1> <h1>
Accounts admin Accounts admin
</h1> </h1>
<div class="linkGroup"> <div class="card bg-light mb-3 linkGroup">
Current Invites <div class="card-header">Current Invites</div>
<div class="list-group" id="invites"> <ul class="list-group list-group-flush" id="invites">
</div> </ul>
</div> </div>
<div class="linkForm"> <div class="linkForm">
Generate Invite <div class="card bg-light mb-3">
<div class="list-group"> <div class="card-header">Generate Invite</div>
<div class="card-body">
<form action="#" method="POST" id="inviteForm"> <form action="#" method="POST" id="inviteForm">
<div class="form-group"> <div class="form-group">
<div class="list-group-item">
<label for="hours">Hours</label> <label for="hours">Hours</label>
<select class="form-control" id="hours" name="hours"> <select class="form-control" id="hours" name="hours">
</select> </select>
</div>
<div class="form-group">
<label for="minutes">Minutes</label> <label for="minutes">Minutes</label>
<select class="form-control" id="minutes" name="minutes"> <select class="form-control" id="minutes" name="minutes">
</select> </select>
</div>
<input type="submit" class="btn btn-primary" value="Generate"> <input type="submit" class="btn btn-primary" value="Generate">
</div>
</div>
</form> </form>
</div> </div>
</div> </div>
</div>
<div class="contactBox"> <div class="contactBox">
<p>{{ contactMessage }}</p> <p>{{ contactMessage }}</p>
</div> </div>

View File

@ -92,7 +92,7 @@ def newUser():
validation = validator.validate(data['password']) validation = validator.validate(data['password'])
valid = True valid = True
for criterion in validation: for criterion in validation:
if validation[criterion] == False: if validation[criterion] is False:
valid = False valid = False
if valid: if valid:
log.debug('User password valid') log.debug('User password valid')
@ -170,7 +170,8 @@ def getInvites():
invites = {'invites': []} invites = {'invites': []}
response = {'invites': []} response = {'invites': []}
for index, i in enumerate(invites['invites']): for index, i in enumerate(invites['invites']):
expiry = datetime.datetime.strptime(i['valid_till'], '%Y-%m-%dT%H:%M:%S.%f') expiry = datetime.datetime.strptime(i['valid_till'],
'%Y-%m-%dT%H:%M:%S.%f')
if current_time >= expiry: if current_time >= expiry:
log.debug(('Housekeeping: Deleting old invite ' + log.debug(('Housekeeping: Deleting old invite ' +
invites['invites'][index]['code'])) invites['invites'][index]['code']))