feat: NCS-63 User account implementation (#2)

User Profile info, no game before login/register, menu bar

---------

Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de>
Co-authored-by: shahdlala66 <shahd.lala66@gmail.com>
Reviewed-on: #2

src/app/components/toolbar/toolbar.component.css

@@ -0,0 +1,84 @@
+@import '../../button-template.css';
+
+.navbar {
+  background: rgba(8, 6, 28, 0.85);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15);
+  border-bottom: 1px solid rgba(0, 210, 255, 0.2);
+  border-radius: 0;
+  padding: 0.75rem 1rem;
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--bb-title) !important;
+  font-family: 'Bebas Neue', sans-serif;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.user-section {
+  align-items: center;
+}
+
+.me-btn {
+  background: rgba(0, 210, 255, 0.1);
+  color: var(--bb-title);
+  border: 1px solid var(--bb-border);
+  border-radius: 2px;
+  padding: 0.5rem 0.8rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  text-transform: uppercase;
+}
+
+.me-btn:hover {
+  background: rgba(0, 210, 255, 0.2);
+  border-color: var(--bb-tag);
+  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
+  transform: scale(1.05);
+}
+
+.me-btn:active {
+  transform: scale(0.98);
+}
+
+/* Sunset Mode */
+.sunset .navbar {
+  background: rgba(20, 5, 45, 0.85);
+  border-bottom-color: rgba(255, 64, 207, 0.2);
+  box-shadow: 0 4px 20px rgba(242, 106, 226, 0.15);
+}
+
+.sunset .me-btn {
+  background: rgba(242, 106, 226, 0.1);
+  border-color: var(--bb-border);
+}
+
+.sunset .me-btn:hover {
+  background: rgba(242, 106, 226, 0.2);
+  border-color: var(--bb-tag);
+  box-shadow: 0 0 10px rgba(242, 106, 226, 0.4);
+}
+
+.container-fluid {
+  display: flex;
+  align-items: center;
+}
+
+.ms-auto {
+  margin-left: auto;
+}

src/app/components/toolbar/toolbar.component.html

@@ -0,0 +1,35 @@
+<nav class="navbar">
+  <div class="container-fluid">
+    <span class="navbar-brand">NowChess</span>
+    <div class="ms-auto">
+      <div class="d-flex align-items-center gap-2">
+        <button type="button" class="app-btn" (click)="toggleTheme()">
+          {{ isDarkMode ? 'Light mode' : 'Dark mode' }}
+        </button>
+        @if (currentUser; as user) {
+        <div class="d-flex align-items-center gap-2 user-section">
+          <button type="button" class="me-btn" (click)="goToProfile()">
+            👤 {{ user.username }}
+          </button>
+          <button type="button" class="app-btn" (click)="logout()">Logout</button>
+        </div>
+        } @else {
+        <button type="button" class="app-btn" (click)="openLoginDialog()">
+          Login
+        </button>
+        <button type="button" class="app-btn" (click)="openRegisterDialog()">
+          Register
+        </button>
+        }
+      </div>
+    </div>
+  </div>
+</nav>
+
+@if (showLoginDialog) {
+<app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
+}
+
+@if (showRegisterDialog) {
+<app-register-dialog (onClose)="closeRegisterDialog()" (onSuccess)="onRegisterSuccess()" />
+}

src/app/components/toolbar/toolbar.component.ts

@@ -0,0 +1,87 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AuthService } from '../../services/auth.service';
+import { AuthDialogService } from '../../services/auth-dialog.service';
+import { CurrentUser } from '../../models/auth.models';
+import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
+import { RegisterDialogComponent } from '../register-dialog/register-dialog.component';
+import { ThemeService } from '../../services/theme.service';
+
+@Component({
+  selector: 'app-toolbar',
+  standalone: true,
+  imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent],
+  templateUrl: './toolbar.component.html',
+  styleUrl: './toolbar.component.css'
+})
+export class ToolbarComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly authService = inject(AuthService);
+  private readonly authDialogService = inject(AuthDialogService);
+  private readonly themeService = inject(ThemeService);
+  private readonly router = inject(Router);
+
+  currentUser: CurrentUser | null = null;
+  showLoginDialog = false;
+  showRegisterDialog = false;
+  isDarkMode = false;
+
+  ngOnInit(): void {
+    this.authService.currentUser$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((user) => {
+        this.currentUser = user;
+      });
+
+    this.authDialogService.dialogState$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((state) => {
+        this.showLoginDialog = state === 'login';
+        this.showRegisterDialog = state === 'register';
+      });
+
+    this.themeService.darkMode$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((isDarkMode) => {
+        this.isDarkMode = isDarkMode;
+      });
+  }
+
+  openLoginDialog(): void {
+    this.authDialogService.openLogin();
+  }
+
+  closeLoginDialog(): void {
+    this.authDialogService.close();
+  }
+
+  openRegisterDialog(): void {
+    this.authDialogService.openRegister();
+  }
+
+  closeRegisterDialog(): void {
+    this.authDialogService.close();
+  }
+
+  logout(): void {
+    this.authService.logout();
+  }
+
+  toggleTheme(): void {
+    this.themeService.toggleTheme();
+  }
+
+  goToProfile(): void {
+    this.router.navigate(['/profile']);
+  }
+
+  onLoginSuccess(): void {
+    this.closeLoginDialog();
+  }
+
+  onRegisterSuccess(): void {
+    this.closeRegisterDialog();
+  }
+}