styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
107 lines (106 loc) • 3.98 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const context_1 = require("../../../../context");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const PasswordMeter = styled_components_1.default.div `
margin: 10px 0px;
height: 10px;
background: #f00;
width: 100%;
transition-property: width;
transition-duration: 0.5s;
clear: both;
`;
const Wrap = styled_components_1.default.div `
display: flex;
flex-direction: column;
`;
const scorePassword = (pass) => {
let score = 0;
if (!pass)
return score;
let letters = {};
for (let i = 0; i < pass.length; i++) {
letters[pass[i]] = (letters[pass[i]] || 0) + 1;
score += 5.0 / letters[pass[i]];
}
let variations = {
digits: /\d/.test(pass),
lower: /[a-z]/.test(pass),
upper: /[A-Z]/.test(pass),
nonWords: /\W/.test(pass),
};
let variationCount = 0;
for (var check in variations) {
variationCount += variations[check] === true ? 1 : 0;
}
score += (variationCount - 1) * 10;
return parseInt(score.toString());
};
const usePasswordStrength = (password) => {
const { translate: T } = context_1.useFormBuilderContext();
const getStrengthText = react_1.useCallback((s) => {
if (s > 80)
return T("password-input-strength-strong");
if (s > 60)
return T("password-input-strength-good");
if (s >= 30)
return T("password-input-strength-medium");
return T("password-input-strength-weak");
}, [T]);
const getStrengthColor = (s) => {
if (s > 80)
return "#52980D";
if (s > 60)
return "#7FD11B";
if (s >= 30)
return "#FBD959";
return "#F15151";
};
const getStrengthPercent = (s) => {
if (s > 80)
return 100;
if (s > 60)
return 75;
if (s >= 30)
return 50;
return 25;
};
let score = scorePassword(password);
let [strengthText, setStrengthText] = react_1.useState(getStrengthText(score));
let [strengthColor, setStrengthColor] = react_1.useState(getStrengthColor(score));
let [strengthPer, setStrengthPer] = react_1.useState(getStrengthPercent(score));
react_1.useEffect(() => {
setStrengthText(getStrengthText(score));
setStrengthColor(getStrengthColor(score));
setStrengthPer(getStrengthPercent(score));
}, [getStrengthText, score]);
return [strengthText, strengthColor, strengthPer];
};
const PasswordStrength = (props) => {
let { password, onChange } = props;
const { translate: T } = context_1.useFormBuilderContext();
let [passStrengthText, passStrengthColor, passStrengthPer,] = usePasswordStrength(password);
react_1.useEffect(() => {
if (passStrengthPer) {
onChange && onChange(passStrengthPer);
}
}, [onChange, passStrengthPer]);
return (jsx_runtime_1.jsxs(Wrap, { children: [" ", jsx_runtime_1.jsx(PasswordMeter, { style: {
width: `${passStrengthPer}%`,
background: passStrengthColor,
height: "7px",
marginBottom: "5px",
} }, void 0),
jsx_runtime_1.jsxs("span", Object.assign({ style: {
display: "inline",
fontWeight: "bold",
margin: "0px 0px 20px 0px",
} }, { children: [T("password-input-strength-label"), " :", jsx_runtime_1.jsxs("span", Object.assign({ style: { fontWeight: "normal" } }, { children: [" ", passStrengthText, " "] }), void 0)] }), void 0)] }, void 0));
};
exports.default = PasswordStrength;