feat(console): set initial password on user create (#2920)

* fix: cnsl verified mail desc

* add initial password on user create

* change text

console/src/app/modules/password-complexity-view/password-complexity-view.component.html

@@ -1,42 +1,42 @@
 <div class="validation-col" *ngIf="this.policy">
-    <div class="val" *ngIf="this.policy.minLength">
+  <div class="val" *ngIf="this.policy.minLength">
 
-        <i *ngIf="password?.value?.length === 0; else showSpinner" class="las la-times red"></i>
+    <i *ngIf="password?.value?.length === 0; else showSpinner" class="las la-times red"></i>
 
-        <ng-template #showSpinner>
+    <ng-template #showSpinner>
-            <div *ngIf="(password?.errors?.minlength || password?.value?.length === 0) as currentError; else trueminlength"
+      <div *ngIf="(password?.errors?.minlength || password?.value?.length === 0) as currentError; else trueminlength"
-                class="sp-wrapper">
+        class="complexity-sp-wrapper">
-                <mat-progress-spinner class="spinner" diameter="20" [color]="currentError ? 'warn': 'valid'"
+        <mat-progress-spinner class="complexity-spinner" diameter="20" [color]="currentError ? 'warn': 'valid'"
-                    mode="determinate" [value]="(password?.value?.length / policy.minLength) * 100">
+          mode="determinate" [value]="(password?.value?.length / policy.minLength) * 100">
-                </mat-progress-spinner>
+        </mat-progress-spinner>
-            </div>
+      </div>
-        </ng-template>
+    </ng-template>
-        <ng-template #trueminlength>
+    <ng-template #trueminlength>
-            <i class="las la-check green"></i>
+      <i class="las la-check green"></i>
-        </ng-template>
+    </ng-template>
 
-        <span>{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: {value: policy?.minLength} }}
+    <span>{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: {value: policy?.minLength} }}
-            ({{password?.value?.length}}/{{ policy.minLength}})
+      ({{password?.value?.length}}/{{ policy.minLength}})
-        </span>
+    </span>
-    </div>
+  </div>
-    <div class="val" *ngIf="this.policy.hasSymbol">
+  <div class="val" *ngIf="this.policy.hasSymbol">
-        <i *ngIf="password?.errors?.symbolValidator" class="las la-times red"></i>
+    <i *ngIf="password?.errors?.symbolValidator" class="las la-times red"></i>
-        <i *ngIf="!password?.errors?.symbolValidator" class="las la-check green"></i>
+    <i *ngIf="!password?.errors?.symbolValidator" class="las la-check green"></i>
-        <span> {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}</span>
+    <span> {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}</span>
-    </div>
+  </div>
-    <div class="val" *ngIf="this.policy.hasNumber">
+  <div class="val" *ngIf="this.policy.hasNumber">
-        <i *ngIf="password?.errors?.numberValidator" class="las la-times red"></i>
+    <i *ngIf="password?.errors?.numberValidator" class="las la-times red"></i>
-        <i *ngIf="!password?.errors?.numberValidator" class="las la-check green"></i>
+    <i *ngIf="!password?.errors?.numberValidator" class="las la-check green"></i>
-        <span> {{ 'USER.VALIDATION.NUMBERERROR' | translate }}</span>
+    <span> {{ 'USER.VALIDATION.NUMBERERROR' | translate }}</span>
-    </div>
+  </div>
-    <div class="val" *ngIf="this.policy.hasUppercase">
+  <div class="val" *ngIf="this.policy.hasUppercase">
-        <i *ngIf="password?.errors?.upperCaseValidator" class="las la-times red"></i>
+    <i *ngIf="password?.errors?.upperCaseValidator" class="las la-times red"></i>
-        <i *ngIf="!password?.errors?.upperCaseValidator" class="las la-check green"></i>
+    <i *ngIf="!password?.errors?.upperCaseValidator" class="las la-check green"></i>
-        <span> {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}</span>
+    <span> {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}</span>
-    </div>
+  </div>
-    <div class="val" *ngIf="this.policy.hasLowercase">
+  <div class="val" *ngIf="this.policy.hasLowercase">
-        <i *ngIf="password?.errors?.lowerCaseValidator" class="las la-times red"></i>
+    <i *ngIf="password?.errors?.lowerCaseValidator" class="las la-times red"></i>
-        <i *ngIf="!password?.errors?.lowerCaseValidator" class="las la-check green"></i>
+    <i *ngIf="!password?.errors?.lowerCaseValidator" class="las la-check green"></i>
-        <span>{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}</span>
+    <span>{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}</span>
-    </div>
+  </div>
 </div>

