76 lines
4.0 KiB
HTML
76 lines
4.0 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Admin — brugere{% endblock %}
|
|
{% block body %}
|
|
<h1>Brugere</h1>
|
|
<p class="wt-lead">Opret og administrér brugere. Adgang til services styres via <strong>grupper</strong>.</p>
|
|
{% if saved %}<div class="wt-flash">{{ saved }}</div>{% endif %}
|
|
|
|
<details style="margin:1rem 0">
|
|
<summary class="wt-btn wt-btn--primary" style="display:inline-block">+ Opret ny bruger</summary>
|
|
<form method="post" action="/admin/users" class="wt-stat" style="display:block;margin-top:.8rem">
|
|
<div style="display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))">
|
|
<label>Brugernavn<input name="username" required autocomplete="off"></label>
|
|
<label>Navn<input name="name" autocomplete="off"></label>
|
|
<label>Email<input name="email" type="email" autocomplete="off"></label>
|
|
<label>Adgangskode<input name="password" type="text" autocomplete="new-password" placeholder="(valgfri)"></label>
|
|
</div>
|
|
<p class="wt-muted" style="margin:.9rem 0 .4rem;font-size:.85rem">Adgang (grupper) — sæt flueben for de services brugeren skal kunne tilgå:</p>
|
|
<div style="display:grid;gap:.3rem .9rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))">
|
|
{% for grp in groups %}
|
|
<label style="display:flex;gap:.4rem;align-items:center;font-size:.9rem"><input type="checkbox" name="groups" value="{{ grp.pk }}" style="width:auto"> {{ grp.name }}</label>
|
|
{% endfor %}
|
|
</div>
|
|
<p style="margin-top:1rem"><button class="wt-btn wt-btn--primary" type="submit">Opret bruger</button></p>
|
|
</form>
|
|
</details>
|
|
|
|
<div class="wt-toolbar">
|
|
<div class="wt-field" style="flex:1;min-width:12rem"><span class="wt-field-ico">⌕</span>
|
|
<input id="ufilter" class="wt-input" type="search" placeholder="Søg brugere…" autocomplete="off"></div>
|
|
<div class="wt-segment" id="typetoggle" role="group" aria-label="Brugertype">
|
|
<button type="button" data-type="person" class="is-on">Personer</button>
|
|
<button type="button" data-type="service">Service-konti</button>
|
|
<button type="button" data-type="all">Alle</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wt-grid wt-grid--tight" id="ucards" style="margin-top:1rem">
|
|
{% for u in users %}
|
|
{% set svc = u.type in ['service_account','internal_service_account'] %}
|
|
<a class="wt-select-card{% if not u.active %} dim{% endif %}" href="/admin/users/{{ u.pk }}"
|
|
data-type="{{ 'service' if svc else 'person' }}"
|
|
data-search="{{ (u.username ~ ' ' ~ (u.name or '') ~ ' ' ~ (u.email or ''))|lower }}">
|
|
<span class="wt-select-card-ini">{{ (u.username or '?')[0]|upper }}</span>
|
|
<span class="wt-select-card-body">
|
|
<span class="wt-select-card-name">{{ u.name or u.username }}</span>
|
|
<span class="wt-select-card-sub" title="{{ u.username }}{% if u.email %} · {{ u.email }}{% endif %}">{{ u.username }}{% if u.group_names %} · {{ u.group_names|length }} grupper{% endif %}{% if not u.active %} · inaktiv{% endif %}</span>
|
|
</span>
|
|
<span class="unav">→</span>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
<p id="unone" class="wt-muted" style="display:none;margin-top:1rem">Ingen brugere matcher.</p>
|
|
|
|
<script>
|
|
(function(){
|
|
var inp=document.getElementById('ufilter'), tt=document.getElementById('typetoggle');
|
|
var cards=[].slice.call(document.querySelectorAll('#ucards .wt-select-card'));
|
|
var none=document.getElementById('unone'), type='person';
|
|
function apply(){
|
|
var q=(inp.value||'').trim().toLowerCase(), shown=0;
|
|
cards.forEach(function(c){
|
|
var okType=(type==='all')||c.getAttribute('data-type')===type;
|
|
var okSearch=!q||c.getAttribute('data-search').indexOf(q)>-1;
|
|
var hit=okType&&okSearch; c.classList.toggle('hidden',!hit); if(hit) shown++;
|
|
});
|
|
none.style.display=shown?'none':'block';
|
|
}
|
|
inp.addEventListener('input',apply);
|
|
tt.addEventListener('click',function(e){var b=e.target.closest('button[data-type]'); if(!b)return;
|
|
type=b.getAttribute('data-type');
|
|
tt.querySelectorAll('button').forEach(function(x){x.classList.toggle('is-on',x===b);}); apply();});
|
|
apply();
|
|
})();
|
|
</script>
|
|
{% endblock %}
|