@navinc/base-react-components/src/password-strength-meter.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import { Copy } from './copy'
import { Text } from './text'
import { good, fair, poor } from './theme'

const getPasswordScoreDefinition = (value, requiredScore) => {
  if (value >= requiredScore) {
    return {
      label: 'Strong',
      color: good,
    }
  } else if (value === 0) {
    return {
      label: 'Weak',
      color: poor,
    }
  } else if (value < requiredScore) {
    return {
      label: 'Fair',
      color: fair,
    }
  } else {
    return {
      label: 'Weak',
      color: poor,
    }
  }
}

const StyledPasswordMeterSection = styled.div`
  display: grid;
  grid-gap: 8px;
`

const StyledProgress = styled.progress`
  appearance: none;
  &::-webkit-progress-bar {
    background-color: ${({ theme }) => theme.neutral100};
    border-radius: 12px;
  }
  &::-webkit-progress-value {
    border-radius: 12px;
    background-color: ${({ value, max }) => getPasswordScoreDefinition(value, max).color};
  }
  height: 8px;
  width: 100%;
`

export const PasswordStrengthMeter = ({ requiredPasswordScore, passwordStrengthScore, className }) => {
  return (
    <StyledPasswordMeterSection className={className}>
      <StyledProgress max={requiredPasswordScore} value={passwordStrengthScore} />
      <Copy size="sm">
        Password strength:{' '}
        <Text $bold>{getPasswordScoreDefinition(passwordStrengthScore, requiredPasswordScore).label}</Text>
      </Copy>
    </StyledPasswordMeterSection>
  )
}

const StyledPasswordStrengthMeter = styled(PasswordStrengthMeter)``
export default StyledPasswordStrengthMeter