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',
loadComponent: () => import('./feature/auth/login/login.component').then(m => m.LoginComponent),
loadComponent: () =>
import('./feature/auth/login/login.component').then((m) => m.LoginComponent),
},
{
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',

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">
<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
id="usernameOrEmail"
type="text"
formControlName="usernameOrEmail"
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">
<span *ngIf="form['usernameOrEmail'].errors?.['required']">Username or email is required</span>
<div
*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>
@ -40,9 +48,13 @@ import { CommonModule } from '@angular/common';
type="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"
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>
</div>
</div>
@ -51,7 +63,8 @@ import { CommonModule } from '@angular/common';
<button
type="submit"
[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' }}
</button>
</div>
@ -60,12 +73,14 @@ import { CommonModule } from '@angular/common';
<div class="mt-6 text-center">
<p class="text-sm text-gray-400">
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>
</div>
</div>
</div>
`
`,
})
export class LoginComponent {
loginForm: FormGroup;
@ -79,7 +94,7 @@ export class LoginComponent {
) {
this.loginForm = this.fb.group({
usernameOrEmail: ['', [Validators.required]],
password: ['', [Validators.required]]
password: ['', [Validators.required]],
});
}
@ -97,17 +112,17 @@ export class LoginComponent {
const loginRequest: LoginRequest = {
usernameOrEmail: this.form['usernameOrEmail'].value,
password: this.form['password'].value
password: this.form['password'].value,
};
this.authService.login(loginRequest).subscribe({
next: () => {
this.router.navigate(['/home']);
},
error: err => {
error: (err) => {
this.isLoading = false;
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"
formControlName="email"
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?.['email']">Please enter a valid email address</span>
<span *ngIf="form['email'].errors?.['email']"
>Please enter a valid email address</span
>
</div>
</div>
@ -41,11 +47,17 @@ import { CommonModule } from '@angular/common';
type="text"
formControlName="username"
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?.['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>
@ -56,11 +68,17 @@ import { CommonModule } from '@angular/common';
type="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"
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?.['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>
@ -68,7 +86,8 @@ import { CommonModule } from '@angular/common';
<button
type="submit"
[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' }}
</button>
</div>
@ -77,12 +96,14 @@ import { CommonModule } from '@angular/common';
<div class="mt-6 text-center">
<p class="text-sm text-gray-400">
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>
</div>
</div>
</div>
`
`,
})
export class RegisterComponent {
registerForm: FormGroup;
@ -97,7 +118,7 @@ export class RegisterComponent {
this.registerForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
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 = {
email: this.form['email'].value,
username: this.form['username'].value,
password: this.form['password'].value
password: this.form['password'].value,
};
this.authService.register(registerRequest).subscribe({
next: () => {
// After registration, log in the user
this.authService.login({
usernameOrEmail: registerRequest.email,
password: registerRequest.password
}).subscribe({
next: () => {
this.router.navigate(['/home']);
},
error: err => {
this.isLoading = false;
this.errorMessage = 'Registration successful but failed to login automatically. Please log in manually.';
}
});
this.authService
.login({
usernameOrEmail: registerRequest.email,
password: registerRequest.password,
})
.subscribe({
next: () => {
this.router.navigate(['/home']);
},
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.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>
<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
</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
</a>
</div>

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

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

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

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

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

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

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

@ -42,13 +42,4 @@ export class UserService {
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">
@if (!isLoggedIn) {
<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) {
<div
@ -67,8 +71,14 @@
<a routerLink="/games" class="nav-mobile-link">Spiele</a>
<div class="pt-2 space-y-2">
@if (!isLoggedIn) {
<a routerLink="/login" class="button-primary w-full py-1.5 block text-center">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>
<a routerLink="/login" class="button-primary w-full py-1.5 block text-center"
>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) {
<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() {
// Subscribe to auth changes
this.authSubscription = this.authService.currentUser.subscribe(user => {
this.authSubscription = this.authService.currentUser.subscribe((user) => {
this.isLoggedIn = !!user;
this.balance.set(user?.balance ?? 0);
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',
'Access-Control-Allow-Origin': '*',
'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: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': '*'
'Access-Control-Allow-Headers': '*',
},
})
);