@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/password-fields/password-fields.component.ts

@@ -0,0 +1,273 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { ValidationService } from '../../services/validation.service';
+
+@Component({
+  selector: 'lib-password-fields',
+  templateUrl: './password-fields.component.html',
+  styleUrls: ['./password-fields.component.scss'],
+})
+export class PasswordFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  confirmPassword!: boolean;
+  displayStrength!: boolean;
+  viewButton!: boolean;
+  maxLength!: number;
+  minLength!: number;
+  requireLowercaseLetters!: boolean;
+  requireUppercaseLetters!: boolean;
+  requireNumbers!: boolean;
+  requireSpecialCharacters!: boolean;
+  allowedSpecialCharacters: string[] = [];
+  validationMessage: string = '';
+  cnfrmValidationMessage: string = '';
+  validationFailed: boolean = false;
+  validatedCnfrmPassword: boolean = false;
+  enteredPassword: string = '';
+  enteredCnfrmPassword: string = '';
+  passwordStrength: number = 0;
+  questionId:string='';
+  private elementId: string='';
+  @Input() disableEdit: boolean = false;
+  
+  constructor(
+    private validationService: ValidationService,
+    private tracker: ElementTrackerService
+  ) {
+  }
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.questionId=this.question.id;
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.confirmPassword = this.question.formElement.appearance.confirmPassword;
+    this.displayStrength = this.question.formElement.appearance.displayStrong;
+    this.viewButton = this.question.formElement.appearance.viewButton;
+    this.maxLength = this.question.formElement.validation.maxLength;
+    this.minLength = this.question.formElement.validation.minLength;
+    this.requireLowercaseLetters =
+      this.question.formElement.validation.requireLowercaseLetters;
+    this.requireUppercaseLetters =
+      this.question.formElement.validation.requireUppercaseLetters;
+    this.requireNumbers = this.question.formElement.validation.requireNumbers;
+    this.requireSpecialCharacters =
+      this.question.formElement.validation.requireSpecialCharacters;
+    if (this.requireSpecialCharacters) {
+      this.allowedSpecialCharacters =
+        this.question.formElement.validation.allowedSpecialCharacters
+          .split(',')
+          .map((char: any) => char.trim());
+    }
+    this.enteredPassword = this.question?.answer;
+  }
+
+  togglePasswordVisibility() {
+    let passwordField = document.getElementById(
+      'passwordField'+this.questionId
+    ) as HTMLInputElement;
+    let eyeIcon = document.getElementById(
+      'passwordEyeIcon'+this.questionId
+    ) as HTMLInputElement;
+
+    if (passwordField.type === 'password') {
+      passwordField.type = 'text';
+      eyeIcon.classList.remove('bi-eye-fill');
+      eyeIcon.classList.add('bi-eye-slash-fill');
+    } else {
+      passwordField.type = 'password';
+      eyeIcon.classList.remove('bi-eye-slash-fill');
+      eyeIcon.classList.add('bi-eye-fill');
+    }
+  }
+  toggleCnfrmPasswordVisibility() {
+    let passwordField = document.getElementById(
+      'cnfrmPasswordField'+this.questionId
+    ) as HTMLInputElement;
+    let eyeIcon = document.getElementById(
+      'CnfrmPasswordEyeIcon'+this.questionId
+    ) as HTMLInputElement;
+
+    if (passwordField.type === 'password') {
+      passwordField.type = 'text';
+      eyeIcon.classList.remove('bi-eye-fill');
+      eyeIcon.classList.add('bi-eye-slash-fill');
+    } else {
+      passwordField.type = 'password';
+      eyeIcon.classList.remove('bi-eye-slash-fill');
+      eyeIcon.classList.add('bi-eye-fill');
+    }
+  }
+
+  checkPasswordMatch() {
+    this.validationService.clearInvalid(this.buildElementId());
+    this.validatedCnfrmPassword = false;
+    this.cnfrmValidationMessage = '';
+    if (this.required && this.confirmPassword && !this.enteredCnfrmPassword) {
+      this.validatedCnfrmPassword = true;
+      this.cnfrmValidationMessage = `Please enter a valid password`;
+      this.question.validation = false;
+    }
+    else if (this.enteredPassword != this.enteredCnfrmPassword && this.confirmPassword) {
+      this.validatedCnfrmPassword = true;
+      this.cnfrmValidationMessage = 'Passwords do not match';
+      this.question.validation = false;
+    }
+    else{
+      this.question.validation = true;
+    }
+    this.validatePassword();
+  }
+
+  
+
+  validatePassword() {
+    this.validationFailed = false;
+    this.validationService.clearInvalid(this.buildElementId());
+    this.validationMessage = '';
+    if (this.required && !this.enteredPassword) {
+      this.validationFailed = true;
+      this.validationMessage = `Please enter a valid password`;
+      this.question.validation = false;
+      this.question.validationMessage = `Please enter a valid password`;
+    } else if (
+      this.requireLowercaseLetters ||
+      this.requireUppercaseLetters ||
+      this.requireNumbers ||
+      this.requireSpecialCharacters ||
+      this.minLength ||
+      this.maxLength
+    ) {      
+      const lowercaseRegex = /[a-z]/;
+      const uppercaseRegex = /[A-Z]/;
+      const numberRegex = /\d/;
+      const specialCharacterRegex = new RegExp(`[${this.allowedSpecialCharacters.join('')}]`);
+      const otherSpecialCharacterRegex = new RegExp(`[^a-zA-Z0-9${this.allowedSpecialCharacters.join('')}]`);
+  
+      let lowerCaseValidate = lowercaseRegex.test(this.enteredPassword);
+      let upperCaseValidate = uppercaseRegex.test(this.enteredPassword);
+      let containsNumber = numberRegex.test(this.enteredPassword);
+      let containsSpecialCharacter = specialCharacterRegex.test(this.enteredPassword);
+      let containsOtherSpecialCharacter = otherSpecialCharacterRegex.test(this.enteredPassword);
+  
+      if (!lowerCaseValidate && this.requireLowercaseLetters) {
+        this.validationFailed = true;
+        this.validationMessage = 'Password must contain at least one lowercase letter';
+        this.question.validation = false;
+        this.question.validationMessage = 'Password must contain at least one lowercase letter';
+      } else if (!upperCaseValidate && this.requireUppercaseLetters) {
+        this.validationFailed = true;
+        this.validationMessage = 'Password must contain at least one uppercase letter';
+        this.question.validation = false;
+        this.question.validationMessage = 'Password must contain at least one uppercase letter';
+      } else if (!containsNumber && this.requireNumbers) {
+        this.validationFailed = true;
+        this.validationMessage = 'Password must contain at least one number';
+        this.question.validation = false;
+        this.question.validationMessage = 'Password must contain at least one number';
+      }else if (this.enteredPassword.length < this.minLength) {
+        this.validationFailed = true;
+        this.validationMessage = `Password must contain at least ${this.minLength} characters`;
+        this.question.validation = false;
+        this.question.validationMessage = `Password must contain at least ${this.minLength} characters`;
+      } else if (this.enteredPassword.length > this.maxLength) {
+        this.validationFailed = true;
+        this.validationMessage = `Password must be less than ${this.maxLength} characters`;
+        this.question.validation = false;
+        this.question.validationMessage = `Password must be less than ${this.maxLength} characters`;
+      } else if (!containsSpecialCharacter && this.allowedSpecialCharacters.length>0) {
+        this.validationFailed = true;
+        this.validationMessage = `Password must contain at least one special character from ${this.allowedSpecialCharacters}`;
+        this.question.validation = false;
+        this.question.validationMessage = `Password must contain at least one special character from ${this.allowedSpecialCharacters}`;
+      } else if(containsOtherSpecialCharacter && this.allowedSpecialCharacters.length>0){
+        this.validationFailed = true;
+        this.validationMessage = 'Password contains an invalid special character';
+        this.question.validation = false;
+        this.question.validationMessage = 'Password contains an invalid special character';
+      } else if(this.confirmPassword){
+        this.checkPasswordMatch();
+      }
+       else {
+        this.question.validation = true;
+      }    
+    } else {            
+      this.passwordStrength=this.calculateStrength(this.enteredPassword);
+    }
+    this.passwordStrength = this.calculateStrength(this.enteredPassword)
+}
+
+  validateInput(event:any){
+    const sanitizedValue = event.target.value.replace(/\s+/g, '');
+    this.enteredPassword = sanitizedValue;
+    this.question.answer=sanitizedValue;
+    this.validatePassword();  
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0}); 
+    }
+
+    validateCnfrm(event:any){
+      const sanitizedValue = event.target.value.replace(/\s+/g, '');
+      this.enteredCnfrmPassword = sanitizedValue;
+      this.checkPasswordMatch();
+    }
+
+    calculateStrength(password:any) {
+      const lengthStrength = Math.min(100, (password.length / 12) * 100); // Assume maximum length of 12 for full points
+      const lowercaseStrength = /[a-z]/.test(password) ? 20 : 0;
+      const uppercaseStrength = /[A-Z]/.test(password) ? 20 : 0;
+      const numberStrength = /\d/.test(password) ? 20 : 0;
+      const specialCharacterStrength = /[!@#$%^&*(),.?":{}|<>]/.test(password) ? 20 : 0; // Adjust this regex based on your allowed special characters
+    
+      return lengthStrength + lowercaseStrength + uppercaseStrength + numberStrength + specialCharacterStrength;
+    }
+
+    handleValidation(isValid: boolean, message: string = 'This field is required') {
+      if (isValid) {
+        this.validationService.clearInvalid(this.buildElementId());
+      } else {
+        // this.validationService.setInvalid(this.question.id, message);
+      }
+    }
+
+    private buildElementId(): string {
+      return (this.inLine || this.inCard)
+        ? `${this.submissionIndex}-${this.question.id}`
+        : `${this.question.id}`;
+    }
+  
+    get isInvalid(): boolean {
+      return !!this.validationService.getErrorMessage(this.buildElementId());
+    }
+  
+    get errorMessage(): string | null {
+      return this.validationService.getErrorMessage(this.buildElementId());
+    }
+  
+    ngAfterViewInit() {
+      if (this.inLine || this.inCard) {
+        this.elementId = `question-${this.submissionIndex}-${this.question.id}`;
+      } else {
+        this.elementId = `question-${this.question.id}`;
+      }
+    
+      this.tracker.registerElement(this.elementId);
+    }
+  
+    ngOnDestroy() {
+      if (this.elementId) {
+        this.tracker.unregisterElement(this.elementId);
+      }
+    }
+}
+

