SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

style: format code and improve readability

Browse source
This commit is contained in:
Constantin Simonis 2025-05-07 13:42:41 +02:00
commit 51540c930b
No known key found for this signature in database
GPG key ID: 3878FF77C24AF4D2
12 changed files with 143 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/app.routes.ts
View file

@ -9,11 +9,13 @@ export const routes: Routes = [
}, },
{ {
path: 'login', path: 'login',
loadComponent: () => import('./feature/auth/login/login.component').then(m => m.LoginComponent), loadComponent: () =>
import('./feature/auth/login/login.component').then((m) => m.LoginComponent),
}, },
{ {
path: 'register', path: 'register',
loadComponent: () => import('./feature/auth/register/register.component').then(m => m.RegisterComponent), loadComponent: () =>
import('./feature/auth/register/register.component').then((m) => m.RegisterComponent),
}, },
{ {
path: 'home', path: 'home',

41
frontend/src/app/feature/auth/login/login.component.ts
View file

@ -20,16 +20,24 @@ import { CommonModule } from '@angular/common';
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-6"> <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-6">
<div> <div>
<label for="usernameOrEmail" class="block text-sm font-medium text-gray-300">Username or Email</label> <label for="usernameOrEmail" class="block text-sm font-medium text-gray-300"
>Username or Email</label
>
<input <input
id="usernameOrEmail" id="usernameOrEmail"
type="text" type="text"
formControlName="usernameOrEmail" formControlName="usernameOrEmail"
class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3" class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
placeholder="Enter your username or email"> placeholder="Enter your username or email"
/>
<div *ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors" class="text-red-500 mt-1 text-sm"> <div
<span *ngIf="form['usernameOrEmail'].errors?.['required']">Username or email is required</span> *ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors"
class="text-red-500 mt-1 text-sm"
>
<span *ngIf="form['usernameOrEmail'].errors?.['required']"
>Username or email is required</span
>
</div> </div>
</div> </div>
@ -40,9 +48,13 @@ import { CommonModule } from '@angular/common';
type="password" type="password"
formControlName="password" formControlName="password"
class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3" class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
placeholder="Enter your password"> placeholder="Enter your password"
/>
<div *ngIf="form['password'].touched && form['password'].errors" class="text-red-500 mt-1 text-sm"> <div
*ngIf="form['password'].touched && form['password'].errors"
class="text-red-500 mt-1 text-sm"
>
<span *ngIf="form['password'].errors?.['required']">Password is required</span> <span *ngIf="form['password'].errors?.['required']">Password is required</span>
</div> </div>
</div> </div>
@ -51,7 +63,8 @@ import { CommonModule } from '@angular/common';
<button <button
type="submit" type="submit"
[disabled]="loginForm.invalid || isLoading" [disabled]="loginForm.invalid || isLoading"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
{{ isLoading ? 'Logging in...' : 'Login' }} {{ isLoading ? 'Logging in...' : 'Login' }}
</button> </button>
</div> </div>
@ -60,12 +73,14 @@ import { CommonModule } from '@angular/common';
<div class="mt-6 text-center"> <div class="mt-6 text-center">
<p class="text-sm text-gray-400"> <p class="text-sm text-gray-400">
Don't have an account? Don't have an account?
<a routerLink="/register" class="font-medium text-indigo-400 hover:text-indigo-300">Register</a> <a routerLink="/register" class="font-medium text-indigo-400 hover:text-indigo-300"
>Register</a
>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
` `,
}) })
export class LoginComponent { export class LoginComponent {
loginForm: FormGroup; loginForm: FormGroup;
@ -79,7 +94,7 @@ export class LoginComponent {
) { ) {
this.loginForm = this.fb.group({ this.loginForm = this.fb.group({
usernameOrEmail: ['', [Validators.required]], usernameOrEmail: ['', [Validators.required]],
password: ['', [Validators.required]] password: ['', [Validators.required]],
}); });
} }
@ -97,17 +112,17 @@ export class LoginComponent {
const loginRequest: LoginRequest = { const loginRequest: LoginRequest = {
usernameOrEmail: this.form['usernameOrEmail'].value, usernameOrEmail: this.form['usernameOrEmail'].value,
password: this.form['password'].value password: this.form['password'].value,
}; };
this.authService.login(loginRequest).subscribe({ this.authService.login(loginRequest).subscribe({
next: () => { next: () => {
this.router.navigate(['/home']); this.router.navigate(['/home']);
}, },
error: err => { error: (err) => {
this.isLoading = false; this.isLoading = false;
this.errorMessage = err.error?.message || 'Failed to login. Please check your credentials.'; this.errorMessage = err.error?.message || 'Failed to login. Please check your credentials.';
} },
}); });
} }
} }

80
frontend/src/app/feature/auth/register/register.component.ts
View file

