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

* fix(console): app auth method dialog title * lint
2025-02-28 20:57:24 +00:00 · 2022-08-26 08:13:38 +02:00 · 2022-08-26 08:13:38 +02:00 · 3c67c9756d
commit 3c67c9756d
parent 47930c6a85
6 changed files with 85 additions and 57 deletions
--- a/console/src/app/modules/client-keys/client-keys.component.html
+++ b/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"
-  [timestamp]="keyResult?.details?.viewTimestamp" [selection]="selection">
+<cnsl-refresh-table
+  [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"
-      color="primary" mat-raised-button (click)="openAddKey()">
+    <a
+      [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()"
-            (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+          <mat-checkbox
+            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>
-        <td mat-cell *matCellDef="let key"> {{key?.id}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.ID' | translate }}</th>
+        <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>
-        <td mat-cell *matCellDef="let key"> {{'USER.MACHINE.KEYTYPES.'+key?.type | translate}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.TYPE' | translate }}</th>
+        <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
-              [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) === false"
-              mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteKey(key)">
+            <button
+              actions
+              [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>
+      <tr class="highlight" mat-row *matRowDef="let key; columns: displayedColumns" (click)="selection.toggle(key)"></tr>
    </table>
  </div>

-  <cnsl-paginator #paginator class="paginator" [timestamp]="keyResult?.details?.viewTimestamp"
-    [length]="keyResult?.details?.totalResult || 0" [pageSize]="20" [pageSizeOptions]="[10, 20, 50, 100]"
-    (page)="changePage($event)"></cnsl-paginator>
-</cnsl-refresh-table>
+  <cnsl-paginator
+    #paginator
+    class="paginator"
+    [timestamp]="keyResult?.details?.viewTimestamp"
+    [length]="keyResult?.details?.totalResult || 0"
+    [pageSize]="20"
+    [pageSizeOptions]="[10, 20, 50, 100]"
+    (page)="changePage($event)"
+  ></cnsl-paginator>
+</cnsl-refresh-table>
--- a/console/src/app/modules/show-key-dialog/show-key-dialog.component.html
+++ b/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="right">{{$any(keyResponse)?.id}}</p>
-      <p class="right">{{$any(keyResponse)?.keyId}}</p>
+      <p class="left cnsl-secondary-text">{{ 'USER.MACHINE.ID' | translate }}</p>
+      <p class="right">{{ $any(keyResponse)?.id }}</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>
--- a/console/src/app/modules/show-key-dialog/show-key-dialog.component.scss
+++ b/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;
  }
--- a/console/src/app/modules/show-key-dialog/show-key-dialog.component.ts
+++ b/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(
-    public dialogRef: MatDialogRef<ShowKeyDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-  ) {
+  constructor(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 ?
-      (this.keyResponse as AddMachineKeyResponse.AsObject).keyId :
-      (this.keyResponse as AddAppKeyResponse.AsObject).id;
+    const name = (this.keyResponse as AddMachineKeyResponse.AsObject).keyId
+      ? (this.keyResponse as AddMachineKeyResponse.AsObject).keyId
+      : (this.keyResponse as AddAppKeyResponse.AsObject).id;
    saveAs(blob, `${name}.json`);
  }

--- a/console/src/app/modules/show-key-dialog/show-key-dialog.module.ts
+++ b/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],
-    imports: [
-        CommonModule,
-        TranslateModule,
-        MatButtonModule,
-        LocalizedDatePipeModule,
-        TimestampToDatePipeModule,
-    ],
+  declarations: [ShowKeyDialogComponent],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    MatButtonModule,
+    LocalizedDatePipeModule,
+    InfoSectionModule,
+    TimestampToDatePipeModule,
+  ],
 })
-export class ShowKeyDialogModule { }
+export class ShowKeyDialogModule {}
--- a/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.html
+++ b/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"