feat(console): replace secret generator dialogs with cards (#8307)

console/src/app/modules/policies/secret-generator/dialog-add-secret-generator/dialog-add-secret-generator.component.ts

@@ -1,95 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
-import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
-import { UpdateSecretGeneratorRequest } from 'src/app/proto/generated/zitadel/admin_pb';
-
-@Component({
-  selector: 'cnsl-dialog-add-secret-generator',
-  templateUrl: './dialog-add-secret-generator.component.html',
-  styleUrls: ['./dialog-add-secret-generator.component.scss'],
-})
-export class DialogAddSecretGeneratorComponent {
-  public req: UpdateSecretGeneratorRequest = new UpdateSecretGeneratorRequest();
-
-  public specsForm!: UntypedFormGroup;
-
-  constructor(
-    private fb: UntypedFormBuilder,
-    public dialogRef: MatDialogRef<DialogAddSecretGeneratorComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-  ) {
-    let exp = 1;
-    if (data.config?.expiry !== undefined) {
-      exp = this.durationToHour(data.config?.expiry);
-    }
-    this.specsForm = this.fb.group({
-      generatorType: [data.type, [requiredValidator]],
-      expiry: [exp, [requiredValidator]],
-      length: [data.config?.length ?? 6, [requiredValidator]],
-      includeDigits: [data.config?.includeDigits ?? true, [requiredValidator]],
-      includeSymbols: [data.config?.includeSymbols ?? true, [requiredValidator]],
-      includeLowerLetters: [data.config?.includeLowerLetters ?? true, [requiredValidator]],
-      includeUpperLetters: [data.config?.includeUpperLetters ?? true, [requiredValidator]],
-    });
-  }
-
-  public closeDialog(): void {
-    this.dialogRef.close();
-  }
-
-  public closeDialogWithRequest(): void {
-    this.req.setGeneratorType(this.generatorType?.value);
-    this.req.setExpiry(this.hourToDuration(this.expiry?.value));
-    this.req.setIncludeDigits(this.includeDigits?.value);
-    this.req.setIncludeLowerLetters(this.includeLowerLetters?.value);
-    this.req.setIncludeSymbols(this.includeSymbols?.value);
-    this.req.setIncludeUpperLetters(this.includeUpperLetters?.value);
-    this.req.setLength(this.length?.value);
-
-    this.dialogRef.close(this.req);
-  }
-
-  public get generatorType(): AbstractControl | null {
-    return this.specsForm.get('generatorType');
-  }
-
-  public get expiry(): AbstractControl | null {
-    return this.specsForm.get('expiry');
-  }
-
-  public get includeDigits(): AbstractControl | null {
-    return this.specsForm.get('includeDigits');
-  }
-
-  public get includeLowerLetters(): AbstractControl | null {
-    return this.specsForm.get('includeLowerLetters');
-  }
-
-  public get includeSymbols(): AbstractControl | null {
-    return this.specsForm.get('includeSymbols');
-  }
-
-  public get includeUpperLetters(): AbstractControl | null {
-    return this.specsForm.get('includeUpperLetters');
-  }
-
-  public get length(): AbstractControl | null {
-    return this.specsForm.get('length');
-  }
-
-  private durationToHour(duration: Duration.AsObject): number {
-    if (duration.seconds === 0) {
-      return 0;
-    }
-    return (duration.seconds + duration.nanos / 1000000) / 3600;
-  }
-
-  private hourToDuration(hour: number): Duration {
-    const exp = hour * 60 * 60;
-    const sec = Math.floor(exp);
-    const nanos = Math.round((exp - sec) * 1000000);
-    return new Duration().setSeconds(sec).setNanos(nanos);
-  }
-}

console/src/app/modules/policies/secret-generator/secret-generator-card/secret-generator-card.component.html

@@ -1,29 +1,36 @@
-<h1 mat-dialog-title class="title">
-  <span>{{ 'SETTING.SECRETS.ADDGENERATOR' | translate }}</span>
-</h1>
-<div mat-dialog-content>
-  <form *ngIf="specsForm" (ngSubmit)="closeDialogWithRequest()" [formGroup]="specsForm">
-    <h2 class="generator-type">{{ 'SETTING.SECRETS.TYPE.' + generatorType?.value | translate }}</h2>
-
+<cnsl-card title="{{ 'SETTING.SECRETS.TYPE.' + generatorType | translate }}">
+  <form *ngIf="specsForm" [formGroup]="specsForm" (ngSubmit)="saveSecretGenerator()">
     <cnsl-form-field class="generator-form-field" label="Expiration">
       <cnsl-label>{{ 'SETTING.SECRETS.EXPIRY' | translate }}</cnsl-label>
-      <input cnslInput name="expiry" type="number" formControlName="expiry" />
+      <input cnslInput name="expiry" type="number" formControlName="expiry" id="{{ 'expiry' + generatorType }}" />
     </cnsl-form-field>
 
     <cnsl-form-field class="generator-form-field" label="Length">
       <cnsl-label>{{ 'SETTING.SECRETS.LENGTH' | translate }}</cnsl-label>
-      <input cnslInput name="length" type="number" formControlName="length" />
+      <input cnslInput name="length" type="number" formControlName="length" id="{{ 'length' + generatorType }}" />
     </cnsl-form-field>
 
     <div class="slide-toggle-wrapper">
-      <mat-slide-toggle class="slide-toggle" color="primary" name="includeDigits" formControlName="includeDigits">
+      <mat-slide-toggle
+        class="slide-toggle"
+        color="primary"
+        name="includeDigits"
+        formControlName="includeDigits"
+        id="{{ 'includeDigits' + generatorType }}"
+      >
         <div class="slide-toggle-row">
           <mat-icon class="icon" svgIcon="mdi_numeric"></mat-icon>
           <span class="left-desc">{{ 'SETTING.SECRETS.INCLUDEDIGITS' | translate }}</span>
         </div>
       </mat-slide-toggle>
 
-      <mat-slide-toggle class="slide-toggle" color="primary" name="includeSymbols" formControlName="includeSymbols">
+      <mat-slide-toggle
+        class="slide-toggle"
+        color="primary"
+        name="includeSymbols"
+        formControlName="includeSymbols"
+        id="{{ 'includeSymbols' + generatorType }}"
+      >
         <div class="slide-toggle-row">
           <mat-icon class="icon" svgIcon="mdi_symbol"></mat-icon>
           <span class="left-desc">{{ 'SETTING.SECRETS.INCLUDESYMBOLS' | translate }}</span>
@@ -35,6 +42,7 @@
         color="primary"
         name="includeLowerLetters"
         formControlName="includeLowerLetters"
+        id="{{ 'includeLowerLetters' + generatorType }}"
       >
         <div class="slide-toggle-row">
           <mat-icon class="icon" svgIcon="mdi_format-letter-case-lower"></mat-icon>
@@ -47,6 +55,7 @@
         color="primary"
         name="includeUpperLetters"
         formControlName="includeUpperLetters"
+        id="{{ 'includeUpperLetters' + generatorType }}"
       >
         <div class="slide-toggle-row">
           <mat-icon class="icon" svgIcon="mdi_format-letter-case-upper"></mat-icon>
@@ -55,18 +64,17 @@
       </mat-slide-toggle>
     </div>
   </form>
-</div>
-<div mat-dialog-actions class="action">
-  <button mat-stroked-button (click)="closeDialog()">
-    <span>{{ 'ACTIONS.CLOSE' | translate }}</span>
-  </button>
-  <button
-    [disabled]="!specsForm.valid"
-    mat-raised-button
-    class="ok-button"
-    color="primary"
-    (click)="closeDialogWithRequest()"
-  >
-    <span>{{ 'ACTIONS.SAVE' | translate }}</span>
-  </button>
-</div>
+  <div class="action">
+    <button
+      (click)="saveSecretGenerator()"
+      [disabled]="!specsForm.valid || specsForm.pristine || loading"
+      mat-raised-button
+      color="primary"
+      type="submit"
+      id="{{ 'saveSecretGenerator' + generatorType }}"
+    >
+      <mat-spinner diameter="20" *ngIf="loading"></mat-spinner>
+      <span *ngIf="!loading">{{ 'ACTIONS.SAVE' | translate }}</span>
+    </button>
+  </div>
+</cnsl-card>

console/src/app/modules/policies/secret-generator/secret-generator-card/secret-generator-card.component.scss

@@ -34,10 +34,12 @@
 }
 
 .action {
-  display: flex;
-  justify-content: space-between;
+  display: inline !important;
 
   button {
     border-radius: 0.5rem;
+    float: right;
+    margin-top: 0.5rem;
+    display: flex;
   }
 }