package/src/form-fields/radio-button-fields/radio-button-fields.component.html

@@ -0,0 +1,82 @@
+<div
+  [ngClass]="{ 'mb-4': !inLine }"
+  class="px-3"
+  [id]="(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id"
+  [attr.name]="question.testElementName"
+>
+  <div class="input-wrapper mb-3" *ngIf="!inLine">
+    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
+    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="question?.required">*</span>
+    <div
+      class="svg-wrapper mb-2 hintIcon"
+      [attr.data-title]="hint"
+      *ngIf="hint"
+    >
+      <svg
+        class="hintSvg"
+        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+
+  <div
+    class="checkboxField-container"
+    [class.two-column]="displayOptionsInColumn"
+  >
+    <div class="checkboxField" *ngFor="let option of customOptions">
+      <input
+        class="formCheckbox mb-2"
+        type="radio"
+        [name]="question.id+'-'+rowId"
+        [id]="question.id+'-'+rowId+'-'+option.value"
+        [value]="option.label + '|' + option.value"
+        [style.accent-color]="color"
+        (blur)="validateInput()"
+        [(ngModel)]="selectedOption"
+        (ngModelChange)="validateInput()"
+        [attr.data-state]="option.label + '|' + option.value"
+        [attr.data-value]="selectedOption == option.label + '|' + option.value"
+        [disabled]="disableEdit"
+      />
+      <label class="formCheckLabel ms-2 me-2 mb-2" [for]="question.id+'-'+rowId+'-'+option.value">{{
+        option.label
+      }}</label>
+    </div>
+  </div>
+  <div
+    *ngIf="isInvalid && (!inLine || !selectedOption)"
+    class="error-message"
+  >
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
+    {{ validationMessage }}
+  </div>
+</div>

package/src/form-fields/radio-button-fields/radio-button-fields.component.scss

@@ -0,0 +1,28 @@
+@import '../../styles/shared-style.scss';
+.formCheckbox, .formCheckLabel{
+  cursor: pointer;
+}
+.formCheckbox{
+  width: 15px;
+  height: 15px;
+}
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+
+
+.checkboxField-container {
+  display: block;
+}
+
+.checkboxField-container.two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+

package/src/form-fields/radio-button-fields/radio-button-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RadioButtonFieldsComponent } from './radio-button-fields.component';
+
+describe('RadioButtonFieldsComponent', () => {
+  let component: RadioButtonFieldsComponent;
+  let fixture: ComponentFixture<RadioButtonFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RadioButtonFieldsComponent]
+    });
+    fixture = TestBed.createComponent(RadioButtonFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});