46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
<main class="approval-shell py-4">
|
|
<div class="container-lg">
|
|
<section class="panel p-4 p-lg-5">
|
|
<div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-4">
|
|
<div>
|
|
<a class="back-link" routerLink="/">← Back to dashboard</a>
|
|
<h1 class="h3 mt-2 mb-1">Account approvals</h1>
|
|
<p class="text-secondary mb-0">Only <code>ladparis</code> can activate newly registered accounts.</p>
|
|
</div>
|
|
<span class="badge rounded-pill text-bg-dark">{{ pendingUsers().length }} pending</span>
|
|
</div>
|
|
|
|
@if (errorMessage()) {
|
|
<div class="alert alert-danger mb-4">{{ errorMessage() }}</div>
|
|
}
|
|
|
|
@if (loading()) {
|
|
<div class="text-secondary">Loading pending accounts...</div>
|
|
} @else if (pendingUsers().length === 0) {
|
|
<div class="empty-state p-4 text-center text-secondary">No accounts are waiting for approval.</div>
|
|
} @else {
|
|
<div class="d-grid gap-3">
|
|
@for (user of pendingUsers(); track user.id) {
|
|
<article class="approval-card d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3 p-3">
|
|
<div>
|
|
<div class="fw-semibold">{{ user.displayName }}</div>
|
|
<div class="text-secondary">{{ user.username }}</div>
|
|
<div class="small text-secondary">Registered {{ user.createdAt | date: 'medium' }}</div>
|
|
</div>
|
|
|
|
<button
|
|
class="btn btn-accent"
|
|
type="button"
|
|
[disabled]="approvingUserId() === user.id"
|
|
(click)="approve(user.id)"
|
|
>
|
|
{{ approvingUserId() === user.id ? 'Approving...' : 'Approve account' }}
|
|
</button>
|
|
</article>
|
|
}
|
|
</div>
|
|
}
|
|
</section>
|
|
</div>
|
|
</main>
|