style: format code and improve readability
This commit is contained in:
parent
35d8fbaea0
commit
51540c930b
12 changed files with 143 additions and 94 deletions
|
@ -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.';
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue