feat: login and register, style is not ready

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

@@ -0,0 +1,19 @@
+.navbar {
+  background: var(--dlg-bg);
+  border: 1.5px solid var(--dlg-border);
+  box-shadow: var(--bb-glow);
+  border-radius: 4px;
+  padding: 0.25rem 0.75rem;
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--bb-title) !important;
+  font-family: 'Bebas Neue', sans-serif;
+  letter-spacing: 1px;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,33 @@
+<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="dialog-btn" (click)="toggleTheme()">
+          {{ isDarkMode ? 'Light mode' : 'Dark mode' }}
+        </button>
+        @if (currentUser; as user) {
+          <div class="d-flex align-items-center gap-2">
+            <span style="color:var(--bb-title);font-weight:700">{{ user.username }}</span>
+            <button class="dialog-btn" (click)="logout()">Logout</button>
+          </div>
+        } @else {
+          <button class="dialog-btn" (click)="openLoginDialog()">
+            Login
+          </button>
+          <button class="dialog-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,81 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+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);
+
+  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();
+  }
+
+  onLoginSuccess(): void {
+    this.closeLoginDialog();
+  }
+
+  onRegisterSuccess(): void {
+    this.closeRegisterDialog();
+  }
+}