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
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:
parent
68306f3893
commit
ed83097b6b
3 changed files with 93 additions and 55 deletions
|
@ -40,33 +40,63 @@
|
|||
<div class="game-card-content">
|
||||
<h3 class="game-heading-sm">Slots</h3>
|
||||
<p class="game-text">Klassische Spielautomaten</p>
|
||||
@if (isLoggedIn()) {
|
||||
<a
|
||||
routerLink="game/slots"
|
||||
class="button-primary w-full py-2 inline-block text-center"
|
||||
>Jetzt Spielen</a
|
||||
>
|
||||
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>
|
||||
@if (isLoggedIn()) {
|
||||
<a
|
||||
routerLink="game/blackjack"
|
||||
class="button-primary w-full py-2 inline-block text-center"
|
||||
>Jetzt Spielen</a
|
||||
>
|
||||
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>
|
||||
@if (isLoggedIn()) {
|
||||
<a
|
||||
routerLink="game/blackjack"
|
||||
routerLink="game/coinflip"
|
||||
class="button-primary w-full py-2 inline-block text-center"
|
||||
>Jetzt Spielen</a
|
||||
>
|
||||
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>
|
||||
@if (isLoggedIn()) {
|
||||
<a
|
||||
routerLink="/game/dice"
|
||||
routerLink="game/dice"
|
||||
class="button-primary w-full py-2 inline-block text-center"
|
||||
>Jetzt Spielen</a
|
||||
>
|
||||
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>
|
||||
@if (isLoggedIn()) {
|
||||
<a
|
||||
routerLink="game/lootboxes"
|
||||
class="button-primary w-full py-2 inline-block text-center"
|
||||
>Jetzt Spielen</a
|
||||
>
|
||||
Jetzt Spielen
|
||||
</a>
|
||||
} @else {
|
||||
<button
|
||||
(click)="showLoginForm()"
|
||||
class="button-primary w-full py-2 inline-block text-center"
|
||||
>
|
||||
Jetzt Spielen
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
</a>
|
||||
|
||||
<div class="hidden md:flex items-center space-x-1">
|
||||
@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"
|
||||
|
@ -17,6 +18,15 @@
|
|||
<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>
|
||||
|
||||
|
|
Reference in a new issue