@c8y/login 1023.53.0 → 1023.57.0

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/login",
-  "version": "1023.53.0",
+  "version": "1023.57.0",
   "description": "This package is used to scaffold a login application for Cumulocity IoT.",
   "dependencies": {
-    "@c8y/style": "1023.53.0",
-    "@c8y/ngx-components": "1023.53.0",
-    "@c8y/client": "1023.53.0",
-    "@c8y/bootstrap": "1023.53.0",
+    "@c8y/style": "1023.57.0",
+    "@c8y/ngx-components": "1023.57.0",
+    "@c8y/client": "1023.57.0",
+    "@c8y/bootstrap": "1023.57.0",
     "@angular/cdk": "^20.2.14",
     "monaco-editor": "~0.53.0",
     "ngx-bootstrap": "20.0.2",
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1023.53.0",
-    "@c8y/devkit": "1023.53.0"
+    "@c8y/options": "1023.57.0",
+    "@c8y/devkit": "1023.57.0"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

package/src/app/login/change-password/change-password.component.html

@@ -1,34 +1,49 @@
-<form class="loginForm" (ngSubmit)="changePassword()" #changePasswordForm="ngForm" novalidate>
-  <div class="legend form-block center" translate>Change password</div>
+<form
+  class="loginForm"
+  (ngSubmit)="changePassword()"
+  #changePasswordForm="ngForm"
+  novalidate
+>
+  <div
+    class="legend form-block center"
+    translate
+  >
+    Change password
+  </div>
 
-  <c8y-form-group class="tenantField" id="tenantField" *ngIf="loginService.showTenant()">
-    <label translate>Tenant ID</label>
-    <input
-      [(ngModel)]="model.tenantId"
-      #tenantId="ngModel"
-      type="text"
-      name="tenantId"
-      autocapitalize="off"
-      autocorrect="off"
-      class="form-control"
-      placeholder="{{ 'Tenant ID' | translate }}"
-      required
-    />
-  </c8y-form-group>
+  @if (loginService.showTenant()) {
+    <c8y-form-group
+      class="tenantField"
+      id="tenantField"
+    >
+      <label translate>Tenant ID</label>
+      <input
+        class="form-control"
+        placeholder="{{ 'Tenant ID' | translate }}"
+        name="tenantId"
+        type="text"
+        required
+        [(ngModel)]="model.tenantId"
+        #tenantId="ngModel"
+        autocapitalize="off"
+        autocorrect="off"
+      />
+    </c8y-form-group>
+  }
 
   <c8y-form-group>
     <label translate>Email address</label>
     <input
+      class="form-control"
+      placeholder="{{ 'Email address' | translate }}"
+      name="email"
+      type="text"
+      required
       [(ngModel)]="model.email"
       #email="ngModel"
-      type="text"
-      name="email"
       autocapitalize="off"
       autocorrect="off"
-      class="form-control"
-      placeholder="{{ 'Email address' | translate }}"
       email
-      required
       [readonly]="emailReadOnly"
     />
   </c8y-form-group>
@@ -38,21 +53,23 @@
       <c8y-form-group>
         <label translate>New password</label>
         <input
-          [(ngModel)]="model.newPassword"
-          #newPassword="ngModel"
-          type="password"
-          name="newPassword"
           class="form-control"
           placeholder="{{ 'New password' | translate }}"
-          [pattern]="passwordPattern"
+          name="newPassword"
+          type="password"
           autocomplete="new-password"
-          [passwordStrengthEnforced]="passwordStrengthEnforced"
           required
+          [(ngModel)]="model.newPassword"
+          #newPassword="ngModel"
+          c8yPasswordValidation
+          [passwordStrengthEnforced]="passwordStrengthEnforced"
+          [minLength]="effectiveMinLength"
+          (input)="newPasswordConfirm.control.updateValueAndValidity()"
         />
         <c8y-messages>
           <c8y-message
-            name="pattern"
-            [text]="loginService.ERROR_MESSAGES.pattern_newPassword"
+            name="passwordStrengthChecklist"
+            [text]="'Password is not strong enough, check the requirements below.' | translate"
           ></c8y-message>
         </c8y-messages>
       </c8y-form-group>
@@ -60,15 +77,15 @@
       <c8y-form-group>
         <label translate>Confirm password</label>
         <input
-          [(ngModel)]="model.newPasswordConfirm"
-          #newPasswordConfirm="ngModel"
-          type="password"
-          name="newPasswordConfirm"
           class="form-control"
           placeholder="{{ 'Confirm password' | translate }}"
-          passwordConfirm="newPassword"
+          name="newPasswordConfirm"
+          type="password"
           autocomplete="new-password"
           required
+          [(ngModel)]="model.newPasswordConfirm"
+          #newPasswordConfirm="ngModel"
+          passwordConfirm="newPassword"
         />
         <c8y-messages>
           <c8y-message
@@ -82,15 +99,16 @@
       <c8y-password-check-list
         [password]="model.newPassword"
         [strengthEnforced]="passwordStrengthEnforced"
+        (onRequirementsFulfilled)="updateValidity($event)"
       ></c8y-password-check-list>
     </div>
   </div>
 
   <button
+    class="btn btn-primary btn-lg btn-block form-group"
     title="{{ 'Set password' | translate }}"
-    [disabled]="!changePasswordForm.form.valid || isLoading"
     type="submit"
-    class="btn btn-primary btn-lg btn-block form-group"
+    [disabled]="!changePasswordForm.form.valid || isLoading"
   >
     {{ 'Set password' | translate }}
   </button>

package/src/app/login/change-password/change-password.component.ts

@@ -1,23 +1,23 @@
-import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
-import { LoginService } from '../login.service';
-import { IResetPassword, ICredentials, UserService, PasswordStrength } from '@c8y/client';
-import { LoginEvent, LoginViews } from '../login.model';
-import { FormsModule } from '@angular/forms';
-import { NgIf } from '@angular/common';
-import { PasswordStrengthValidatorDirective } from '../password-strength-validator.directive';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { FormsModule, NgModel, ValidatorFn } from '@angular/forms';
+import { ICredentials, IResetPassword, PasswordStrength, UserService } from '@c8y/client';
 import {
+  AlertService,
+  C8yTranslateDirective,
   C8yTranslatePipe,
-  PasswordCheckListComponent,
-  PasswordConfirm,
+  FormGroupComponent,
   MessageDirective,
   MessagesComponent,
-  RequiredInputPlaceholderDirective,
-  FormGroupComponent,
-  C8yTranslateDirective,
-  AlertService,
-  OptionsService
+  OptionsService,
+  PasswordCheckListComponent,
+  PasswordConfirm,
+  PasswordStrengthService,
+  PasswordValidationDirective,
+  PasswordValidationService,
+  RequiredInputPlaceholderDirective
 } from '@c8y/ngx-components';
-import { PasswordStrengthService } from '@c8y/ngx-components';
+import { LoginEvent, LoginViews } from '../login.model';
+import { LoginService } from '../login.service';
 
 @Component({
   selector: 'c8y-change-password',
@@ -27,10 +27,9 @@ import { PasswordStrengthService } from '@c8y/ngx-components';
   imports: [
     FormsModule,
     C8yTranslateDirective,
-    NgIf,
     FormGroupComponent,
     RequiredInputPlaceholderDirective,
-    PasswordStrengthValidatorDirective,
+    PasswordValidationDirective,
     MessagesComponent,
     MessageDirective,
     PasswordConfirm,
@@ -42,8 +41,8 @@ export class ChangePasswordComponent implements OnInit {
   @Input() credentials: ICredentials;
   @Output() onChangeView = new EventEmitter<LoginEvent>();
 
-  passwordPattern = /^[a-zA-Z0-9`~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]{8,32}$/;
   isLoading = false;
+  requirementsFulfilled = false;
   model = {
     tenantId: '',
     email: '',
@@ -53,22 +52,54 @@ export class ChangePasswordComponent implements OnInit {
   emailReadOnly = false;
   passwordStrengthEnforced = false;
 
+  private readonly DEFAULT_MIN_LENGTH = 8;
+  private minLength: number;
   private TOKEN_PARAM = 'token';
   private EMAIL_PARAM = 'email';
 
+  get effectiveMinLength(): number {
+    return this.passwordStrengthEnforced
+      ? this.minLength || this.DEFAULT_MIN_LENGTH
+      : this.DEFAULT_MIN_LENGTH;
+  }
+
+  newPasswordModel: NgModel;
+
+  @ViewChild('newPassword')
+  set _newPasswordModel(ngModel: NgModel) {
+    if (ngModel) {
+      this.newPasswordModel = ngModel;
+      ngModel.control.addValidators(this.passwordChecklistValidator);
+    }
+  }
+
   constructor(
     public loginService: LoginService,
     private passwordStrength: PasswordStrengthService,
     private users: UserService,
     private options: OptionsService,
-    private alert: AlertService
+    private alert: AlertService,
+    private passwordValidation: PasswordValidationService
   ) {}
 
+  // Keep form invalid when strength is enforced and checklist requirements aren't met.
+  passwordChecklistValidator: ValidatorFn = control =>
+    !this.passwordStrengthEnforced || this.requirementsFulfilled || !control.value
+      ? null
+      : { passwordStrengthChecklist: true };
+
   async ngOnInit() {
     this.model.tenantId = this.loginService.getTenant();
     this.model.email = this.options.get(this.EMAIL_PARAM, '');
     this.emailReadOnly = !!this.model.email;
-    this.passwordStrengthEnforced = await this.passwordStrength.getPasswordStrengthEnforced();
+
+    const [passwordStrengthEnforced, greenMinLength] = await Promise.all([
+      this.passwordStrength.getPasswordStrengthEnforced(),
+      this.passwordStrength.getGreenMinLength()
+    ]);
+
+    this.passwordStrengthEnforced = passwordStrengthEnforced;
+    this.minLength = greenMinLength;
   }
 
   async changePassword() {
@@ -98,4 +129,35 @@ export class ChangePasswordComponent implements OnInit {
       this.isLoading = false;
     }
   }
+
+  updateValidity(requirementsFulfilled: boolean) {
+    this.requirementsFulfilled = requirementsFulfilled;
+
+    if (!this.newPasswordModel) {
+      return;
+    }
+
+    this.newPasswordModel.control.updateValueAndValidity();
+
+    const errors = this.newPasswordModel.control.errors;
+    if (!errors || !this.passwordStrengthEnforced) {
+      return;
+    }
+
+    const password = this.model.newPassword || '';
+    const hasInvalidChars = password && !this.passwordValidation.hasValidCharsOnly(password);
+
+    const filteredErrors = { ...errors };
+    if (!this.requirementsFulfilled && !hasInvalidChars) {
+      // Checklist not fulfilled AND no invalid chars → show checklist error, hide pattern errors
+      delete filteredErrors['password'];
+      delete filteredErrors['passwordSimple'];
+    } else if (filteredErrors['password'] || filteredErrors['passwordSimple']) {
+      // Pattern error (invalid chars or checklist fulfilled) → show pattern error, hide checklist
+      delete filteredErrors['passwordStrengthChecklist'];
+    }
+
+    const remaining = Object.keys(filteredErrors).length ? filteredErrors : null;
+    this.newPasswordModel.control.setErrors(remaining);
+  }
 }

package/src/app/login/login.service.ts

@@ -53,6 +53,8 @@ export class LoginService extends SimplifiedAuthService {
   ] as const;
 
   private readonly IDP_HINT_QUERY_PARAM = 'idp_hint';
+  private readonly PASSWORD_MAX_LENGTH = 32;
+  private readonly PASSWORD_ALLOWED_SYMBOLS = '`~!@#$%^&*()_|+-=?;:\'",.<>{}[]\\/';
   private translateService = inject(TranslateService);
   ERROR_MESSAGES = {
     minlength: gettext('Password must have at least 8 characters and no more than 32.'),
@@ -68,11 +70,8 @@ export class LoginService extends SimplifiedAuthService {
       'Password reset link expired. Please enter your email address to receive a new one.'
     ),
     tfa_pin_invalid: gettext('The code you entered is invalid. Please try again.'),
-    pattern_newPassword: this.translateService.instant(
-      gettext(
-        'Password must have at least 8 characters and no more than 32 and can only contain letters, numbers and following symbols: {{ symbols }}'
-      ),
-      { symbols: '`~!@#$%^&*()_|+-=?;:\'",.<>{}[]\\/' }
+    pattern_newPassword: gettext(
+      'Password must have at least {{ minLength }} characters and no more than {{ maxLength }} and can only contain letters, numbers and following symbols: {{ symbols }}'
     ),
     internationalPhoneNumber: gettext(
       'Must be a valid phone number (only digits, spaces, slashes ("/"), dashes ("-"), and plus ("+") allowed, for example: +49 9 876 543 210).'
@@ -125,6 +124,29 @@ export class LoginService extends SimplifiedAuthService {
       this.tenantUiService.getOauth2Option(loginOptions) || ({} as ITenantLoginOption);
   }
 
+  /**
+   * Returns the password pattern error message with the correct min length.
+   * @param minLength The minimum password length from tenant configuration.
+   * @returns The translated error message.
+   */
+  getPasswordPatternErrorMessage(minLength: number): string {
+    return this.translateService.instant(this.ERROR_MESSAGES.pattern_newPassword, {
+      minLength,
+      maxLength: this.PASSWORD_MAX_LENGTH,
+      symbols: this.PASSWORD_ALLOWED_SYMBOLS
+    });
+  }
+
+  /**
+   * Builds a regex pattern for password validation with the given min length.
+   * @param minLength The minimum password length from tenant configuration.
+   * @returns A RegExp for password validation.
+   */
+  buildPasswordPattern(minLength: number): RegExp {
+    const allowedChars = 'a-zA-Z0-9`~!@#$%^&*()_|+\\-=?;:\'",.<>{}[\\]\\\\/';
+    return new RegExp(`^[${allowedChars}]{${minLength},${this.PASSWORD_MAX_LENGTH}}$`);
+  }
+
   redirectToOauth() {
     const idpHint = this.getIdpHintFromQueryParams();
     const { initRequest, flowControlledByUI } = this.oauthOptions;