react-strong-password-input
Base Interfaces
This are base props interfaces, that every implementation (correspondingly) receives
Bar
| Property | Type | Default | Description |
|---|
| currentLevel | number | undefined | current level for bar to be filled |
| levels | number | undefined | amount of levels |
Condition
| Property | Type | Default | Description |
|---|
| name | string | undefined | name of the condition (not label, label isn't neccesary in base interface, but as example it's present in default implementation) |
| satisfied | boolean | undefined | simple flag |
Container
Only children are required (optional, actually) for the container
Input
| Property | Type | Default | Description |
|---|
| value | string | undefined | value prop as in controlled input |
| onChange | React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined | onChange event handler |
StrongPasswordInput Interfaces
Condition
| Property | Type | Default | Description |
|---|
| name | string | undefined | name prop |
| validator | string => boolean | undefined | validator function, receives password, returns flag |
| conditionComponentProps | Omit<ConditionComponentProp, keyof ConditionBaseProps> | undefined | non-base props from the current ConditionComponentProp, that will be passed along with base props for this specific condition |
SecurityLevel
| Property | Type | Default | Description |
|---|
| name | string | undefined | name prop |
| conditionsRequire | number | undefined | how many conditions are needed for this security level |
| barComponentProps | Omit<BarComponentProps, keyof BarBaseProps> | undefined | non-base props from the current BarComponentProps, that will be passed along with base props for this specific security level |
StrongPasswordChangeEvent
| Property | Type | Default | Description |
|---|
| securityLevel | string | undefined | name of current security level |
| satisfiedConditions | string[] | undefined | array of names of satisfied conditions |
Main interface of the strong password input.
Couldn't find a way to provide default values for the components -_-.
StrongPasswordInput
| Property | Type | Default | Description |
|---|
| value | string | undefined | value to be passed into input component |
| showStrengthBar? | boolean | true | flag to render strength bar |
| showConditions? | boolean | true | flag to render conditions |
| onChange? | (event: StrongPasswordChangeEvent) => void | undefined | onChange handler with previously defined change even |
| securityLevels | SecurityLevel[] | undefined | possible security levels (like invalid, weak, normal, strong...) |
| conditions | Condition[] | undefined | conditions that to be checked upon password change |
| InputComponent | React.ComponentType | undefined | input component to be rendered within compose input |
| BarComponent | React.ComponentType | undefined | password strength bar component to be rendered within compose input |
| ConditionComponent | React.ComponentType | undefined | condition component to be rendered within conditions container component |
| ConditionContainerComponent | React.ComponentType<React.PropsWithChildren> | undefined | container component that will be used for conditions |
| StrongPasswordContainerComponent | React.ComponentType<React.PropsWithChildren> | undefined | main container of this compose input |
| conditionContainerComponentProps? | ConditionContainerComponentProps | undefined | additional props for conditions container |
| strongPasswordContainerComponentProps? | StrongPasswordContainerComponentProps | undefined | additional props for main container |
| inputComponentProps? | Partial<Omit<InputComponentProps, keyof InputBaseProps>> | undefined | additional props for input component |
| barComponentProps? | Partial<Omit<BarComponentProps, keyof BarBaseProps>> | undefined | additional props for strength bar component |
| conditionComponentProps? | Partial<Omit<ConditionComponentProps, keyof ConditionBaseProps> | undefined | additional props for conditions component |
Usage
Example with default components:
import React from "react";
import { BarDefault, InputDefault, ConditionDefault, ContainerDefault, StrongPasswordInput } from "react-strong-password-input";
function Default() {
return (
<StrongPasswordInput
// Couldn't find a way to provide those components as default values
InputComponent={InputDefault}
BarComponent={BarDefault}
ConditionComponent={ConditionDefault}
ConditionContainerComponent={ContainerDefault}
StrongPasswordContainerComponent={ContainerDefault}
//
strongPasswordContainerComponentProps={{
spacing: 1
}}
barComponentProps={{
background: "#f0f0f0"
}}
securityLevels={[
{
name: "invalid",
conditionsRequired: 0,
barComponentProps: {
barColor: "grey"
}
},
{
name: "tooWeak",
conditionsRequired: 1,
barComponentProps: {
barColor: "red",
}
},
{
name: "weak",
conditionsRequired: 2,
barComponentProps: {
barColor: "orange",
}
},
{
name: "good",
conditionsRequired: 3,
barComponentProps: {
barColor: "blue",
}
},
{
name: "strong",
conditionsRequired: 4,
barComponentProps: {
barColor: "green",
}
}
]}
conditions={[
{
name: "length5",
validator: (password: string) => password.length >= 5,
conditionComponentProps: {
label: "Minimum length of 5 characters."
}
},
{
name: "1number",
validator: (password: string) => /.*[0-9].*/.test(password),
conditionComponentProps: {
label: "Contains at least 1 number."
}
},
{
name: "1uppercase",
validator: (password: string) => /.*[A-Z].*/.test(password),
conditionComponentProps: {
label: "Contains at least 1 uppercase letter."
}
},
{
name: "1lowercase",
validator: (password: string) => /.*[a-z].*/.test(password),
conditionComponentProps: {
label: "Contains at least 1 lowercase letter."
}
}
]}
/>
);
}
Result:
Example with MUI
import { useState } from "react";
import { Circle, Done, Visibility, VisibilityOff } from "@mui/icons-material";
import { IconButton, LinearProgress, Stack, SxProps, TextField, TextFieldVariants, Theme, Typography } from "@mui/material";
import { green, grey, red } from "@mui/material/colors";
import { BarBaseProps, ConditionBaseProps, InputBaseProps, StrongPasswordInput } from "react-strong-password-input";
interface SimplePasswordInputProps extends InputBaseProps {
sx?: SxProps<Theme>,
variant?: TextFieldVariants,
}
function SimplePasswordInput({ value, onChange, sx, variant }: SimplePasswordInputProps) {
const [hidden, setHidden] = useState(true);
const hiddenHandler = () => setHidden(!hidden);
return (
<TextField
value={value}
onChange={onChange}
sx={sx}
variant={variant}
type={hidden ? "password" : "text"}
InputProps={{
endAdornment: <IconButton onClick={hiddenHandler}>
{hidden
? <Visibility />
: <VisibilityOff />
}
</IconButton>
}}
/>
);
}
interface LinearBarProps extends BarBaseProps {
barColor: string,
background?: string
}
function LinearBar({ background, barColor, levels, currentLevel }: LinearBarProps) {
const value = (currentLevel / levels) * 100;
return (
<Stack direction="row">
<LinearProgress
value={value}
variant="determinate"
sx={{
width: "100%",
background: background,
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: barColor,
}
}}
/>
</Stack>
);
}
interface SimpleConditionProp extends ConditionBaseProps {
label: string | React.ReactElement
}
function SimpleCondition({ label, satisfied }: SimpleConditionProp) {
return (
<Stack direction="row" spacing={1}>
{satisfied
? <Done fontSize="small" sx={{ color: green[300] }} />
: <Circle fontSize="small" sx={{ color: red[300] }} />
}
{typeof label === "string"
? <Typography>{label}</Typography>
: label
}
</Stack>
);
}
function MUIStrongPassword() {
return (
<StrongPasswordInput
InputComponent={SimplePasswordInput}
BarComponent={LinearBar}
ConditionComponent={SimpleCondition}
ConditionContainerComponent={Stack}
StrongPasswordContainerComponent={Stack}
conditionContainerComponentProps={{
spacing: 2,
sx: {
padding: 2,
background: grey[200],
borderRadius: 4
}
}}
strongPasswordContainerComponentProps={{
spacing: 2
}}
securityLevels={[
{
name: "invalid",
conditionsRequired: 0,
barComponentProps: {
barColor: "grey"
}
},
{
name: "tooWeak",
conditionsRequired: 1,
barComponentProps: {
barColor: "red"
}
},
{
name: "weak",
conditionsRequired: 2,
barComponentProps: {
barColor: "orange"
}
},
{
name: "good",
conditionsRequired: 3,
barComponentProps: {
barColor: "blue"
}
},
{
name: "strong",
conditionsRequired: 4,
barComponentProps: {
barColor: "green"
}
}
]}
conditions={[
{
name: "length5",
validator: (password: string) => password.length >= 5,
conditionComponentProps: {
label: "Minimum length of 5 characters."
}
},
{
name: "1number",
validator: (password: string) => /.*[0-9].*/.test(password),
conditionComponentProps: {
label: "Contains at least 1 number."
}
},
{
name: "1uppercase",
validator: (password: string) => /.*[A-Z].*/.test(password),
conditionComponentProps: {
label: "Contains at least 1 uppercase letter."
}
},
{
name: "1lowercase",
validator: (password: string) => /.*[a-z].*/.test(password),
conditionComponentProps: {
label: "Contains at least 1 lowercase letter."
}
}
]}
/>
);
}
Result:
