fix(console): Auth method dialog title, layout issues (#4216)

* fix(console): app auth method dialog title

* lint

console/src/app/modules/client-keys/client-keys.component.html

@@ -1,8 +1,17 @@
-<cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
+<cnsl-refresh-table
-  [timestamp]="keyResult?.details?.viewTimestamp" [selection]="selection">
+  [loading]="loading$ | async"
+  (refreshed)="refreshPage()"
+  [dataSize]="dataSource.data.length"
+  [timestamp]="keyResult?.details?.viewTimestamp"
+  [selection]="selection"
+>
   <div actions>
-    <a [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) === false"
+    <a
-      color="primary" mat-raised-button (click)="openAddKey()">
+      [disabled]="(['project.app.write:' + projectId, 'project.app.write'] | hasRole | async) === false"
+      color="primary"
+      mat-raised-button
+      (click)="openAddKey()"
+    >
       <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
     </a>
   </div>
@@ -11,39 +20,46 @@
     <table class="table" mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+          <mat-checkbox
+            color="primary"
+            (change)="$event ? masterToggle() : null"
             [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()">
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
           </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let key">
-          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+          <mat-checkbox
-            (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+            color="primary"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(key) : null"
+            [checked]="selection.isSelected(key)"
+          >
           </mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.ID' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.ID' | translate }}</th>
-        <td mat-cell *matCellDef="let key"> {{key?.id}} </td>
+        <td mat-cell *matCellDef="let key">{{ key?.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.TYPE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.TYPE' | translate }}</th>
-        <td mat-cell *matCellDef="let key"> {{'USER.MACHINE.KEYTYPES.'+key?.type | translate}} </td>
+        <td mat-cell *matCellDef="let key">{{ 'USER.MACHINE.KEYTYPES.' + key?.type | translate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="creationDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{key.details.creationDate | timestampToDate | localizedDate: 'fromNow'}}
+          {{ key.details.creationDate | timestampToDate | localizedDate: 'fromNow' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="expirationDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.EXPIRATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{key.expirationDate | timestampToDate | localizedDate: 'fromNow'}}
+          {{ key.expirationDate | timestampToDate | localizedDate: 'fromNow' }}
         </td>
       </ng-container>
 
@@ -51,9 +67,14 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let key">
           <cnsl-table-actions>
-            <button actions
+            <button
-              [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) === false"
+              actions
-              mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteKey(key)">
+              [disabled]="(['project.app.write:' + projectId, 'project.app.write'] | hasRole | async) === false"
+              mat-icon-button
+              color="warn"
+              matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+              (click)="$event.stopPropagation(); deleteKey(key)"
+            >
               <i class="las la-trash"></i>
             </button>
           </cnsl-table-actions>
@@ -61,12 +82,17 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let key; columns: displayedColumns;" (click)="selection.toggle(key);">
+      <tr class="highlight" mat-row *matRowDef="let key; columns: displayedColumns" (click)="selection.toggle(key)"></tr>
-      </tr>
     </table>
   </div>
 
-  <cnsl-paginator #paginator class="paginator" [timestamp]="keyResult?.details?.viewTimestamp"
+  <cnsl-paginator
-    [length]="keyResult?.details?.totalResult || 0" [pageSize]="20" [pageSizeOptions]="[10, 20, 50, 100]"
+    #paginator
-    (page)="changePage($event)"></cnsl-paginator>
+    class="paginator"
-</cnsl-refresh-table>
+    [timestamp]="keyResult?.details?.viewTimestamp"
+    [length]="keyResult?.details?.totalResult || 0"
+    [pageSize]="20"
+    [pageSizeOptions]="[10, 20, 50, 100]"
+    (page)="changePage($event)"
+  ></cnsl-paginator>
+</cnsl-refresh-table>

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

@@ -1,17 +1,19 @@
-<span class="title" mat-dialog-title>{{'USER.MACHINE.ADDED.TITLE' | translate}}</span>
+<span class="title" mat-dialog-title>{{ 'USER.MACHINE.ADDED.TITLE' | translate }}</span>
 <div mat-dialog-content>
-  <p class="desc"> {{'USER.MACHINE.ADDED.DESCRIPTION' | translate}}</p>
+  <cnsl-info-section class="desc" [type]="InfoSectionType.WARN">{{
+    'USER.MACHINE.ADDED.DESCRIPTION' | translate
+  }}</cnsl-info-section>
   <ng-container *ngIf="keyResponse">
     <div class="row">
-      <p class="left cnsl-secondary-text">{{'USER.MACHINE.ID' | translate}}</p>
+      <p class="left cnsl-secondary-text">{{ 'USER.MACHINE.ID' | translate }}</p>
-      <p class="right">{{$any(keyResponse)?.id}}</p>
+      <p class="right">{{ $any(keyResponse)?.id }}</p>
-      <p class="right">{{$any(keyResponse)?.keyId}}</p>
+      <p class="right">{{ $any(keyResponse)?.keyId }}</p>
     </div>
 
     <div class="row">
-      <p class="left cnsl-secondary-text">{{'USER.MACHINE.CREATIONDATE' | translate}}</p>
+      <p class="left cnsl-secondary-text">{{ 'USER.MACHINE.CREATIONDATE' | translate }}</p>
       <p *ngIf="keyResponse.details && keyResponse.details.creationDate" class="right">
-        {{ keyResponse.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm' }}
+        {{ keyResponse.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm' }}
       </p>
     </div>
 
@@ -19,7 +21,8 @@
   </ng-container>
 </div>
 <div mat-dialog-actions class="action">
+  <span class="fill-space"></span>
   <button color="primary" mat-raised-button class="ok-button" (click)="closeDialog()">
-    {{'ACTIONS.CLOSE' | translate}}
+    {{ 'ACTIONS.CLOSE' | translate }}
   </button>
-</div>
+</div>

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

@@ -3,11 +3,6 @@
   margin-top: 0;
 }
 
-.desc {
-  color: rgb(201, 51, 71);
-  font-size: 0.9rem;
-}
-
 .form-field {
   width: 100%;
 }
@@ -16,6 +11,10 @@
   display: flex;
   justify-content: space-between;
 
+  .fill-space {
+    flex: 1;
+  }
+
   .ok-button {
     margin-left: 0.5rem;
   }

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

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

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

@@ -4,17 +4,19 @@ import { MatButtonModule } from '@angular/material/button';
 import { TranslateModule } from '@ngx-translate/core';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+import { InfoSectionModule } from '../info-section/info-section.module';
 
 import { ShowKeyDialogComponent } from './show-key-dialog.component';
 
 @NgModule({
-    declarations: [ShowKeyDialogComponent],
+  declarations: [ShowKeyDialogComponent],
-    imports: [
+  imports: [
-        CommonModule,
+    CommonModule,
-        TranslateModule,
+    TranslateModule,
-        MatButtonModule,
+    MatButtonModule,
-        LocalizedDatePipeModule,
+    LocalizedDatePipeModule,
-        TimestampToDatePipeModule,
+    InfoSectionModule,
-    ],
+    TimestampToDatePipeModule,
+  ],
 })
-export class ShowKeyDialogModule { }
+export class ShowKeyDialogModule {}

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

@@ -1,7 +1,6 @@
 <h1 mat-dialog-title>
-  <span>{{ 'USER.CODEDIALOG.TITLE' | translate }} {{ data?.number }}</span>
+  <span>{{ 'APP.PAGES.DIALOG.CONFIG.TITLE' | translate }} {{ data?.number }}</span>
 </h1>
-<p class="desc cnsl-secondary-text">{{ 'USER.CODEDIALOG.DESCRIPTION' | translate }}</p>
 <div mat-dialog-content>
   <cnsl-auth-method-radio
     [authMethods]="data.authMethods"