carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input/directives/password.directive.ts

@@ -0,0 +1,282 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  input,
+  OnInit,
+} from '@angular/core';
+import { MaskHelper } from './helpers';
+
+@Directive({
+  selector: '[appPassword]',
+})
+export class PasswordDirective implements OnInit {
+  /**
+   * Input property to enable or disable the password masking behavior.
+   */
+  appPassword = input<boolean>(true);
+
+  /**
+   * Input property to hide or show the password
+   */
+  visible = input<boolean>(false);
+
+  /**
+   * Input property to specify the type of the password
+   */
+  account = input<boolean>(false);
+
+  /**
+   * Input property to specify how many characters from the end of the
+   * password should be revealed. Defaults to 0 (fully masked).
+   */
+  reveal = input<number>(0);
+
+  appMask = input<string>('');
+
+  max = input<number | undefined>(0);
+
+  /**
+   * Stores the actual, unmasked password value,
+   * while the input element displays a masked version.
+   */
+  private realValue: string = '';
+
+  constructor(private el: ElementRef<HTMLInputElement>) {}
+
+  /**
+   * Lifecycle hook called after Angular initializes the directive's data-bound properties.
+   * If password masking is enabled, it sets up the initial masking.
+   */
+  ngOnInit(): void {
+    if (this.appPassword() && this.reveal() > 0) {
+      this.setupPasswordMasking();
+    }
+  }
+
+  /**
+   * Sets up the initial state for password masking.
+   * It reads the initial value from the input (if any) as the `realValue`
+   * and then updates the input's display to show the masked version.
+   */
+  private setupPasswordMasking(): void {
+    const input = this.el.nativeElement;
+    this.realValue = input.value || ''; // Assume initial value is unmasked or is the real one
+    this.updateDisplayValue();
+  }
+
+  /**
+   * HostListener for the 'input' event on the host element.
+   * This is the core logic for synchronizing `realValue` with user input
+   * on the masked field. It infers changes to `realValue`
+   * based on `event.data`, cursor position, and the difference in length
+   * between the input's current display value and the previous `realValue`.
+   * @param event - The InputEvent object.
+   */
+  @HostListener('input', ['$event'])
+  onInput(event: InputEvent): void {
+    if (!this.appPassword() || !this.reveal()) return;
+    const input = this.el.nativeElement;
+    let cursorPosition = input.selectionStart || 0;
+    const displayValue = input.value;
+    const lengthDiff = displayValue.length - this.realValue.length;
+    let newRealValue = this.realValue;
+
+    if (event.data && lengthDiff <= 0) {
+      const deletedCount = Math.abs(lengthDiff) + event.data.length;
+      const replaceStart = cursorPosition - event.data.length;
+      newRealValue =
+        this.realValue.slice(0, Math.max(0, replaceStart)) +
+        event.data +
+        this.realValue.slice(Math.max(0, replaceStart) + deletedCount);
+    } else if (lengthDiff > 0) {
+      const addedChars =
+        event.data ||
+        displayValue.slice(cursorPosition - lengthDiff, cursorPosition);
+      const insertPosition = cursorPosition - addedChars.length;
+      newRealValue =
+        this.realValue.slice(0, Math.max(0, insertPosition)) +
+        addedChars +
+        this.realValue.slice(Math.max(0, insertPosition));
+    } else if (lengthDiff < 0) {
+      const deletedCount = Math.abs(lengthDiff);
+      newRealValue =
+        this.realValue.slice(0, cursorPosition) +
+        this.realValue.slice(cursorPosition + deletedCount);
+    }
+
+    // Only enforce numeric input if account() is true
+    if (this.account() && !/^\d*$/.test(newRealValue)) {
+      // Revert the input field to the previous masked value and restore cursor
+      this.updateDisplayValue();
+      this.setCursorPosition(cursorPosition - 1); // Move cursor back
+      return;
+    }
+
+    if (this.max()) {
+      if (newRealValue.length > this.max()!) {
+        this.updateDisplayValue();
+        this.setCursorPosition(cursorPosition - 1); // Move cursor back
+
+        return;
+      }
+    }
+
+    if (this.appMask() && this.appMask() !== '') {
+      const { formattedValue } = MaskHelper.applyMask(
+        MaskHelper.extractUserInput(newRealValue),
+        this.appMask()
+      );
+      cursorPosition =
+        cursorPosition + formattedValue.length - newRealValue.length;
+      newRealValue = formattedValue;
+    }
+
+    this.realValue = newRealValue;
+
+    this.updateDisplayValue();
+    this.setCursorPosition(cursorPosition);
+    this.dispatchRealValueChange();
+  }
+
+  /**
+   * HostListener for the 'cut' event.
+   * Prevents default cut behavior to operate on `realValue`.
+   * It copies the corresponding part of `realValue` to the clipboard
+   * and updates `realValue` and the display.
+   * @param event - The ClipboardEvent object.
+   */
+  @HostListener('cut', ['$event'])
+  onCut(event: ClipboardEvent): void {
+    if (!this.appPassword() || !this.reveal()) return;
+
+    const input = this.el.nativeElement;
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+
+    if (start !== end) {
+      // If there's a selection
+      event.preventDefault(); // Prevent default cut action
+      const cutText = this.realValue.slice(start, end); // Cut from realValue
+      event.clipboardData?.setData('text/plain', cutText);
+
+      this.realValue =
+        this.realValue.slice(0, start) + this.realValue.slice(end);
+
+      this.updateDisplayValue();
+      this.setCursorPosition(start); // Set cursor to the start of the cut area
+      this.dispatchRealValueChange();
+    }
+  }
+
+  /**
+   * HostListener for the 'copy' event.
+   * Prevents default copy behavior to ensure the unmasked `realValue` segment is copied.
+   * @param event - The ClipboardEvent object.
+   */
+  @HostListener('copy', ['$event'])
+  onCopy(event: ClipboardEvent): void {
+    if (!this.appPassword() || !this.reveal()) return;
+
+    const input = this.el.nativeElement;
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+
+    if (start !== end) {
+      // If there's a selection
+      event.preventDefault(); // Prevent default copy action
+      const copiedText = this.realValue.slice(start, end); // Copy from realValue
+      event.clipboardData?.setData('text/plain', copiedText);
+    }
+  }
+
+  /**
+   * Updates the input element's display value with a masked version of `realValue`.
+   * Uses '•' for masked characters. Respects the `reveal` input to show
+   * a specified number of characters from the end of the password.
+   * This method is responsible for creating the visual masking.
+   */
+  private updateDisplayValue(): void {
+    if (!this.appPassword() || !this.reveal()) return;
+    if (this.visible()) {
+      this.el.nativeElement.value = this.realValue;
+      return;
+    }
+
+    const revealCount = this.reveal();
+    const realLength = this.realValue.length;
+    let displayValue = '';
+
+    if (revealCount > 0 && realLength > revealCount) {
+      const actualRevealCount = Math.min(revealCount, realLength);
+      // Calculate how many characters to mask
+      const maskedCharsCount = realLength - actualRevealCount;
+
+      if (maskedCharsCount > 0) {
+        // Get the part of the real value that should be revealed
+        const revealedPart = this.realValue.slice(maskedCharsCount); // Corrected from slice(realLength - actualRevealCount)
+        displayValue = '•'.repeat(maskedCharsCount) + revealedPart;
+      } else {
+        // If all characters are to be revealed (revealCount >= realLength)
+        displayValue = this.realValue;
+      }
+    } else {
+      // Fully mask if revealCount is 0 or realValue is lesser than revealCount
+      displayValue = '•'.repeat(realLength);
+    }
+
+    this.el.nativeElement.value = displayValue;
+  }
+
+  /**
+   * Sets the cursor position within the input field.
+   * This is crucial after `updateDisplayValue` changes the entire input value,
+   * to maintain a natural cursor behavior for the user.
+   * Uses `setTimeout` to ensure the operation occurs after Angular's view update.
+   * @param position - The desired cursor position.
+   */
+  private setCursorPosition(position: number): void {
+    const input = this.el.nativeElement;
+    // setTimeout ensures this runs after the current browser rendering tick
+    setTimeout(() => {
+      // Clamp position to be within the bounds of the current display value's length
+      const currentLength = input.value.length;
+      const newPosition = Math.max(0, Math.min(position, currentLength));
+      input.setSelectionRange(newPosition, newPosition);
+    }, 0);
+  }
+
+  /**
+   * Dispatches a custom event named 'realValueChange' from the host element.
+   * The event's `detail` property contains the unmasked `realValue`.
+   * This allows parent components (like your `InputComponent`) to listen for
+   * changes to the actual password.
+   */
+  private dispatchRealValueChange(): void {
+    const customEvent = new CustomEvent('realValueChange', {
+      bubbles: true, // Allows event to bubble up the DOM
+      composed: true, // Allows event to cross Shadow DOM boundaries
+      detail: this.realValue,
+    });
+    this.el.nativeElement.dispatchEvent(customEvent);
+  }
+
+  /**
+   * Public method to get the current unmasked "real" password value.
+   * @returns The real password value as a string.
+   */
+  getRealValue(): string {
+    return this.realValue;
+  }
+
+  /**
+   * Public method to set the "real" password value from outside the directive
+   * (e.g., when the parent form control's value is changed programmatically).
+   * It updates the internal `realValue` and then refreshes the masked display.
+   * @param value - The new real password value to set.
+   */
+  setRealValue(value: string): void {
+    this.realValue = value || '';
+    this.updateDisplayValue();
+  }
+}