fix(console): show otp secret (#4030)

console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html

@@ -5,8 +5,15 @@
 <div mat-dialog-content>
   <div class="flex" *ngIf="data.clientId">
     <span class="overflow-auto"><span class="desc">ClientId:</span> {{ data.clientId }}</span>
-    <button color="primary" [disabled]="copied === data.clientId" matTooltip="copy to clipboard" cnslCopyToClipboard
+    <button
-      [valueToCopy]="data.clientId" (copiedValue)="this.copied = $event" mat-icon-button>
+      color="primary"
+      [disabled]="copied === data.clientId"
+      matTooltip="copy to clipboard"
+      cnslCopyToClipboard
+      [valueToCopy]="data.clientId"
+      (copiedValue)="this.copied = $event"
+      mat-icon-button
+    >
       <i *ngIf="copied !== data.clientId" class="las la-clipboard"></i>
       <i *ngIf="copied === data.clientId" class="las la-clipboard-check"></i>
     </button>
@@ -14,8 +21,15 @@
 
   <div *ngIf="data.clientSecret; else showNoSecretInfo" class="flex">
     <span class="overflow-auto"><span class="desc cnsl-secondary-text">ClientSecret:</span> {{ data.clientSecret }}</span>
-    <button color="primary" [disabled]="copied === data.clientSecret" matTooltip="copy to clipboard" cnslCopyToClipboard
+    <button
-      [valueToCopy]="data.clientSecret" (copiedValue)="this.copied = $event" mat-icon-button>
+      color="primary"
+      [disabled]="copied === data.clientSecret"
+      matTooltip="copy to clipboard"
+      cnslCopyToClipboard
+      [valueToCopy]="data.clientSecret"
+      (copiedValue)="this.copied = $event"
+      mat-icon-button
+    >
       <i *ngIf="copied !== data.clientSecret" class="las la-clipboard"></i>
       <i *ngIf="copied === data.clientSecret" class="las la-clipboard-check"></i>
     </button>
@@ -26,8 +40,14 @@
   </ng-template>
 </div>
 <div mat-dialog-actions class="action">
-  <button cdkFocusInitial color="primary" mat-raised-button class="ok-button" (click)="closeDialog()"
+  <button
-    [attr.data-e2e]="'close-dialog'">
+    cdkFocusInitial
+    color="primary"
+    mat-raised-button
+    class="ok-button"
+    (click)="closeDialog()"
+    [attr.data-e2e]="'close-dialog'"
+  >
     {{ 'ACTIONS.CLOSE' | translate }}
   </button>
 </div>

console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html

@@ -30,6 +30,22 @@
 
     <div class="qrcode-wrapper">
       <qr-code *ngIf="otpurl" class="qrcode" [value]="otpurl" [size]="150" [errorCorrectionLevel]="'M'"></qr-code>
+
+      <div class="otp-flex" *ngIf="otpsecret">
+        <span class="overflow-auto">{{ otpsecret }}</span>
+        <button
+          color="primary"
+          [disabled]="copied === otpsecret"
+          matTooltip="copy to clipboard"
+          cnslCopyToClipboard
+          [valueToCopy]="otpsecret"
+          (copiedValue)="this.copied = $event"
+          mat-icon-button
+        >
+          <i *ngIf="copied !== otpsecret" class="las la-clipboard"></i>
+          <i *ngIf="copied === otpsecret" class="las la-clipboard-check"></i>
+        </button>
+      </div>
     </div>
 
     <cnsl-form-field class="formfield" label="Access Code" required="true">
@@ -56,8 +72,14 @@
     {{ 'ACTIONS.CLOSE' | translate }}
   </button>
 
-  <button *ngIf="selectedType !== undefined" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
+  <button
-    (click)="submitAuth()">
+    *ngIf="selectedType !== undefined"
+    cdkFocusInitial
+    color="primary"
+    mat-raised-button
+    class="ok-button"
+    (click)="submitAuth()"
+  >
     {{ 'ACTIONS.CREATE' | translate }}
   </button>
 </div>

console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.scss

@@ -33,6 +33,29 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  .qrcode-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .otp-flex {
+      display: flex;
+      align-items: center;
+      border: 1px solid #ffffff20;
+      border-radius: 0.5rem;
+      padding-left: 0.5rem;
+      justify-content: space-between;
+
+      .overflow-auto {
+        overflow: auto;
+
+        .desc {
+          font-size: 14px;
+        }
+      }
+    }
+  }
 }
 
 .u2f {

console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.ts

@@ -20,6 +20,8 @@ export enum AuthFactorType {
 })
 export class AuthFactorDialogComponent {
   public otpurl: string = '';
+  public otpsecret: string = '';
+
   public otpcode: string = '';
 
   public u2fname: string = '';
@@ -29,6 +31,8 @@ export class AuthFactorDialogComponent {
 
   AuthFactorType: any = AuthFactorType;
   selectedType!: AuthFactorType;
+
+  public copied: string = '';
   constructor(
     private authService: GrpcAuthService,
     private toast: ToastService,
@@ -48,6 +52,7 @@ export class AuthFactorDialogComponent {
       this.authService.addMyMultiFactorOTP().then(
         (otpresp) => {
           this.otpurl = otpresp.url;
+          this.otpsecret = otpresp.secret;
         },
         (error) => {
           this.toast.showError(error);