@ -26,11 +26,17 @@ import { CommonModule } from '@angular/common';
type="email" type="email"
formControlName="email" formControlName="email"
class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3" class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
placeholder="Enter your email"> placeholder="Enter your email"
/>
<div *ngIf="form['email'].touched && form['email'].errors" class="text-red-500 mt-1 text-sm"> <div
*ngIf="form['email'].touched && form['email'].errors"
class="text-red-500 mt-1 text-sm"
>
<span *ngIf="form['email'].errors?.['required']">Email is required</span> <span *ngIf="form['email'].errors?.['required']">Email is required</span>
<span *ngIf="form['email'].errors?.['email']">Please enter a valid email address</span> <span *ngIf="form['email'].errors?.['email']"
>Please enter a valid email address</span
>
</div> </div>
</div> </div>
@ -41,11 +47,17 @@ import { CommonModule } from '@angular/common';
type="text" type="text"
formControlName="username" formControlName="username"
class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3" class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
placeholder="Choose a username"> placeholder="Choose a username"
/>
<div *ngIf="form['username'].touched && form['username'].errors" class="text-red-500 mt-1 text-sm"> <div
*ngIf="form['username'].touched && form['username'].errors"
class="text-red-500 mt-1 text-sm"
>
<span *ngIf="form['username'].errors?.['required']">Username is required</span> <span *ngIf="form['username'].errors?.['required']">Username is required</span>
<span *ngIf="form['username'].errors?.['minlength']">Username must be at least 3 characters</span> <span *ngIf="form['username'].errors?.['minlength']"
>Username must be at least 3 characters</span
>
</div> </div>
</div> </div>
@ -56,11 +68,17 @@ import { CommonModule } from '@angular/common';
type="password" type="password"
formControlName="password" formControlName="password"
class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3" class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
placeholder="Create a password"> placeholder="Create a password"
/>
<div *ngIf="form['password'].touched && form['password'].errors" class="text-red-500 mt-1 text-sm"> <div
*ngIf="form['password'].touched && form['password'].errors"
class="text-red-500 mt-1 text-sm"
>
<span *ngIf="form['password'].errors?.['required']">Password is required</span> <span *ngIf="form['password'].errors?.['required']">Password is required</span>
<span *ngIf="form['password'].errors?.['minlength']">Password must be at least 6 characters</span> <span *ngIf="form['password'].errors?.['minlength']"
>Password must be at least 6 characters</span
>
</div> </div>
</div> </div>
@ -68,7 +86,8 @@ import { CommonModule } from '@angular/common';
<button <button
type="submit" type="submit"
[disabled]="registerForm.invalid || isLoading" [disabled]="registerForm.invalid || isLoading"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
{{ isLoading ? 'Creating account...' : 'Register' }} {{ isLoading ? 'Creating account...' : 'Register' }}
</button> </button>
</div> </div>
@ -77,12 +96,14 @@ import { CommonModule } from '@angular/common';
<div class="mt-6 text-center"> <div class="mt-6 text-center">
<p class="text-sm text-gray-400"> <p class="text-sm text-gray-400">
Already have an account? Already have an account?
<a routerLink="/login" class="font-medium text-indigo-400 hover:text-indigo-300">Login</a> <a routerLink="/login" class="font-medium text-indigo-400 hover:text-indigo-300"
>Login</a
>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
` `,
}) })
export class RegisterComponent { export class RegisterComponent {
registerForm: FormGroup; registerForm: FormGroup;
@ -97,7 +118,7 @@ export class RegisterComponent {
this.registerForm = this.fb.group({ this.registerForm = this.fb.group({
email: ['', [Validators.required, Validators.email]], email: ['', [Validators.required, Validators.email]],
username: ['', [Validators.required, Validators.minLength(3)]], username: ['', [Validators.required, Validators.minLength(3)]],
password: ['', [Validators.required, Validators.minLength(6)]] password: ['', [Validators.required, Validators.minLength(6)]],
}); });
} }
@ -116,29 +137,32 @@ export class RegisterComponent {
const registerRequest: RegisterRequest = { const registerRequest: RegisterRequest = {
email: this.form['email'].value, email: this.form['email'].value,
username: this.form['username'].value, username: this.form['username'].value,
password: this.form['password'].value password: this.form['password'].value,
}; };
this.authService.register(registerRequest).subscribe({ this.authService.register(registerRequest).subscribe({
next: () => { next: () => {
// After registration, log in the user // After registration, log in the user
this.authService.login({ this.authService
usernameOrEmail: registerRequest.email, .login({
password: registerRequest.password usernameOrEmail: registerRequest.email,
}).subscribe({ password: registerRequest.password,
next: () => { })
this.router.navigate(['/home']); .subscribe({
}, next: () => {
error: err => { this.router.navigate(['/home']);
this.isLoading = false; },
this.errorMessage = 'Registration successful but failed to login automatically. Please log in manually.'; error: (err) => {
} this.isLoading = false;
}); this.errorMessage =
'Registration successful but failed to login automatically. Please log in manually.';
},
});
}, },
error: err => { error: (err) => {
this.isLoading = false; this.isLoading = false;
this.errorMessage = err.error?.message || 'Failed to register. Please try again.'; this.errorMessage = err.error?.message || 'Failed to register. Please try again.';
} },
}); });
} }
} }

