Update password strength configuration per requirements: disable special chars, min 8 chars

Co-authored-by: renemadsen <[email protected]>

Author: Copilot

INTEGRATION_STEPS.md

@@ -1,75 +1,55 @@
 # Angular Material Extensions Password Strength Integration
 
-## Completed Steps
-
-1. ✅ **Added package dependency** - Updated `package.json` with `@angular-material-extensions/password-strength`
-2. ✅ **Updated module imports** - Added import statements (commented) in:
-   - `account-management.module.ts`
-   - `auth.module.ts`
-3. ✅ **Updated component templates** - Added password strength meter HTML (commented) in:
-   - `user-set-password.component.html`
-   - `change-password.component.html`
-   - `restore-password-confirmation.component.html`
-4. ✅ **Updated component TypeScript files** - Added password strength handling methods (commented) in all components
-
-## Remaining Steps
-
-To complete the integration once network issues are resolved:
-
-### 1. Install the Package
-```bash
-cd eform-client
-npm install @angular-material-extensions/[email protected] --save --force
-```
-
-### 2. Uncomment Module Imports
-In `src/app/modules/account-management/account-management.module.ts`:
-```typescript
-// Uncomment this line:
-import {MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
-
-// And add to imports array:
-MatPasswordStrengthModule,
-```
-
-In `src/app/modules/auth/auth.module.ts`:
-```typescript
-// Uncomment this line:
-import {MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
-
-// And add to imports array:
-MatPasswordStrengthModule,
-```
-
-### 3. Uncomment HTML Components
-In each of the three component HTML files, uncomment the `<mat-password-strength>` elements.
-
-### 4. Uncomment TypeScript Methods
-In each of the three component TypeScript files, uncomment the `onPasswordStrengthChanged` methods.
-
-## Features Implemented
-
-- **Password strength visualization**: Real-time strength meter
-- **Configurable rules**: Length, lowercase, uppercase, digits, special characters
-- **Strength scoring**: 0-100 scale with event handling
-- **Form validation integration**: Optional weak password validation
-- **Responsive design**: Integrates seamlessly with Material Design
-
-## Configuration Options
-
-The password strength component supports these configuration options:
-- `enableLengthRule`: Enforce minimum length
-- `enableLowerCaseLetterRule`: Require lowercase letters
-- `enableUpperCaseLetterRule`: Require uppercase letters
-- `enableDigitRule`: Require numbers
-- `enableSpecialCharRule`: Require special characters
-- `min`: Minimum password length (6)
-- `max`: Maximum password length (50)
-
-## Testing
-
-After uncommenting and installing:
-1. Run `ng build` to ensure no compilation errors
-2. Test each password field for visual feedback
-3. Verify strength scoring works correctly
-4. Test form validation 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/[email protected]`
+- ✅ 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/src/app/modules/account-management/account-management.module.ts

@@ -23,7 +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';
+import {MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
 
 @NgModule({
     imports: [
@@ -45,7 +45,7 @@ import {FileUploadModule} from "ng2-file-upload";
         MatInputModule,
         MatIconModule,
         FileUploadModule,
-        // MatPasswordStrengthModule,
+        MatPasswordStrengthModule,
     ],
   declarations: [
     ChangePasswordComponent,

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

@@ -37,20 +37,17 @@
   </mat-form-field>
 
   <!-- Password Strength Meter -->
-  <!-- TODO: Uncomment once @angular-material-extensions/password-strength is installed -->
-  <!--
   <mat-password-strength 
     [password]="changePasswordForm.get('newPassword')?.value || ''"
     [enableLengthRule]="true"
     [enableLowerCaseLetterRule]="true" 
     [enableUpperCaseLetterRule]="true"
     [enableDigitRule]="true"
-    [enableSpecialCharRule]="true"
-    [min]="6"
+    [enableSpecialCharRule]="false"
+    [min]="8"
     [max]="50"
     (onStrengthChanged)="onPasswordStrengthChanged($event)">
   </mat-password-strength>
-  -->
 
   <mat-form-field>
     <mat-label>{{ 'New password confirmation' | translate }}</mat-label>

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

@@ -15,9 +15,9 @@ export class ChangePasswordComponent implements OnInit {
   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*/]]
     });
   }
 
@@ -38,20 +38,19 @@ export class ChangePasswordComponent implements OnInit {
     );
   }
 
-  // TODO: Uncomment once @angular-material-extensions/password-strength is installed
-  // 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);
-  //     }
-  //   }
-  // }
+  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;

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

@@ -39,20 +39,17 @@ <h3 mat-dialog-title>{{'Set user password' | translate}}</h3>
   </mat-form-field>
 
   <!-- Password Strength Meter -->
-  <!-- TODO: Uncomment once @angular-material-extensions/password-strength is installed -->
-  <!--
   <mat-password-strength 
     [password]="setPasswordForm.get('newPassword')?.value || ''"
     [enableLengthRule]="true"
     [enableLowerCaseLetterRule]="true" 
     [enableUpperCaseLetterRule]="true"
     [enableDigitRule]="true"
-    [enableSpecialCharRule]="true"
-    [min]="6"
+    [enableSpecialCharRule]="false"
+    [min]="8"
     [max]="50"
     (onStrengthChanged)="onPasswordStrengthChanged($event)">
   </mat-password-strength>
-  -->
 
   <mat-form-field>
     <mat-label>{{ 'New password confirmation' | translate }}</mat-label>

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

@@ -22,8 +22,8 @@ export class UserSetPasswordComponent implements OnInit {
               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)]]
     });
   }
 
@@ -57,18 +57,17 @@ export class UserSetPasswordComponent implements OnInit {
     this.confirmPasswordVisible = !this.confirmPasswordVisible;
   }
 
-  // TODO: Uncomment once @angular-material-extensions/password-strength is installed
-  // 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);
-  //     }
-  //   }
-  // }
+  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,7 +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';
+import {MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
 
 
 @NgModule({
@@ -37,8 +37,8 @@ import {MtxSelectModule} from '@ng-matero/extensions/select';
     MatIconModule,
     MatButtonModule,
     MatTooltipModule,
-    MtxSelectModule
-    // MatPasswordStrengthModule,
+    MtxSelectModule,
+    MatPasswordStrengthModule,
   ],
   declarations: [
     LoginComponent,

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

@@ -23,20 +23,17 @@
     </mat-form-field>
 
     <!-- Password Strength Meter -->
-    <!-- TODO: Uncomment once @angular-material-extensions/password-strength is installed -->
-    <!--
     <mat-password-strength 
       [password]="form.get('newPassword')?.value || ''"
       [enableLengthRule]="true"
       [enableLowerCaseLetterRule]="true" 
       [enableUpperCaseLetterRule]="true"
       [enableDigitRule]="true"
-      [enableSpecialCharRule]="true"
-      [min]="6"
+      [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>
@@ -58,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

@@ -42,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']],
@@ -88,18 +88,17 @@ export class RestorePasswordConfirmationComponent implements OnInit, OnDestroy {
     this.newPasswordConfirmVisible = !this.newPasswordConfirmVisible;
   }
 
-  // TODO: Uncomment once @angular-material-extensions/password-strength is installed
-  // 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);
-  //     }
-  //   }
-  // }
+  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);
+      }
+    }
+  }
 }