@navinc/base-react-components
Version:
Nav's Pattern Library
61 lines • 2.42 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PasswordStrengthMeter = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const copy_1 = require("./copy");
const text_1 = require("./text");
const theme_1 = require("./theme");
const getPasswordScoreDefinition = (value, requiredScore) => {
if (value >= requiredScore) {
return {
label: 'Strong',
color: theme_1.good,
};
}
else if (value === 0) {
return {
label: 'Weak',
color: theme_1.poor,
};
}
else if (value < requiredScore) {
return {
label: 'Fair',
color: theme_1.fair,
};
}
else {
return {
label: 'Weak',
color: theme_1.poor,
};
}
};
const StyledPasswordMeterSection = styled_components_1.default.div `
display: grid;
grid-gap: 8px;
`;
const StyledProgress = styled_components_1.default.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%;
`;
const PasswordStrengthMeter = ({ requiredPasswordScore, passwordStrengthScore, className }) => {
return ((0, jsx_runtime_1.jsxs)(StyledPasswordMeterSection, Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(StyledProgress, { max: requiredPasswordScore, value: passwordStrengthScore }, void 0), (0, jsx_runtime_1.jsxs)(copy_1.Copy, Object.assign({ size: "sm" }, { children: ["Password strength:", ' ', (0, jsx_runtime_1.jsx)(text_1.Text, Object.assign({ "$bold": true }, { children: getPasswordScoreDefinition(passwordStrengthScore, requiredPasswordScore).label }), void 0)] }), void 0)] }), void 0));
};
exports.PasswordStrengthMeter = PasswordStrengthMeter;
const StyledPasswordStrengthMeter = (0, styled_components_1.default)(exports.PasswordStrengthMeter) ``;
exports.default = StyledPasswordStrengthMeter;
//# sourceMappingURL=password-strength-meter.js.map