AI Implementation feature(857): Authenticated Shell: Header, Quick Tabs and Change Password (#14)

2026-07-21 22:26:47 +00:00
parent 8dc8cee769
commit b6dbfcc511
46 changed files with 2705 additions and 211 deletions
@@ -0,0 +1,108 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EventState } from '../../../core/services/event-status.store';
+
+@Component({
+  selector: 'app-shell-header',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  template: `
+    <header class="shell-header" data-testid="shell-header">
+      <button
+        type="button"
+        class="shell-title"
+        data-testid="shell-title"
+        (click)="titleClick.emit()"
+      >
+        {{ pageTitle() }}
+      </button>
+
+      <div class="shell-section" data-testid="shell-active-section">
+        {{ activeSection() }}
+      </div>
+
+      <div class="shell-right">
+        <span
+          class="led"
+          [class.led-running]="eventState() === 'running'"
+          [class.led-countdown]="eventState() === 'countdown'"
+          [class.led-stopped]="eventState() === 'stopped'"
+          [class.led-unconfigured]="eventState() === 'unconfigured'"
+          data-testid="shell-led"
+          [attr.aria-label]="'Event status: ' + eventState()"
+        ></span>
+        <span class="countdown" data-testid="shell-countdown">{{ countdownText() }}</span>
+
+        <div class="user-menu-wrapper">
+          <button
+            type="button"
+            class="user-menu-trigger"
+            data-testid="user-menu-trigger"
+            (click)="usernameMenuToggle.emit()"
+          >
+            {{ username() }} <span aria-hidden="true">▾</span>
+          </button>
+
+          @if (userMenuOpen()) {
+            <div class="user-menu" role="menu" data-testid="user-menu">
+              <button
+                type="button"
+                class="user-menu-item"
+                data-testid="user-menu-rank"
+                (click)="rankClick.emit()"
+              >
+                {{ rankText() }}
+              </button>
+              <button
+                type="button"
+                class="user-menu-item"
+                data-testid="user-menu-change-password"
+                (click)="changePasswordClick.emit()"
+              >
+                Change password
+              </button>
+              @if (canAccessAdmin()) {
+                <button
+                  type="button"
+                  class="user-menu-item"
+                  data-testid="user-menu-admin"
+                  (click)="adminClick.emit()"
+                >
+                  Admin area
+                </button>
+              }
+              <button
+                type="button"
+                class="user-menu-item"
+                data-testid="user-menu-logout"
+                (click)="logoutClick.emit()"
+              >
+                Logout
+              </button>
+            </div>
+          }
+        </div>
+      </div>
+    </header>
+  `,
+})
+export class ShellHeaderComponent {
+  readonly pageTitle = input<string>('HIPCTF');
+  readonly activeSection = input<string>('Challenges');
+  readonly eventState = input<EventState>('unconfigured');
+  readonly countdownText = input<string>('');
+  readonly username = input<string>('');
+  readonly rankText = input<string>('');
+  readonly canAccessAdmin = input<boolean>(false);
+  readonly userMenuOpen = input<boolean>(false);
+
+  readonly titleClick = output<void>();
+  readonly usernameMenuToggle = output<void>();
+  readonly rankClick = output<void>();
+  readonly changePasswordClick = output<void>();
+  readonly adminClick = output<void>();
+  readonly logoutClick = output<void>();
+
+  readonly ledClass = computed(() => `led led-${this.eventState()}`);
+}