update

ui/src/app/features/login/login.component.ts

@@ -0,0 +1,103 @@
+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';
+      },
+    });
+  }
+}