Authentication with firebase, Landing Page 1.Teil

src/app/app.component.ts

@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { Auth } from '@angular/fire/auth';
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { DeckListComponent } from './deck-list.component';
-
+import { ClickOutsideDirective } from './service/click-outside.directive';
 @Component({
   selector: 'app-root',
   template: `
@@ -25,22 +27,101 @@ import { DeckListComponent } from './deck-list.component';
     </div>
 
     <div *ngIf="isLoggedIn" class="container mx-auto p-4">
-      <h1 class="text-3xl font-bold text-center mb-8">Vocabulary Training</h1>
+      <div class="flex justify-center items-center mb-8">
+        <h1 class="text-3xl font-bold mx-auto">Vocabulary Training</h1>
+        <div class="relative" appClickOutside (clickOutside)="showDropdown = false">
+          <img [src]="photoURL" alt="User Photo" class="w-10 h-10 rounded-full cursor-pointer" (click)="toggleDropdown()" />
+          <div *ngIf="showDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg">
+            <button (click)="logout()" class="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100">Abmelden</button>
+          </div>
+        </div>
+      </div>
       <app-deck-list></app-deck-list>
     </div>
   `,
   standalone: true,
-  imports: [CommonModule, DeckListComponent],
+  styles: `
+img {
+  border: 2px solid #fff;
+  transition: transform 0.2s;
+}
+
+img:hover {
+  transform: scale(1.1);
+}
+
+/* Stile für das Dropdown-Menü */
+.dropdown {
+  display: none;
+  position: absolute;
+  right: 0;
+  margin-top: 0.5rem;
+  background-color: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.dropdown button {
+  width: 100%;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  color: #4a5568;
+}
+
+.dropdown button:hover {
+  background-color: #f7fafc;
+}  
+  `,
+  imports: [CommonModule, DeckListComponent, ClickOutsideDirective],
 })
 export class AppComponent {
-  isLoggedIn = false; // Zustand für den Login-Status
+  isLoggedIn = false;
+  private auth: Auth = inject(Auth);
+  showDropdown = false;
+  photoURL: string = 'https://via.placeholder.com/40';
+  // user: User | null = null;
 
-  // Mock-Funktion für Google Login
-  loginWithGoogle() {
-    // Hier würde die eigentliche Google Login-Logik stehen
-    // Zum Beispiel mit Angular Fire oder einer anderen Bibliothek
-    // Für dieses Beispiel simulieren wir den Login:
-    this.isLoggedIn = true;
-    console.log('Logged in with Google');
+  ngOnInit() {
+    // Überprüfen des Login-Status beim Start der Anwendung
+    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    const accessToken = localStorage.getItem('accessToken');
+    const refreshToken = localStorage.getItem('refreshToken');
+    this.photoURL = localStorage.getItem('photoURL');
+    this.showDropdown = false;
+    if (isLoggedIn && accessToken && refreshToken) {
+      this.isLoggedIn = true;
+    }
+  }
+
+  async loginWithGoogle() {
+    const provider = new GoogleAuthProvider();
+    try {
+      const result = await signInWithPopup(this.auth, provider);
+      this.isLoggedIn = true;
+      this.photoURL = result.user.photoURL;
+
+      // Speichern des Login-Status und Tokens im Local Storage
+      localStorage.setItem('isLoggedIn', 'true');
+      localStorage.setItem('accessToken', await result.user.getIdToken());
+      localStorage.setItem('refreshToken', result.user.refreshToken);
+      localStorage.setItem('photoURL', result.user.photoURL);
+
+      console.log('Logged in with Google', result.user);
+    } catch (error) {
+      console.error('Google Login failed', error);
+    }
+  }
+
+  logout() {
+    this.isLoggedIn = false;
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('refreshToken');
+    // Optional: Firebase-Logout durchführen
+    this.auth.signOut();
+  }
+  toggleDropdown() {
+    this.showDropdown = !this.showDropdown;
   }
 }