mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-10 04:06:47 +00:00
style(admin): the user form asks who, what role, what quota, then what more
The create and edit pages of a user had one form for both, ordered for editing: permissions first, the name and password folded below them and the quota folded and closed at the end; a new user's name came last. Both pages now go Account (name, password, may sign in), Role, Quota, then Groups and permissions, each section with what it is for beside its fields. Template editor and Superuser become one Role choice with User: choosing Superuser hides the quota and permissions, which a superuser does not need (no quota check applies, every permission is theirs); it keeps the is_staff it had. The quota is always open: each limit takes a number from 0, or No limit, which is kept as -1 as before; memory is entered in GiB and kept in MiB, shown exactly so saving a user again changes nothing. The button says Create user or Save changes.
This commit is contained in:
catborise
parent
c9fe077fe8
commit
6523fd0955
13 changed files with 988 additions and 865 deletions
|
|
@ -1,141 +1,177 @@
|
|||
{% extends "base.html" %}
|
||||
{% load django_bootstrap5 %}
|
||||
{% load bootstrap_icons %}
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block page_heading %}{{ title }}{% endblock page_heading %}
|
||||
|
||||
{% block content %}
|
||||
{# what the user may do comes first; who they are and their quota fold away #}
|
||||
{% if edited_user %}
|
||||
<div class="border-bottom pb-3 mb-3">
|
||||
<span class="fs-5 fw-semibold text-break">{{ edited_user.username }}</span>
|
||||
{% if edited_user.email %}<span class="text-body-secondary ms-2 text-break">{{ edited_user.email }}</span>{% endif %}
|
||||
<div class="small text-body-secondary">{% trans "Last login" %} {{ edited_user.last_login|date:"Y-m-d H:i"|default:_("never") }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block style %}
|
||||
<style>
|
||||
/* each section: what it is about on the left, its fields on the right */
|
||||
.user-form-section { border-top: 1px solid var(--bs-border-color); padding: 1.5rem 0; }
|
||||
.user-form-section:first-of-type { border-top: 0; padding-top: .5rem; }
|
||||
.user-form-fields { max-width: 52rem; }
|
||||
.user-form-role:has(input:checked) { border-color: var(--bs-primary) !important; box-shadow: inset 0 0 0 1px var(--bs-primary); }
|
||||
</style>
|
||||
{% endblock style %}
|
||||
|
||||
{% block content %}
|
||||
{# who the user is, what they manage, what they may use, then what more they may do #}
|
||||
<form id="create-update" method="post">
|
||||
{% csrf_token %}
|
||||
{% bootstrap_form_errors user_form type="non_fields" %}
|
||||
|
||||
<div class="form-check form-switch mb-4">
|
||||
<input id="{{ user_form.is_active.id_for_label }}" class="form-check-input" type="checkbox" role="switch" name="is_active"
|
||||
aria-describedby="active-help"{% if user_form.is_active.value %} checked{% endif %}>
|
||||
<label class="form-check-label fw-semibold" for="{{ user_form.is_active.id_for_label }}">{% trans "Active: may sign in" %}</label>
|
||||
<div id="active-help" class="small text-body-secondary">{% trans "Turn off to block the user while keeping the account." %}</div>
|
||||
</div>
|
||||
|
||||
<h4 class="h5 mb-1">
|
||||
{% if edited_user %}{% blocktrans with name=edited_user.username %}What can {{ name }} do?{% endblocktrans %}{% else %}{% trans "What can the user do?" %}{% endif %}
|
||||
</h4>
|
||||
<p class="small text-body-secondary mb-3">{% trans "The permissions of the user's groups apply too." %}</p>
|
||||
|
||||
<div class="row row-cols-1 row-cols-md-2 g-2 mb-3">
|
||||
<div class="col">
|
||||
<label class="border rounded p-3 h-100 d-flex gap-2">
|
||||
<input class="form-check-input flex-shrink-0 mt-1" type="checkbox" name="is_staff"{% if user_form.is_staff.value %} checked{% endif %}>
|
||||
<span><span class="d-block fw-semibold">{% trans "Template editor" %}</span>
|
||||
<span class="small text-body-secondary">{% trans "May change and delete the template VMs given to them." %}</span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="border rounded p-3 h-100 d-flex gap-2">
|
||||
<input class="form-check-input flex-shrink-0 mt-1" type="checkbox" name="is_superuser"{% if user_form.is_superuser.value %} checked{% endif %}>
|
||||
<span><span class="d-block fw-semibold">{% trans "Superuser" %}</span>
|
||||
<span class="small text-body-secondary">{% trans "Has every permission and manages the panel, whatever is chosen below." %}</span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset class="mb-3">
|
||||
<legend class="fs-6 fw-semibold">{% trans "Groups" %}</legend>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for box in user_form.groups %}
|
||||
<label class="border rounded px-2 py-1 text-break">
|
||||
<input id="{{ box.id_for_label }}" class="form-check-input me-1" type="checkbox" name="groups" value="{{ box.data.value }}"{% if box.data.selected %} checked{% endif %}>
|
||||
{{ box.choice_label }}
|
||||
</label>
|
||||
{% empty %}
|
||||
<span class="small text-body-secondary">{% trans "There are no groups yet." %}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% for error in user_form.groups.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="mb-3">
|
||||
<legend class="fs-6 fw-semibold">{% trans "Own permissions" %}</legend>
|
||||
<p class="small text-body-secondary mb-2">{% trans "Off grants nothing here; it takes away nothing a group grants." %}</p>
|
||||
<div class="border-top">
|
||||
{% for box, help in user_form.permission_rows %}
|
||||
<div class="form-check form-switch border-bottom py-2 ps-5">
|
||||
<input id="{{ box.id_for_label }}" class="form-check-input" type="checkbox" role="switch" name="user_permissions"
|
||||
value="{{ box.data.value }}"{% if box.data.selected %} checked{% endif %}>
|
||||
<label class="form-check-label" for="{{ box.id_for_label }}">
|
||||
<span class="d-block">{{ box.data.value.instance.name }}</span>
|
||||
<span class="small text-body-secondary">{{ help }}</span>
|
||||
</label>
|
||||
<section class="user-form-section">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-3">
|
||||
<h2 class="h6 fw-semibold mb-1">{% trans "Account" %}</h2>
|
||||
{% if edited_user %}
|
||||
<p class="small text-body-secondary mb-0">{% trans "Last login" %}: {{ edited_user.last_login|date:"Y-m-d H:i"|default:_("never") }}</p>
|
||||
{% else %}
|
||||
<p class="small text-body-secondary mb-0">{% trans "What the user signs in with." %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-lg-9 user-form-fields">
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">{% bootstrap_field user_form.username %}</div>
|
||||
<div class="col-sm-6">
|
||||
{% if edited_user %}
|
||||
<span class="form-label d-block">{% trans "Password" %}</span>
|
||||
<div class="d-flex flex-wrap align-items-center gap-2">
|
||||
<span>{% if edited_user.has_usable_password %}{% trans "Set" %}{% else %}{% trans "Not set" %}{% endif %}</span>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="{% url 'admin:user_update_password' edited_user.id %}">{% trans "Change password" %}</a>
|
||||
</div>
|
||||
{% else %}
|
||||
{% bootstrap_field user_form.password %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-sm-6">{% bootstrap_field user_form.first_name %}</div>
|
||||
<div class="col-sm-6">{% bootstrap_field user_form.last_name %}</div>
|
||||
<div class="col-12">{% bootstrap_field user_form.email %}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="form-check form-switch">
|
||||
<input id="{{ user_form.is_active.id_for_label }}" class="form-check-input" type="checkbox" role="switch" name="is_active"
|
||||
aria-describedby="active-help"{% if user_form.is_active.value %} checked{% endif %}>
|
||||
<label class="form-check-label" for="{{ user_form.is_active.id_for_label }}">{% trans "May sign in" %}</label>
|
||||
<div id="active-help" class="small text-body-secondary">{% trans "Turn off to block the user while keeping the account." %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% for error in user_form.user_permissions.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
|
||||
</fieldset>
|
||||
</section>
|
||||
|
||||
<details class="border-bottom py-3"{% if not edited_user or user_form.identity_has_errors %} open{% endif %}>
|
||||
<summary>
|
||||
<span class="fw-semibold">{% trans "Name and password" %}</span>
|
||||
{% if edited_user %}
|
||||
<span class="d-block small text-body-secondary ms-3 text-break">
|
||||
{{ edited_user.username }}{% if edited_user.email %} · {{ edited_user.email }}{% endif %} ·
|
||||
{% if edited_user.has_usable_password %}{% trans "password set" %}{% else %}{% trans "no password" %}{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</summary>
|
||||
<div class="pt-3">
|
||||
{% bootstrap_field user_form.username %}
|
||||
{% if user_form.password %}{% bootstrap_field user_form.password %}{% endif %}
|
||||
<div class="row g-2">
|
||||
<div class="col-sm-6">{% bootstrap_field user_form.first_name %}</div>
|
||||
<div class="col-sm-6">{% bootstrap_field user_form.last_name %}</div>
|
||||
<section class="user-form-section">
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-3">
|
||||
<h2 class="h6 fw-semibold mb-1" id="role-heading">{% trans "Role" %}</h2>
|
||||
<p class="small text-body-secondary mb-0">{% trans "What the user manages." %}</p>
|
||||
</div>
|
||||
{% bootstrap_field user_form.email %}
|
||||
{% if edited_user %}
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<span>{% trans "Password" %}: {% if edited_user.has_usable_password %}{% trans "Set" %}{% else %}{% trans "Not set" %}{% endif %}</span>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="{% url 'admin:user_update_password' edited_user.id %}">{% trans "Change password" %}</a>
|
||||
<div class="col-lg-9 user-form-fields">
|
||||
{% trans "Uses the VMs given to them, within their quota." as user_help %}
|
||||
{% trans "May change and delete the template VMs given to them." as editor_help %}
|
||||
{% trans "Manages the panel: every permission, no quota." as superuser_help %}
|
||||
<div class="row row-cols-1 row-cols-md-3 g-2" role="radiogroup" aria-labelledby="role-heading">
|
||||
{% for choice in user_form.role %}
|
||||
<div class="col">
|
||||
<label class="user-form-role border rounded p-3 d-flex gap-2 h-100">
|
||||
<input class="form-check-input flex-shrink-0 mt-1" type="radio" name="role" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
|
||||
<span><span class="d-block fw-semibold">{{ choice.choice_label }}</span>
|
||||
<span class="small text-body-secondary">{% if choice.data.value == "superuser" %}{{ superuser_help }}{% elif choice.data.value == "template_editor" %}{{ editor_help }}{% else %}{{ user_help }}{% endif %}</span></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% for error in user_form.role.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
{% with quota=attributes_form.instance %}
|
||||
<details class="border-bottom py-3"{% if attributes_form.errors %} open{% endif %}>
|
||||
<summary>
|
||||
<span class="fw-semibold">{% trans "Quota" %}</span>
|
||||
<span class="d-block small text-body-secondary ms-3">
|
||||
{% if quota.max_instances == -1 %}{% trans "any number of VMs" %}{% else %}{% blocktrans count count=quota.max_instances %}{{ count }} VM{% plural %}{{ count }} VMs{% endblocktrans %}{% endif %} ·
|
||||
{% if quota.max_cpus == -1 %}{% trans "any vCPUs" %}{% else %}{% blocktrans count count=quota.max_cpus %}{{ count }} vCPU{% plural %}{{ count }} vCPUs{% endblocktrans %}{% endif %} ·
|
||||
{% if quota.max_memory == -1 %}{% trans "any memory" %}{% else %}{{ quota.max_memory }} MiB{% endif %} ·
|
||||
{% if quota.max_disk_size == -1 %}{% trans "any disk size" %}{% else %}{{ quota.max_disk_size }} GiB{% endif %}
|
||||
</span>
|
||||
</summary>
|
||||
<div class="pt-3">
|
||||
<p class="small text-body-secondary">{% trans "For each limit: -1 means no limit, 0 none allowed." %}</p>
|
||||
<div class="row row-cols-1 row-cols-sm-2 g-2">
|
||||
<div class="col">{% bootstrap_field attributes_form.max_instances show_help=False %}</div>
|
||||
<div class="col">{% bootstrap_field attributes_form.max_cpus show_help=False %}</div>
|
||||
<div class="col">{% bootstrap_field attributes_form.max_memory show_help=False %}</div>
|
||||
<div class="col">{% bootstrap_field attributes_form.max_disk_size show_help=False %}</div>
|
||||
{# user_form.js hides the sections a superuser does not need while Superuser is chosen #}
|
||||
{% with superuser=user_form.role.value %}
|
||||
<p id="superuser-note" class="user-form-section small text-body-secondary mb-0"{% if superuser != "superuser" %} hidden{% endif %}>
|
||||
{% trans "A superuser has every permission and no quota: there is nothing more to set." %}
|
||||
</p>
|
||||
|
||||
<section class="user-form-section" data-not-superuser{% if superuser == "superuser" %} hidden{% endif %}>
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-3">
|
||||
<h2 class="h6 fw-semibold mb-1">{% trans "Quota" %}</h2>
|
||||
<p class="small text-body-secondary mb-0">{% trans "The most the user's VMs may have in total." %}</p>
|
||||
</div>
|
||||
<div class="col-lg-9 user-form-fields">
|
||||
<div class="row row-cols-2 row-cols-md-4 g-3">
|
||||
{% for field, unlimited, unit in attributes_form.quota_rows %}
|
||||
<div class="col">
|
||||
<label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
<div class="input-group{% if field.errors %} has-validation{% endif %}">
|
||||
<input id="{{ field.id_for_label }}" class="form-control{% if field.errors %} is-invalid{% endif %}" type="number" name="{{ field.html_name }}"
|
||||
min="0" step="{% if field.name == 'max_memory' %}any{% else %}1{% endif %}" value="{{ field.value|default_if_none:'' }}"{% if unlimited.value %} disabled{% endif %}>
|
||||
{% if unit %}<span class="input-group-text">{{ unit }}</span>{% endif %}
|
||||
{% for error in field.errors %}<div class="invalid-feedback">{{ error }}</div>{% endfor %}
|
||||
</div>
|
||||
<div class="form-check mt-1">
|
||||
<input id="{{ unlimited.id_for_label }}" class="form-check-input" type="checkbox" name="{{ unlimited.html_name }}"
|
||||
data-no-limit="{{ field.id_for_label }}"{% if unlimited.value %} checked{% endif %}>
|
||||
<label class="form-check-label small" for="{{ unlimited.id_for_label }}">{{ unlimited.label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="user-form-section" data-not-superuser{% if superuser == "superuser" %} hidden{% endif %}>
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-3">
|
||||
<h2 class="h6 fw-semibold mb-1">{% trans "Groups and permissions" %}</h2>
|
||||
<p class="small text-body-secondary mb-0">{% trans "The permissions of the user's groups apply too." %}</p>
|
||||
</div>
|
||||
<div class="col-lg-9 user-form-fields">
|
||||
<fieldset class="mb-3">
|
||||
<legend class="visually-hidden">{% trans "Groups" %}</legend>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for box in user_form.groups %}
|
||||
<label class="border rounded px-2 py-1 text-break">
|
||||
<input id="{{ box.id_for_label }}" class="form-check-input me-1" type="checkbox" name="groups" value="{{ box.data.value }}"{% if box.data.selected %} checked{% endif %}>
|
||||
{{ box.choice_label }}
|
||||
</label>
|
||||
{% empty %}
|
||||
<span class="small text-body-secondary">{% trans "There are no groups yet." %}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% for error in user_form.groups.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend class="visually-hidden">{% trans "Own permissions" %}</legend>
|
||||
<p class="small text-body-secondary mb-2">{% trans "Off grants nothing here; it takes away nothing a group grants." %}</p>
|
||||
<div class="border-top">
|
||||
{% for box, help in user_form.permission_rows %}
|
||||
<div class="form-check form-switch border-bottom py-2 ps-5">
|
||||
<input id="{{ box.id_for_label }}" class="form-check-input" type="checkbox" role="switch" name="user_permissions"
|
||||
value="{{ box.data.value }}"{% if box.data.selected %} checked{% endif %}>
|
||||
<label class="form-check-label" for="{{ box.id_for_label }}">
|
||||
<span class="d-block">{{ box.data.value.instance.name }}</span>
|
||||
<span class="small text-body-secondary">{{ help }}</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% for error in user_form.user_permissions.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endwith %}
|
||||
|
||||
<div class="d-flex justify-content-end gap-2 mt-3">
|
||||
<div class="user-form-section d-flex justify-content-end gap-2">
|
||||
<a class="btn btn-outline-secondary" href="{% url 'admin:user_list' %}">{% trans "Cancel" %}</a>
|
||||
<button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
|
||||
<button type="submit" class="btn btn-primary">{% if edited_user %}{% trans "Save changes" %}{% else %}{% trans "Create user" %}{% endif %}</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
|
||||
{% block script %}
|
||||
<script src="{% static 'js/user_form.js' %}"></script>
|
||||
{% endblock script %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue