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: