Merge pull request #7010 from microting/copilot/fix-7009

Implement @angular-material-extensions/password-strength for password security validation

Author: renemadsen

INTEGRATION_STEPS.md

@@ -0,0 +1,55 @@
+# Angular Material Extensions Password Strength Integration
+
+## ✅ Integration Complete
+
+The password strength meter has been successfully integrated with the following configuration:
+
+### Configuration Applied
+- `enableLengthRule`: true
+- `enableLowerCaseLetterRule`: true
+- `enableUpperCaseLetterRule`: true
+- `enableDigitRule`: true
+- `enableSpecialCharRule`: false *(disabled per requirements)*
+- `min`: 8 *(minimum password length)*
+- `max`: 50
+
+### Components Updated
+1. ✅ **User Set Password Modal** (`user-set-password.component.*`) - Admin password setting
+2. ✅ **Change Password** (`change-password.component.*`) - User profile password change  
+3. ✅ **Restore Password Confirmation** (`restore-password-confirmation.component.*`) - Password reset flow
+
+### Implementation Details
+- ✅ Package installed: `@angular-material-extensions/password-strength@16.0.0`
+- ✅ Module imports activated in `account-management.module.ts` and `auth.module.ts`
+- ✅ HTML templates updated with password strength meters
+- ✅ TypeScript methods implemented for strength tracking
+- ✅ Form validation updated to require minimum 8 characters
+- ✅ Special character requirements disabled as requested
+
+### Features Implemented
+- **Real-time password strength visualization**: Color-coded strength indicators
+- **Configurable validation rules**: Length, lowercase, uppercase, digits (special chars disabled)
+- **Strength scoring**: 0-100 scale with event handling  
+- **Form validation integration**: Weak password validation (< 40 strength)
+- **Material Design integration**: Seamless visual integration
+
+## Testing Recommendations
+1. Test each password field for visual feedback
+2. Verify strength scoring works correctly (0-100 scale)
+3. Test form validation integration with weak passwords
+4. Ensure all password requirements are enforced except special characters
+
+## Example Usage
+```html
+<mat-password-strength 
+  [password]="form.get('newPassword')?.value || ''"
+  [enableLengthRule]="true"
+  [enableLowerCaseLetterRule]="true" 
+  [enableUpperCaseLetterRule]="true"
+  [enableDigitRule]="true"
+  [enableSpecialCharRule]="false"
+  [min]="8"
+  [max]="50"
+  (onStrengthChanged)="onPasswordStrengthChanged($event)">
+</mat-password-strength>
+```

eform-client/package.json

@@ -71,6 +71,7 @@
     "@angular/platform-browser": "20.1.2",
     "@angular/platform-browser-dynamic": "20.1.2",
     "@angular/router": "20.1.2",
+    "@angular-material-extensions/password-strength": "^16.0.0",
     "@ng-matero/extensions": "20.2.1",
     "@ngrx/effects": "19.2.1",
     "@ngrx/entity": "19.2.1",

eform-client/src/app/modules/account-management/account-management.module.ts

@@ -23,6 +23,7 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatInputModule} from '@angular/material/input';
 import {MatIconModule} from '@angular/material/icon';
 import {FileUploadModule} from "ng2-file-upload";
