@bipboys/remix-pwr-indicator NPM

remix-pwr-indicator

Remix password strength indicator based on wasm

Info

Remix iplementation password indicator component based on wasm.

example_pwr

Install

$ npm install @bipboys/remix-pwr-indicator @bipboys/pwr-scoring

Usage

Add data route for work with wasm, like .../routes/pwr.tsx

WASM are used to get the scoring value, but you can do use your own solution. Scoring get with zxcvbn rust package. Function scoring(password: string) return a value from 0 to 4. If you want to get all of the entropy data from zxcvbn package please use entropy(password: string) function.

import { LoaderArgs, json } from "@remix-run/node";

import { scoring } from "@bipboys/pwr-scoring";

export async function loader({ request }: LoaderArgs) {
  const url = new URL(request.url);
  const query = url.searchParams.get("query");

  let scoringValue: number | null = null;

  if (typeof query === "string") {
    if (query.length > 0) {
      scoringValue = scoring(query);
    }
  }

  return json({
    scoring: scoringValue,
  });
}

Add fetcher in your component, where you want to use it and return score from wasm package

  // Fetch data from .../route/pwr.tsx
  let fetcherPWR = useFetcher();

  // Get value from onChange callback in password input 
  function handleChange(value: any) {
    fetcherPWR.load(`/pwr?query=${value}`);
  }

  const pwrScore = fetcherPWR.data?.scoring;

Add password strength indicator with props

   <PasswordStrengthIndicator
     score={pwrScore}
     strengthTitle={{
       weak: "To short",
       bad: "Bad",
       good: "Good",
       strong: "Strong",
     }}
     strengthColor={[
       "#000",
       "#D44333",
       "#FFC043",
       "#21A453",
       "#21A453",
     ]}
   />

Component Props

type StrengthTitleT = {
  weak?: string;
  bad?: string;
  good?: string;
  strong?: string;
};

interface PasswordStrengthIndicatorI {
  score: number;
  strengthColor?: string[];
  strengthTitle?: StrengthTitleT;
  showLabel?: boolean;
  styleLabel?: React.CSSProperties;
  styleIndicator?: React.CSSProperties;
}