@navinc/base-react-components/src/password-input.js

Nav's Pattern Library

import React, { useState } from 'react'
import styled from 'styled-components'

import Input from './input.js'

export const PasswordInput = ({
  isPasswordShown,
  passwordStrengthScore,
  requiredPasswordScore,
  className,
  ...props
}) => {
  const [isPasswordShownState, setIsPasswordShownState] = useState(isPasswordShown)
  const handleToggleShowPassword = () => {
    setIsPasswordShownState((isPasswordShownState) => !isPasswordShownState)
  }
  return (
    <Input
      className={className}
      helperText={`${isPasswordShownState ? 'Hide' : 'Show'} password`}
      helperLinkAction={handleToggleShowPassword}
      type={isPasswordShownState ? 'text' : 'password'}
      passwordStrengthScore={passwordStrengthScore}
      requiredPasswordScore={requiredPasswordScore}
      {...props}
    />
  )
}
const StyledPasswordInput = styled(PasswordInput)``
export default StyledPasswordInput