104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
|
import { Component, inject } from '@angular/core';
|
||
|
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { FormsModule } from '@angular/forms';
|
||
|
|
import { Router } from '@angular/router';
|
||
|
|
import { AuthService } from '../../core/services/auth.service';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-login',
|
||
|
|
standalone: true,
|
||
|
|
imports: [CommonModule, FormsModule],
|
||
|
|
template: `
|
||
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||
|
|
<div class="max-w-md w-full space-y-8">
|
||
|
|
<div>
|
||
|
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||
|
|
Onebox
|
||
|
|
</h2>
|
||
|
|
<p class="mt-2 text-center text-sm text-gray-600">
|
||
|
|
Sign in to your account
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<form class="mt-8 space-y-6" (ngSubmit)="onSubmit()">
|
||
|
|
<div class="rounded-md shadow-sm -space-y-px">
|
||
|
|
<div>
|
||
|
|
<label for="username" class="sr-only">Username</label>
|
||
|
|
<input
|
||
|
|
id="username"
|
||
|
|
name="username"
|
||
|
|
type="text"
|
||
|
|
[(ngModel)]="username"
|
||
|
|
required
|
||
|
|
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
|
||
|
|
placeholder="Username"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="password" class="sr-only">Password</label>
|
||
|
|
<input
|
||
|
|
id="password"
|
||
|
|
name="password"
|
||
|
|
type="password"
|
||
|
|
[(ngModel)]="password"
|
||
|
|
required
|
||
|
|
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
|
||
|
|
placeholder="Password"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@if (error) {
|
||
|
|
<div class="rounded-md bg-red-50 p-4">
|
||
|
|
<p class="text-sm text-red-800">{{ error }}</p>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
[disabled]="loading"
|
||
|
|
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{{ loading ? 'Signing in...' : 'Sign in' }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-sm text-gray-600 text-center">
|
||
|
|
<p>Default credentials: admin / admin</p>
|
||
|
|
<p class="text-xs text-gray-500 mt-1">Please change after first login</p>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
})
|
||
|
|
export class LoginComponent {
|
||
|
|
private authService = inject(AuthService);
|
||
|
|
private router = inject(Router);
|
||
|
|
|
||
|
|
username = '';
|
||
|
|
password = '';
|
||
|
|
loading = false;
|
||
|
|
error = '';
|
||
|
|
|
||
|
|
onSubmit(): void {
|
||
|
|
this.error = '';
|
||
|
|
this.loading = true;
|
||
|
|
|
||
|
|
this.authService.login({ username: this.username, password: this.password }).subscribe({
|
||
|
|
next: (response) => {
|
||
|
|
this.loading = false;
|
||
|
|
if (response.success) {
|
||
|
|
this.router.navigate(['/dashboard']);
|
||
|
|
} else {
|
||
|
|
this.error = response.error || 'Login failed';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: (err) => {
|
||
|
|
this.loading = false;
|
||
|
|
this.error = err.error?.error || 'An error occurred during login';
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|