feat: open login form when accessing restricted links
All checks were successful
CI / Get Changed Files (pull_request) Successful in 10s
Label PRs based on size / Check PR size (pull_request) Successful in 19s
Claude PR Review / claude-code (pull_request) Successful in 35s
CI / Backend Tests (pull_request) Has been skipped
CI / Checkstyle Main (pull_request) Has been skipped
Pull Request Labeler / labeler (pull_request_target) Successful in 14s
CI / Docker backend validation (pull_request) Has been skipped
CI / oxlint (pull_request) Successful in 44s
CI / prettier (pull_request) Successful in 52s
CI / eslint (pull_request) Successful in 1m6s
CI / test-build (pull_request) Successful in 1m31s
CI / Docker frontend validation (pull_request) Successful in 1m15s

This commit is contained in:
Phan Huy Tran 2025-06-04 14:27:11 +02:00
commit ed83097b6b
3 changed files with 93 additions and 55 deletions

View file

@ -40,33 +40,63 @@
<div class="game-card-content">
<h3 class="game-heading-sm">Slots</h3>
<p class="game-text">Klassische Spielautomaten</p>
<a
routerLink="game/slots"
class="button-primary w-full py-2 inline-block text-center"
>Jetzt Spielen</a
>
@if (isLoggedIn()) {
<a
routerLink="game/slots"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</a>
} @else {
<button
(click)="showLoginForm()"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</button>
}
</div>
</div>
<div class="hidden lg:block card">
<div class="game-card-content">
<h3 class="game-heading-sm">Blackjack</h3>
<p class="game-text">Klassisches Kartenspiel</p>
<a
routerLink="game/blackjack"
class="button-primary w-full py-2 inline-block text-center"
>Jetzt Spielen</a
>
@if (isLoggedIn()) {
<a
routerLink="game/blackjack"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</a>
} @else {
<button
(click)="showLoginForm()"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</button>
}
</div>
</div>
<div class="hidden lg:block card">
<div class="game-card-content">
<h3 class="game-heading-sm">Coinflip</h3>
<p class="game-text">Münzwurf</p>
<a
routerLink="game/blackjack"
class="button-primary w-full py-2 inline-block text-center"
>Jetzt Spielen</a
>
@if (isLoggedIn()) {
<a
routerLink="game/coinflip"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</a>
} @else {
<button
(click)="showLoginForm()"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</button>
}
</div>
</div>
</div>
@ -76,22 +106,42 @@
<div class="game-card-content">
<h3 class="game-heading-sm">Dice</h3>
<p class="game-text">Würfelspiel</p>
<a
routerLink="/game/dice"
class="button-primary w-full py-2 inline-block text-center"
>Jetzt Spielen</a
>
@if (isLoggedIn()) {
<a
routerLink="game/dice"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</a>
} @else {
<button
(click)="showLoginForm()"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</button>
}
</div>
</div>
<div class="hidden lg:block card">
<div class="game-card-content">
<h3 class="game-heading-sm">Lootboxen</h3>
<p class="game-text">Überraschungskisten</p>
<a
routerLink="game/lootboxes"
class="button-primary w-full py-2 inline-block text-center"
>Jetzt Spielen</a
>
@if (isLoggedIn()) {
<a
routerLink="game/lootboxes"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</a>
} @else {
<button
(click)="showLoginForm()"
class="button-primary w-full py-2 inline-block text-center"
>
Jetzt Spielen
</button>
}
</div>
</div>
</div>

View file

@ -23,15 +23,14 @@ import RecoverPasswordComponent from '../auth/recover-password/recover-password.
})
export class LandingComponent implements OnInit, OnDestroy {
currentSlide = 0;
private autoplayInterval: ReturnType<typeof setInterval> | undefined;
authService: AuthService = inject(AuthService);
route: ActivatedRoute = inject(ActivatedRoute);
showLogin = signal(false);
showRegister = signal(false);
showRecoverPassword = signal(false);
isLoggedIn = signal(this.authService.isLoggedIn());
ngOnInit() {
this.startAutoplay();
document.body.style.overflow = 'auto';
if (this.route.snapshot.queryParamMap.get('login') === 'true') {
this.showLoginForm();
@ -39,7 +38,6 @@ export class LandingComponent implements OnInit, OnDestroy {
}
ngOnDestroy() {
this.stopAutoplay();
document.body.style.overflow = 'auto';
}
@ -73,33 +71,13 @@ export class LandingComponent implements OnInit, OnDestroy {
prevSlide() {
this.currentSlide = this.currentSlide === 0 ? 1 : 0;
this.resetAutoplay();
}
nextSlide() {
this.currentSlide = this.currentSlide === 1 ? 0 : 1;
this.resetAutoplay();
}
goToSlide(index: number) {
this.currentSlide = index;
this.resetAutoplay();
}
private startAutoplay() {
this.autoplayInterval = setInterval(() => {
this.nextSlide();
}, 5000);
}
private stopAutoplay() {
if (this.autoplayInterval) {
clearInterval(this.autoplayInterval);
}
}
private resetAutoplay() {
this.stopAutoplay();
this.startAutoplay();
}
}

View file

@ -10,13 +10,23 @@
</a>
<div class="hidden md:flex items-center space-x-1">
<a
routerLink="/home"
class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
>
<img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
Spiele
</a>
@if (isLoggedIn()) {
<a
routerLink="/home"
class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
>
<img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
Spiele
</a>
} @else {
<button
(click)="showLogin.emit()"
class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
>
<img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
Spiele
</button>
}
</div>
</div>