Update setup-user.component.ts

src/app/user-management/setup-user/setup-user.component.ts

@@ -92,7 +92,17 @@ export class SetupUserComponent implements OnInit {
   }
 
   // Submit for creating new user
-  onSubmit() {
+onSubmit() {
+  // For create mode, check if password is required
+  if (this.mode === 'create') {
+    const passwordControl = this.userForm.get('defaultPassword');
+    if (!passwordControl?.value) {
+      passwordControl?.setErrors({ required: true });
+      this.userForm.markAllAsTouched();
+      return;
+    }
+  }
+  
   if (this.userForm.invalid) {
     this.userForm.markAllAsTouched();
     return;
@@ -122,10 +132,16 @@ export class SetupUserComponent implements OnInit {
       this.isLoading = false;
     }
   });
-  }
+}
 
   // Update existing user
-  onUpdate() {
+onUpdate() {
+  // Clear any pattern errors if password is empty in edit mode
+  const passwordControl = this.userForm.get('defaultPassword');
+  if (passwordControl && !passwordControl.value && this.mode === 'edit') {
+    passwordControl.setErrors(null); // Clear errors for empty password in edit mode
+  }
+  
   if (this.userForm.invalid) {
     this.userForm.markAllAsTouched();
     return;
@@ -139,9 +155,11 @@ export class SetupUserComponent implements OnInit {
     porOrgacode: this.storageService.getItem('POR_ORGACODE')
   };
 
-    // Only include password if it was provided
+  // Only include password if it was provided AND is valid
-    if (this.userForm.value.defaultPassword && this.userForm.value.defaultPassword.trim()) {
+  if (this.userForm.value.defaultPassword && 
-      updatedUser.password = this.userForm.value.defaultPassword;
+      this.userForm.value.defaultPassword.trim() &&
+      this.userForm.get('defaultPassword')?.valid) {
+    updatedUser.password = this.userForm.value.defaultPassword.trim();
   }
 
   let params = new HttpParams().set('userId', this.selectedUserIdForEdit!);
@@ -161,8 +179,7 @@ export class SetupUserComponent implements OnInit {
       this.isLoading = false;
     }
   });
-  }
+}
-
   // Cancel edit mode
   cancelEdit() {
     this.resetForm();
@@ -234,7 +251,7 @@ export class SetupUserComponent implements OnInit {
     this.loadUsersDirect();
   }
 
-  initializeForm(): void {
+initializeForm(): void {
   this.userForm = this.fb.group({
     userId: ['', [
       Validators.required,
@@ -247,29 +264,46 @@ export class SetupUserComponent implements OnInit {
       Validators.maxLength(500)
     ]],
     defaultPassword: ['', [
-        // Make password optional for edit mode, required for create
+      // For edit mode, password is optional
-        (control: AbstractControl) => {
+      // For create mode, handle required validation separately
-          if (this.mode === 'create' && !control.value) {
+      this.passwordValidator.bind(this)
-            return { required: true };
-          }
-          return null;
-        },
-        Validators.pattern(
-          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/
-        )
     ]],
     email: ['', [Validators.required, Validators.email]],
     userRole: [null, Validators.required]
   });
+}
 
-    // Update password validation when mode changes
+// Custom validator for password
-    this.userForm.get('defaultPassword')?.valueChanges.subscribe(() => {
+private passwordValidator(control: AbstractControl): { [key: string]: any } | null {
-      const passwordControl = this.userForm.get('defaultPassword');
+  const value = control.value;
-      if (passwordControl) {
+  
-        passwordControl.updateValueAndValidity();
+  // If empty and we're in edit mode, it's valid (optional)
+  if (!value || value.trim() === '') {
+    if (this.mode === 'edit') {
+      return null; // Password is optional in edit mode
     }
-    });
+    // For create mode, we'll handle required validation in onSubmit
+    return null; // Don't show pattern error for empty field
+  }
+  
+  // If there's a value, check the pattern
+  const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;
+  if (!pattern.test(value)) {
+    return { pattern: true };
+  }
+  
+  return null;
+}
+
+// Separate validator function
+private createPasswordValidator(mode: 'create' | 'edit'): Validators {
+  return (control: AbstractControl) => {
+    if (mode === 'create' && !control.value) {
+      return { required: true };
     }
+    return null;
+  };
+}
 
   loadUsersDirect(): void {
     this.isLoading = true;