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

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 (_jsxs(StyledPasswordMeterSection, Object.assign({ className: className }, { children: [_jsx(StyledProgress, { max: requiredPasswordScore, value: passwordStrengthScore }, void 0), _jsxs(Copy, Object.assign({ size: "sm" }, { children: ["Password strength:", ' ', _jsx(Text, Object.assign({ "$bold": true }, { children: getPasswordScoreDefinition(passwordStrengthScore, requiredPasswordScore).label }), void 0)] }), void 0)] }), void 0));
};
const StyledPasswordStrengthMeter = styled(PasswordStrengthMeter) ``;
export default StyledPasswordStrengthMeter;
//# sourceMappingURL=password-strength-meter.js.map