make apikeys editor better

frontend/src/app/routes/settings/apikeys/apikey-editor/apikey-editor.component.html

@@ -0,0 +1,5 @@
+<mat-form-field class="editfield" appearance="outline">
+  <mat-label>Name</mat-label>
+  <input matInput [formControl]="field" (change)="update($event)">
+  <mat-error *ngIf="field.invalid">{{getErrorMessage()}}</mat-error>
+</mat-form-field>

frontend/src/app/routes/settings/apikeys/apikey-editor/apikey-editor.component.scss

@@ -0,0 +1,6 @@
+.editfield {
+  margin-top: 1rem;
+  width: 100%;
+  margin-right: 1rem;
+  padding-right: 1rem;
+}

frontend/src/app/routes/settings/apikeys/apikey-editor/apikey-editor.component.ts

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { Logger } from 'src/app/services/logger/logger.service';
+
+@Component({
+  selector: 'app-settings-apikey-editor',
+  templateUrl: './apikey-editor.component.html',
+  styleUrls: ['./apikey-editor.component.scss'],
+})
+export class SettingsApiKeyEditorComponent {
+  private readonly logger = new Logger(SettingsApiKeyEditorComponent.name);
+
+  @Input() set value(value: string) {
+    this.field.setValue(value);
+  }
+
+  @Output('changed') change = new EventEmitter<string>();
+
+  field = new FormControl('', [
+    Validators.required,
+    Validators.minLength(3),
+    Validators.maxLength(255),
+  ]);
+
+  async update(event: Event) {
+    if (this.field.invalid) {
+      return;
+    }
+
+    const value = this.field.value;
+    if (value === null) return;
+
+    this.change.emit(value);
+  }
+
+  getErrorMessage() {
+    if (this.field.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    if (this.field.hasError('minlength')) {
+      return 'Minimum length is 3';
+    }
+
+    if (this.field.hasError('maxlength')) {
+      return 'Maximum length is 255';
+    }
+
+    return 'Unknown error';
+  }
+}

frontend/src/app/routes/settings/apikeys/settings-apikeys.component.html

@@ -4,10 +4,10 @@
   <ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
     <mat-cell *matCellDef="let apikey">
-      <mat-form-field class="editfield" appearance="outline">
-        <mat-label>Name</mat-label>
-        <input matInput [value]="apikey.name" maxlength="255" (change)="updateKeyName($event, apikey.id)">
-      </mat-form-field>
+      <app-settings-apikey-editor
+        [value]="apikey.name"
+        (changed)="updateKeyName($event, apikey.id)"
+      ></app-settings-apikey-editor>
     </mat-cell>
   </ng-container>
 

frontend/src/app/routes/settings/apikeys/settings-apikeys.component.scss

@@ -18,10 +18,3 @@ mat-table {
 .icon-red {
   color: #f44336;
 }
-
-.editfield {
-  margin-top: 1rem;
-  width: 100%;
-  margin-right: 1rem;
-  padding-right: 1rem;
-}

frontend/src/app/routes/settings/apikeys/settings-apikeys.component.ts

@@ -135,17 +135,7 @@ export class SettingsApiKeysComponent implements OnInit {
     }
   }
 
-  async updateKeyName(event: Event, apikeyID: string) {
-    const name = (event.target as HTMLInputElement).value;
-
-    if (name.length < 3) {
-      this.utilService.showSnackBar(
-        'Name must be at least 3 characters long',
-        SnackBarType.Warning,
-      );
-      return;
-    }
-
+  async updateKeyName(name: string, apikeyID: string) {
     const result = await this.apikeysService.updateApiKey(apikeyID, name);
 
     if (HasFailed(result)) {

frontend/src/app/routes/settings/apikeys/settings-apikeys.module.ts

@@ -1,19 +1,20 @@
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import { MomentModule } from 'ngx-moment';
 import { FabModule } from 'src/app/components/fab/fab.module';
+import { SettingsApiKeyEditorComponent } from './apikey-editor/apikey-editor.component';
 import { SettingsApiKeysComponent } from './settings-apikeys.component';
 import { SettingsApiKeysRoutingModule } from './settings-apikeys.routing.module';
 
 @NgModule({
-  declarations: [SettingsApiKeysComponent],
+  declarations: [SettingsApiKeysComponent, SettingsApiKeyEditorComponent],
   imports: [
     CommonModule,
     SettingsApiKeysRoutingModule,
@@ -22,9 +23,9 @@ import { SettingsApiKeysRoutingModule } from './settings-apikeys.routing.module'
     MatTableModule,
     MatPaginatorModule,
     MatInputModule,
-    MatChipsModule,
     MomentModule,
     ClipboardModule,
+    ReactiveFormsModule,
     FabModule,
   ],
 })