/ react

React Nice Input Password - Component

Trabalhando esses dias eu senti a necessidade de criar um componente de senha que mostrasse a força da senha. Mas a regra da força deveria ser customizável para que fosse possível utilizar esse mesmo componente em difentes projetos.

Nessa brincadeira acabei por criar um componente react para isso e abaixo vou mostrar um pouco dele.

Ele é um componente react que eu deixei aberto no github e também o coloquei no npm.

https://github.com/renanborgez/react-nice-input-password

68747470733a2f2f696d6167652e6962622e636f2f644a4e4648522f73616d706c652e706e67

Instalação

Para instalar o componente basta usar o npm

npm install react-nice-input-password --save

Como usar

Para usar no seu código basta chamar:

import NiceInputPassword from 'react-nice-input-password';
import 'react-nice-input-password/dist/react-nice-input-password.css';

E agora você pode chamar o componente como no exemplo abaixo:

<NiceInputPassword
    label="My password field"
    name="passwordField"
    value={value}
    securityLevels={[
    {
      descriptionLabel: 'At least 1 number',
      validator: /.*[0-9].*/,
    },
    {
      descriptionLabel: 'At least 1 letter',
      validator: /.*[a-zA-Z].*/,
    },
    {
      descriptionLabel: 'At least 1 uppercase letter',
      validator: /.*[A-Z].*/,
    },
    ]}
    showSecurityLevelBar
    showSecurityLevelDescription
    onChange={this.handleChange}
/>

Explicando um pouco como o componente funciona:

A properiedade label será usada para renderizar a label que ficará logo acima do componente.

As propriedades name, value e onChange se comportam da mesma forma que um input normal.

showSecurityLevelBar é um boolean que sinaliza se você vai querer ou não que aparece a barrinha com o nivel de força do password e a propriedade showSecurityLevelDescription indica para mostrar a descrição do validador de força do password passada pela propriedade securityLevels -> descriptionLabel.

E pra finalizar temos a propriedade securityLevels que é efetivamente aonde o componente receberá as formulas para validação do password.
Essa propriedade recebe um array de objects e cada um precisa ter a seguinte assinatura

{ 
    descriptionLabel: '', // Essa é a descrição que irá aparecer na showSecurityLevelDescription
    validator: /.*[A-Z].*/, // Essa é o regex para validar o password
}

Assim já é possível utilizar o componente na sua forma mais básica.
Vale notar que o CSS desse componente é MUITO simples e isso foi feito propositalmente para que qualquer um consiga usa-lo nos mais diversos formulários sem que o CSS fique com muitos overrides.