Password-input-component-with-tooltip NPM

Password Input Component With Tooltip

The Password Input Component is a reusable and secure UI component designed for user password input in web applications. It enhances security by including strength indication. The strength requirements default to the same as ASP.NET Core Identity and can be easily customized via props.

Features

Masking: Masks the password as it is entered for privacy.
Strength Indicator: Provides real-time feedback on the entered password's strength.
Customizable: Easy to customize styles and behaviors.

Installation

To install the Password Input Component, you can use npm:

npm i password-input-component-with-tooltip

Usage

After installation, you can import the Password Input Component into your project:

import PasswordInput from "PasswordInput";

function App() {
  return (
    <div>
      <PasswordInput />
    </div>
  );
}

export default App;

Props

The following props can be passed to the Password Input Component to customize its behavior:

minLength: Number that determines the minimum length of the password. Default: 6. nonAlphaNumeric: Boolean that determines whether the password must contain at least one non-alphanumeric character. Default: true. lowercase: Boolean that determines whether the password must contain at least one lowercase character. Default: true. uppercase: Boolean that determines whether the password must contain at least one uppercase character. Default: true. digit: Boolean that determines whether the password must contain at least one number. Default: true.

<PasswordTooltip
  minLength={12}
  nonAlphaNumeric={false}
  lowercase={false}
  uppercase={false}
  digit={false}
/>

onInputChange: Returns the event object when the input changes, just like the regular onChange function.

<PasswordTooltip onInputChange={(e) => console.log(e.target.value)} />

import { useState } from "react";
import PasswordTooltip from "./password-input-component/PasswordTooltip";

function App() {
  const [password, setPassword] = useState("");

  const handleChange = (e) => {
    setPassword(e.target.value);
  };

  return (
    <>
      <PasswordTooltip onInputChange={(e) => handleChange(e)} />
    </>
  );
}

export default App;

Styling

The component can be styled using CSS. Here are the classes you can target:

.password-input: The class for the input field. .password-tooltip: The class for the tooltip. Must use !important to override the following default styles:

-position -top -right -display -flex-direction -gap -padding -background-color -color

.password-tooltip {
  background-color: red !important;
}

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.