- <div className="mb-3 row">
- <label
- className="col-sm-2 col-form-label"
- htmlFor="register-password"
- >
- {I18NextService.i18n.t("password")}
- </label>
- <div className="col-sm-10">
- <input
- type="password"
- id="register-password"
- value={this.state.form.password}
- autoComplete="new-password"
- onInput={linkEvent(this, this.handleRegisterPasswordChange)}
- minLength={10}
- maxLength={60}
- className="form-control"
- required
- />
- {this.state.form.password && (
- <div className={this.passwordColorClass}>
- {I18NextService.i18n.t(
- this.passwordStrength as NoOptionI18nKeys
- )}
- </div>
- )}
- </div>
+ <div className="mb-3">
+ <PasswordInput
+ id="register-password"
+ value={this.state.form.password}
+ onInput={linkEvent(this, this.handleRegisterPasswordChange)}
+ showStrength
+ label={I18NextService.i18n.t("password")}
+ />