BasicOIDC/templates/settings/edit_user.html

194 lines
7.1 KiB
HTML
Raw Normal View History

2022-04-07 15:04:05 +00:00
{% extends "base_settings_page.html" %}
{% block content %}
<form method="post" action="/admin/users" id="edit_user_form">
2022-04-07 15:04:05 +00:00
<!-- User ID -->
<div class="form-group">
<label class="form-label mt-4" for="userID">User ID</label>
<input class="form-control" id="userID" type="text" readonly=""
name="uid" value="{{ u.uid }}"/>
</div>
<!-- User name -->
<div class="form-group">
<label class="form-label mt-4" for="username">Username</label>
2022-04-07 15:04:05 +00:00
<input class="form-control" id="username" type="text"
name="username" value="{{ u.username }}" required/>
2022-04-07 15:57:10 +00:00
<div class="valid-feedback">This username is valid</div>
<div class="invalid-feedback">This username is already taken.</div>
2022-04-07 15:04:05 +00:00
</div>
<!-- First name -->
<div class="form-group">
<label class="form-label mt-4" for="first_name">First name</label>
<input class="form-control" id="first_name" type="text"
name="first_name" value="{{ u.first_name }}"/>
</div>
<!-- Last name -->
<div class="form-group">
<label class="form-label mt-4" for="last_name">Last name</label>
<input class="form-control" id="last_name" type="text"
name="last_name" value="{{ u.last_name }}"/>
</div>
<!-- Email -->
<div class="form-group">
<label class="form-label mt-4" for="email">Email address</label>
<input class="form-control" id="email" type="email"
name="email" value="{{ u.email }}"/>
</div>
<div class="form-group mt-4">
<!-- Generate new password -->
<div class="form-check">
<input class="form-check-input" type="checkbox" name="gen_new_password" id="gen_new_password" {% if
u.password.is_empty() %} checked="" {% endif %}>
<label class="form-check-label" for="gen_new_password">
Generate a new temporary password
</label>
</div>
<!-- Enabled -->
<div class="form-check">
<input class="form-check-input" type="checkbox" name="enabled" id="enabled" {% if u.enabled %} checked="" {%
endif %}>
<label class="form-check-label" for="enabled">
Enabled
</label>
</div>
<!-- Admin -->
<div class="form-check">
<input class="form-check-input" type="checkbox" name="admin" id="admin" {% if u.admin %} checked="" {% endif
%}>
<label class="form-check-label" for="admin">
Grant admin privileges
</label>
</div>
</div>
<!-- Two-Factor authentication -->
<input type="hidden" name="two_factor" value=""/>
{% if u.has_two_factor() %}
<fieldset class="form-group">
<legend class="mt-4">Two factor authentication</legend>
<strong>If you uncheck a factor, it will be DELETED</strong>
{% for f in u.two_factor.as_deref().unwrap_or_default() %}
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input two-fact-checkbox"
value="{{ f.id.0 }}"
checked=""/>
{{ f.name }} ({{ f.type_str() }})
</label>
</div>
{% endfor %}
</fieldset>
{% endif %}
2022-04-07 15:32:29 +00:00
<!-- Granted clients -->
2022-04-07 15:04:05 +00:00
<fieldset class="form-group">
2022-04-07 15:32:29 +00:00
<legend class="mt-4">Granted clients</legend>
2022-04-07 15:04:05 +00:00
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="grant_type"
2022-04-07 15:32:29 +00:00
value="all_clients" {% if u.authorized_clients== None %} checked="" {% endif %}>
Grant all clients
2022-04-07 15:04:05 +00:00
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="grant_type"
2022-04-07 15:32:29 +00:00
value="custom_clients" {% if u.authorized_clients !=None %} checked="checked" {% endif %}>
Manually specify allowed clients
2022-04-07 15:04:05 +00:00
</label>
</div>
2022-04-07 15:32:29 +00:00
<div id="clients_target">
<input type="hidden" name="granted_clients" value=""/>
2022-04-07 15:32:29 +00:00
{% for c in clients %}
<div class="form-check">
2022-04-15 20:04:06 +00:00
<input id="client-{{ c.id.0 }}" class="form-check-input authorize_client_checkbox" type="checkbox"
data-id="{{ c.id.0 }}"
2022-04-07 15:32:29 +00:00
{% if u.can_access_app(c.id) %} checked="" {% endif %}>
2022-04-15 20:04:06 +00:00
<label class="form-check-label" for="client-{{ c.id.0 }}">
2022-04-07 15:32:29 +00:00
{{ c.name }}
</label>
</div>
{% endfor %}
2022-04-07 15:04:05 +00:00
</div>
</fieldset>
2022-04-18 15:13:41 +00:00
<input type="submit" class="btn btn-primary mt-4" value="{{ _p.page_title }}">
2022-04-07 15:04:05 +00:00
</form>
2022-04-07 15:32:29 +00:00
<script>
2022-04-07 15:57:10 +00:00
// Check Username
async function find_username(username) {
let data = new URLSearchParams();
data.append("username", username);
return (await(await fetch("/admin/api/find_username", {
body: data,
method: "POST",
})).json()).user_id
}
const usernameEl = document.getElementById("username")
async function check_username() {
try {
usernameEl.classList.remove("is-invalid");
usernameEl.classList.remove("is-valid");
if (usernameEl.value === "")
return;
const userID = await find_username(usernameEl.value);
usernameEl.classList.add((userID === null || userID === "{{ u.uid }}") ? "is-valid" : "is-invalid");
} catch(e) {
console.error(e);
}
}
check_username();
usernameEl.addEventListener("change", check_username);
usernameEl.addEventListener("keyup", check_username);
2022-04-07 15:32:29 +00:00
// Clients granted
function refreshDisplayAuthorizedClients() {
const clientsSelectorEl = document.getElementById("clients_target");
const radioBtn = document.querySelector("input[name=grant_type][value=custom_clients]");
2022-04-07 15:32:29 +00:00
clientsSelectorEl.style.display = radioBtn.checked ? "block" : "none";
}
refreshDisplayAuthorizedClients();
2022-04-07 16:59:48 +00:00
document.querySelectorAll("input[name=grant_type]").forEach(el=> {
2022-04-07 15:32:29 +00:00
el.addEventListener("change", refreshDisplayAuthorizedClients)
})
2022-04-07 15:57:10 +00:00
// 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;
const factors_to_keep = [...document.querySelectorAll(".two-fact-checkbox")]
.filter(e => e.checked)
.map(e => e.value)
.join(";")
2022-04-07 15:57:10 +00:00
document.querySelector("input[name=two_factor]").value = factors_to_keep;
2022-04-15 20:04:06 +00:00
form.submit();
});
2022-04-07 15:32:29 +00:00
</script>
{% endblock content %}