@propellerads/password-validator/dist/password-validator.esm.js

import React, { useEffect } from 'react';
import { Check, COLOR, SIZE } from '@propellerads/icon';
import styled from 'styled-components';
import { spacing } from '@propellerads/stylevariables';

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

var _templateObject, _templateObject2, _templateObject3;
var StyledPasswordValidator = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", "px;\n"])), spacing * 4);
var PasswordRule = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  min-height: 20px;\n  color: ", ";\n"])), function (props) {
  return props.isPassed ? 'black' : '#b3b3b3';
});
var PasswordIcon = /*#__PURE__*/styled.span(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: ", "px;;\n"])), spacing * 2);

var getDefaultRules = function getDefaultRules(_ref) {
  var passwordChangeRuleLengthText = _ref.passwordChangeRuleLengthText,
      passwordChangeRuleLatinLowercaseText = _ref.passwordChangeRuleLatinLowercaseText,
      passwordChangeRuleLatinUppercaseText = _ref.passwordChangeRuleLatinUppercaseText,
      passwordChangeRuleDigitsText = _ref.passwordChangeRuleDigitsText,
      passwordChangeRuleIsEqualText = _ref.passwordChangeRuleIsEqualText;
  return [{
    test: function test(value) {
      return value.length >= 8;
    },
    label: passwordChangeRuleLengthText,
    key: 'passwordChangeRuleLengthText'
  }, {
    test: function test(value) {
      return /[a-z]/.test(value);
    },
    label: passwordChangeRuleLatinLowercaseText,
    key: 'passwordChangeRuleLatinLowercaseText'
  }, {
    test: function test(value) {
      return /[A-Z]/.test(value);
    },
    label: passwordChangeRuleLatinUppercaseText,
    key: 'passwordChangeRuleLatinUppercaseText'
  }, {
    test: function test(value) {
      return /\d/.test(value);
    },
    label: passwordChangeRuleDigitsText,
    key: 'passwordChangeRuleDigitsText'
  }, {
    test: function test(oneValue, twoValue) {
      return oneValue && twoValue && oneValue === twoValue;
    },
    label: passwordChangeRuleIsEqualText,
    key: 'passwordChangeRuleIsEqualText'
  }];
};

var PasswordValidator = function PasswordValidator(_ref2) {
  var rules = _ref2.rules,
      _ref2$password = _ref2.password,
      password = _ref2$password === void 0 ? '' : _ref2$password,
      _ref2$confirmPassword = _ref2.confirmPassword,
      confirmPassword = _ref2$confirmPassword === void 0 ? '' : _ref2$confirmPassword,
      _ref2$onPassedRuleCla = _ref2.onPassedRuleClassName,
      onPassedRuleClassName = _ref2$onPassedRuleCla === void 0 ? 'PasswordValidator__rule_passed' : _ref2$onPassedRuleCla,
      _ref2$onFailedRuleCla = _ref2.onFailedRuleClassName,
      onFailedRuleClassName = _ref2$onFailedRuleCla === void 0 ? 'PasswordValidator__rule' : _ref2$onFailedRuleCla,
      onTestsPassed = _ref2.onTestsPassed;
  var testResults = rules.map(function (rule) {
    return Boolean(rule.test(password, confirmPassword));
  });
  useEffect(function () {
    if (!onTestsPassed) {
      return;
    }

    onTestsPassed(testResults.every(function (value) {
      return value;
    }));
  }, [password, confirmPassword, rules]);
  return React.createElement(StyledPasswordValidator, null, rules.map(function (rule, index) {
    var isPassed = testResults[index];
    return React.createElement(PasswordRule, {
      className: isPassed ? onPassedRuleClassName : onFailedRuleClassName,
      isPassed: isPassed,
      key: rule.label
    }, React.createElement(PasswordIcon, null, React.createElement(Check, {
      color: rule.test(password, confirmPassword) ? COLOR.SUCCESS : COLOR.GRAY,
      size: SIZE.SMALL
    })), rule.label);
  }));
};

export default PasswordValidator;
export { getDefaultRules };
//# sourceMappingURL=password-validator.esm.js.map