10
frontend/src/app/feature/landing/landing.component.html
View file

@ -11,10 +11,16 @@
<p class="bonus-description">+ 200 Freispiele</p> <p class="bonus-description">+ 200 Freispiele</p>
<div class="flex justify-center space-x-4 mt-6"> <div class="flex justify-center space-x-4 mt-6">
<a routerLink="/register" class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"> <a
routerLink="/register"
class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
>
Konto erstellen Konto erstellen
</a> </a>
<a routerLink="/login" class="w-full sm:w-auto bg-slate-700 text-white hover:bg-slate-600 px-6 sm:px-8 py-3 shadow-lg rounded"> <a
routerLink="/login"
class="w-full sm:w-auto bg-slate-700 text-white hover:bg-slate-600 px-6 sm:px-8 py-3 shadow-lg rounded"
>
Anmelden Anmelden
</a> </a>
</div> </div>

2
frontend/src/app/model/auth/AuthResponse.ts
View file

@ -1,4 +1,4 @@
export interface AuthResponse { export interface AuthResponse {
token: string; token: string;
tokenType: string; tokenType: string;
} }

2
frontend/src/app/model/auth/LoginRequest.ts
View file

@ -1,4 +1,4 @@
export interface LoginRequest { export interface LoginRequest {
usernameOrEmail: string; usernameOrEmail: string;
password: string; password: string;
} }

2
frontend/src/app/model/auth/RegisterRequest.ts
View file

@ -2,4 +2,4 @@ export interface RegisterRequest {
email: string; email: string;
username: string; username: string;
password: string; password: string;
} }

63
frontend/src/app/service/auth.service.ts
View file

@ -17,79 +17,80 @@ const USER_KEY = 'auth-user';
export class AuthService { export class AuthService {
private authUrl = `${environment.apiUrl}/api/auth`; private authUrl = `${environment.apiUrl}/api/auth`;
private userUrl = `${environment.apiUrl}/api/users`; private userUrl = `${environment.apiUrl}/api/users`;
private currentUserSubject: BehaviorSubject<User | null>; private currentUserSubject: BehaviorSubject<User | null>;
public currentUser: Observable<User | null>; public currentUser: Observable<User | null>;
constructor(private http: HttpClient, private router: Router) { constructor(
private http: HttpClient,
private router: Router
) {
this.currentUserSubject = new BehaviorSubject<User | null>(this.getUserFromStorage()); this.currentUserSubject = new BehaviorSubject<User | null>(this.getUserFromStorage());
this.currentUser = this.currentUserSubject.asObservable(); this.currentUser = this.currentUserSubject.asObservable();
// Check if token exists and load user data // Check if token exists and load user data
if (this.getToken()) { if (this.getToken()) {
this.loadCurrentUser(); this.loadCurrentUser();
} }
} }
public get currentUserValue(): User | null { public get currentUserValue(): User | null {
return this.currentUserSubject.value; return this.currentUserSubject.value;
} }
login(loginRequest: LoginRequest): Observable<AuthResponse> { login(loginRequest: LoginRequest): Observable<AuthResponse> {
return this.http.post<AuthResponse>(`${this.authUrl}/login`, loginRequest) return this.http.post<AuthResponse>(`${this.authUrl}/login`, loginRequest).pipe(
.pipe( tap((response) => {
tap(response => { this.setToken(response.token);
this.setToken(response.token); this.loadCurrentUser();
this.loadCurrentUser(); })
}) );
);
} }
register(registerRequest: RegisterRequest): Observable<User> { register(registerRequest: RegisterRequest): Observable<User> {
return this.http.post<User>(`${this.authUrl}/register`, registerRequest); return this.http.post<User>(`${this.authUrl}/register`, registerRequest);
} }
logout(): void { logout(): void {
localStorage.removeItem(TOKEN_KEY); localStorage.removeItem(TOKEN_KEY);
localStorage.removeItem(USER_KEY); localStorage.removeItem(USER_KEY);
this.currentUserSubject.next(null); this.currentUserSubject.next(null);
this.router.navigate(['/']); this.router.navigate(['/']);
} }
isLoggedIn(): boolean { isLoggedIn(): boolean {
return !!this.getToken(); return !!this.getToken();
} }
getToken(): string | null { getToken(): string | null {
return localStorage.getItem(TOKEN_KEY); return localStorage.getItem(TOKEN_KEY);
} }
private setToken(token: string): void { private setToken(token: string): void {
localStorage.setItem(TOKEN_KEY, token); localStorage.setItem(TOKEN_KEY, token);
} }
private setUser(user: User): void { private setUser(user: User): void {
localStorage.setItem(USER_KEY, JSON.stringify(user)); localStorage.setItem(USER_KEY, JSON.stringify(user));
this.currentUserSubject.next(user); this.currentUserSubject.next(user);
} }
private getUserFromStorage(): User | null { private getUserFromStorage(): User | null {
const user = localStorage.getItem(USER_KEY); const user = localStorage.getItem(USER_KEY);
return user ? JSON.parse(user) : null; return user ? JSON.parse(user) : null;
} }
private loadCurrentUser(): void { private loadCurrentUser(): void {
this.http.get<User>(`${this.userUrl}/me`) this.http.get<User>(`${this.userUrl}/me`).subscribe({
.subscribe({ next: (user) => {
next: (user) => { this.setUser(user);
this.setUser(user); },
}, error: () => {
error: () => { this.logout();
this.logout(); },
} });
});
} }
getUser(): User | null { getUser(): User | null {
return this.currentUserValue; return this.currentUserValue;
} }

9
frontend/src/app/service/user.service.ts
View file

@ -42,13 +42,4 @@ export class UserService {
this.currentUserSubject.next(updatedUser); this.currentUserSubject.next(updatedUser);
} }
} }
public createUser(id: string, username: string): Observable<User> {
return this.http
.post<User>('/backend/user', {
authentikId: id,
username: username,
})
.pipe(tap((user) => this.currentUserSubject.next(user)));
}
} }

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

