Update flare-ui/src/app/components/login/login.component.ts

flare-ui/src/app/components/login/login.component.ts

@@ -1,115 +1,128 @@
-import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
-import { AuthService } from '../../services/auth.service';
-
-@Component({
-  selector: 'app-login',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  template: `
-    <div class="login-container">
-      <div class="login-card">
-        <h1>Flare Administration</h1>
-        <form (ngSubmit)="login()" #loginForm="ngForm">
-          <div class="form-group">
-            <label for="username">Username</label>
-            <input
-              type="text"
-              id="username"
-              name="username"
-              [(ngModel)]="username"
-              required
-              [disabled]="loading"
-            >
-          </div>
-          <div class="form-group">
-            <label for="password">Password</label>
-            <input
-              type="password"
-              id="password"
-              name="password"
-              [(ngModel)]="password"
-              required
-              [disabled]="loading"
-            >
-          </div>
-          @if (error) {
-            <div class="alert alert-danger">{{ error }}</div>
-          }
-          <button
-            type="submit"
-            class="btn btn-primary w-100"
-            [disabled]="loading || !loginForm.valid"
-          >
-            @if (loading) {
-              <span class="spinner"></span> Logging in...
-            } @else {
-              Login
-            }
-          </button>
-        </form>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .login-container {
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: #f5f5f5;
-    }
-
-    .login-card {
-      background: white;
-      padding: 2rem;
-      border-radius: 8px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-      width: 100%;
-      max-width: 400px;
-
-      h1 {
-        text-align: center;
-        margin-bottom: 2rem;
-        color: #333;
-        font-size: 1.5rem;
-      }
-    }
-
-    .w-100 {
-      width: 100%;
-    }
-
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-    }
-  `]
-})
-export class LoginComponent {
-  private authService = inject(AuthService);
-  private router = inject(Router);
-
-  username = '';
-  password = '';
-  loading = false;
-  error = '';
-
-  async login() {
-    this.loading = true;
-    this.error = '';
-
-    try {
-      await this.authService.login(this.username, this.password).toPromise();
-      this.router.navigate(['/']);
-    } catch (err: any) {
-      this.error = err.error?.detail || 'Invalid credentials';
-    } finally {
-      this.loading = false;
-    }
-  }
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    CommonModule, 
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatProgressSpinnerModule
+  ],
+  template: `
+    <div class="login-container">
+      <div class="login-card">
+        <h1>Flare Administration</h1>
+        <form (ngSubmit)="login()" #loginForm="ngForm">
+          <div class="form-group">
+            <label for="username">Username</label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              [(ngModel)]="username"
+              required
+              [disabled]="loading"
+            >
+          </div>
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              [(ngModel)]="password"
+              required
+              [disabled]="loading"
+            >
+          </div>
+          @if (error) {
+            <div class="alert alert-danger">{{ error }}</div>
+          }
+          <button
+            type="submit"
+            class="btn btn-primary w-100"
+            [disabled]="loading || !loginForm.valid"
+          >
+            @if (loading) {
+              <span class="spinner"></span> Logging in...
+            } @else {
+              Login
+            }
+          </button>
+        </form>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .login-container {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #f5f5f5;
+    }
+
+    .login-card {
+      background: white;
+      padding: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      width: 100%;
+      max-width: 400px;
+
+      h1 {
+        text-align: center;
+        margin-bottom: 2rem;
+        color: #333;
+        font-size: 1.5rem;
+      }
+    }
+
+    .w-100 {
+      width: 100%;
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+  `]
+})
+export class LoginComponent {
+  private authService = inject(AuthService);
+  private router = inject(Router);
+
+  username = '';
+  password = '';
+  loading = false;
+  error = '';
+
+  async login() {
+    this.loading = true;
+    this.error = '';
+
+    try {
+      await this.authService.login(this.username, this.password).toPromise();
+      this.router.navigate(['/']);
+    } catch (err: any) {
+      this.error = err.error?.detail || 'Invalid credentials';
+    } finally {
+      this.loading = false;
+    }
+  }
 }