Implement authentication feature with role-based access control and login dialog

src/app/navbar/navbar.component.css

@@ -13,7 +13,7 @@ nav {
 }
 
 .gradient-text:hover {
-  background: linear-gradient(to right, #6366f1, #db2777);
+  background: linear-gradient(to right, #db2777, #db2777);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

src/app/navbar/navbar.component.html

@@ -15,4 +15,15 @@
       }
     </div>
   </ul>
+  @if (currentUser() != null) {
+    <div class="mt-auto flex items-center justify-between gap-x-2 px-3 pb-3 text-gray-600">
+      <div class="flex items-center gap-x-1">
+        <span>Angemeldet als:</span>
+        <span class="text-indigo-500">{{ currentUser()?.displayName }}</span>
+      </div>
+      <button (click)="logout()" class="relative top-[1px] rounded opacity-50 hover:opacity-100 text-black">
+        <mat-icon style="font-size: 20px; width: 20px; height: 20px;">logout</mat-icon>
+      </button>
+    </div>
+  }
 </nav>

src/app/navbar/navbar.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { AuthService } from './../auth.service';
+import { Component, inject, computed, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-navbar',
@@ -11,4 +12,12 @@ export class NavbarComponent {
     {label: 'Programm', path: '/schedule'},
     {label: 'Film importieren', path: '/admin/movie-importer'},
   ]
+
+  private auth = inject(AuthService)
+
+  currentUser = computed(() => this.auth.user());
+
+  logout() {
+    this.auth.logout();
+  }
 }