Angular component: password-field

password-field.component.ts

@Component({
  selector: 'app-password-field',
  templateUrl: './password-field.component.html',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ReactiveFormsModule, StrengthMeterComponent]
})
export class PasswordFieldComponent implements OnInit {
  destroyRef = inject(DestroyRef);
  @Input() passwordFormControl: FormControl = new FormControl<any>('');

  showPassword = false;
  passwordStrength: number = 0;

  ngOnInit(): void {
    this.passwordFormControl.valueChanges
      .pipe(
        debounceTime(200), // wait for 200ms after the last keystroke
        distinctUntilChanged(), // trigger only when the value actually changes
        takeUntilDestroyed(this.destroyRef)) // unsubscribe when the component is destroyed
      .subscribe((value) => {
        // run logic
        this.passwordStrength = this.calculatePasswordStrength(value);
      });
  }

  /**
   * In the passwordRules, we check whether each the user has considered each factor that makes their password stronger.
   * This is reflected on the UI as well to guide the user.
   */
  get passwordRules() {
    // ...
  }

  calculatePasswordStrength(password: string): number {
    // ...
  }

  togglePasswordVisibility(): void {
    this.showPassword = !this.showPassword;
  }
}