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 {}

console/src/assets/i18n/bg.json

@@ -1437,9 +1437,7 @@
         "7": "Еднократна парола (OTP) - SMS",
         "8": "Еднократна парола (OTP) – имейл"
       },
-      "ADDGENERATOR": "Определете тайния външен вид",
-      "GENERATORTYPE": "Тип",
-      "EXPIRY": "Изтичане (в часове)",
+      "EXPIRY": "Изтичане (в минути)",
       "INCLUDEDIGITS": "Включете числа",
       "INCLUDESYMBOLS": "Включете символи",
       "INCLUDELOWERLETTERS": "Включете малки букви",

console/src/assets/i18n/cs.json

@@ -1438,9 +1438,7 @@
         "7": "Jednorázové heslo (OTP) - SMS",
         "8": "Jednorázové heslo (OTP) - E-mail"
       },
-      "ADDGENERATOR": "Definovat generátor tajemství",
-      "GENERATORTYPE": "Typ",
-      "EXPIRY": "Expirace (v hodinách)",
+      "EXPIRY": "Expirace (v minutách)",
       "INCLUDEDIGITS": "Zahrnout čísla",
       "INCLUDESYMBOLS": "Zahrnout symboly",
       "INCLUDELOWERLETTERS": "Zahrnout malá písmena",

console/src/assets/i18n/de.json

@@ -1438,9 +1438,7 @@
         "7": "One Time Password (OTP) - SMS",
         "8": "One Time Password (OTP) - Email"
       },
-      "ADDGENERATOR": "Passwort Generator definieren",
-      "GENERATORTYPE": "Typ",
-      "EXPIRY": "Ablauf (in Stunden)",
+      "EXPIRY": "Ablauf (in Minuten)",
       "INCLUDEDIGITS": "Enthält Zahlen",
       "INCLUDESYMBOLS": "Enthält Symbole",
       "INCLUDELOWERLETTERS": "Enthält Kleinbuchstaben",

console/src/assets/i18n/en.json

@@ -1438,9 +1438,7 @@
         "7": "One Time Password (OTP) - SMS",
         "8": "One Time Password (OTP) - Email"
       },
-      "ADDGENERATOR": "Define Secret Generator",
-      "GENERATORTYPE": "Type",
-      "EXPIRY": "Expiration (in hours)",
+      "EXPIRY": "Expiration (in minutes)",
       "INCLUDEDIGITS": "Include Numbers",
       "INCLUDESYMBOLS": "Include Symbols",
       "INCLUDELOWERLETTERS": "Include Lower letters",

console/src/assets/i18n/es.json

@@ -1439,9 +1439,7 @@
         "7": "One Time Password (OTP) - SMS",
         "8": "One Time Password (OTP) - email"
       },
-      "ADDGENERATOR": "Configurar generador del secreto",
-      "GENERATORTYPE": "Tipo",
-      "EXPIRY": "Caducidad (en horas)",
+      "EXPIRY": "Caducidad (en minutos)",
       "INCLUDEDIGITS": "Incluir números",
       "INCLUDESYMBOLS": "Incluir símbolos",
       "INCLUDELOWERLETTERS": "Incluir letras minúsculas",

console/src/assets/i18n/fr.json

@@ -1438,9 +1438,7 @@
         "7": "Mot de passe à usage unique (OTP) - SMS",
         "8": "Mot de passe à usage unique (OTP) -e-mail"
       },
-      "ADDGENERATOR": "Configurer générateur de mot de passe",
-      "GENERATORTYPE": "Type",
-      "EXPIRY": "Expiration (en heures)",
+      "EXPIRY": "Expiration (en minutes)",
       "INCLUDEDIGITS": "Inclure les chiffres",
       "INCLUDESYMBOLS": "Inclure les symboles",
       "INCLUDELOWERLETTERS": "Inclure les lettres minuscules",

console/src/assets/i18n/it.json

@@ -1438,9 +1438,7 @@
         "7": "One Time Password (OTP) - SMS",
         "8": "One Time Password (OTP) - email"
       },
-      "ADDGENERATOR": "Imposta il generatore di password",
-      "GENERATORTYPE": "Tipo",
-      "EXPIRY": "Scadenza (in ore)",
+      "EXPIRY": "Scadenza (in minuti)",
       "INCLUDEDIGITS": "Contiene numeri",
       "INCLUDESYMBOLS": "Contiene simboli",
       "INCLUDELOWERLETTERS": "Contiene lettere minuscole",

console/src/assets/i18n/ja.json

@@ -1438,9 +1438,7 @@
         "7": "ワンタイムパスワード (OTP) - SMS",
         "8": "ワンタイムパスワード (OTP) - 電子メール"
       },
