Skip to content

A Material-UI password input with list of password validation steps or conditions that should be fulfilled.

Notifications You must be signed in to change notification settings

tiavina-mika/mui-password-checklist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mui-password-checklist

A Material-UI password input with list of password validation steps or conditions that should be fulfilled.

Demo


Gif

Installation

npm install mui-password-checklist

or

yarn add mui-password-checklist

Please note that @mui/material (and their @emotion/ peers) are peer dependencies, meaning you should ensure they are installed before installing mui-password-checklist.

npm install @mui/material @emotion/react @emotion/styled

or

yarn add @mui/material @emotion/react @emotion/styled

Get started

Simple usage

import PasswordChecklist from 'mui-password-checklist';
import { useState, ChangeEvent } from "react";

function App() {
  const [password, setPassword] = useState<string>('');

  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  }

  return (
    <PasswordChecklist value={password} onChange={handlePasswordChange} />
  );
}

Override

    <PasswordChecklist
      // override class name
      className='border-1 border-gray-500'
      // override error messages
      validationMessages={{
        minLength: 'Devrait contenir au moins 6 caractères',
        lowerCase: 'Devrait contenir au moins une lettre minuscule',
        upperCase: 'Devrait contenir au moins une lettre majuscule',
        number: 'Devrait contenir au moins un chiffre',
        specialCharacters: 'Devrait contenir au moins un caractère spécial',
      }}
      // override options
      options={{
        minLength: 6,
        allowedSpecialChar: "="
      }}
      // override TextFieldProps
      fullWidth
    />

Custom icons

  <PasswordChecklist
    hidePasswordIcon={<EyeOff />}
    showPasswordIcon={<EyeOn />}
  />

Material-UI TextField props

  <PasswordChecklist
    placeholder="Enter your password"
    // ...other mui TextField props
  />

Using it with Zod and React Hook Form

Use the validatePasswordChecklist function to check if all rules are respected.

import { zodResolver } from '@hookform/resolvers/zod';
import { SubmitHandler, useForm, FormProvider, Controller } from 'react-hook-form';
import z from 'zod';
import PasswordChecklist, { validatePasswordChecklist } from 'mui-password-checklist';

const schema = z.object({
  password: z.string()
  .max(64, "Should not exceed 64 characters")
  .superRefine((value: string, ctx: any) => {
    const { allChecksPassed } = validatePasswordChecklist(value);
    // no need to trigger the error if the password rules are met
    if (allChecksPassed) return;
    ctx.addIssue({
      code: "custom",
      message: "Should contain at least 8 characters, one lowercase, one uppercase, one number, and one special character",
    });
  })
});

type FormValues = z.infer<typeof schema>;

export default function SignUpForm() {
  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
  });

  const handleFormSubmit: SubmitHandler<FormValues> = async values => console.log('values: ', values);

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(handleFormSubmit)}>
        <Controller
          name="password"
          control={form.control}
          defaultValue=""
          render={({ field }) => (
            <PasswordChecklist
              {...field}
              error={Boolean(form.formState?.errors?.password)}
              // display the error message only if the error is not a custom one
              helperText={form.formState?.errors?.password?.type !== 'custom' ? form.formState?.errors?.password?.message : ''}
            />
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
};

See here for more examples that use PasswordChecklist.

Props

Props Type Default value Description
options CheckPasswordOptions null Override colors and labels of each strength
validationMessages ValidationMessages null Override each password validation massages
className string empty TextField class name
hidePasswordIcon ReactNode null Custom icon for showing the password
hidePasswordIcon ReactNode null Custom icon for hiding the password
...otherProps TextFieldProps null All Material UI TextField props

Types

ValidationMessages

Name Type Description
minLength string Message to display for the minimum required password length
lowerCase string Message to display for the lowercase validation
upperCase string Message to display for the uppercase validation
number string Message to display for the number validation
specialCharacters string Message to display for the required special characters

CheckPasswordOptions

Name Type Default value Description
minLength number 8 Override the minimum required password length
allowedSpecialChar string !@#$%^&*(),.?":{}<>\[\]\\/`~;'_+=- Override the allowed special characters

Contributing

Get started here.