POC

TODO:
* encrypt key information with symm key
* store symm key with server next to api key
* Add toggle for enc access yes/no
* build out storing multiple API keys
* Add quick copy button to api key field
* See about a more user-friendly api key encoding

src/app/modules/vault-filter/vault-filter.component.ts

@@ -25,7 +25,7 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
   }
 
   searchTextChanged() {
-    this.onSearchTextChanged.emit(this.searchText);
+    this.onSearchTextChanged.emit(this.searchText.normalize("NFD").replace(/[\u0300-\u036f]/g, ""));
   }
 
   async initCollections() {

src/app/settings/api-key.component.html

@@ -35,6 +35,10 @@
           icon="bwi bwi-key"
           *ngIf="clientSecret"
         >
+          <p class="mb-1">
+            <strong>combined:</strong>
+            <code>{{ combinedApiKey }}</code>
+          </p>
           <p class="mb-1">
             <strong>client_id:</strong><br />
             <code>{{ clientId }}</code>

src/app/settings/api-key.component.ts

@@ -1,7 +1,9 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { LogService } from "jslib-common/abstractions/log.service";
 import { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
+import { Utils } from "jslib-common/misc/utils";
 import { SecretVerificationRequest } from "jslib-common/models/request/secretVerificationRequest";
 import { ApiKeyResponse } from "jslib-common/models/response/apiKeyResponse";
 import { Verification } from "jslib-common/types/verification";
@@ -10,7 +12,7 @@ import { Verification } from "jslib-common/types/verification";
   selector: "app-api-key",
   templateUrl: "api-key.component.html",
 })
-export class ApiKeyComponent {
+export class ApiKeyComponent implements OnInit {
   keyType: string;
   isRotation: boolean;
   postKey: (entityId: string, request: SecretVerificationRequest) => Promise<ApiKeyResponse>;
@@ -25,12 +27,20 @@ export class ApiKeyComponent {
   formPromise: Promise<ApiKeyResponse>;
   clientId: string;
   clientSecret: string;
+  clientKey: string;
+  clientLocalKeyHash: string;
 
   constructor(
+    private cryptoService: CryptoService,
     private userVerificationService: UserVerificationService,
     private logService: LogService
   ) {}
 
+  async ngOnInit(): Promise<void> {
+    this.clientKey = Utils.fromBufferToB64((await this.cryptoService.getKey()).key);
+    this.clientLocalKeyHash = await this.cryptoService.getKeyHash();
+  }
+
   async submit() {
     try {
       this.formPromise = this.userVerificationService
@@ -43,4 +53,17 @@ export class ApiKeyComponent {
       this.logService.error(e);
     }
   }
+
+  get combinedApiKey() {
+    return Utils.fromUtf8ToB64(
+      JSON.stringify({
+        clientId: this.clientId,
+        clientSecret: this.clientSecret,
+        encClientEncInfo: JSON.stringify({
+          clientEncKey: this.clientKey,
+          clientLocalKeyHash: this.clientLocalKeyHash,
+        }),
+      })
+    );
+  }
 }

src/app/settings/billing-sync-key.component.ts

@@ -3,7 +3,6 @@ import { Component } from "@angular/core";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { LogService } from "jslib-common/abstractions/log.service";
 import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
-import { Utils } from "jslib-common/misc/utils";
 import { BillingSyncConfigApi } from "jslib-common/models/api/billingSyncConfigApi";
 import { BillingSyncConfigRequest } from "jslib-common/models/request/billingSyncConfigRequest";
 import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";