style: format code and improve readability

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

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.';
}
},
});
}
}

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.';
}
},
});
}
}