{"size": 1387, "ext": "js", "max_stars_repo_path": "src/index.js", "max_stars_repo_name": "cybersasi/react-password-strength-indicator", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/index.js", "max_issues_repo_name": "cybersasi/react-password-strength-indicator", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/index.js", "max_forks_repo_name": "cybersasi/react-password-strength-indicator", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.5084745763, "max_line_length": 68, "alphanum_fraction": 0.6041816871}
import React from 'react'
import PropTypes from 'prop-types'
import zxcvbn from 'zxcvbn'
import styled from 'styled-components'
import { STRENGTH_COLOR, STRENGTH_TEXT } from './constants'
import MetersOverlay from './meters-overlay'
import Meters from './meters'

const ReactPasswordStrengthStyled = styled.div`
  width: 300px;
  display: flex;
  flex-direction: column;

  > span {
    align-self: flex-end;
  }

  .meters {
    display: flex;
  }
`

const ReactPasswordStrength = ({ width = 300, passwordValue }) => {
  const { score } =  zxcvbn(passwordValue)
  const maxMeters = 4
  const meterWidth = width / maxMeters
  const isVeryWeek = score === 0

  return (
    <ReactPasswordStrengthStyled>
      <div className='meters'>
        {isVeryWeek ? (
          <MetersOverlay
            maxMeters={maxMeters}
            meterWidth={meterWidth}
          />
        ) : (
          <Meters
            meterValue={score}
            meterWidth={meterWidth}
          />
        )}
      </div>
      {passwordValue &&
        <span style={{ color: STRENGTH_COLOR[score] }}>
          {STRENGTH_TEXT[score]}
        </span>
      }
    </ReactPasswordStrengthStyled>
  )
}

ReactPasswordStrength.propTypes = {
  width: PropTypes.number,
  passwordValue: PropTypes.string.isRequired
}

export default ReactPasswordStrength
