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

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
@@ -18,6 +18,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialogModule } from '@angular/material/dialog';
+import { Subject, takeUntil } from 'rxjs';
 
 // Provider interfaces
 interface ProviderConfig {
@@ -69,7 +70,7 @@ interface EnvironmentConfig {
   templateUrl: './environment.component.html',
   styleUrls: ['./environment.component.scss']
 })
-export class EnvironmentComponent implements OnInit {
+export class EnvironmentComponent implements OnInit, OnDestroy {
   form: FormGroup;
   loading = false;
   saving = false;
@@ -120,6 +121,12 @@ export class EnvironmentComponent implements OnInit {
     { value: 'phone_call', name: 'Phone Call (Optimized for telephony)' }
   ];
   
+  // API key visibility tracking
+  showApiKeys: { [key: string]: boolean } = {};
+  
+  // Memory leak prevention
+  private destroyed$ = new Subject<void>();
+  
   constructor(
     private fb: FormBuilder,
     private apiService: ApiService,
@@ -160,6 +167,11 @@ export class EnvironmentComponent implements OnInit {
     this.loadEnvironment();
   }
 
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+
   // Safe getters for template
   get currentLLMProviderSafe(): ProviderConfig | null {
     return this.currentLLMProvider || null;
@@ -173,28 +185,55 @@ export class EnvironmentComponent implements OnInit {
     return this.currentSTTProvider || null;
   }
 
+  // API key masking methods
+  maskApiKey(key?: string): string {
+    if (!key) return '';
+    if (key.length <= 8) return '••••••••';
+    return key.substring(0, 4) + '••••' + key.substring(key.length - 4);
+  }
+
+  toggleApiKeyVisibility(fieldName: string): void {
+    this.showApiKeys[fieldName] = !this.showApiKeys[fieldName];
+  }
+
+  getApiKeyInputType(fieldName: string): string {
+    return this.showApiKeys[fieldName] ? 'text' : 'password';
+  }
+
+  formatApiKeyForDisplay(fieldName: string, value?: string): string {
+    if (this.showApiKeys[fieldName]) {
+      return value || '';
+    }
+    return this.maskApiKey(value);
+  }
+
   loadEnvironment(): void {
     this.loading = true;
     this.isLoading = true;
     
-    this.apiService.getEnvironment().subscribe({
-      next: (data: any) => {
-        // Check if it's new format or legacy
-        if (data.llm_provider) {
-          this.handleNewFormat(data);
-        } else {
-          this.handleLegacyFormat(data);
+    this.apiService.getEnvironment()
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe({
+        next: (data: any) => {
+          // Check if it's new format or legacy
+          if (data.llm_provider) {
+            this.handleNewFormat(data);
+          } else {
+            this.handleLegacyFormat(data);
+          }
+          this.loading = false;
+          this.isLoading = false;
+        },
+        error: (err) => {
+          console.error('Failed to load environment:', err);
+          this.snackBar.open('Failed to load environment configuration', 'Close', { 
+            duration: 3000,
+            panelClass: ['error-snackbar']
+          });
+          this.loading = false;
+          this.isLoading = false;
         }
-        this.loading = false;
-        this.isLoading = false;
-      },
-      error: (err) => {
-        console.error('Failed to load environment:', err);
-        this.snackBar.open('Failed to load environment configuration', 'Close', { duration: 3000 });
-        this.loading = false;
-        this.isLoading = false;
-      }
-    });
+      });
   }
 
   handleNewFormat(data: EnvironmentConfig): void {
@@ -481,8 +520,11 @@ export class EnvironmentComponent implements OnInit {
   }
 
   saveEnvironment(): void {
-    if (this.form.invalid) {
-      this.snackBar.open('Please fix validation errors', 'Close', { duration: 3000 });
+    if (this.form.invalid || this.saving) {
+      this.snackBar.open('Please fix validation errors', 'Close', { 
+        duration: 3000,
+        panelClass: ['error-snackbar']
+      });
       return;
     }
 
@@ -513,17 +555,47 @@ export class EnvironmentComponent implements OnInit {
       }
     };
 
-    this.apiService.updateEnvironment(saveData as any).subscribe({
-      next: () => {
-        this.snackBar.open('Environment configuration saved successfully', 'Close', { duration: 3000 });
-        this.saving = false;
-      },
-      error: (err) => {
-        console.error('Failed to save environment:', err);
-        this.snackBar.open('Failed to save environment configuration', 'Close', { duration: 3000 });
-        this.saving = false;
-      }
-    });
+    this.apiService.updateEnvironment(saveData as any)
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe({
+        next: () => {
+          this.saving = false;
+          this.snackBar.open('Environment configuration saved successfully', 'Close', { 
+            duration: 3000,
+            panelClass: ['success-snackbar']
+          });
+          
+          // Update environment service
+          this.environmentService.updateEnvironment(saveData as any);
+          
+          // Clear form dirty state
+          this.form.markAsPristine();
+        },
+        error: (error) => {
+          this.saving = false;
+          
+          // Race condition handling
+          if (error.status === 409) {
+            const details = error.error?.details || {};
+            this.snackBar.open(
+              `Settings were modified by ${details.last_update_user || 'another user'}. Please reload.`,
+              'Reload',
+              { duration: 0 }
+            ).onAction().subscribe(() => {
+              this.loadEnvironment();
+            });
+          } else {
+            this.snackBar.open(
+              error.error?.detail || 'Failed to save environment configuration',
+              'Close',
+              { 
+                duration: 5000, 
+                panelClass: ['error-snackbar'] 
+              }
+            );
+          }
+        }
+      });
   }
 
   // Icon helpers