remix-pwr-indicator
Remix password strength indicator based on wasm
Info
Remix iplementation password indicator component based on wasm.
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;
}Remix support
Tested with 1.7.2 version.
License
the MIT license.
