98 lines
3.7 KiB
HTML
98 lines
3.7 KiB
HTML
<section class="acces" aria-label="Gestion des accès">
|
|
<header class="acces__entete">
|
|
<h1 class="acces__titre">Gestion des accès</h1>
|
|
<button type="button" class="acces__btn" (click)="recharger()">⟳ Rafraîchir</button>
|
|
</header>
|
|
|
|
<p class="acces__note">
|
|
L'administrateur se configure dans le fichier <code>.env</code> et n'apparaît pas ici.
|
|
Pour un usage entre ateliers, préférez <strong>désactiver / réactiver</strong> un accès
|
|
plutôt que le supprimer.
|
|
</p>
|
|
|
|
@if (message()) {
|
|
<p class="acces__message" role="status">{{ message() }}</p>
|
|
}
|
|
@if (erreur()) {
|
|
<p class="acces__erreur" role="alert">{{ erreur() }}</p>
|
|
}
|
|
|
|
<!-- Création d'un compte -->
|
|
<form class="acces__form" (ngSubmit)="creer()">
|
|
<h2 class="acces__sous-titre">Ajouter un accès</h2>
|
|
<div class="acces__form-grille">
|
|
<label>
|
|
<span>Login</span>
|
|
<input type="text" name="login" [ngModel]="nLogin()" (ngModelChange)="nLogin.set($event)" placeholder="prenom.nom" />
|
|
</label>
|
|
<label>
|
|
<span>Mot de passe par défaut</span>
|
|
<input type="text" name="mdp" [ngModel]="nMdp()" (ngModelChange)="nMdp.set($event)" placeholder="à communiquer à l'utilisateur" />
|
|
</label>
|
|
<label>
|
|
<span>Rôle</span>
|
|
<select name="role" [ngModel]="nRole()" (ngModelChange)="nRole.set($event)">
|
|
<option value="contributeur">Contributeur (annotations)</option>
|
|
<option value="consultation">Consultation (lecture seule)</option>
|
|
<option value="desactive">Désactivé</option>
|
|
</select>
|
|
</label>
|
|
<button type="submit" class="acces__ajouter" [disabled]="creationEnCours()">
|
|
{{ creationEnCours() ? 'Création…' : 'Ajouter' }}
|
|
</button>
|
|
</div>
|
|
<p class="acces__hint">Le compte créé devra changer son mot de passe à la première connexion.</p>
|
|
</form>
|
|
|
|
<!-- Liste des comptes -->
|
|
@if (chargement()) {
|
|
<p class="acces__info">Chargement…</p>
|
|
}
|
|
|
|
@if (!chargement()) {
|
|
<table class="acces__table">
|
|
<thead>
|
|
<tr>
|
|
<th>Login</th>
|
|
<th>Rôle</th>
|
|
<th>1re connexion</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (u of comptes(); track u.login) {
|
|
<tr [class.acces__ligne--desactive]="u.role === 'desactive'">
|
|
<td class="acces__login">{{ u.login }}</td>
|
|
<td>
|
|
<select
|
|
class="acces__role-select"
|
|
[ngModel]="u.role"
|
|
(ngModelChange)="changerRole(u, $event)"
|
|
[attr.aria-label]="'Rôle de ' + u.login"
|
|
>
|
|
<option value="contributeur">Contributeur</option>
|
|
<option value="consultation">Consultation</option>
|
|
<option value="desactive">Désactivé</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
@if (u.doitChangerMdp) {
|
|
<span class="acces__badge acces__badge--attente" title="Changement de mot de passe requis à la prochaine connexion">à changer</span>
|
|
} @else {
|
|
<span class="acces__badge acces__badge--ok">OK</span>
|
|
}
|
|
</td>
|
|
<td class="acces__actions">
|
|
<button type="button" (click)="reinitialiser(u)" title="Réinitialiser le mot de passe">Réinitialiser mdp</button>
|
|
<button type="button" class="acces__suppr" (click)="supprimer(u)" title="Supprimer le compte">Supprimer</button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
@if (comptes().length === 0) {
|
|
<tr><td colspan="4" class="acces__vide">Aucun compte géré pour l'instant.</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
}
|
|
</section>
|