fix(console): add model for api keys, fix toast, binding (#1757)

* fix: add model for api keys, fix toast, binding

* show api clientid

console/src/app/modules/show-key-dialog/show-key-dialog.component.html

@@ -4,7 +4,8 @@
     <ng-container *ngIf="keyResponse">
         <div class="row">
             <p class="left">{{'USER.MACHINE.ID' | translate}}</p>
-            <p class="right">{{keyResponse?.keyId}}</p>
+            <p class="right">{{$any(keyResponse)?.id}}</p>
+            <p class="right">{{$any(keyResponse)?.keyId}}</p>
         </div>
 
         <div class="row">

console/src/app/modules/show-key-dialog/show-key-dialog.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { saveAs } from 'file-saver';
-import { AddMachineKeyResponse } from 'src/app/proto/generated/zitadel/management_pb';
+import { AddAppKeyResponse, AddMachineKeyResponse } from 'src/app/proto/generated/zitadel/management_pb';
 
 @Component({
   selector: 'app-show-key-dialog',
@@ -9,7 +9,7 @@ import { AddMachineKeyResponse } from 'src/app/proto/generated/zitadel/managemen
   styleUrls: ['./show-key-dialog.component.scss'],
 })
 export class ShowKeyDialogComponent {
-    public keyResponse!: AddMachineKeyResponse.AsObject;
+  public keyResponse!: AddMachineKeyResponse.AsObject | AddAppKeyResponse.AsObject;
 
   constructor(
     public dialogRef: MatDialogRef<ShowKeyDialogComponent>,
@@ -21,7 +21,10 @@ export class ShowKeyDialogComponent {
   public saveFile(): void {
     const json = atob(this.keyResponse.keyDetails.toString());
     const blob = new Blob([json], { type: 'text/plain;charset=utf-8' });
-        saveAs(blob, `${this.keyResponse.keyId}.json`);
+    const name = (this.keyResponse as AddMachineKeyResponse.AsObject).keyId ?
+      (this.keyResponse as AddMachineKeyResponse.AsObject).keyId :
+      (this.keyResponse as AddAppKeyResponse.AsObject).id;
+    saveAs(blob, `${name}.json`);
   }
 
   public closeDialog(): void {

console/src/app/pages/projects/apps/app-create/app-create.component.html

@@ -180,7 +180,7 @@
                     </span>
                     <span class="right">
                         <span>
-                            {{'APP.API.AUTHMETHOD.'+oidcAppRequest?.authMethodType | translate}}
+                            {{'APP.API.AUTHMETHOD.'+apiAppRequest?.authMethodType | translate}}
                         </span>
                     </span>
                 </div>

console/src/app/pages/projects/apps/app-detail/app-detail.component.html

@@ -72,6 +72,19 @@
                         <i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
                     </button>
                 </div>
+            </div>
+            <div class="environment" *ngIf="app?.apiConfig?.clientId">
+              <span class="key">{{'APP.API.INFO.CLIENTID' | translate}}</span>
+              <div class="environment-row">
+                  <span>{{this.app.apiConfig?.clientId}}</span>
+                  <button color="primary" [disabled]="copiedKey == this.app.apiConfig?.clientId"
+                      [matTooltip]="(copiedKey != this.app.apiConfig?.clientId ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
+                      appCopyToClipboard [valueToCopy]="this.app.apiConfig?.clientId"
+                      (copiedValue)="copiedKey = 'clientId'" mat-icon-button>
+                      <i *ngIf="copiedKey != 'clientId'" class="las la-clipboard"></i>
+                      <i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
+                  </button>
+              </div>
           </div>
             <ng-container *ngFor="let environmentV of (environmentMap | keyvalue)">
                 <div *ngIf="environmentV.value" class="environment">

console/src/app/pages/projects/apps/app-detail/app-detail.component.ts

@@ -511,7 +511,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             const config = { api: this.app.apiConfig };
             this.currentAuthMethod = this.authMethodFromPartialConfig(config);
           }
-          this.toast.showInfo('APP.TOAST.OIDCUPDATED', true);
+          this.toast.showInfo('APP.TOAST.APIUPDATED', true);
         })
         .catch(error => {
           this.toast.showError(error);
@@ -540,7 +540,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
       this.dialog.open(AppSecretDialogComponent, {
         data: {
-          // clientId: data.toObject().clientId ?? '',
           clientSecret: resp.clientSecret,
         },
         width: '400px',

console/src/assets/i18n/de.json

@@ -1151,6 +1151,9 @@
       }
     },
     "API": {
+      "INFO": {
+        "CLIENTID": "Client Id"
+      },
       "REGENERATESECRET": "Client Secret neu generieren",
       "SELECTION": {
         "TITLE": "API",
@@ -1195,6 +1198,7 @@
       "REACTIVATED": "Anwendung reaktiviert.",
       "DEACTIVATED": "Anwendung deaktiviert.",
       "OIDCUPDATED": "OIDC-Konfiguration geändert.",
+      "APIUPDATED":"API Konfiguration geändert.",
       "UPDATED": "App geändert.",
       "CLIENTSECRETREGENERATED": "Client Secret generiert.",
       "DELETED": "App gelöscht.",

console/src/assets/i18n/en.json

@@ -1152,6 +1152,9 @@
       }
     },
     "API": {
+      "INFO": {
+        "CLIENTID": "Client Id"
+      },
       "REGENERATESECRET": "Regenerate Client Secret",
       "SELECTION": {
         "TITLE": "API",
@@ -1196,6 +1199,7 @@
       "REACTIVATED": "Application reactivated.",
       "DEACTIVATED": "Application deactivated.",
       "OIDCUPDATED": "OIDC configuration updated.",
+      "APIUPDATED":"API configuration updated",
       "UPDATED": "App updated.",
       "CLIENTSECRETREGENERATED": "client secret generated.",
       "DELETED": "App deleted.",