144 lines
6.7 KiB
HTML
144 lines
6.7 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Gebruikers & rechten{% endblock %}
|
||
{% block page_title %}Gebruikers & rechten{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<style>
|
||
.school-chip { display: inline-block; margin: 2px 4px 2px 0; }
|
||
.user-row-inactief td { opacity: .55; }
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="card">
|
||
<div class="page-head">
|
||
<h2>🔧 PIVOT-gebruikers</h2>
|
||
<div class="actions">
|
||
<button type="button" class="btn-success" onclick="openModal()">➕ Nieuwe gebruiker</button>
|
||
</div>
|
||
</div>
|
||
<p class="muted">Eén account per persoon, voor alle scholen. Per school vink je aan op welke onderdelen iemand rechten heeft.
|
||
{% if is_admin %}Een <strong>administrator</strong> heeft altijd alle rechten in alle scholen.{% endif %}</p>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Gebruiker</th>
|
||
<th>Rol</th>
|
||
<th>Rechten per school</th>
|
||
<th>Laatste login</th>
|
||
<th class="actions">Beheren</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for u in users %}
|
||
<tr class="{{ '' if u.Actief else 'user-row-inactief' }}">
|
||
<td>
|
||
<strong>{{ u.Gebruikersnaam }}</strong>
|
||
{% if not u.Actief %}<span class="badge badge-warning">uitgeschakeld</span>{% endif %}
|
||
{% if u.Emailadres %}<div class="muted small">{{ u.Emailadres }}</div>{% endif %}
|
||
</td>
|
||
<td><span class="badge {{ 'badge-danger' if u.Veiligheidsgroep == ADMIN else 'badge-info' }}">{{ u.Rol }}</span></td>
|
||
<td>
|
||
{% if u.Veiligheidsgroep == ADMIN %}
|
||
<span class="muted small">Alle rechten in alle scholen</span>
|
||
{% else %}
|
||
{% for naam, n in u.scholen[:3] %}
|
||
<span class="badge school-chip" title="{{ n }} van {{ totaal_onderdelen }} onderdelen">🏫 {{ naam }} · {{ n }}</span>
|
||
{% else %}
|
||
<span class="muted small">Nog geen rechten</span>
|
||
{% endfor %}
|
||
{% if u.scholen|length > 3 %}
|
||
<a class="badge school-chip" href="{{ url_for('admin.gebruiker_rechten', gid=u.Gebruiker_ID) }}"
|
||
title="{% for naam, n in u.scholen[3:] %}{{ naam }} · {{ n }}{% if not loop.last %} {% endif %}{% endfor %}">+{{ u.scholen|length - 3 }} scholen</a>
|
||
{% endif %}
|
||
{% endif %}
|
||
</td>
|
||
<td class="nowrap small">{{ u.Last_login.strftime('%d-%m-%Y %H:%M') if u.Last_login else '–' }}</td>
|
||
<td class="actions">
|
||
<div style="display:inline-flex;gap:6px;justify-content:flex-end;white-space:nowrap">
|
||
{% if u.Veiligheidsgroep != ADMIN %}
|
||
<a class="btn btn-sm btn-secondary" href="{{ url_for('admin.gebruiker_rechten', gid=u.Gebruiker_ID) }}">🔐 Rechten</a>
|
||
{% endif %}
|
||
<a class="btn btn-sm btn-warning" href="{{ url_for('admin.gebruiker', gid=u.Gebruiker_ID) }}">👤 Account</a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{% else %}
|
||
<tr class="empty-row"><td colspan="5">Nog geen gebruikers.</td></tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block modals %}
|
||
<div id="addUserModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal()">×</span>
|
||
<h3>Nieuwe gebruiker</h3>
|
||
|
||
<form method="POST" action="{{ url_for('admin.nieuw') }}">
|
||
<div class="field">
|
||
<label for="username">Gebruikersnaam</label>
|
||
<input type="text" id="username" name="username" placeholder="Bijv. jansen_j" required autocomplete="off">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="email">E-mailadres <span class="muted small">(optioneel – om met Google in te loggen)</span></label>
|
||
<input type="email" id="email" name="email" placeholder="voornaam.naam@school.be" autocomplete="off">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="password">Wachtwoord <span class="muted small">(leeg = enkel Google-login)</span></label>
|
||
<div class="password-wrap">
|
||
<input type="password" id="password" name="password" placeholder="Minstens 8 tekens" autocomplete="new-password">
|
||
<button type="button" class="password-toggle" onclick="togglePassword('password', this)">👁️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="password_confirm">Wachtwoord bevestigen</label>
|
||
<div class="password-wrap">
|
||
<input type="password" id="password_confirm" name="password_confirm" placeholder="Wachtwoord" autocomplete="new-password">
|
||
<button type="button" class="password-toggle" onclick="togglePassword('password_confirm', this)">👁️</button>
|
||
</div>
|
||
</div>
|
||
|
||
{% if is_admin %}
|
||
<div class="field">
|
||
<label for="veiligheidsgroep">Rol</label>
|
||
<select id="veiligheidsgroep" name="veiligheidsgroep">
|
||
{% for nr, naam in groepen.items() %}
|
||
<option value="{{ nr }}" {% if nr != ADMIN %}selected{% endif %}>{{ naam }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="field-hint">Een gebruiker krijgt enkel de rechten die je daarna per school aanvinkt.</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<button type="submit" class="btn-block btn-success">💾 Aanmaken en rechten instellen</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
var modal = document.getElementById("addUserModal");
|
||
function openModal() { modal.style.display = "block"; }
|
||
function closeModal() { modal.style.display = "none"; }
|
||
window.onclick = function (event) { if (event.target == modal) closeModal(); };
|
||
|
||
function togglePassword(fieldId, button) {
|
||
var f = document.getElementById(fieldId);
|
||
f.type = f.type === "password" ? "text" : "password";
|
||
button.textContent = f.type === "password" ? "👁️" : "🙈";
|
||
}
|
||
{% if request.args.get('nieuw') %}openModal();{% endif %}
|
||
</script>
|
||
{% endblock %}
|