1 import { Options, passwordStrength } from "check-password-strength";
2 import classNames from "classnames";
3 import { NoOptionI18nKeys } from "i18next";
4 import { Component, FormEventHandler, linkEvent } from "inferno";
5 import { NavLink } from "inferno-router";
6 import { I18NextService } from "../../services";
7 import { Icon } from "./icon";
9 interface PasswordInputProps {
12 onInput: FormEventHandler<HTMLInputElement>;
14 showStrength?: boolean;
15 label?: string | null;
16 showForgotLink?: boolean;
19 interface PasswordInputState {
23 const passwordStrengthOptions: Options<string> = [
50 function handleToggleShow(i: PasswordInput) {
57 class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
58 state: PasswordInputState = {
62 constructor(props: PasswordInputProps, context: any) {
63 super(props, context);
82 <div className={classNames("row", className)}>
84 <label className="col-sm-2 col-form-label" htmlFor={id}>
88 <div className={`col-sm-${label ? 10 : 12}`}>
89 <div className="input-group">
91 type={show ? "text" : "password"}
92 className="form-control"
102 className="btn btn-outline-dark"
105 onClick={linkEvent(this, handleToggleShow)}
106 aria-label={I18NextService.i18n.t(
107 `${show ? "show" : "hide"}_password`,
109 data-tippy-content={I18NextService.i18n.t(
110 `${show ? "show" : "hide"}_password`,
113 <Icon icon={`eye${show ? "-slash" : ""}`} inline />
116 {showStrength && value && (
117 <div className={this.passwordColorClass}>
118 {I18NextService.i18n.t(
119 this.passwordStrength as NoOptionI18nKeys,
125 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
128 {I18NextService.i18n.t("forgot_password")}
137 get passwordStrength(): string | undefined {
138 const password = this.props.value;
140 ? passwordStrength(password, passwordStrengthOptions).value
144 get passwordColorClass(): string {
145 const strength = this.passwordStrength;
147 if (strength && ["weak", "medium"].includes(strength)) {
148 return "text-warning";
149 } else if (strength === "strong") {
150 return "text-success";
152 return "text-danger";
157 export default PasswordInput;