@ -13,7 +13,11 @@
<div class="hidden md:flex items-center space-x-4"> <div class="hidden md:flex items-center space-x-4">
@if (!isLoggedIn) { @if (!isLoggedIn) {
<a routerLink="/login" class="button-primary px-4 py-1.5">Anmelden</a> <a routerLink="/login" class="button-primary px-4 py-1.5">Anmelden</a>
<a routerLink="/register" class="bg-emerald-700 text-white hover:bg-emerald-600 px-4 py-1.5 rounded">Registrieren</a> <a
routerLink="/register"
class="bg-emerald-700 text-white hover:bg-emerald-600 px-4 py-1.5 rounded"
>Registrieren</a
>
} }
@if (isLoggedIn) { @if (isLoggedIn) {
<div <div
@ -67,8 +71,14 @@
<a routerLink="/games" class="nav-mobile-link">Spiele</a> <a routerLink="/games" class="nav-mobile-link">Spiele</a>
<div class="pt-2 space-y-2"> <div class="pt-2 space-y-2">
@if (!isLoggedIn) { @if (!isLoggedIn) {
<a routerLink="/login" class="button-primary w-full py-1.5 block text-center">Anmelden</a> <a routerLink="/login" class="button-primary w-full py-1.5 block text-center"
<a routerLink="/register" class="bg-emerald-700 text-white hover:bg-emerald-600 w-full py-1.5 rounded block text-center">Registrieren</a> >Anmelden</a
>
<a
routerLink="/register"
class="bg-emerald-700 text-white hover:bg-emerald-600 w-full py-1.5 rounded block text-center"
>Registrieren</a
>
} }
@if (isLoggedIn) { @if (isLoggedIn) {
<button (click)="logout()" class="button-primary w-full py-1.5">Abmelden</button> <button (click)="logout()" class="button-primary w-full py-1.5">Abmelden</button>

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

@ -31,7 +31,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
// Subscribe to auth changes // Subscribe to auth changes
this.authSubscription = this.authService.currentUser.subscribe(user => { this.authSubscription = this.authService.currentUser.subscribe((user) => {
this.isLoggedIn = !!user; this.isLoggedIn = !!user;
this.balance.set(user?.balance ?? 0); this.balance.set(user?.balance ?? 0);
console.log('Updated navbar balance:', user?.balance); console.log('Updated navbar balance:', user?.balance);

4
frontend/src/app/shared/interceptor/http.interceptor.ts
View file

@ -15,7 +15,7 @@ export const httpInterceptor: HttpInterceptorFn = (req, next) => {
'Referrer-Policy': 'no-referrer', 'Referrer-Policy': 'no-referrer',
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': '*' 'Access-Control-Allow-Headers': '*',
}, },
}) })
); );
@ -25,7 +25,7 @@ export const httpInterceptor: HttpInterceptorFn = (req, next) => {
setHeaders: { setHeaders: {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': '*' 'Access-Control-Allow-Headers': '*',
}, },
}) })
); );