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

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

@@ -7,6 +7,7 @@ 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 { MatIconModule } from '@angular/material/icon';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
@@ -19,51 +20,75 @@ import { AuthService } from '../../services/auth.service';
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    MatIconModule
   ],
   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
+      <mat-card class="login-card">
+        <mat-card-header>
+          <mat-card-title>Flare Administration</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <form (ngSubmit)="login()" #loginForm="ngForm">
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Username</mat-label>
+              <input
+                matInput
+                type="text"
+                name="username"
+                [(ngModel)]="username"
+                required
+                [disabled]="loading"
+                autocomplete="username"
+              >
+              <mat-icon matPrefix>person</mat-icon>
+              <mat-error>Username is required</mat-error>
+            </mat-form-field>
+            
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Password</mat-label>
+              <input
+                matInput
+                [type]="hidePassword ? 'password' : 'text'"
+                name="password"
+                [(ngModel)]="password"
+                required
+                [disabled]="loading"
+                autocomplete="current-password"
+              >
+              <mat-icon matPrefix>lock</mat-icon>
+              <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" type="button">
+                <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+              </button>
+              <mat-error>Password is required</mat-error>
+            </mat-form-field>
+            
+            @if (error) {
+              <div class="error-message">
+                <mat-icon>error</mat-icon>
+                {{ error }}
+              </div>
             }
-          </button>
-        </form>
-      </div>
+            
+            <button
+              mat-raised-button
+              color="primary"
+              type="submit"
+              class="full-width submit-button"
+              [disabled]="loading || !loginForm.valid"
+            >
+              @if (loading) {
+                <mat-spinner diameter="20" class="button-spinner"></mat-spinner>
+                Logging in...
+              } @else {
+                <mat-icon>login</mat-icon>
+                Login
+              }
+            </button>
+          </form>
+        </mat-card-content>
+      </mat-card>
     </div>
   `,
   styles: [`
@@ -72,34 +97,89 @@ import { AuthService } from '../../services/auth.service';
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: #f5f5f5;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     }
 
     .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;
+      padding: 20px;
+      
+      mat-card-header {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 30px;
+        
+        mat-card-title {
+          font-size: 24px;
+          font-weight: 500;
+          color: #333;
+        }
       }
     }
 
-    .w-100 {
+    .full-width {
       width: 100%;
     }
 
-    button {
+    mat-form-field {
+      margin-bottom: 20px;
+    }
+
+    .error-message {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #f44336;
+      font-size: 14px;
+      margin-bottom: 20px;
+      padding: 12px;
+      background-color: #ffebee;
+      border-radius: 4px;
+      
+      mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .submit-button {
+      height: 48px;
+      font-size: 16px;
+      margin-top: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 0.5rem;
+      gap: 8px;
+      
+      mat-icon {
+        margin-right: 4px;
+      }
+    }
+
+    .button-spinner {
+      display: inline-block;
+      margin-right: 8px;
+    }
+
+    ::ng-deep {
+      .mat-mdc-card {
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16) !important;
+      }
+      
+      .mat-mdc-form-field-icon-prefix,
+      .mat-mdc-form-field-icon-suffix {
+        padding: 0 4px;
+      }
+      
+      .mat-mdc-progress-spinner {
+        --mdc-circular-progress-active-indicator-color: white;
+      }
+      
+      .mat-mdc-form-field-error {
+        font-size: 12px;
+      }
     }
   `]
 })
@@ -111,6 +191,7 @@ export class LoginComponent {
   password = '';
   loading = false;
   error = '';
+  hidePassword = true;
 
   async login() {
     this.loading = true;