Password Input

<q-password-input
  class="w-72"
  clearable
  hint="Optional hint"
  label="Password"
  placeholder="Create password"
/>

<q-password-input
  class="w-72"
  label="Password"
  placeholder="Placeholder text"
  startIcon="KeyRound"
/>

<q-password-input class="w-72" clearable placeholder="Create password">
  <div q-password-input-label>Password</div>
  <div q-password-input-hint>Optional hint</div>
</q-password-input>

<div class="w-72" q-password-input-root>
  <label q-password-input-label>Label</label>
  <div q-password-input-input-group>
    <input placeholder="Placeholder text" q-password-input-input />
    <button q-password-input-clear-trigger></button>
    <button q-password-input-visibility-trigger></button>
    <span q-password-input-error-indicator></span>
  </div>
  <div q-password-input-error-text>Error text</div>
  <div q-password-input-hint>Optional hint</div>
</div>

import {Component, signal} from "@angular/core"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {PasswordInputModule} from "@qualcomm-ui/angular/password-input"

@Component({
  imports: [PasswordInputModule, ButtonModule],
  selector: "password-input-controlled-visibility-demo",
  template: `
    <div class="flex flex-col gap-4">
      <q-password-input
        class="w-72"
        defaultValue="passw0rd"
        label="Password"
        placeholder="Enter your password"
        [visible]="visible()"
        (visibleChanged)="setVisible($event)"
      />

      <button
        emphasis="primary"
        q-button
        variant="outline"
        (click)="toggleVisible()"
      >
        {{ visible() ? "Hide Password" : "Show Password" }}
      </button>
    </div>
  `,
})
export class PasswordInputControlledVisibilityDemo {
  protected readonly visible = signal(false)

  setVisible(visible: boolean) {
    this.visible.set(visible)
  }

  toggleVisible() {
    this.visible.update((visible) => !visible)
  }
}

<q-password-input
  #passwordInput
  class="w-64"
  errorText="You must enter your password"
  label="Label"
  placeholder="Enter your password"
  required
  [invalid]="!value()"
  [(ngModel)]="value"
/>

<q-password-input
  class="w-72"
  label="Required"
  placeholder="Enter a value"
  [errorText]="errorText()"
  [invalid]="!!errorText()"
  [(ngModel)]="value"
/>

import {Component, inject} from "@angular/core"
import {
  type AbstractControl,
  FormBuilder,
  type FormGroup,
  ReactiveFormsModule,
  type ValidationErrors,
  type ValidatorFn,
} from "@angular/forms"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {PasswordInputModule} from "@qualcomm-ui/angular/password-input"

function passwordValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const password = control.value
    if (!password || password.trim().length === 0) {
      return {error: "Please enter your password"}
    }
    if (password.length < 8) {
      return {error: "Must be at least 8 characters long"}
    }
    if (!/(?=.*[a-z])/.test(password)) {
      return {error: "Must contain at least one lowercase letter"}
    }
    if (!/(?=.*[A-Z])/.test(password)) {
      return {error: "Must contain at least one uppercase letter"}
    }
    if (!/(?=.*\d)/.test(password)) {
      return {error: "Must contain at least one number"}
    }
    if (!/(?=.*[@$!%*?&])/.test(password)) {
      return {error: "Must contain at least one special character (@$!%*?&)"}
    }
    return null
  }
}

function confirmPasswordValidator(passwordControlName: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.parent) {
      return null
    }
    const password = control.parent.get(passwordControlName)?.value
    const confirmPassword = control.value
    if (!confirmPassword || confirmPassword.trim().length === 0) {
      return {error: "Please confirm your password"}
    }
    if (confirmPassword !== password) {
      return {error: "Passwords do not match"}
    }
    return null
  }
}
@Component({
  imports: [ReactiveFormsModule, ButtonModule, PasswordInputModule],
  selector: "password-input-reactive-forms-demo",
  template: `
    <form
      class="mx-auto flex w-full max-w-xs flex-col gap-3"
      [formGroup]="form"
      (ngSubmit)="onSubmit()"
    >
      <div class="grid grid-cols-1 gap-4">
        <q-password-input
          #passwordField
          formControlName="password"
          label="Password"
          placeholder="Create password"
          [hint]="
            passwordField.isInvalid()
              ? null
              : 'must be 8+ characters with at least 1 number, lowercase, uppercase, and special character.'
          "
        />
        <q-password-input
          formControlName="confirmPassword"
          label="Confirm password"
          placeholder="Confirm password"
        />
      </div>
      <div class="mt-2 flex w-full justify-end">
        <button
          emphasis="primary"
          q-button
          type="submit"
          variant="fill"
          [disabled]="isSubmitting"
        >
          Submit
        </button>
      </div>
    </form>
  `,
})
export class PasswordInputReactiveFormsDemo {
  form: FormGroup
  submissionAttempts = 0
  isSubmitting = false
  private fb = inject(FormBuilder)

  constructor() {
    this.form = this.fb.group({
      confirmPassword: ["", [confirmPasswordValidator("password")]],
      password: ["", {validators: [passwordValidator()]}],
    })
  }

  onSubmit(): void {
    this.submissionAttempts++
    if (this.form.valid) {
      this.isSubmitting = true
      console.log("Form submitted:", this.form.value)
    }
  }
}