@purpurds/password-field 6.4.0

package/src/password-strength.tsx

@@ -0,0 +1,79 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import c from "classnames/bind";
+
+import styles from "./password-strength.module.scss";
+import { PasswordStrengthIndicator } from "./password-strength-indicator";
+import { usePasswordStrength } from "./use-password-strength";
+const cx = c.bind(styles);
+
+export type PasswordStrengthProps = {
+  ["data-testid"]?: string;
+  className?: string;
+  value: string;
+  label: string;
+  weakText: string;
+  mediumText: string;
+  strongText: string;
+};
+
+const rootClassName = "purpur-password-strength";
+
+export const PasswordStrength = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "password-strength",
+      className,
+      value,
+      label,
+      weakText,
+      mediumText,
+      strongText,
+      ...props
+    }: PasswordStrengthProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+    const { score, passwordStrength, currentPasswordStrengthText } = usePasswordStrength(
+      value,
+      weakText,
+      mediumText,
+      strongText
+    );
+
+    return (
+      <div data-testid={dataTestId} className={classes} ref={ref} {...props}>
+        <div className={cx(`${rootClassName}__indicator-container`)}>
+          <PasswordStrengthIndicator
+            active={!!passwordStrength}
+            passwordStrength={passwordStrength}
+          />
+          <PasswordStrengthIndicator
+            active={!!passwordStrength && score > 1}
+            passwordStrength={passwordStrength}
+          />
+          <PasswordStrengthIndicator
+            active={!!passwordStrength && score > 2}
+            passwordStrength={passwordStrength}
+          />
+        </div>
+        <Paragraph
+          aria-live="polite"
+          data-testid={`${dataTestId}-text`}
+          className={cx([
+            `${rootClassName}__password-strength-text`,
+            { [`${rootClassName}__password-strength-text--${passwordStrength}`]: passwordStrength },
+          ])}
+        >
+          <span className={cx(`${rootClassName}__password-strength-label`)}>
+            {label}
+            {currentPasswordStrengthText ? ": " : ""}
+          </span>
+          {currentPasswordStrengthText}
+        </Paragraph>
+      </div>
+    );
+  }
+);
+
+PasswordStrength.displayName = "PasswordStrength";

package/src/types.ts

@@ -0,0 +1,7 @@
+import { FIELD_TYPE, PASSWORD_STRENGTH } from "./constants";
+
+export type PasswordStrengthValue = (typeof PASSWORD_STRENGTH)[keyof typeof PASSWORD_STRENGTH];
+export type FieldType = (typeof FIELD_TYPE)[keyof typeof FIELD_TYPE];
+export type PasswordStrengthMapValue = [PasswordStrengthValue, string];
+
+export type PasswordScore = 0 | 1 | 2 | 3 | 4;

package/src/use-password-strength.ts

@@ -0,0 +1,61 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { PASSWORD_STRENGTH } from "./constants";
+import {
+  type PasswordScore,
+  type PasswordStrengthMapValue,
+  type PasswordStrengthValue,
+} from "./types";
+
+type UsePasswordStrengthHook = {
+  score: number;
+  passwordStrength: PasswordStrengthValue | undefined;
+  currentPasswordStrengthText: string | undefined;
+};
+
+export const usePasswordStrength = (
+  password: string,
+  weakText: string,
+  mediumText: string,
+  strongText: string
+): UsePasswordStrengthHook => {
+  const [score, setScore] = useState<PasswordScore>(0);
+  const [passwordStrength, setPasswordStrength] = useState<PasswordStrengthValue | undefined>();
+  const [currentPasswordStrengthText, setCurrentPasswordStrengthText] = useState<
+    string | undefined
+  >(undefined);
+
+  const passwordStrengthMap: Record<PasswordScore, PasswordStrengthMapValue> = useMemo(
+    () => ({
+      0: [PASSWORD_STRENGTH.WEAK, weakText],
+      1: [PASSWORD_STRENGTH.WEAK, weakText],
+      2: [PASSWORD_STRENGTH.MEDIUM, mediumText],
+      3: [PASSWORD_STRENGTH.STRONG, strongText],
+      4: [PASSWORD_STRENGTH.STRONG, strongText],
+    }),
+    [weakText, mediumText, strongText]
+  );
+
+  useEffect(() => {
+    (async () => {
+      if (!password) {
+        setScore(0);
+        setPasswordStrength(undefined);
+        setCurrentPasswordStrengthText(undefined);
+      } else {
+        const { default: zxcvbn } = await import("zxcvbn");
+        const { score } = zxcvbn(password);
+        const [passwordStrength, passwordStrengthText] = passwordStrengthMap[score];
+        setScore(score);
+        setPasswordStrength(passwordStrength);
+        setCurrentPasswordStrengthText(passwordStrengthText);
+      }
+    })();
+  }, [password, passwordStrengthMap]);
+
+  return {
+    score,
+    passwordStrength,
+    currentPasswordStrengthText,
+  };
+};