collapsible sections

This commit is contained in:
iou1name 2019-09-25 12:51:36 -04:00
parent 2356c50fba
commit e3c33a7492
3 changed files with 95 additions and 59 deletions

View File

@ -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;

View File

@ -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 = [];

View File

@ -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>