import { myAuth, setIsoData } from "@utils/app";
import { isBrowser } from "@utils/browser";
import { validEmail } from "@utils/helpers";
-import { Options, passwordStrength } from "check-password-strength";
-import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
import { T } from "inferno-i18next-dess";
import {
import { HtmlTags } from "../common/html-tags";
import { Icon, Spinner } from "../common/icon";
import { MarkdownTextArea } from "../common/markdown-textarea";
-
-const passwordStrengthOptions: Options<string> = [
- {
- id: 0,
- value: "very_weak",
- minDiversity: 0,
- minLength: 0,
- },
- {
- id: 1,
- value: "weak",
- minDiversity: 2,
- minLength: 10,
- },
- {
- id: 2,
- value: "medium",
- minDiversity: 3,
- minLength: 12,
- },
- {
- id: 3,
- value: "strong",
- minDiversity: 4,
- minLength: 14,
- },
-];
+import PasswordInput from "../common/password-input";
interface State {
registerRes: RequestState<LoginResponse>;
</div>
</div>
- <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")}
+ />
</div>
- <div className="mb-3 row">
- <label
- className="col-sm-2 col-form-label"
- htmlFor="register-verify-password"
- >
- {I18NextService.i18n.t("verify_password")}
- </label>
- <div className="col-sm-10">
- <input
- type="password"
- id="register-verify-password"
- value={this.state.form.password_verify}
- autoComplete="new-password"
- onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
- maxLength={60}
- className="form-control"
- required
- />
- </div>
+ <div className="mb-3">
+ <PasswordInput
+ id="register-verify-password"
+ value={this.state.form.password_verify}
+ onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
+ label={I18NextService.i18n.t("verify_password")}
+ />
</div>
- {siteView.local_site.registration_mode == "RequireApplication" && (
+ {siteView.local_site.registration_mode === "RequireApplication" && (
<>
<div className="mb-3 row">
<div className="offset-sm-2 col-sm-10">
);
}
- get passwordStrength(): string | undefined {
- const password = this.state.form.password;
- return password
- ? passwordStrength(password, passwordStrengthOptions).value
- : undefined;
- }
-
- get passwordColorClass(): string {
- const strength = this.passwordStrength;
-
- if (strength && ["weak", "medium"].includes(strength)) {
- return "text-warning";
- } else if (strength == "strong") {
- return "text-success";
- } else {
- return "text-danger";
- }
- }
-
async handleRegisterSubmit(i: Signup, event: any) {
event.preventDefault();
const {