console/src/app/modules/password-complexity-view/password-complexity-view.component.scss

@@ -1,4 +1,3 @@
-
 .validation-col {
   display: flex;
   flex-wrap: wrap;
@@ -6,7 +5,7 @@
   width: 100%;
 
   &.between {
-    margin: 0 .5rem;
+    margin: 0 0.5rem;
   }
 
   .val {
@@ -20,20 +19,20 @@
       color: var(--grey);
     }
 
-    .sp-wrapper {
+    .complexity-sp-wrapper {
       height: 20px;
       width: 20px;
       margin-right: 1rem;
 
       i {
-        font-size: .9rem;
+        font-size: 0.9rem;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .spinner[color='valid'] {
+      .complexity-spinner[color='valid'] {
         color: #56a392;
       }
     }

console/src/app/pages/users/user-create/user-create.component.html

@@ -53,14 +53,46 @@
       </cnsl-form-field>
 
       <div class="email-is-verified">
-        <mat-checkbox class="verified-checkbox" formControlName="isVerified">
+        <mat-checkbox class="block-checkbox" formControlName="isVerified">
           {{'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate}}
         </mat-checkbox>
+        <mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{standalone: true}">
+          {{'ORG.PAGES.USEPASSWORD' | translate}}
+        </mat-checkbox>
         <cnsl-info-section class="full-width desc">
-          <span>{{'USER.LOGINMETHODS.EMAIL.ISVERIFIEDDESC' | translate}}</span>
+          <span>{{'USER.CREATE.INITMAILDESCRIPTION' | translate}}</span>
         </cnsl-info-section>
       </div>
 
+      <div class="pwd-section" *ngIf="usePassword && pwdForm">
+        <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
+        </cnsl-password-complexity-view>
+
+        <form [formGroup]="pwdForm" class="user-create-pwd-form">
+          <cnsl-form-field class="pwd-field" *ngIf="password" appearance="outline">
+            <cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
+            <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
+
+            <span cnslError *ngIf="password?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+
+          </cnsl-form-field>
+          <cnsl-form-field class="pwd-field" *ngIf="confirmPassword" appearance="outline">
+            <cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
+            <input cnslInput autocomplete="off" name="confirmPassword" formControlName="confirmPassword"
+              type="password" />
+
+            <span cnslError *ngIf="confirmPassword?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+            <span cnslError *ngIf="confirmPassword?.errors?.notequal">
+              {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
+            </span>
+          </cnsl-form-field>
+        </form>
+      </div>
+
       <p class="section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
 
       <cnsl-form-field class="formfield">
@@ -97,7 +129,8 @@
       </cnsl-form-field>
     </div>
     <div class="btn-container">
-      <button color="primary" [disabled]="userForm.invalid" type="submit" mat-raised-button>{{ 'ACTIONS.CREATE' |
+      <button color="primary" [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)" type="submit"
+        mat-raised-button>{{ 'ACTIONS.CREATE' |
         translate }}</button>
     </div>
   </form>

console/src/app/pages/users/user-create/user-create.component.scss

@@ -33,9 +33,29 @@
     margin: 0 0.5rem;
   }
 
-  .email-is-verified {
+  .email-is-verified,
+  .use-password-block {
     margin: 0 0.5rem;
     flex-basis: 100%;
     margin-top: 1.5rem;
+
+    .block-checkbox {
+      display: block;
+      margin: 0.25rem 0;
+    }
+  }
+}
+
+.pwd-section {
+  margin: 0 0.5rem;
+
+  .section {
+    padding: 0.5rem 0;
+  }
+
+  .user-create-pwd-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1rem;
   }
 }

console/src/app/pages/users/user-create/user-create.component.ts

@@ -1,15 +1,38 @@
 import { ChangeDetectorRef, Component, OnDestroy, ViewChild } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import parsePhoneNumber from 'libphonenumber-js';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { AddHumanUserRequest } from 'src/app/proto/generated/zitadel/management_pb';
 import { Domain } from 'src/app/proto/generated/zitadel/org_pb';
+import { PasswordComplexityPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
 import { Gender } from 'src/app/proto/generated/zitadel/user_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from '../../validators';
+
+function passwordConfirmValidator(c: AbstractControl): any {
+  if (!c.parent || !c) {
+    return;
+  }
+  const pwd = c.parent.get('password');
+  const cpwd = c.parent.get('confirmPassword');
+
+  if (!pwd || !cpwd) {
+    return;
+  }
+  if (pwd.value !== cpwd.value) {
+    return {
+      invalid: true,
+      notequal: {
+        valid: false,
+      },
+    };
+  }
+}
+
 @Component({
   selector: 'cnsl-user-create',
   templateUrl: './user-create.component.html',
@@ -20,6 +43,8 @@ export class UserCreateComponent implements OnDestroy {
   public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
   public languages: string[] = ['de', 'en'];
   public userForm!: FormGroup;
+  public pwdForm!: FormGroup;
+
   public envSuffixLabel: string = '';
   private destroyed$: Subject<void> = new Subject();
 
@@ -28,6 +53,8 @@ export class UserCreateComponent implements OnDestroy {
 
   @ViewChild('suffix') public suffix!: any;
   private primaryDomain!: Domain.AsObject;
+  public usePassword: boolean = false;
+  public policy!: PasswordComplexityPolicy.AsObject;
 
   constructor(
     private router: Router,
@@ -79,6 +106,37 @@ export class UserCreateComponent implements OnDestroy {
       isVerified: [false, []],
     });
 
+    const validators: Validators[] = [Validators.required];
+
+    this.mgmtService.getPasswordComplexityPolicy().then((data) => {
+      if (data.policy) {
+        this.policy = data.policy;
+
+        if (this.policy.minLength) {
+          validators.push(Validators.minLength(this.policy.minLength));
+        }
+        if (this.policy.hasLowercase) {
+          validators.push(lowerCaseValidator);
+        }
+        if (this.policy.hasUppercase) {
+          validators.push(upperCaseValidator);
+        }
+        if (this.policy.hasNumber) {
+          validators.push(numberValidator);
+        }
+        if (this.policy.hasSymbol) {
+          validators.push(symbolValidator);
+        }
+        const pwdValidators = [...validators] as ValidatorFn[];
+        const confirmPwdValidators = [...validators, passwordConfirmValidator] as ValidatorFn[];
+
+        this.pwdForm = this.fb.group({
+          password: ['', pwdValidators],
+          confirmPassword: ['', confirmPwdValidators],
+        });
+      }
+    });
+
     this.userForm.controls['phone'].valueChanges.pipe(takeUntil(this.destroyed$), debounceTime(300)).subscribe((value) => {
       const phoneNumber = parsePhoneNumber(value ?? '', 'CH');
       if (phoneNumber) {
@@ -112,6 +170,10 @@ export class UserCreateComponent implements OnDestroy {
     emailreq.setIsEmailVerified(this.isVerified?.value);
     humanReq.setEmail(emailreq);
 
+    if (this.usePassword && this.password?.value) {
+      humanReq.setInitialPassword(this.password.value);
+    }
+
     if (this.phone && this.phone.value) {
       humanReq.setPhone(new AddHumanUserRequest.Phone().setPhone(this.phone.value));
     }
@@ -162,6 +224,12 @@ export class UserCreateComponent implements OnDestroy {
     return this.userForm.get('phone');
   }
 
+  public get password(): AbstractControl | null {
+    return this.pwdForm.get('password');
+  }
+  public get confirmPassword(): AbstractControl | null {
+    return this.pwdForm.get('confirmPassword');
+  }
   private envSuffix(): string {
     if (this.userLoginMustBeDomain && this.primaryDomain?.domainName) {
       return `@${this.primaryDomain.domainName}`;

console/src/app/pages/users/user-create/user-create.module.ts

@@ -13,6 +13,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
 
 import { UserCreateRoutingModule } from './user-create-routing.module';
 import { UserCreateComponent } from './user-create.component';
@@ -29,6 +30,7 @@ import { UserCreateComponent } from './user-create.component';
     MatIconModule,
     MatProgressSpinnerModule,
     MatProgressBarModule,
+    PasswordComplexityViewModule,
     MatCheckboxModule,
     MatTooltipModule,
     TranslateModule,

console/src/assets/i18n/de.json

@@ -325,7 +325,8 @@
       "GENDERLANGSECTION": "Geschlecht und Sprache",
       "PHONESECTION": "Telefonnummer",
       "PASSWORDSECTION": "Setze ein initiales Passwort.",
-      "ADDRESSANDPHONESECTION": "Telefonnummer"
+      "ADDRESSANDPHONESECTION": "Telefonnummer",
+      "INITMAILDESCRIPTION": "Wenn beide Optionen ausgewählt sind, wird keine E-Mail zur Initialisierung gesendet. Wenn nur eine der Optionen ausgewählt ist, wird eine E-Mail zur Aufforderung der Bereitstellung oder Verifikation der Daten gesendet."
     },
     "CODEDIALOG": {
       "TITLE": "Telefonnummer verifizieren",
@@ -395,12 +396,14 @@
     },
     "PASSWORD": {
       "TITLE": "Passwort",
-      "DESCRIPTION": "Gebe das neue Password unter Einhaltung der Richtlinie für die Komplexität ein.",
+      "DESCRIPTION": "Gebe das neue PassworT unter Einhaltung der Richtlinie für die Komplexität ein.",
       "OLD": "Aktuelles Passwort",
       "NEW": "Neues Passwort",
       "CONFIRM": "Neues Passwort wiederholen",
+      "NEWINITIAL": "Passwort",
+      "CONFIRMINITIAL": "PassworT wiederholen",
       "RESET": "Passwort zurücksetzen",
-      "SET": "Password neu setzen",
+      "SET": "PassworT neu setzen",
       "RESENDNOTIFICATION": "Link für das Zurücksetzen des Passworts senden",
       "REQUIRED": "Bitte prüfe, dass alle notwendigen Felder ausgefüllt sind.",
       "MINLENGTHERROR": "Das Passwort muss mindestens {{value}} Zeichen lang sein.",
@@ -420,7 +423,7 @@
         "TITLE": "E-Mail",
         "VALID": "Validiert",
         "ISVERIFIED": "Email Verifiziert",
-        "ISVERIFIEDDESC": "Wenn die Email als verifiziert angegeben wird, wird keine Initialisierungsmail versendet.",
+        "ISVERIFIEDDESC": "Wenn die Email als verifiziert angegeben wird, wird keine Verifikationsmail an den Benutzer versendet.",
         "RESEND": "Verifikationsmail erneut senden",
         "EDITTITLE": "Email ändern",
         "EDITDESC": "Geben Sie die neue Email in dem darunterliegenden Feld ein!"
@@ -665,7 +668,8 @@
       "SELECTORGTOOLTIP": "Diese Organisation auswählen",
       "PRIMARYDOMAIN": "Primäre Domain",
       "STATE": "Status",
-      "USEPASSWORD": "Initiales Password setzen"
+      "USEPASSWORD": "Initiales Password setzen",
+      "USEPASSWORDDESC": "Der Nutzer muss das Password bei der Initalisierung nicht setzen."
     },
     "DOMAINS": {
       "NEW": "Domain hinzufügen",

console/src/assets/i18n/en.json

@@ -325,7 +325,8 @@
       "GENDERLANGSECTION": "Gender and Language",
       "PHONESECTION": "Phonenumbers",
       "PASSWORDSECTION": "Initial Password",
-      "ADDRESSANDPHONESECTION": "Phonenumber"
+      "ADDRESSANDPHONESECTION": "Phonenumber",
+      "INITMAILDESCRIPTION": "If both options are selected, no email for initialization will be sent. If only one of the options is selected, a mail to provide / verify the data will be sent."
     },
     "CODEDIALOG": {
       "TITLE": "Verify Phone Number",
@@ -399,6 +400,8 @@
       "OLD": "Current Password",
       "NEW": "New Password",
       "CONFIRM": "Confirm New Password",
+      "NEWINITIAL": "Password",
+      "CONFIRMINITIAL": "Confirm Password",
       "RESET": "Reset Current Password",
       "SET": "Set New Password",
       "RESENDNOTIFICATION": "Resend Password Reset Link",
@@ -420,7 +423,7 @@
         "TITLE": "E-mail",
         "VALID": "validated",
         "ISVERIFIED": "Email Verified",
-        "ISVERIFIEDDESC": "If the email is indicated as verified, no initialization email will be sent.",
+        "ISVERIFIEDDESC": "If the email is indicated as verified, no email verification request will be made.",
         "RESEND": "Resend Verification E-mail",
         "EDITTITLE": "Change Email",
         "EDITDESC": "Enter the new email in the field below."
@@ -665,7 +668,8 @@
       "SELECTORGTOOLTIP": "Select this organisation.",
       "PRIMARYDOMAIN": "Primary Domain",
       "STATE": "State",
-      "USEPASSWORD": "Set Initial Password"
+      "USEPASSWORD": "Set Initial Password",
+      "USEPASSWORDDESC": "The user does not have to set the password during initialization."
     },
     "DOMAINS": {
       "NEW": "Add Domain",

console/src/assets/i18n/it.json

@@ -325,7 +325,8 @@
       "GENDERLANGSECTION": "Genere e linguaggio",
       "PHONESECTION": "Phonenumbers",
       "PASSWORDSECTION": "Password iniziale",
-      "ADDRESSANDPHONESECTION": "Numero di telefono"
+      "ADDRESSANDPHONESECTION": "Numero di telefono",
+      "INITMAILDESCRIPTION": "Se vengono selezionate entrambe le opzioni, non verrà inviata alcuna e-mail per l'inizializzazione. Se solo una delle opzioni viene selezionata, verrà inviata una mail per fornire/verificare i dati."
     },
     "CODEDIALOG": {
       "TITLE": "Verificare il numero di telefono",
@@ -399,6 +400,8 @@
       "OLD": "Password attuale",
       "NEW": "Nuova password",
       "CONFIRM": "Conferma la nuova password",
+      "NEWINITIAL": "Password",
+      "CONFIRMINITIAL": "Conferma password",
       "RESET": "Ripristina la password attuale",
       "SET": "Imposta nuova password",
       "RESENDNOTIFICATION": "Reinvia il link per la reimpostazione della password",
@@ -420,7 +423,7 @@
         "TITLE": "E-mail",
         "VALID": "convalidato",
         "ISVERIFIED": "Email Verificato",
-        "ISVERIFIEDDESC": "Se l'email viene indicata come verificata, non verrà inviata alcuna email di inizializzazione.",
+        "ISVERIFIEDDESC": "Se l'email viene indicata come verificata, non verrà inviata alcuna email di verificazione.",
         "RESEND": "Invia di nuovo l'e-mail di verifica",
         "EDITTITLE": "Cambiare l'e-mail",
         "EDITDESC": "Inserisci la nuova email nel campo sottostante."
@@ -665,7 +668,8 @@
       "SELECTORGTOOLTIP": "Seleziona questa organizzazione.",
       "PRIMARYDOMAIN": "Dominio primario",
       "STATE": "Stato",
-      "USEPASSWORD": "Imposta la password iniziale"
+      "USEPASSWORD": "Imposta la password iniziale",
+      "USEPASSWORDDESC": "L'utente non deve impostare la password durante l'inizializzazione."
     },
     "DOMAINS": {
       "NEW": "Aggiungi dominio",