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