console/src/app/modules/policies/secret-generator/secret-generator-card/secret-generator-card.component.ts

@@ -0,0 +1,135 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
+import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
+import { GetSecretGeneratorRequest, UpdateSecretGeneratorRequest } from 'src/app/proto/generated/zitadel/admin_pb';
+import { SecretGeneratorType } from 'src/app/proto/generated/zitadel/settings_pb';
+import { AdminService } from 'src/app/services/admin.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+const MIN_EXPIRATION_IN_MINUTES = 5;
+const MIN_LENGTH = 6;
+
+@Component({
+  selector: 'cnsl-secret-generator-card',
+  templateUrl: './secret-generator-card.component.html',
+  styleUrls: ['./secret-generator-card.component.scss'],
+})
+export class SecretGeneratorCardComponent implements OnInit {
+  @Input({ required: true }) generatorType!: SecretGeneratorType;
+
+  public specsForm!: UntypedFormGroup;
+  public loading: boolean = false;
+
+  ngOnInit() {
+    this.fetchData();
+  }
+
+  constructor(
+    private fb: UntypedFormBuilder,
+    private service: AdminService,
+    private toast: ToastService,
+  ) {
+    this.specsForm = this.fb.group({
+      expiry: [MIN_EXPIRATION_IN_MINUTES, [requiredValidator]],
+      length: [MIN_LENGTH, [requiredValidator]],
+      includeDigits: [false, [requiredValidator]],
+      includeSymbols: [false, [requiredValidator]],
+      includeLowerLetters: [false, [requiredValidator]],
+      includeUpperLetters: [false, [requiredValidator]],
+    });
+  }
+
+  private fetchData(): void {
+    this.loading = true;
+    const req = new GetSecretGeneratorRequest();
+    req.setGeneratorType(this.generatorType);
+
+    this.service
+      .getSecretGenerator(req)
+      .then((resp) => {
+        let generator = resp.secretGenerator;
+        if (generator) {
+          this.specsForm.patchValue({
+            length: generator.length,
+            includeDigits: generator.includeDigits,
+            includeSymbols: generator.includeSymbols,
+            includeLowerLetters: generator.includeLowerLetters,
+            includeUpperLetters: generator.includeUpperLetters,
+          });
+
+          if (generator.expiry !== undefined) {
+            this.specsForm.patchValue({ expiry: this.durationToMinutes(generator.expiry) });
+          }
+          this.specsForm.markAsPristine();
+          this.loading = false;
+        }
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+        this.loading = false;
+      });
+  }
+
+  public saveSecretGenerator() {
+    const req = new UpdateSecretGeneratorRequest();
+
+    req.setGeneratorType(this.generatorType);
+    req.setExpiry(this.minutesToDuration(this.expiry?.value));
+    req.setIncludeDigits(this.includeDigits?.value);
+    req.setIncludeLowerLetters(this.includeLowerLetters?.value);
+    req.setIncludeSymbols(this.includeSymbols?.value);
+    req.setIncludeUpperLetters(this.includeUpperLetters?.value);
+    req.setLength(this.length?.value);
+
+    this.loading = true;
+    this.service
+      .updateSecretGenerator(req)
+      .then(() => {
+        this.toast.showInfo('SETTING.SECRETS.UPDATED', true);
+        this.fetchData();
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+        this.loading = false;
+      });
+  }
+
+  public get expiry(): AbstractControl | null {
+    return this.specsForm.get('expiry');
+  }
+
+  public get includeDigits(): AbstractControl | null {
+    return this.specsForm.get('includeDigits');
+  }
+
+  public get includeLowerLetters(): AbstractControl | null {
+    return this.specsForm.get('includeLowerLetters');
+  }
+
+  public get includeSymbols(): AbstractControl | null {
+    return this.specsForm.get('includeSymbols');
+  }
+
+  public get includeUpperLetters(): AbstractControl | null {
+    return this.specsForm.get('includeUpperLetters');
+  }
+
+  public get length(): AbstractControl | null {
+    return this.specsForm.get('length');
+  }
+
+  private durationToMinutes(duration: Duration.AsObject): number {
+    if (duration.seconds === 0) {
+      return 0;
+    }
+    return (duration.seconds + duration.nanos / 1000000000) / 60;
+  }
+
+  private minutesToDuration(minutes: number): Duration {
+    const exp = minutes * 60;
+    const sec = Math.floor(exp);
+    const nanos = Math.round((exp - sec) * 1000000000);
+    return new Duration().setSeconds(sec).setNanos(nanos);
+  }
+}