+import {MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
 
 @NgModule({
     imports: [
@@ -44,6 +45,7 @@ import {FileUploadModule} from "ng2-file-upload";
         MatInputModule,
         MatIconModule,
         FileUploadModule,
+        MatPasswordStrengthModule,
     ],
   declarations: [
     ChangePasswordComponent,

eform-client/src/app/modules/account-management/components/profile/change-password/change-password.component.html

@@ -35,6 +35,20 @@
       autocomplete="new-password"
     />
   </mat-form-field>
+
+  <!-- Password Strength Meter -->
+  <mat-password-strength 
+    [password]="changePasswordForm.get('newPassword')?.value || ''"
+    [enableLengthRule]="true"
+    [enableLowerCaseLetterRule]="true" 
+    [enableUpperCaseLetterRule]="true"
+    [enableDigitRule]="true"
+    [enableSpecialCharRule]="false"
+    [min]="8"
+    [max]="50"
+    (onStrengthChanged)="onPasswordStrengthChanged($event)">
+  </mat-password-strength>
+
   <mat-form-field>
     <mat-label>{{ 'New password confirmation' | translate }}</mat-label>
     <input

eform-client/src/app/modules/account-management/components/profile/change-password/change-password.component.ts

@@ -12,11 +12,12 @@ import { FormBuilder, FormGroup, Validators} from '@angular/forms';
 export class ChangePasswordComponent implements OnInit {
   changePasswordModel: ChangePasswordModel = new ChangePasswordModel();
   changePasswordForm: FormGroup;
+  passwordStrength = 0; // Track password strength score
   constructor(private authService: AuthService, private fb: FormBuilder) {
     this.changePasswordForm = this.fb.group({
-      oldPassword: ['', [Validators.required, Validators.min(8)]],
-      newPassword: ['', [Validators.required, Validators.min(8)]],
-      confirmPassword: ['', [Validators.required, Validators.min(8)/*, this.checkPasswords*/]]
+      oldPassword: ['', [Validators.required, Validators.minLength(8)]],
+      newPassword: ['', [Validators.required, Validators.minLength(8)]],
+      confirmPassword: ['', [Validators.required, Validators.minLength(8)/*, this.checkPasswords*/]]
     });
   }
 
@@ -37,6 +38,20 @@ export class ChangePasswordComponent implements OnInit {
     );
   }
 
+  onPasswordStrengthChanged(strength: number): void {
+    this.passwordStrength = strength;
+    // Optionally add additional validation based on strength
+    const passwordControl = this.changePasswordForm.get('newPassword');
+    if (passwordControl && strength < 40) {
+      passwordControl.setErrors({ ...passwordControl.errors, weakPassword: true });
+    } else if (passwordControl && passwordControl.hasError('weakPassword')) {
+      delete passwordControl.errors.weakPassword;
+      if (Object.keys(passwordControl.errors).length === 0) {
+        passwordControl.setErrors(null);
+      }
+    }
+  }
+
 /*  checkPasswords(group: FormGroup) {
     let pass = group.get('newPassword').value;
     let confirmPass = group.get('confirmPassword').value;

eform-client/src/app/modules/account-management/components/users/user-set-password-modal/user-set-password.component.html

@@ -37,6 +37,20 @@ <h3 mat-dialog-title>{{'Set user password' | translate}}</h3>
       {{newPasswordVisible ? 'visibility_off' : 'visibility'}}
     </mat-icon>
   </mat-form-field>
+
+  <!-- Password Strength Meter -->
+  <mat-password-strength 
+    [password]="setPasswordForm.get('newPassword')?.value || ''"
+    [enableLengthRule]="true"
+    [enableLowerCaseLetterRule]="true" 
+    [enableUpperCaseLetterRule]="true"
+    [enableDigitRule]="true"
+    [enableSpecialCharRule]="false"
+    [min]="8"
+    [max]="50"
+    (onStrengthChanged)="onPasswordStrengthChanged($event)">
+  </mat-password-strength>
+
   <mat-form-field>
     <mat-label>{{ 'New password confirmation' | translate }}</mat-label>
     <input

eform-client/src/app/modules/account-management/components/users/user-set-password-modal/user-set-password.component.ts

@@ -16,13 +16,14 @@ export class UserSetPasswordComponent implements OnInit {
   userPasswordSet: EventEmitter<UserInfoModel> = new EventEmitter<UserInfoModel>();
   newPasswordVisible = false;
   confirmPasswordVisible = false;
+  passwordStrength = 0; // Track password strength score
   constructor(private authService: AuthService,
               private fb: FormBuilder,
               public dialogRef: MatDialogRef<UserSetPasswordComponent>,
     @Inject(MAT_DIALOG_DATA) public selectedUser: UserInfoModel = new UserInfoModel()) {
     this.setPasswordForm = this.fb.group({
-      newPassword: ['', [Validators.minLength(6)]],
-      confirmPassword: ['', [Validators.minLength(6)]]
+      newPassword: ['', [Validators.minLength(8)]],
+      confirmPassword: ['', [Validators.minLength(8)]]
     });
   }
 
@@ -55,4 +56,18 @@ export class UserSetPasswordComponent implements OnInit {
   toggleConfirmPasswordVisibility() {
     this.confirmPasswordVisible = !this.confirmPasswordVisible;
   }
+
+  onPasswordStrengthChanged(strength: number): void {
+    this.passwordStrength = strength;
+    // Optionally add additional validation based on strength
+    const passwordControl = this.setPasswordForm.get('newPassword');
+    if (passwordControl && strength < 40) {
+      passwordControl.setErrors({ ...passwordControl.errors, weakPassword: true });
+    } else if (passwordControl && passwordControl.hasError('weakPassword')) {
+      delete passwordControl.errors.weakPassword;
+      if (Object.keys(passwordControl.errors).length === 0) {
+        passwordControl.setErrors(null);
+      }
+    }
+  }
 }

eform-client/src/app/modules/auth/auth.module.ts

@@ -20,6 +20,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MtxSelectModule} from '@ng-matero/extensions/select';
+import {MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
 
 
 @NgModule({
@@ -36,7 +37,8 @@ import {MtxSelectModule} from '@ng-matero/extensions/select';
     MatIconModule,
     MatButtonModule,
     MatTooltipModule,
-    MtxSelectModule
+    MtxSelectModule,
+    MatPasswordStrengthModule,
   ],
   declarations: [
     LoginComponent,

eform-client/src/app/modules/auth/components/auth/restore-password-confirmation/restore-password-confirmation.component.html

@@ -21,6 +21,20 @@
       <mat-error *ngIf="form.controls['newPassword'].hasError('required')">{{'New Password field is required'| translate}}</mat-error>
       <mat-error *ngIf="form.controls['newPassword'].hasError('minlength')">{{'New Password field must contain at least ' + this.form.controls['newPassword'].errors['minlength'].requiredLength + ' characters.'| translate}}</mat-error>
     </mat-form-field>
+
+    <!-- Password Strength Meter -->
+    <mat-password-strength 
+      [password]="form.get('newPassword')?.value || ''"
+      [enableLengthRule]="true"
+      [enableLowerCaseLetterRule]="true" 
+      [enableUpperCaseLetterRule]="true"
+      [enableDigitRule]="true"
+      [enableSpecialCharRule]="false"
+      [min]="8"
+      [max]="50"
+      (onStrengthChanged)="onPasswordStrengthChanged($event)">
+    </mat-password-strength>
+
     <mat-form-field class="mb-4">
       <mat-label>{{'Confirm Password' | translate}}</mat-label>
       <input
@@ -41,7 +55,7 @@
       <mat-error *ngIf="form.controls['newPasswordConfirm'].hasError('required')">{{'Confirm Password field is required'| translate}}</mat-error>
       <mat-error *ngIf="form.controls['newPasswordConfirm'].hasError('passwordsNotEqual')">{{'Passwords not equal in New Password and Confirm Password fields'| translate}}</mat-error>
     </mat-form-field>
-    <p>{{ 'The password must contain at least 6 characters.' | translate }}</p>
+    <p>{{ 'The password must contain at least 8 characters.' | translate }}</p>
   </div>
   <button
     mat-raised-button

eform-client/src/app/modules/auth/components/auth/restore-password-confirmation/restore-password-confirmation.component.ts

@@ -25,6 +25,7 @@ export class RestorePasswordConfirmationComponent implements OnInit, OnDestroy {
   form: FormGroup;
   newPasswordVisible = false;
   newPasswordConfirmVisible = false;
+  passwordStrength = 0; // Track password strength score
 
   constructor(
     private translateService: TranslateService,
@@ -41,7 +42,7 @@ export class RestorePasswordConfirmationComponent implements OnInit, OnDestroy {
     console.debug('RestorePasswordConfirmationComponent - ngOnInit');
     this.route.queryParams.subscribe((params) => {
       this.form = this.fb.group({
-        newPassword: ['', [Validators.required, Validators.minLength(6)]],
+        newPassword: ['', [Validators.required, Validators.minLength(8)]],
         newPasswordConfirm: ['', [Validators.required]],
         userId: [params['userId']],
         code: [params['code']],
@@ -86,4 +87,18 @@ export class RestorePasswordConfirmationComponent implements OnInit, OnDestroy {
   toggleNewPasswordConfirmVisibility() {
     this.newPasswordConfirmVisible = !this.newPasswordConfirmVisible;
   }
+
+  onPasswordStrengthChanged(strength: number): void {
+    this.passwordStrength = strength;
+    // Optionally add additional validation based on strength
+    const passwordControl = this.form.get('newPassword');
+    if (passwordControl && strength < 40) {
+      passwordControl.setErrors({ ...passwordControl.errors, weakPassword: true });
+    } else if (passwordControl && passwordControl.hasError('weakPassword')) {
+      delete passwordControl.errors.weakPassword;
+      if (Object.keys(passwordControl.errors).length === 0) {
+        passwordControl.setErrors(null);
+      }
+    }
+  }
 }