jank/casino
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(navbar): implement login/logout buttons based on state

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-02-12 12:51:55 +01:00
parent 325bc118ee
commit e5bd173be9
No known key found for this signature in database
GPG key ID: E7B6F77BF5EDB6F7
5 changed files with 57 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/feature/landing/landing.component.ts
View file

@ -19,3 +19,4 @@ export class LandingComponent {
this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
}
}
export class LandingPageComponent {}

1
frontend/src/app/landing-page/landing-page.component.html Normal file
View file

@ -0,0 +1 @@
<button (click)="login()">Einloggen</button>

5
frontend/src/app/shared/components/footer/footer.component.ts
View file

@ -1,5 +1,4 @@
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faMoneyBillTransfer, faCreditCard, faWallet } from '@fortawesome/free-solid-svg-icons';
import { faPaypal, faGooglePay, faApplePay } from '@fortawesome/free-brands-svg-icons';
@ -9,11 +8,11 @@ import { faPaypal, faGooglePay, faApplePay } from '@fortawesome/free-brands-svg-
standalone: true,
templateUrl: './footer.component.html',
imports: [FontAwesomeModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FooterComponent {
currentYear: number = new Date().getFullYear();
// Payment method icons
faPaypal = faPaypal;
faCreditCard = faCreditCard;
faMoneyBillTransfer = faMoneyBillTransfer;

42
frontend/src/app/shared/components/navbar/navbar.component.html
View file

@ -15,11 +15,22 @@
</div>
<div class="hidden md:flex items-center space-x-4">
<button
class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Login
</button>
@if (!isLoggedIn) {
<button
(click)="login()"
class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Login
</button>
}
@if (isLoggedIn) {
<button
(click)="logout()"
class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Logout
</button>
}
</div>
<div class="md:hidden">
@ -67,11 +78,22 @@
>Games</a
>
<div class="pt-2 space-y-2">
<button
class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Login
</button>
@if (!isLoggedIn) {
<button
(click)="login()"
class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Login
</button>
}
@if (isLoggedIn) {
<button
(click)="logout()"
class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Logout
</button>
}
</div>
</div>
</div>

24
frontend/src/app/shared/components/navbar/navbar.component.ts
View file

@ -1,15 +1,33 @@
import { Component } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { KeycloakService } from 'keycloak-angular';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
standalone: true,
imports: [CommonModule, RouterModule],
imports: [RouterModule, AsyncPipe],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NavbarComponent {
isMenuOpen = false;
private keycloakService: KeycloakService = inject(KeycloakService);
isLoggedIn = this.keycloakService.isLoggedIn();
login() {
try {
const baseUrl = window.location.origin;
this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
} catch (error) {
console.error('Login failed:', error);
}
}
logout() {
this.keycloakService.logout();
}
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;