196 lines
7.3 KiB
TypeScript
196 lines
7.3 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import { Component, inject } from '@angular/core';
|
|
import { Auth } from '@angular/fire/auth';
|
|
import { GoogleAuthProvider, signInWithPopup, UserCredential } from 'firebase/auth';
|
|
import { PopoverComponent } from './components/popover.component';
|
|
import { DeckListComponent } from './deck-list.component';
|
|
import { ClickOutsideDirective } from './service/click-outside.directive';
|
|
import { PopoverService } from './services/popover.service';
|
|
import { UserService } from './services/user.service';
|
|
@Component({
|
|
selector: 'app-root',
|
|
template: `
|
|
<div *ngIf="!isLoggedIn" class="min-h-screen flex flex-col items-center justify-center" style="background: rgba(0, 119, 179, 0.1)">
|
|
<div class="text-center">
|
|
<h1 class="text-5xl font-bold mb-4">Master Your Learning</h1>
|
|
<p class="text-xl mb-8">Learn smarter, not harder. Start your journey today</p>
|
|
<button (click)="loginWithGoogle()" class="bg-white text-blue-600 px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
|
|
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
|
<path
|
|
fill="#FFC107"
|
|
d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
|
|
/>
|
|
<path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
|
|
<path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
|
|
<path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
|
|
</svg>
|
|
Login with Google
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="isLoggedIn" class="bg-white shadow mb-4">
|
|
<div class="container mx-auto px-4 py-2 flex justify-between items-center">
|
|
<!-- Logo und Name -->
|
|
<div class="flex items-center space-x-2">
|
|
<img src="../assets/logo.svg" alt="Logo" class="w-10 h-10" />
|
|
<span class="text-xl font-bold">Haiky</span>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="hidden md:flex space-x-6">
|
|
<span class="text-xl font-bold">Spaced Repetition Training</span>
|
|
</div>
|
|
|
|
<!-- User-Bereich -->
|
|
<div appClickOutside class="relative" (clickOutside)="showDropdown = false">
|
|
<img *ngIf="photoURL" [src]="photoURL" alt="User Photo" class="w-10 h-10 rounded-full cursor-pointer" (click)="toggleDropdown()" referrerpolicy="no-referrer" crossorigin="anonymous" />
|
|
<div *ngIf="!photoURL" class="image-placeholder w-10 h-10 rounded-full cursor-pointer bg-gray-300"></div>
|
|
|
|
<!-- Dropdown -->
|
|
<div *ngIf="showDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-10">
|
|
<button (click)="logout()" class="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<app-deck-list *ngIf="isLoggedIn"></app-deck-list>
|
|
|
|
<app-popover
|
|
[visible]="popoverVisible"
|
|
[title]="popoverTitle"
|
|
[message]="popoverMessage"
|
|
[showInput]="popoverShowInput"
|
|
[showCancel]="popoverShowCancel"
|
|
[inputValue]="popoverInputValue"
|
|
[confirmText]="popoverConfirmText"
|
|
(confirmed)="handleConfirm($event)"
|
|
(canceled)="handleCancel()"
|
|
></app-popover>
|
|
`,
|
|
standalone: true,
|
|
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, PopoverComponent],
|
|
})
|
|
export class AppComponent {
|
|
isLoggedIn = false;
|
|
private auth: Auth = inject(Auth);
|
|
showDropdown = false;
|
|
photoURL: string = 'https://placehold.co/40';
|
|
// user: User | null = null;
|
|
popoverVisible = false;
|
|
popoverTitle = '';
|
|
popoverMessage = '';
|
|
popoverShowInput = false;
|
|
popoverShowCancel = true;
|
|
popoverInputValue = '';
|
|
popoverConfirmText = 'Confirm';
|
|
private confirmCallback?: (inputValue?: string) => void;
|
|
private cancelCallback?: () => void;
|
|
|
|
constructor(public popoverService: PopoverService, private userService: UserService) {
|
|
this.popoverService.popoverState$.subscribe(options => {
|
|
this.popoverVisible = true;
|
|
this.popoverTitle = options.title;
|
|
this.popoverMessage = options.message;
|
|
this.popoverShowInput = options.showInput;
|
|
this.popoverShowCancel = options.showCancel;
|
|
this.popoverInputValue = options.inputValue;
|
|
this.popoverConfirmText = options.confirmText;
|
|
this.confirmCallback = options.onConfirm;
|
|
this.cancelCallback = options.onCancel;
|
|
});
|
|
}
|
|
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');
|
|
|
|
if (isLoggedIn && accessToken && refreshToken) {
|
|
this.isLoggedIn = true;
|
|
}
|
|
}
|
|
|
|
async loginWithGoogle() {
|
|
const provider = new GoogleAuthProvider();
|
|
try {
|
|
const result: UserCredential = 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);
|
|
|
|
this.showDropdown = false;
|
|
|
|
await this.userService.logIn({ name: result.user.displayName, email: result.user.email, sign_in_provider: result.providerId });
|
|
|
|
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;
|
|
}
|
|
handleConfirm(inputValue?: string) {
|
|
this.popoverVisible = false;
|
|
if (this.confirmCallback) {
|
|
this.confirmCallback(inputValue);
|
|
}
|
|
}
|
|
|
|
handleCancel() {
|
|
this.popoverVisible = false;
|
|
if (this.cancelCallback) {
|
|
this.cancelCallback();
|
|
}
|
|
}
|
|
}
|