web/src/app/components/password-strength.component.ts

import { Component, Input, OnChanges } from "@angular/core";

import { I18nService } from "jslib-common/abstractions/i18n.service";

@Component({
  selector: "app-password-strength",
  templateUrl: "password-strength.component.html",
})
export class PasswordStrengthComponent implements OnChanges {
  @Input() score?: number;
  @Input() showText = false;

  scoreWidth = 0;
  color = "bg-danger";
  text: string;

  constructor(private i18nService: I18nService) {}

  ngOnChanges(): void {
    this.scoreWidth = this.score == null ? 0 : (this.score + 1) * 20;
    switch (this.score) {
      case 4:
        this.color = "bg-success";
        this.text = this.i18nService.t("strong");
        break;
      case 3:
        this.color = "bg-primary";
        this.text = this.i18nService.t("good");
        break;
      case 2:
        this.color = "bg-warning";
        this.text = this.i18nService.t("weak");
        break;
      default:
        this.color = "bg-danger";
        this.text = this.score != null ? this.i18nService.t("weak") : null;
        break;
    }
  }
}