feat: initial prototype works

I can log in and create a book! Woo!
2026-02-04 12:17:05 -08:00
parent e167a17bd9
commit b6d66d34cb
44 changed files with 3695 additions and 493 deletions
@@ -0,0 +1,156 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  template: `
+    <header class="header">
+      <nav class="navbar">
+        <div class="nav-brand">
+          <h1><a routerLink="/">Naomi's Library</a></h1>
+        </div>
+
+        <ul class="nav-links">
+          <li><a routerLink="/games" routerLinkActive="active">Games</a></li>
+          <li><a routerLink="/books" routerLinkActive="active">Books</a></li>
+          <li><a routerLink="/music" routerLinkActive="active">Music</a></li>
+        </ul>
+
+        <div class="auth-section">
+          @if (authService.user(); as user) {
+            <span class="welcome">Welcome, {{ user.username }}!</span>
+            @if (user.isAdmin) {
+              <span class="admin-badge">Admin</span>
+            }
+            <button (click)="logout()" class="btn btn-secondary">Logout</button>
+          } @else {
+            <button (click)="login()" class="btn btn-primary">Login with Discord</button>
+          }
+        </div>
+      </nav>
+    </header>
+  `,
+  styles: [`
+    .header {
+      background-color: var(--witch-purple);
+      color: var(--witch-moon);
+      padding: 0;
+      box-shadow: 0 2px 8px var(--witch-shadow);
+    }
+
+    .navbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 2rem;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .nav-brand h1 {
+      margin: 0;
+      font-size: 1.5rem;
+    }
+
+    .nav-brand a {
+      color: var(--witch-moon);
+      text-decoration: none;
+      font-weight: 600;
+    }
+
+    .nav-links {
+      display: flex;
+      list-style: none;
+      gap: 2rem;
+      margin: 0;
+      padding: 0;
+    }
+
+    .nav-links a {
+      color: var(--witch-lavender);
+      text-decoration: none;
+      padding: 0.5rem 1rem;
+      border-radius: 4px;
+      transition: all 0.3s;
+    }
+
+    .nav-links a:hover,
+    .nav-links a.active {
+      background-color: var(--witch-plum);
+      color: var(--witch-moon);
+    }
+
+    .auth-section {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .welcome {
+      font-size: 0.9rem;
+      color: var(--witch-lavender);
+    }
+
+    .admin-badge {
+      background-color: var(--witch-rose);
+      color: var(--witch-moon);
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.8rem;
+    }
+
+    .btn {
+      padding: 0.5rem 1rem;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      transition: all 0.3s;
+    }
+
+    .btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px var(--witch-shadow);
+    }
+
+    .btn-primary {
+      background-color: var(--witch-rose);
+      color: var(--witch-moon);
+    }
+
+    .btn-primary:hover {
+      background-color: var(--witch-plum);
+    }
+
+    .btn-secondary {
+      background-color: var(--witch-mauve);
+      color: var(--witch-purple);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--witch-rose);
+      color: var(--witch-moon);
+    }
+  `]
+})
+export class HeaderComponent {
+  authService = inject(AuthService);
+
+  login() {
+    this.authService.login();
+  }
+
+  logout() {
+    this.authService.logout().subscribe();
+  }
+}