secure-password-input-test v0.1.0

Create — Secure Password Input

This package features a React component of a password input. Not just any password input, but a secure one.

How is that possible? We implemented the nifty open source ZXCVBN password strength estimation package from Dropbox. This package features several algorithms in order to provide the user with very detailed feedback about the strength of the password they want to register, for any given project.

Features

• Easy to install and use
• TypeScript support
• Works with user's password manager
• Comes with a 'Reveal password' button
• Option to render a link to an external document, for extra password-related advice
• Extends normal HTML input element, adding some customization
• Provide user with a rating of their password between 0 and 4
• Callback on input; provides callback with password and score

• Custom styling with CSS variables

Installation

npm

npm install @createnl/secure-password-input

yarn

yarn add @createnl/secure-password-input

Usage

import React from 'react';
import SecurePasswordInput from '@createnl/secure-password-input';  
  
const ExampleComponent = () => {
  const handleChange = (value, isValid) => {
    console.log('Password:', value);
    console.log('Is valid:', isValid);
  };

  return (
    <SecurePasswordInput
      label="Secure password input"
      adviceLinkText="Read our password advice"
      adviceLinkURL="https://create.nl/wachtwoord-advies"
      onChange={handleChange}
      className="custom-class-name"
    />
  )
);  
  
export default ExampleComponent;  

Props

Score table

The value of the password input will be rated with a score between 0 and 4. The higher the score, the better. Low scores are given to passwords that are either very common, or easy to guess.

Custom styling

Want to add your own styling to the password input? It makes use of native CSS variables, so it's easy to update the values that are available, within just one CSS rule.

/*
  Custom class of the Secure Password Input (SPI)
  Shown values are used as defaults, if no custom styling is given 
*/

.custom-class-name {  
  --SPI-theme-color-primary: red;  
  --SPI-theme-color-white: white;  
  --SPI-theme-color-black: black;  
  
  --SPI-font-family: system-ui, sans-serif;  
  --SPI-font-size: 1rem;  
  
  --SPI-label-margin: 0 0 .625rem;  
  --SPI-label-font-size: inherit;  
  --SPI-label-font-weight: bold;  
  
  --SPI-input-width: 100%;  
  --SPI-input-height: auto;  
  --SPI-input-margin: 0;  
  --SPI-input-padding: .5rem;  
  --SPI-input-border: 1px solid var(--SPI-theme-color-black);  
  --SPI-input-background-color: transparent;  
  
  --SPI-visibility-button-padding: .5rem;  
  --SPI-visibility-button-color: var(--SPI-theme-color-white);  
  --SPI-visibility-button-border: 1px solid var(--SPI-theme-color-black);  
  --SPI-visibility-button-background-color: var(--SPI-theme-color-primary);  
  
  --SPI-visibility-icon-size: 1rem;  
  
  --SPI-advice-link-color: var(--SPI-theme-color-primary);  
  --SPI-advice-link-margin: .625rem 0 0;  
  
  --SPI-strength-label-margin: .625rem 0 0;  
  --SPI-strength-label-font-size: inherit;  
  
  --SPI-strength-meter-width: 100%;  
  --SPI-strength-meter-height: .5rem;  
  --SPI-strength-meter-margin: .625rem 0 0;  
  --SPI-strength-meter-background-color: var(--SPI-theme-color-black);  
  
  --SPI-strength-meter-color-weak: #ff0018;  
  --SPI-strength-meter-color-soso: #ff6800;  
  --SPI-strength-meter-color-good: #ffe800;  
  --SPI-strength-meter-color-strong: #00ff68;  
  
  --SPI-warning-margin: .625rem 0 0;  
  --SPI-warning-font-size: inherit;  
  
  --SPI-suggestion-list-margin: .625rem 0 0;  
  --SPI-suggestion-list-padding: 0 0 0 1rem;  
  
  --SPI-suggestion-margin: .5rem 0 0;  
  --SPI-suggestion-font-size: inherit;  
}

Browser compatibility

Not tested yet! Modern browsers should work