add support for API keys including generation and revokation

client/src/app/forms/components/form-errors-alert/form-errors-alert.component.ts

@@ -4,6 +4,7 @@ import { Component, Input, OnInit } from '@angular/core'
   selector: 'cvc-form-errors-alert',
   templateUrl: './form-errors-alert.component.html',
   styleUrls: ['./form-errors-alert.component.less'],
+  standalone: false,
 })
 export class CvcFormErrorsAlertComponent implements OnInit {
   @Input() errors!: any

client/src/app/forms/components/user-api-keys/user-api-keys.form.html

@@ -0,0 +1,85 @@
+<nz-spin [nzSpinning]="this.loading">
+  <nz-space nzDirection="vertical">
+    <div *nzSpaceItem>
+      <nz-alert
+        *ngIf="this.success"
+        nzBanner
+        [nzMessage]="this.successMessage"
+        nzType="success"
+        nzCloseable></nz-alert>
+      <nz-form-item *ngIf="this.errorMessages.length > 0">
+        <cvc-form-errors-alert [errors]="this.errorMessages">
+        </cvc-form-errors-alert>
+      </nz-form-item>
+    </div>
+    @if(newApiKey(); as key) {
+    <nz-card *nzSpaceItem>
+      <ul nz-list>
+        <li nz-list-item>
+          {{ key.token }}
+          <span
+            nz-typography
+            nzType="secondary"
+            >{{ key.createdAt | date }}</span
+          >
+          <ul nz-list-item-actions>
+            <nz-list-item-action>
+              <button
+                (click)="copyKey(key.token)"
+                nz-button
+                nz-tooltip
+                nzTooltipTitle="Copy Key"
+                nzType="default"
+                nzSize="small">
+                <span
+                  nz-icon
+                  nzTheme="fill"
+                  nzType="copy"></span>
+              </button>
+            </nz-list-item-action>
+          </ul>
+        </li>
+      </ul>
+    </nz-card>
+    }
+    <nz-card *nzSpaceItem>
+      <ul nz-list>
+        @for(key of apiKeys(); track key) {
+        <li nz-list-item>
+          {{ key.reminder }}
+          <span
+            nz-typography
+            nzType="secondary"
+            >{{ key.createdAt | date }}</span
+          >
+          <ul nz-list-item-actions>
+            <nz-list-item-action>
+              <button
+                (click)="revokeKey(key.id)"
+                nz-button
+                nz-tooltip
+                nzTooltipTitle="Revoke Key"
+                nzType="default"
+                nzDanger
+                nzSize="small">
+                <span
+                  nz-icon
+                  nzType="delete"></span>
+              </button>
+            </nz-list-item-action>
+          </ul>
+        </li>
+        }
+      </ul>
+    </nz-card>
+    <button
+      style="float: right"
+      *nzSpaceItem
+      (click)="generateKey()"
+      nz-button
+      nz-tooltip
+      nzType="primary">
+      Generate New API Key
+    </button>
+  </nz-space>
+</nz-spin>

client/src/app/forms/components/user-api-keys/user-api-keys.form.less

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+nz-space {
+  width: 100%;
+}
+
+nz-form-item:last-of-type {
+  margin-bottom: 0;
+}

client/src/app/forms/components/user-api-keys/user-api-keys.form.ts

@@ -0,0 +1,171 @@
+import { Component, OnDestroy, signal, WritableSignal } from '@angular/core'
+import { NetworkErrorsService } from '@app/core/services/network-errors.service'
+import {
+  MutationState,
+  MutatorWithState,
+} from '@app/core/utilities/mutation-state-wrapper'
+import {
+  ApiKey,
+  ApiKeysGQL,
+  GenerateApiKeyGQL,
+  GenerateApiKeyInput,
+  GenerateApiKeyMutation,
+  GenerateApiKeyMutationVariables,
+  Maybe,
+  RevokeApiKeyGQL,
+  RevokeApiKeyInput,
+  RevokeApiKeyMutation,
+  RevokeApiKeyMutationVariables,
+} from '@app/generated/civic.apollo'
+import { CommonModule } from '@angular/common'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NzCardModule } from 'ng-zorro-antd/card'
+import { NzAlertModule } from 'ng-zorro-antd/alert'
+import { NzFormModule } from 'ng-zorro-antd/form'
+import { CvcFormErrorsAlertModule } from '@app/forms/components/form-errors-alert/form-errors-alert.module'
+import { NzRadioModule } from 'ng-zorro-antd/radio'
+import { NzSpinModule } from 'ng-zorro-antd/spin'
+import { NzButtonModule } from 'ng-zorro-antd/button'
+
+import { Subject } from 'rxjs'
+import { filter, takeUntil } from 'rxjs/operators'
+import { NzListModule } from 'ng-zorro-antd/list'
+import { NzTypographyModule } from 'ng-zorro-antd/typography'
+import { NzIconModule } from 'ng-zorro-antd/icon'
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
+import { isNonNulled } from 'rxjs-etc'
+import { NzSpaceModule } from 'ng-zorro-antd/space'
+import { NzMessageModule, NzMessageService } from 'ng-zorro-antd/message'
+
+@Component({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NzFormModule,
+    ReactiveFormsModule,
+    NzCardModule,
+    NzAlertModule,
+    NzRadioModule,
+    NzButtonModule,
+    NzSpinModule,
+    NzListModule,
+    NzTypographyModule,
+    NzIconModule,
+    NzToolTipModule,
+    NzSpaceModule,
+    NzMessageModule,
+    CvcFormErrorsAlertModule,
+  ],
+  standalone: true,
+  selector: 'cvc-user-api-keys-form',
+  templateUrl: './user-api-keys.form.html',
+  styleUrls: ['./user-api-keys.form.less'],
+})
+export class CvcUserApiKeysForm implements OnDestroy {
+  success: boolean = false
+  errorMessages: string[] = []
+  successMessage: string = ''
+  loading: boolean = false
+
+  private destroy$ = new Subject<void>()
+
+  apiKeys: WritableSignal<ApiKey[]> = signal([])
+  newApiKey: WritableSignal<Maybe<ApiKey>> = signal(undefined)
+
+  revokeApiKeyMutator: MutatorWithState<
+    RevokeApiKeyGQL,
+    RevokeApiKeyMutation,
+    RevokeApiKeyMutationVariables
+  >
+
+  generateApiKeyMutator: MutatorWithState<
+    GenerateApiKeyGQL,
+    GenerateApiKeyMutation,
+    GenerateApiKeyMutationVariables
+  >
+
+  constructor(
+    private generateApiKeyGql: GenerateApiKeyGQL,
+    private revokeApiKeyGql: RevokeApiKeyGQL,
+    private apiKeysGql: ApiKeysGQL,
+    private message: NzMessageService,
+    networkErrorService: NetworkErrorsService
+  ) {
+    this.generateApiKeyMutator = new MutatorWithState(networkErrorService)
+    this.revokeApiKeyMutator = new MutatorWithState(networkErrorService)
+    apiKeysGql
+      .watch()
+      .valueChanges.pipe(filter(isNonNulled), takeUntil(this.destroy$))
+      .subscribe(({ data }) => {
+        if (data?.viewer?.apiKeys) {
+          this.apiKeys.set(data.viewer.apiKeys)
+        }
+      })
+  }
+
+  revokeKey(id: number) {
+    let input: RevokeApiKeyInput = {
+      id: id,
+    }
+
+    let state = this.revokeApiKeyMutator.mutate(
+      this.revokeApiKeyGql,
+      { input: input },
+      { refetchQueries: [{ query: this.apiKeysGql.document }] }
+    )
+    this.manageState(state, 'API Key Revoked Successfully')
+  }
+
+  generateKey() {
+    let input: GenerateApiKeyInput = {}
+
+    let state = this.generateApiKeyMutator.mutate(
+      this.generateApiKeyGql,
+      { input: input },
+      {},
+      (data) => {
+        this.newApiKey.set(data.generateApiKey?.apiKey)
+      }
+    )
+
+    this.manageState(
+      state,
+      'API Key Created. Store It Somewhere Safe, You Will Not Be Able To See It Again'
+    )
+  }
+
+  copyKey(key?: string) {
+    if (key) {
+      navigator.clipboard.writeText(key)
+      this.message.info('Copied')
+    }
+  }
+
+  manageState(state: MutationState, message: string) {
+    this.errorMessages = []
+
+    state.submitSuccess$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
+      if (res) {
+        this.success = true
+        this.successMessage = message
+      }
+    })
+
+    state.submitError$.pipe(takeUntil(this.destroy$)).subscribe((errs) => {
+      if (errs) {
+        this.errorMessages = errs
+        this.success = false
+        this.successMessage = ''
+      }
+    })
+
+    state.isSubmitting$.pipe(takeUntil(this.destroy$)).subscribe((loading) => {
+      this.loading = loading
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next()
+    this.destroy$.complete()
+  }
+}

client/src/app/forms/components/user-api-keys/user-api-keys.mutation.gql

@@ -0,0 +1,28 @@
+mutation GenerateApiKey($input: GenerateApiKeyInput!) {
+  generateApiKey(input: $input) {
+    apiKey {
+      id
+      reminder
+      createdAt
+      token
+    }
+  }
+}
+
+mutation RevokeApiKey($input: RevokeApiKeyInput!) {
+  revokeApiKey(input: $input) {
+    success
+  }
+}
+
+query ApiKeys {
+  viewer {
+    apiKeys {
+      id
+      reminder
+      createdAt
+      token
+    }
+  }
+}
+