feat: First-Start Create Admin Modal 1.00

frontend/src/app/features/home/home.component.ts

@@ -1,26 +1,47 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterLink, RouterOutlet } from '@angular/router';
 import { BootstrapService } from '../../core/services/bootstrap.service';
 import { AuthService } from '../../core/services/auth.service';
+import { shouldShowAdminNav } from './home.shell';
+
+export { shouldShowAdminNav } from './home.shell';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink, RouterOutlet],
   template: `
     <div class="container">
-      <h1>{{ bootstrap.payload()?.pageTitle ?? 'HIPCTF' }}</h1>
-      <div *ngIf="!auth.isAuthenticated()">
-        <p>{{ bootstrap.payload()?.welcomeMarkdown }}</p>
-        <a href="/login">Sign in</a>
-      </div>
-      <div *ngIf="auth.isAuthenticated()">
-        <p>Signed in as <b>{{ auth.currentUser()?.username }}</b> ({{ auth.currentUser()?.role }})</p>
-      </div>
+      <header class="shell-header">
+        <h1 class="shell-title">{{ bootstrap.payload()?.pageTitle ?? 'HIPCTF' }}</h1>
+        <div class="shell-user" *ngIf="auth.isAuthenticated()">
+          <span>Signed in as <b>{{ auth.currentUser()?.username }}</b> ({{ auth.currentUser()?.role }})</span>
+        </div>
+      </header>
+
+      <nav class="shell-nav" *ngIf="showAdminNav()">
+        <a routerLink="/admin" data-testid="nav-admin">Admin</a>
+      </nav>
+
+      <section class="shell-body">
+        <div *ngIf="!auth.isAuthenticated()">
+          <p>{{ bootstrap.payload()?.welcomeMarkdown }}</p>
+          <a href="/login">Sign in</a>
+        </div>
+        <router-outlet></router-outlet>
+      </section>
     </div>
   `,
 })
 export class HomeComponent {
   bootstrap = inject(BootstrapService);
   auth = inject(AuthService);
-}
+
+  readonly showAdminNav = computed(() =>
+    shouldShowAdminNav({
+      isAuthenticated: this.auth.isAuthenticated(),
+      role: this.auth.currentUser()?.role,
+    }),
+  );
+}