-      "ADDGENERATOR": "シークレットの設定を定義する",
-      "GENERATORTYPE": "タイプ",
-      "EXPIRY": "有効期限（時間単位）",
+      "EXPIRY": "有効期限 (分単位)",
       "INCLUDEDIGITS": "数字を含める",
       "INCLUDESYMBOLS": "シンボルを含める",
       "INCLUDELOWERLETTERS": "小文字を含める",

console/src/assets/i18n/mk.json

@@ -1439,9 +1439,7 @@
         "7": "Еднократна лозинка (OTP) - СМС",
         "8": "Еднократна лозинка (OTP) - е-пошта"
       },
-      "ADDGENERATOR": "Дефинирајте изглед на тајна",
-      "GENERATORTYPE": "Тип",
-      "EXPIRY": "Истекување (во часови)",
+      "EXPIRY": "Истекување (во минути)",
       "INCLUDEDIGITS": "Вклучи цифри",
       "INCLUDESYMBOLS": "Вклучи симболи",
       "INCLUDELOWERLETTERS": "Вклучи мали букви",

console/src/assets/i18n/nl.json

@@ -1438,9 +1438,7 @@
         "7": "Eenmalig Wachtwoord (OTP) - SMS",
         "8": "Eenmalig Wachtwoord (OTP) - Email"
       },
-      "ADDGENERATOR": "Definieer Secret Generator",
-      "GENERATORTYPE": "Type",
-      "EXPIRY": "Vervaldatum (in uren)",
+      "EXPIRY": "Vervaldatum (in minuten)",
       "INCLUDEDIGITS": "Inclusief Nummers",
       "INCLUDESYMBOLS": "Inclusief Symbolen",
       "INCLUDELOWERLETTERS": "Inclusief Kleinletters",

console/src/assets/i18n/pl.json

@@ -1437,9 +1437,7 @@
         "7": "Hasło jednorazowe (OTP) - SMS",
         "8": "Hasło jednorazowe (OTP) — e-mail"
       },
-      "ADDGENERATOR": "Zdefiniuj wygląd sekretu",
-      "GENERATORTYPE": "Typ",
-      "EXPIRY": "Wygaśnięcie (w godzinach)",
+      "EXPIRY": "Wygaśnięcie (w minutach)",
       "INCLUDEDIGITS": "Dołącz cyfry",
       "INCLUDESYMBOLS": "Dołącz symbole",
       "INCLUDELOWERLETTERS": "Dołącz małe litery",

console/src/assets/i18n/pt.json

@@ -1439,9 +1439,7 @@
         "7": "Senha única (OTP) - SMS",
         "8": "Senha única (OTP) - e-mail"
       },
-      "ADDGENERATOR": "Definir aparência de segredo",
-      "GENERATORTYPE": "Tipo",
-      "EXPIRY": "Expiração (em horas)",
+      "EXPIRY": "Expiração (em minutos)",
       "INCLUDEDIGITS": "Incluir números",
       "INCLUDESYMBOLS": "Incluir símbolos",
       "INCLUDELOWERLETTERS": "Incluir letras minúsculas",

console/src/assets/i18n/ru.json

@@ -1490,9 +1490,7 @@
         "7": "Одноразовый код (OTP) — SMS",
         "8": "Одноразовый код (OTP) – электронная почта"
       },
-      "ADDGENERATOR": "Определить отображение секретного ключа",
-      "GENERATORTYPE": "Тип",
-      "EXPIRY": "Срок действия (в часах)",
+      "EXPIRY": "Срок действия (в минутах)",
       "INCLUDEDIGITS": "Содержит цифры",
       "INCLUDESYMBOLS": "Содержит символы",
       "INCLUDELOWERLETTERS": "Содержит строчные буквы",
@@ -1870,7 +1868,6 @@
         "GRANTED_SINGULAR": "Допуск проекта"
       },
       "PRIVATELABEL": {
-        "TITLE": "Настройка брендинга",
         "0": {
           "TITLE": "Не определено",
           "DESC": "После идентификации пользователя, будет отображён брендинг организации идентифицированного пользователя, прежде чем будет показано системное значение по умолчанию."
@@ -2442,7 +2439,7 @@
         }
       },
       "NEXTSTEPS": {
-        "TITLE": "Дальнейшие шаги",
+        "TITLE": "Следующие шаги",
         "0": {
           "TITLE": "Добавить роли",
           "DESC": "Введите свои роли в проекте"
@@ -2454,8 +2451,7 @@
         "2": {
           "TITLE": "Помощь и поддержка",
           "DESC": "Ознакомьтесь с нашей документацией по созданию приложений или обратитесь в нашу службу поддержки"
-        },
-        "TITLE": "Следующие шаги"
+        }
       }
     },
     "NAMEDIALOG": {

console/src/assets/i18n/sv.json

@@ -1442,9 +1442,7 @@
         "7": "Engångslösenord (OTP) - SMS",
         "8": "Engångslösenord (OTP) - E-post"
       },
