Fix #11 and introduce presentation mode

This commit is contained in:
Lou Knauer 2022-05-02 12:00:44 +02:00
parent d67f5dd23b
commit 738028b198
2 changed files with 77 additions and 53 deletions

@ -1 +1 @@
Subproject commit e8d82a00a4215457a57735c7d7db7076daca5643 Subproject commit 348b138be943de337cfb1592f0b8fd3a2ce5a5d7

View File

@ -49,60 +49,68 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Special Users</h5> <h5 class="card-title">Special Users</h5>
<p>Not created by an LDAP sync and/or having a role other than <code>user</code></p> <p>Not created by an LDAP sync and/or having a role other than <code>user</code></p>
<table class="table"> <div style="width: 100%; max-height: 500px; overflow-y: scroll;">
<thead> <table class="table">
<tr> <thead>
<th>Username</th> <tr>
<th>Name</th> <th>Username</th>
<th>Email</th> <th>Name</th>
<th>Roles</th> <th>Email</th>
<th>JWT</th> <th>Roles</th>
<th>Delete</th> <th>JWT</th>
</tr> <th>Delete</th>
</thead> </tr>
<tbody id="users-list"><tr><td colspan="4"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></td></tr></tbody> </thead>
<script> <tbody id="users-list">
fetch('/api/users/?via-ldap=false&not-just-user=true') <tr>
.then(res => res.json()) <td colspan="4">
.then(users => { <div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>
let listElement = document.querySelector('#users-list') </td>
listElement.innerHTML = users.map(user => ` </tr>
<tr id="user-${user.username}"> </tbody>
<td>${user.username}</td> </table>
<td>${user.name}</td> </div>
<td>${user.email}</td> <script>
<td><code>${user.roles.join(', ')}</code></td> fetch('/api/users/?via-ldap=false&not-just-user=true')
<td><button class="btn btn-success get-jwt">Gen. JWT</button></td> .then(res => res.json())
<td><button class="btn btn-danger del-user">Delete</button></td> .then(users => {
</tr> let listElement = document.querySelector('#users-list')
`).join('') listElement.innerHTML = users.map(user => `
<tr id="user-${user.username}">
<td>${user.username}</td>
<td>${user.name}</td>
<td>${user.email}</td>
<td><code>${user.roles.join(', ')}</code></td>
<td><button class="btn btn-success get-jwt">Gen. JWT</button></td>
<td><button class="btn btn-danger del-user">Delete</button></td>
</tr>
`).join('')
listElement.querySelectorAll('button.get-jwt').forEach(e => e.addEventListener('click', event => { listElement.querySelectorAll('button.get-jwt').forEach(e => e.addEventListener('click', event => {
let row = event.target.parentElement.parentElement let row = event.target.parentElement.parentElement
let username = row.children[0].innerText let username = row.children[0].innerText
fetch(`/api/jwt/?username=${username}`) fetch(`/api/jwt/?username=${username}`)
.then(res => res.text()) .then(res => res.text())
.then(text => alert(text)) .then(text => alert(text))
})) }))
listElement.querySelectorAll('button.del-user').forEach(e => e.addEventListener('click', event => { listElement.querySelectorAll('button.del-user').forEach(e => e.addEventListener('click', event => {
let row = event.target.parentElement.parentElement let row = event.target.parentElement.parentElement
let username = row.children[0].innerText let username = row.children[0].innerText
if (confirm('Are you sure?')) { if (confirm('Are you sure?')) {
let formData = new FormData() let formData = new FormData()
formData.append('username', username) formData.append('username', username)
fetch('/api/users/', { method: 'DELETE', body: formData }).then(res => { fetch('/api/users/', { method: 'DELETE', body: formData }).then(res => {
if (res.status == 200) { if (res.status == 200) {
row.remove() row.remove()
} else { } else {
event.target.innerText = res.statusText event.target.innerText = res.statusText
} }
}) })
} }
})) }))
}) })
</script> </script>
</table>
</div> </div>
</div> </div>
</div> </div>
@ -136,6 +144,22 @@
</script> </script>
</div> </div>
</div> </div>
<div class="col card" style="margin: 10px;">
<div class="card-body">
<h5 class="card-title">Scramble Names / Presentation Mode</h5>
<input type="checkbox" id="scramble-names-checkbox"/>
<script>
const scrambleNamesCheckbox = document.querySelector('#scramble-names-checkbox')
scrambleNamesCheckbox.checked = window.localStorage.getItem("cc-scramble-names") != null
scrambleNamesCheckbox.addEventListener('change', () => {
if (scrambleNamesCheckbox.checked)
window.localStorage.setItem("cc-scramble-names", "true")
else
window.localStorage.removeItem("cc-scramble-names")
})
</script>
</div>
</div>
</div> </div>
{{end}} {{end}}
<div class="row"> <div class="row">