{"size": 3042, "ext": "js", "max_stars_repo_path": "src/components/passwordStrength/index.js", "max_stars_repo_name": "GiftForGood/website", "max_stars_repo_stars_event_min_datetime": "2020-03-11T04:31:29.000Z", "max_stars_repo_stars_event_max_datetime": "2020-09-08T18:49:10.000Z", "max_issues_repo_path": "src/components/passwordStrength/index.js", "max_issues_repo_name": "GiftForGood/website", "max_issues_repo_issues_event_min_datetime": "2020-04-16T08:36:58.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-17T20:49:37.000Z", "max_forks_repo_path": "src/components/passwordStrength/index.js", "max_forks_repo_name": "GiftForGood/website", "max_forks_repo_forks_event_min_datetime": "2020-03-05T08:57:32.000Z", "max_forks_repo_forks_event_max_datetime": "2020-12-25T05:46:15.000Z"}
{"max_stars_count": 4, "max_issues_count": 133, "max_forks_count": 5, "avg_line_length": 32.7096774194, "max_line_length": 91, "alphanum_fraction": 0.6535174227}
import React, { useEffect, useState } from 'react';

// components
import { Stack, Text } from '@kiwicom/orbit-components/lib';
import { Close, Check } from '@kiwicom/orbit-components/lib/icons';

// constants
import { colors } from '@constants/colors';

const PasswordStrength = ({ password, show, onSecure, onNotSecure }) => {
  const [isMinimum12Chars, setMinimum12Chars] = useState(false);
  const [isAtLeastOneUppercaseChar, setIsAtLeastOneUppercaseChar] = useState(false);
  const [isAtLeastOneLowercaseChar, setIsAtLeastOneLowercaseChar] = useState(false);
  const [isAtLeastOneSpecialChar, setIsAtLeastOneSpecialChar] = useState(false);
  const [isAtLeastOneDigit, setIsAtLeastOneDigit] = useState(false);

  const testMinimum12Chars = (password) => {
    const tester = new RegExp(/^(?=.{12,})/);
    return tester.test(password);
  };

  const testAtLeastOneUppercaseChar = (password) => {
    const tester = new RegExp(/^(?=.*[A-Z])/);
    return tester.test(password);
  };

  const testAtLeastOneLowercaseChar = (password) => {
    const tester = new RegExp(/^(?=.*[a-z])/);
    return tester.test(password);
  };

  const testAtLeastOneSpecialChar = (password) => {
    const tester = new RegExp(/^(?=.*[\!\@\#\$%\^&\*\-\+\=\?\;\:\[\]\{\}\|\`\~\"\'\_\.])/);
    return tester.test(password);
  };

  const testAtLeastOneDigit = (password) => {
    const tester = new RegExp(/^(?=.*[0-9])/);
    return tester.test(password);
  };

  useEffect(() => {
    if (password) {
      const min12 = testMinimum12Chars(password);
      const oneUppercase = testAtLeastOneUppercaseChar(password);
      const oneLowercase = testAtLeastOneLowercaseChar(password);
      const oneSpecialChar = testAtLeastOneSpecialChar(password);
      const oneDigit = testAtLeastOneDigit(password);
      setMinimum12Chars(min12);
      setIsAtLeastOneUppercaseChar(oneUppercase);
      setIsAtLeastOneLowercaseChar(oneLowercase);
      setIsAtLeastOneSpecialChar(oneSpecialChar);
      setIsAtLeastOneDigit(oneDigit);
      if (min12 && oneLowercase && oneUppercase && oneSpecialChar && oneDigit) {
        onSecure();
      } else {
        onNotSecure();
      }
    } else {
      onNotSecure();
    }
  }, [password]);

  if (!show) {
    return <div></div>;
  }

  return (
    <Stack>
      <Rule pass={isMinimum12Chars} title="Minimum 12 characters" />
      <Rule pass={isAtLeastOneUppercaseChar} title="At least 1 uppercase character" />
      <Rule pass={isAtLeastOneLowercaseChar} title="At least 1 lowercase character" />
      <Rule pass={isAtLeastOneSpecialChar} title="At least 1 special symbol" />
      <Rule pass={isAtLeastOneDigit} title="At least 1 number" />
    </Stack>
  );
};

const Rule = ({ pass, title }) => {
  return (
    <Stack direction="row">
      {pass ? (
        <Check customColor={colors.passwordText.correct} size="small" />
      ) : (
        <Close customColor={colors.passwordText.wrong} size="small" />
      )}
      <Text size="small">{title}</Text>
    </Stack>
  );
};

export default PasswordStrength;