-      "ADDGENERATOR": "Definiera hemlighetsgenerator",
-      "GENERATORTYPE": "Typ",
-      "EXPIRY": "Utgång (i timmar)",
+      "EXPIRY": "Utgång (på minuter)",
       "INCLUDEDIGITS": "Inkludera siffror",
       "INCLUDESYMBOLS": "Inkludera symboler",
       "INCLUDELOWERLETTERS": "Inkludera små bokstäver",

console/src/assets/i18n/zh.json

@@ -1438,9 +1438,7 @@
         "7": "一次性密码 (OTP) - SMS",
         "8": "一次性密码 (OTP) - 电子邮件"
       },
-      "ADDGENERATOR": "定义验证码外观",
-      "GENERATORTYPE": "类型",
-      "EXPIRY": "过期时间 (in hours)",
+      "EXPIRY": "过期时间 (以分钟为单位)",
       "INCLUDEDIGITS": "包含数字",
       "INCLUDESYMBOLS": "包含特殊符号",
       "INCLUDELOWERLETTERS": "包含小写字母",

e2e/cypress/e2e/instance/settings/secret-generator.cy.ts

@@ -0,0 +1,224 @@
+const secretGeneratorSettingsPath = `/instance?id=secrets`;
+
+beforeEach(() => {
+  cy.context().as('ctx');
+});
+
+describe('instance secret generators', () => {
+  describe('secret generator settings', () => {
+    it(`should show secret generator cards`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.contains('Initialization Mail');
+      cy.contains('Email verification');
+      cy.contains('Phone verification');
+      cy.contains('Password Reset');
+      cy.contains('Passwordless Initialization');
+      cy.contains('App Secret');
+      cy.contains('One Time Password (OTP) - SMS');
+      cy.contains('One Time Password (OTP) - Email');
+    });
+
+    it(`Initialization Mail should contain default settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.get('input[id="length1"]').should('have.value', '6');
+      cy.get('input[id="expiry1"]').should('have.value', '4320');
+      cy.get('mat-slide-toggle#includeLowerLetters1 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters1 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits1 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols1 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`Email verification should contain default settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.get('input[id="length2"]').should('have.value', '6');
+      cy.get('input[id="expiry2"]').should('have.value', '60');
+      cy.get('mat-slide-toggle#includeLowerLetters2 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters2 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits2 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols2 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`Phone verification should contain default settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.get('input[id="length3"]').should('have.value', '6');
+      cy.get('input[id="expiry3"]').should('have.value', '60');
+      cy.get('mat-slide-toggle#includeLowerLetters3 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters3 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits3 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols3 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`Password Reset should contain default settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.get('input[id="length4"]').should('have.value', '6');
+      cy.get('input[id="expiry4"]').should('have.value', '60');
+      cy.get('mat-slide-toggle#includeLowerLetters4 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters4 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits4 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols4 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`Passwordless Initialization should contain default settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.get('input[id="length5"]').should('have.value', '12');
+      cy.get('input[id="expiry5"]').should('have.value', '60');
+      cy.get('mat-slide-toggle#includeLowerLetters5 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeUpperLetters5 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits5 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols5 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`App Secret should contain default settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.get('input[id="length6"]').should('have.value', '64');
+      cy.get('input[id="expiry6"]').should('have.value', '0');
+      cy.get('mat-slide-toggle#includeLowerLetters6 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeUpperLetters6 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits6 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols6 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`One Time Password (OTP) - SMS should contain default settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.get('input[id="length7"]').should('have.value', '8');
+      cy.get('input[id="expiry7"]').should('have.value', '5');
+      cy.get('mat-slide-toggle#includeLowerLetters7 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters7 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeDigits7 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols7 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`One Time Password (OTP) - Email should contain default settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.get('input[id="length8"]').should('have.value', '8');
+      cy.get('input[id="expiry8"]').should('have.value', '5');
+      cy.get('mat-slide-toggle#includeLowerLetters8 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters8 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeDigits8 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols8 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`Initialization Mail should update settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.wait(1000);
+      cy.get('input[id="length1"]').clear().type('64');
+      cy.get('mat-slide-toggle#includeLowerLetters1 button').click();
+      cy.get('button[id="saveSecretGenerator1"]').click();
+      cy.wait(1000);
+      cy.get('input[id="length1"]').should('have.value', '64');
+      cy.get('input[id="expiry1"]').should('have.value', '4320');
+      cy.get('mat-slide-toggle#includeLowerLetters1 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeUpperLetters1 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits1 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols1 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`Email verification should update settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.wait(1000);
+      cy.get('input[id="length2"]').clear().type('64');
+      cy.get('mat-slide-toggle#includeUpperLetters2 button').click();
+      cy.get('button[id="saveSecretGenerator2"]').click();
+      cy.wait(1000);
+      cy.get('input[id="length2"]').should('have.value', '64');
+      cy.get('input[id="expiry2"]').should('have.value', '60');
+      cy.get('mat-slide-toggle#includeLowerLetters2 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters2 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeDigits2 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols2 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`Phone verification should update settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.wait(1000);
+      cy.get('input[id="expiry3"]').clear().type('10');
+      cy.get('mat-slide-toggle#includeSymbols3 button').click();
+      cy.get('button[id="saveSecretGenerator3"]').click();
+      cy.wait(1000);
+      cy.get('input[id="length3"]').should('have.value', '6');
+      cy.get('input[id="expiry3"]').should('have.value', '10');
+      cy.get('mat-slide-toggle#includeLowerLetters3 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters3 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits3 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols3 button').should('have.attr', 'aria-checked', 'true');
+    });
+
+    it(`Password Reset should update settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.wait(1000);
+      cy.get('input[id="expiry4"]').clear().type('5');
+      cy.get('mat-slide-toggle#includeDigits4 button').click();
+      cy.get('button[id="saveSecretGenerator4"]').click();
+      cy.wait(1000);
+      cy.get('input[id="length4"]').should('have.value', '6');
+      cy.get('input[id="expiry4"]').should('have.value', '5');
+      cy.get('mat-slide-toggle#includeLowerLetters4 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters4 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits4 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeSymbols4 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`Passwordless Initialization should update settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.wait(1000);
+      cy.get('input[id="length5"]').clear().type('64');
+      cy.get('mat-slide-toggle#includeDigits5 button').click();
+      cy.get('button[id="saveSecretGenerator5"]').click();
+      cy.wait(1000);
+      cy.get('input[id="length5"]').should('have.value', '64');
+      cy.get('input[id="expiry5"]').should('have.value', '60');
+      cy.get('mat-slide-toggle#includeLowerLetters5 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeUpperLetters5 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeDigits5 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeSymbols5 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`App Secret should update settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.wait(1000);
+      cy.get('input[id="length6"]').clear().type('32');
+      cy.get('input[id="expiry6"]').clear().type('120');
+      cy.get('mat-slide-toggle#includeUpperLetters6 button').click();
+      cy.get('button[id="saveSecretGenerator6"]').click();
+      cy.wait(1000);
+      cy.get('input[id="length6"]').should('have.value', '32');
+      cy.get('input[id="expiry6"]').should('have.value', '120');
+      cy.get('mat-slide-toggle#includeLowerLetters6 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeUpperLetters6 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeDigits6 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols6 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`One Time Password (OTP) - SMS should update settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.wait(1000);
+      cy.get('input[id="expiry7"]').clear().type('120');
+      cy.get('mat-slide-toggle#includeLowerLetters7 button').click();
+      cy.get('button[id="saveSecretGenerator7"]').click();
+      cy.wait(1000);
+      cy.get('input[id="length7"]').should('have.value', '8');
+      cy.get('input[id="expiry7"]').should('have.value', '120');
+      cy.get('mat-slide-toggle#includeLowerLetters7 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeUpperLetters7 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeDigits7 button').should('have.attr', 'aria-checked', 'true');
+      cy.get('mat-slide-toggle#includeSymbols7 button').should('have.attr', 'aria-checked', 'false');
+    });
+
+    it(`One Time Password (OTP) should update settings`, () => {
+      cy.visit(secretGeneratorSettingsPath);
+      cy.wait(1000);
+      cy.get('input[id="length8"]').clear().type('12');
+      cy.get('input[id="expiry8"]').clear().type('90');
+      cy.get('mat-slide-toggle#includeDigits8 button').click();
+      cy.get('mat-slide-toggle#includeSymbols8 button').click();
+      cy.get('button[id="saveSecretGenerator8"]').click();
+      cy.wait(1000);
+      cy.get('input[id="length8"]').should('have.value', '12');
+      cy.get('input[id="expiry8"]').should('have.value', '90');
+      cy.get('mat-slide-toggle#includeLowerLetters8 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeUpperLetters8 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeDigits8 button').should('have.attr', 'aria-checked', 'false');
+      cy.get('mat-slide-toggle#includeSymbols8 button').should('have.attr', 'aria-checked', 'true');
+    });
+  });
+});