console/src/app/modules/policies/secret-generator/secret-generator.component.html

@@ -1,16 +1,6 @@
-<div class="spinner-wr">
-  <mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
-</div>
 <h2>{{ 'DESCRIPTIONS.SETTINGS.SECRET_GENERATORS.TITLE' | translate }}</h2>
 <p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.SECRET_GENERATORS.DESCRIPTION' | translate }}</p>
 
 <div class="generators">
-  <cnsl-card class="generator" [nomargin]="true" *ngFor="let gen of AVAILABLEGENERATORS">
-    <div class="row">
-      <h3 class="title">{{ 'SETTING.SECRETS.TYPE.' + gen | translate }}</h3>
-      <button mat-icon-button (click)="openGeneratorDialog(gen)" [disabled]="(['iam.write'] | hasRole | async) === false">
-        <i class="las la-pen"></i>
-      </button>
-    </div>
-  </cnsl-card>
+  <cnsl-secret-generator-card *ngFor="let type of AVAILABLEGENERATORS" [generatorType]="type" />
 </div>

console/src/app/modules/policies/secret-generator/secret-generator.component.scss

@@ -13,17 +13,4 @@
   @media only screen and (max-width: 600px) {
     grid-template-columns: 1fr;
   }
-
-  .generator {
-    .row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .title {
-        font-size: 1rem;
-        margin: 0;
-      }
-    }
-  }
 }

