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" %} {% extends "base_settings_page.html" %}
{% block content %} {% block content %}
<form method="post" target="/admin/users"> <form method="post" action="/admin/users" id="edit_user_form">
<!-- User ID --> <!-- User ID -->
<div class="form-group"> <div class="form-group">
<label class="form-label mt-4" for="userID">User ID</label> <label class="form-label mt-4" for="userID">User ID</label>
@ -11,7 +11,7 @@
<!-- User name --> <!-- User name -->
<div class="form-group"> <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" <input class="form-control" id="username" type="text"
name="username" value="{{ u.username }}" required/> name="username" value="{{ u.username }}" required/>
<div class="valid-feedback">This username is valid</div> <div class="valid-feedback">This username is valid</div>
@ -73,23 +73,24 @@
<legend class="mt-4">Granted clients</legend> <legend class="mt-4">Granted clients</legend>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <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 %}> value="all_clients" {% if u.authorized_clients== None %} checked="" {% endif %}>
Grant all clients Grant all clients
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <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 %}> value="custom_clients" {% if u.authorized_clients !=None %} checked="checked" {% endif %}>
Manually specify allowed clients Manually specify allowed clients
</label> </label>
</div> </div>
<div id="clients_target"> <div id="clients_target">
<input type="hidden" name="granted_clients" value=""/>
{% for c in clients %} {% for c in clients %}
<div class="form-check"> <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 %}> {% if u.can_access_app(c.id) %} checked="" {% endif %}>
<label class="form-check-label" for="admin"> <label class="form-check-label" for="admin">
{{ c.name }} {{ c.name }}
@ -98,6 +99,8 @@
{% endfor %} {% endfor %}
</div> </div>
</fieldset> </fieldset>
<input type="submit" class="btn btn-primary mt-4" value="{{ page_title }}">
</form> </form>
<script> <script>
@ -137,7 +140,7 @@
// Clients granted // Clients granted
function refreshDisplayAuthorizedClients() { function refreshDisplayAuthorizedClients() {
const clientsSelectorEl = document.getElementById("clients_target"); 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"; clientsSelectorEl.style.display = radioBtn.checked ? "block" : "none";
} }
refreshDisplayAuthorizedClients(); 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> </script>
{% endblock content %}
{% endblock content %}