Automatically join services into single input field on submit

This commit is contained in:
Pierre HUBERT 2022-04-07 18:17:58 +02:00
parent a6acbde093
commit 52888b3af7

View File

@ -1,7 +1,7 @@
{% extends "base_settings_page.html" %}
{% block content %}
<form method="post" target="/admin/users">
<form method="post" action="/admin/users" id="edit_user_form">
<!-- User ID -->
<div class="form-group">
<label class="form-label mt-4" for="userID">User ID</label>
@ -11,7 +11,7 @@
<!-- User name -->
<div class="form-group">
<label class="form-label mt-4" for="username">User name</label>
<label class="form-label mt-4" for="username">Username</label>
<input class="form-control" id="username" type="text"
name="username" value="{{ u.username }}" required/>
<div class="valid-feedback">This username is valid</div>
@ -73,23 +73,24 @@
<legend class="mt-4">Granted clients</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="granted_clients"
<input type="radio" class="form-check-input" name="grant_type"
value="all_clients" {% if u.authorized_clients== None %} checked="" {% endif %}>
Grant all clients
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="granted_clients"
<input type="radio" class="form-check-input" name="grant_type"
value="custom_clients" {% if u.authorized_clients !=None %} checked="checked" {% endif %}>
Manually specify allowed clients
</label>
</div>
<div id="clients_target">
<input type="hidden" name="granted_clients" value=""/>
{% for c in clients %}
<div class="form-check">
<input class="form-check-input" type="checkbox" class="authorize_client" data-id="{{ c.id.0 }}"
<input class="form-check-input authorize_client_checkbox" type="checkbox" data-id="{{ c.id.0 }}"
{% if u.can_access_app(c.id) %} checked="" {% endif %}>
<label class="form-check-label" for="admin">
{{ c.name }}
@ -98,6 +99,8 @@
{% endfor %}
</div>
</fieldset>
<input type="submit" class="btn btn-primary mt-4" value="{{ page_title }}">
</form>
<script>
@ -137,7 +140,7 @@
// Clients granted
function refreshDisplayAuthorizedClients() {
const clientsSelectorEl = document.getElementById("clients_target");
const radioBtn = document.querySelector("input[name=granted_clients][value=custom_clients]");
const radioBtn = document.querySelector("input[name=grant_type][value=custom_clients]");
clientsSelectorEl.style.display = radioBtn.checked ? "block" : "none";
}
refreshDisplayAuthorizedClients();
@ -146,7 +149,21 @@
})
// Handle submitted form
const form = document.getElementById("edit_user_form");
form.addEventListener("submit", (ev) => {
ev.preventDefault();
const authorized_clients = [...document.querySelectorAll(".authorize_client_checkbox")]
.filter(e => e.checked)
.map(e => e.getAttribute("data-id")).join(",")
document.querySelector("input[name=granted_clients]").value = authorized_clients;
form.submit();
});
</script>
{% endblock content %}
{% endblock content %}