console/src/app/modules/policies/secret-generator/secret-generator.component.ts

@@ -1,22 +1,13 @@
-import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { UpdateSecretGeneratorRequest } from 'src/app/proto/generated/zitadel/admin_pb';
-import { OIDCSettings, SecretGenerator, SecretGeneratorType } from 'src/app/proto/generated/zitadel/settings_pb';
-import { AdminService } from 'src/app/services/admin.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-import { DialogAddSecretGeneratorComponent } from './dialog-add-secret-generator/dialog-add-secret-generator.component';
+import { Component } from '@angular/core';
+import { SecretGenerator, SecretGeneratorType } from 'src/app/proto/generated/zitadel/settings_pb';
 
 @Component({
   selector: 'cnsl-secret-generator',
   templateUrl: './secret-generator.component.html',
   styleUrls: ['./secret-generator.component.scss'],
 })
-export class SecretGeneratorComponent implements OnInit {
+export class SecretGeneratorComponent {
   public generators: SecretGenerator.AsObject[] = [];
-  public oidcSettings!: OIDCSettings.AsObject;
-
-  public loading: boolean = false;
 
   public readonly AVAILABLEGENERATORS: SecretGeneratorType[] = [
     SecretGeneratorType.SECRET_GENERATOR_TYPE_INIT_CODE,
@@ -29,58 +20,5 @@ export class SecretGeneratorComponent implements OnInit {
     SecretGeneratorType.SECRET_GENERATOR_TYPE_OTP_EMAIL,
   ];
 
-  constructor(
-    private service: AdminService,
-    private toast: ToastService,
-    private dialog: MatDialog,
-  ) {}
-
-  ngOnInit(): void {
-    this.fetchData();
-  }
-
-  private fetchData(): void {
-    this.service
-      .listSecretGenerators()
-      .then((generators) => {
-        if (generators.resultList) {
-          this.generators = generators.resultList;
-        }
-      })
-      .catch((error) => {
-        if (error.code === 5) {
-        } else {
-          this.toast.showError(error);
-        }
-      });
-  }
-
-  public openGeneratorDialog(generatorType: SecretGeneratorType): void {
-    let config = this.generators.find((gen) => gen.generatorType === generatorType);
-    const dialogRef = this.dialog.open(DialogAddSecretGeneratorComponent, {
-      data: {
-        type: generatorType,
-        config: config,
-      },
-      width: '400px',
-    });
-
-    dialogRef.afterClosed().subscribe((req: UpdateSecretGeneratorRequest) => {
-      if (req) {
-        return (this.service as AdminService)
-          .updateSecretGenerator(req)
-          .then(() => {
-            this.toast.showInfo('SETTING.SECRETS.UPDATED', true);
-            setTimeout(() => {
-              this.fetchData();
-            }, 2000);
-          })
-          .catch((error) => {
-            this.toast.showError(error);
-          });
-      } else {
-        return;
-      }
-    });
-  }
+  constructor() {}
 }

console/src/app/modules/policies/secret-generator/secret-generator.module.ts

@@ -12,11 +12,11 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { CardModule } from '../../card/card.module';
 import { FormFieldModule } from '../../form-field/form-field.module';
 import { InputModule } from '../../input/input.module';
-import { DialogAddSecretGeneratorComponent } from './dialog-add-secret-generator/dialog-add-secret-generator.component';
 import { SecretGeneratorComponent } from './secret-generator.component';
+import { SecretGeneratorCardComponent } from './secret-generator-card/secret-generator-card.component';
 
 @NgModule({
-  declarations: [SecretGeneratorComponent, DialogAddSecretGeneratorComponent],
+  declarations: [SecretGeneratorComponent, SecretGeneratorCardComponent],
   imports: [
     CommonModule,
     MatIconModule,
@@ -33,6 +33,6 @@ import { SecretGeneratorComponent } from './secret-generator.component';
     TranslateModule,
     MatDialogModule,
   ],
-  exports: [SecretGeneratorComponent, DialogAddSecretGeneratorComponent],
+  exports: [SecretGeneratorComponent],
 })
 export class SecretGeneratorModule {}