react-password-check
Version:
A simple password strength indicator component for react.
57 lines • 5.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var passwordText_1 = require("../../utils/passwordText");
var theme_1 = require("../../utils/theme");
var validation_1 = require("../../utils/validation");
var ImageAndText_1 = tslib_1.__importDefault(require("../ImageAndText"));
require("./index.css");
function PasswordCheck(_a) {
var _b, _c;
var value = _a.value, name = _a.name, passwordsShouldMatch = _a.passwordsShouldMatch, position = _a.position, images = _a.images, containerStyle = _a.containerStyle;
var _d = (0, react_1.useState)(0), height = _d[0], setHeight = _d[1];
var ref = (0, react_1.useRef)(null);
var divStyle = position === 'top' ? { top: -height } : {};
(0, react_1.useEffect)(function () {
if (ref.current) {
setHeight(ref.current.clientHeight);
}
});
return (react_1.default.createElement("div", { ref: ref, style: tslib_1.__assign(tslib_1.__assign({ position: 'absolute', width: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column' }, containerStyle), divStyle) },
position === 'bottom' ? (react_1.default.createElement("div", { style: {
width: 0,
height: 0,
borderLeft: '15px solid transparent',
borderRight: '15px solid transparent',
borderBottom: "25px solid ".concat(theme_1.colors.lightGray),
} })) : null,
react_1.default.createElement("div", { style: {
width: '100%',
backgroundColor: theme_1.colors.white,
borderColor: theme_1.colors.lightGray,
border: "1px solid ".concat(theme_1.colors.lightGray),
padding: '0.5rem 1rem',
borderRadius: '0.3rem',
boxSizing: 'border-box',
} },
react_1.default.createElement("p", { style: {
margin: '0.5rem 0',
} }, passwordText_1.passwordText.heading),
react_1.default.createElement("div", null,
react_1.default.createElement(ImageAndText_1.default, { image: (0, validation_1.atLeastOneSmallLetter)(value) ? images === null || images === void 0 ? void 0 : images.right : images === null || images === void 0 ? void 0 : images.wrong, message: passwordText_1.passwordText.atLeastOneSmallLetter, color: (0, validation_1.atLeastOneSmallLetter)(value) ? theme_1.colors.green : theme_1.colors.red }),
react_1.default.createElement(ImageAndText_1.default, { image: (0, validation_1.atLeastOneCapitalLetter)(value) ? images === null || images === void 0 ? void 0 : images.right : images === null || images === void 0 ? void 0 : images.wrong, message: passwordText_1.passwordText.atLeastOneCapitalLetter, color: (0, validation_1.atLeastOneCapitalLetter)(value) ? theme_1.colors.green : theme_1.colors.red }),
react_1.default.createElement(ImageAndText_1.default, { image: (0, validation_1.atLeastOneNumber)(value) ? images === null || images === void 0 ? void 0 : images.right : images === null || images === void 0 ? void 0 : images.wrong, message: passwordText_1.passwordText.atLeastOneNumber, color: (0, validation_1.atLeastOneNumber)(value) ? theme_1.colors.green : theme_1.colors.red }),
react_1.default.createElement(ImageAndText_1.default, { image: (0, validation_1.atLeastOneSpecialCharacter)(value) ? images === null || images === void 0 ? void 0 : images.right : images === null || images === void 0 ? void 0 : images.wrong, message: passwordText_1.passwordText.atLeastOneSpecialCharacter, color: (0, validation_1.atLeastOneSpecialCharacter)(value) ? theme_1.colors.green : theme_1.colors.red }),
react_1.default.createElement(ImageAndText_1.default, { image: ((_b = value.trim()) === null || _b === void 0 ? void 0 : _b.length) > 7 ? images === null || images === void 0 ? void 0 : images.right : images === null || images === void 0 ? void 0 : images.wrong, message: passwordText_1.passwordText.atLeastEightCharacters, color: ((_c = value.trim()) === null || _c === void 0 ? void 0 : _c.length) > 7 ? theme_1.colors.green : theme_1.colors.red }),
name === 'confirmPassword' ? (react_1.default.createElement(ImageAndText_1.default, { image: !passwordsShouldMatch ? images === null || images === void 0 ? void 0 : images.right : images === null || images === void 0 ? void 0 : images.wrong, message: passwordText_1.passwordText.passwordsShouldMatch, color: !passwordsShouldMatch ? theme_1.colors.green : theme_1.colors.red })) : null)),
position === 'top' ? (react_1.default.createElement("div", { style: {
width: 0,
height: 0,
borderLeft: '15px solid transparent',
borderRight: '15px solid transparent',
borderTop: "25px solid ".concat(theme_1.colors.lightGray),
} })) : null));
}
exports.default = PasswordCheck;
//# sourceMappingURL=index.js.map