password-checklist-input
TypeScript icon, indicating that this package has built-in type declarations

0.2.6 • Public • Published

password-checklist-input

A React password input with list of password validation steps or conditions that should be fulfilled.

Demo


Gif

Installation

npm install password-checklist-input

or

yarn add password-checklist-input

Get started

Simple usage

import PasswordChecklist from 'password-checklist-input';
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: "="
      }}
    />

Custom icons

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

HTML input props

  <PasswordChecklist
    placeholder="Enter your password"
    // ...other input 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 'password-checklist-input';

const schema = z.object({
  password: z.string()
  .max(64, "Should not exceed 64 characters")
  .superRefine((value: string, ctx: any) => {
    const { allChecksPassed } = validatePasswordChecklist(value);
    if (allChecksPassed) return;
    ctx.addIssue({
      code: "custom",
      // maybe this message should not be displayed to the user
      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}
              className={Boolean(form.formState?.errors?.password) ? 'border-red-500' : ''}
            />
          )}
        />
        <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
containerClassName string empty Container class name
className string empty Input class name
hidePasswordIcon ReactNode null Custom icon for showing the password
hidePasswordIcon ReactNode null Custom icon for hiding the password

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.

Package Sidebar

Install

npm i password-checklist-input

Weekly Downloads

10

Version

0.2.6

License

MIT

Unpacked Size

28 kB

Total Files

31

Last publish

Collaborators

  • tiavina-mika