collapsible sections
This commit is contained in:
parent
2356c50fba
commit
e3c33a7492
|
@ -22,13 +22,19 @@ main {
|
||||||
|
|
||||||
main section {
|
main section {
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
padding: 5%;
|
padding: 2% 5%;
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
#avail_sites {
|
#avail_sites {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
|
|
@ -1,3 +1,17 @@
|
||||||
|
function load() {
|
||||||
|
let headers = document.querySelectorAll('h2');
|
||||||
|
headers.forEach(function(header) {
|
||||||
|
header.addEventListener('click', function() {
|
||||||
|
let article = this.nextElementSibling;
|
||||||
|
if (article.style.display === 'none') {
|
||||||
|
article.style.display = '';
|
||||||
|
} else {
|
||||||
|
article.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function perm_change(row) {
|
function perm_change(row) {
|
||||||
let user_perms = users_perms[row.children[0].textContent];
|
let user_perms = users_perms[row.children[0].textContent];
|
||||||
let row_perms = [];
|
let row_perms = [];
|
||||||
|
|
|
@ -2,11 +2,12 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Buckler</title>
|
<title>Buckler</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/buckler.css">
|
||||||
<script>
|
<script>
|
||||||
var users_perms = {{ users_json|safe }};
|
var users_perms = {{ users_json|safe }};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="/static/buckler.js"></script>
|
<script type="text/javascript" src="/static/buckler.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="/static/buckler.css">
|
<script>window.onload = load;</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
@ -15,72 +16,87 @@
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
Available sites
|
<h2>Available Sites</h2>
|
||||||
<ul id="avail_sites">
|
<article>
|
||||||
{% for site in avail_sites %}
|
<hr>
|
||||||
<li><a href="{{ site['url'] }}">{{ site['name'] }}</a></li>
|
<ul id="avail_sites">
|
||||||
{% endfor %}
|
{% for site in avail_sites %}
|
||||||
</ul>
|
<li><a href="{{ site['url'] }}">{{ site['name'] }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
{% if request['session']['admin'] %}
|
{% if request['session']['admin'] %}
|
||||||
<section>
|
<section>
|
||||||
<table id="users">
|
<h2>User Permissions</h2>
|
||||||
<thead>
|
<article>
|
||||||
<tr>
|
<hr>
|
||||||
<th>User</th>
|
<table id="users">
|
||||||
{% for app in apps %}
|
<thead>
|
||||||
<th>{{ app }}</th>
|
<tr>
|
||||||
|
<th>User</th>
|
||||||
|
{% for app in apps %}
|
||||||
|
<th>{{ app }}</th>
|
||||||
|
{% endfor %}
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for username, values in users.items() %}
|
||||||
|
<tr>
|
||||||
|
<td>{{ username }}</td>
|
||||||
|
{% for value in values %}
|
||||||
|
<td><input type="checkbox" onchange="perm_change(this.parentElement.parentElement)"{% if value %} checked{% endif %}></td>
|
||||||
|
{% endfor %}
|
||||||
|
<td><input type="submit"></td>
|
||||||
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<th></th>
|
</tbody>
|
||||||
</tr>
|
</table>
|
||||||
</thead>
|
</article>
|
||||||
<tbody>
|
|
||||||
{% for username, values in users.items() %}
|
|
||||||
<tr>
|
|
||||||
<td>{{ username }}</td>
|
|
||||||
{% for value in values %}
|
|
||||||
<td><input type="checkbox" onchange="perm_change(this.parentElement.parentElement)"{% if value %} checked{% endif %}></td>
|
|
||||||
{% endfor %}
|
|
||||||
<td><input type="submit"></td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</section>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<section>
|
<section>
|
||||||
<form action="{{ request.app.router['change_password'].url_for() }}" method="post" enctype="application/x-www-form-urlencoded">
|
<h2>Change Password</h2>
|
||||||
<label for="current_password">Current password</label>
|
<article>
|
||||||
<input id="current_password" name="current_password" type="password"><br>
|
<hr>
|
||||||
<label for="new_password">New password</label>
|
<form action="{{ request.app.router['change_password'].url_for() }}" method="post" enctype="application/x-www-form-urlencoded">
|
||||||
<input id="new_password" name="new_password" type="password"><br>
|
<label for="current_password">Current password</label>
|
||||||
<label for="verify_password">Verify password</label>
|
<input id="current_password" name="current_password" type="password"><br>
|
||||||
<input id="verify_password" name="verify_password" type="password"><br>
|
<label for="new_password">New password</label>
|
||||||
<input type="submit" value="Submit">
|
<input id="new_password" name="new_password" type="password"><br>
|
||||||
</form>
|
<label for="verify_password">Verify password</label>
|
||||||
|
<input id="verify_password" name="verify_password" type="password"><br>
|
||||||
|
<input type="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
{% if fido2_keys %}
|
<h2>Security Keys</h2>
|
||||||
<table id="security_keys">
|
<article>
|
||||||
<thead>
|
<hr>
|
||||||
<tr>
|
{% if fido2_keys %}
|
||||||
<th>Nick</th>
|
<table id="security_keys">
|
||||||
<th>Delete</th>
|
<thead>
|
||||||
</tr>
|
<tr>
|
||||||
</thead>
|
<th>Nick</th>
|
||||||
<tbody>
|
<th>Delete</th>
|
||||||
{% for key in fido2_keys %}
|
</tr>
|
||||||
<tr>
|
</thead>
|
||||||
<td>{{ key['nick'] }}</td>
|
<tbody>
|
||||||
<td><input type="checkbox"></td>
|
{% for key in fido2_keys %}
|
||||||
</tr>
|
<tr>
|
||||||
{% endfor %}
|
<td>{{ key['nick'] }}</td>
|
||||||
</tbody>
|
<td><input type="checkbox"></td>
|
||||||
</table>
|
</tr>
|
||||||
{% else %}
|
{% endfor %}
|
||||||
<span>No registered keys.</span>
|
</tbody>
|
||||||
{% endif %}
|
</table>
|
||||||
<br><a href="./add_key">Add key</a>
|
{% else %}
|
||||||
|
<span>No registered keys.</span>
|
||||||
|
{% endif %}
|
||||||
|
<br><a href="./add_key">Add key</a>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user