From 51540c930b4ef90840185682bdbec9d2fd3d5046 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 7 May 2025 13:42:41 +0200 Subject: [PATCH] style: format code and improve readability --- frontend/src/app/app.routes.ts | 6 +- .../app/feature/auth/login/login.component.ts | 41 +++++++--- .../auth/register/register.component.ts | 80 ++++++++++++------- .../feature/landing/landing.component.html | 10 ++- frontend/src/app/model/auth/AuthResponse.ts | 2 +- frontend/src/app/model/auth/LoginRequest.ts | 2 +- .../src/app/model/auth/RegisterRequest.ts | 2 +- frontend/src/app/service/auth.service.ts | 63 ++++++++------- frontend/src/app/service/user.service.ts | 9 --- .../components/navbar/navbar.component.html | 16 +++- .../components/navbar/navbar.component.ts | 2 +- .../shared/interceptor/http.interceptor.ts | 4 +- 12 files changed, 143 insertions(+), 94 deletions(-) diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 8874f98..7958ffb 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -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', diff --git a/frontend/src/app/feature/auth/login/login.component.ts b/frontend/src/app/feature/auth/login/login.component.ts index 694d91d..1e63b7f 100644 --- a/frontend/src/app/feature/auth/login/login.component.ts +++ b/frontend/src/app/feature/auth/login/login.component.ts @@ -20,16 +20,24 @@ import { CommonModule } from '@angular/common';
- + + placeholder="Enter your username or email" + /> -
- Username or email is required +
+ Username or email is required
@@ -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" + /> -
+
Password is required
@@ -51,7 +63,8 @@ import { CommonModule } from '@angular/common';
@@ -60,12 +73,14 @@ import { CommonModule } from '@angular/common';

Don't have an account? - Register + Register

- ` + `, }) 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.'; - } + }, }); } } diff --git a/frontend/src/app/feature/auth/register/register.component.ts b/frontend/src/app/feature/auth/register/register.component.ts index b997f04..5b3f4d1 100644 --- a/frontend/src/app/feature/auth/register/register.component.ts +++ b/frontend/src/app/feature/auth/register/register.component.ts @@ -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" + /> -
+
Email is required - Please enter a valid email address + Please enter a valid email address
@@ -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" + /> -
+
Username is required - Username must be at least 3 characters + Username must be at least 3 characters
@@ -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" + /> -
+
Password is required - Password must be at least 6 characters + Password must be at least 6 characters
@@ -68,7 +86,8 @@ import { CommonModule } from '@angular/common'; @@ -77,12 +96,14 @@ import { CommonModule } from '@angular/common';

Already have an account? - Login + Login

- ` + `, }) 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.'; - } + }, }); } } diff --git a/frontend/src/app/feature/landing/landing.component.html b/frontend/src/app/feature/landing/landing.component.html index 379fa31..b0c1ccf 100644 --- a/frontend/src/app/feature/landing/landing.component.html +++ b/frontend/src/app/feature/landing/landing.component.html @@ -11,10 +11,16 @@

+ 200 Freispiele

- + Konto erstellen - + Anmelden
diff --git a/frontend/src/app/model/auth/AuthResponse.ts b/frontend/src/app/model/auth/AuthResponse.ts index bd8c3f5..495d0cd 100644 --- a/frontend/src/app/model/auth/AuthResponse.ts +++ b/frontend/src/app/model/auth/AuthResponse.ts @@ -1,4 +1,4 @@ export interface AuthResponse { token: string; tokenType: string; -} \ No newline at end of file +} diff --git a/frontend/src/app/model/auth/LoginRequest.ts b/frontend/src/app/model/auth/LoginRequest.ts index c940095..98c1b0e 100644 --- a/frontend/src/app/model/auth/LoginRequest.ts +++ b/frontend/src/app/model/auth/LoginRequest.ts @@ -1,4 +1,4 @@ export interface LoginRequest { usernameOrEmail: string; password: string; -} \ No newline at end of file +} diff --git a/frontend/src/app/model/auth/RegisterRequest.ts b/frontend/src/app/model/auth/RegisterRequest.ts index c3cd340..2b07d41 100644 --- a/frontend/src/app/model/auth/RegisterRequest.ts +++ b/frontend/src/app/model/auth/RegisterRequest.ts @@ -2,4 +2,4 @@ export interface RegisterRequest { email: string; username: string; password: string; -} \ No newline at end of file +} diff --git a/frontend/src/app/service/auth.service.ts b/frontend/src/app/service/auth.service.ts index fa74844..6cd41a7 100644 --- a/frontend/src/app/service/auth.service.ts +++ b/frontend/src/app/service/auth.service.ts @@ -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; public currentUser: Observable; - - constructor(private http: HttpClient, private router: Router) { + + constructor( + private http: HttpClient, + private router: Router + ) { this.currentUserSubject = new BehaviorSubject(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 { - return this.http.post(`${this.authUrl}/login`, loginRequest) - .pipe( - tap(response => { - this.setToken(response.token); - this.loadCurrentUser(); - }) - ); + return this.http.post(`${this.authUrl}/login`, loginRequest).pipe( + tap((response) => { + this.setToken(response.token); + this.loadCurrentUser(); + }) + ); } - + register(registerRequest: RegisterRequest): Observable { return this.http.post(`${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(`${this.userUrl}/me`) - .subscribe({ - next: (user) => { - this.setUser(user); - }, - error: () => { - this.logout(); - } - }); + this.http.get(`${this.userUrl}/me`).subscribe({ + next: (user) => { + this.setUser(user); + }, + error: () => { + this.logout(); + }, + }); } - + getUser(): User | null { return this.currentUserValue; } diff --git a/frontend/src/app/service/user.service.ts b/frontend/src/app/service/user.service.ts index b58861f..78fbb75 100644 --- a/frontend/src/app/service/user.service.ts +++ b/frontend/src/app/service/user.service.ts @@ -42,13 +42,4 @@ export class UserService { this.currentUserSubject.next(updatedUser); } } - - public createUser(id: string, username: string): Observable { - return this.http - .post('/backend/user', { - authentikId: id, - username: username, - }) - .pipe(tap((user) => this.currentUserSubject.next(user))); - } } diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index 110063c..90b63eb 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -13,7 +13,11 @@