Initial commit

client/src/app/approval-page.component.html

@@ -0,0 +1,45 @@
+<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>