{"version":3,"file":"static/js/5616.775ab353.chunk.js","mappings":"0NAMA,MAAMA,EAAMC,EAAAA,GAAOC,KAAIC,IAAAA,GAAAC,EAAAA,EAAAA,GAAA,oJASjBC,GAAaJ,EAAAA,EAAAA,IAAOD,EAAPC,CAAWK,IAAAA,GAAAF,EAAAA,EAAAA,GAAA,wCAIxBG,GAAWN,EAAAA,EAAAA,IAAOD,EAAPC,CAAWO,IAAAA,GAAAJ,EAAAA,EAAAA,GAAA,wCAItBK,EAA2BR,EAAAA,GAAOS,IAAGC,IAAAA,GAAAP,EAAAA,EAAAA,GAAA,iIAEhCQ,EAAAA,EAAAA,IAAG,cAORC,EAA0BZ,EAAAA,GAAOa,EAACC,IAAAA,GAAAX,EAAAA,EAAAA,GAAA,iCAIlCY,EAAkBf,EAAAA,GAAOgB,GAAEC,IAAAA,GAAAd,EAAAA,EAAAA,GAAA,8IAS3Be,EAAiBlB,EAAAA,GAAOmB,GAAEC,IAAAA,GAAAjB,EAAAA,EAAAA,GAAA,kGAuDhC,EA5C0BkB,IAAgB,IAAf,MAAEC,GAAOD,EAClC,MAAME,EAAeD,GAASA,EAAME,MAAM,cACpCC,EAAeH,GAASA,EAAME,MAAM,cACpCE,EAAoBJ,GAASA,EAAMK,QAAU,EAC7CC,EAAYN,GAASA,EAAME,MAAM,cACvC,OACEK,EAAAA,EAAAA,MAACrB,EAAwB,CAAAsB,SAAA,EACvBC,EAAAA,EAAAA,KAACnB,EAAuB,CAAAkB,SAAC,iCAGzBD,EAAAA,EAAAA,MAACd,EAAe,CAAAe,SAAA,EACdD,EAAAA,EAAAA,MAACX,EAAc,CAAAY,SAAA,CAAC,iBAEZR,IAAUC,IAAgBQ,EAAAA,EAAAA,KAAChC,EAAG,IAC/BuB,IAAUC,IAAgBQ,EAAAA,EAAAA,KAACzB,EAAQ,IACnCgB,GAASC,IAAgBQ,EAAAA,EAAAA,KAAC3B,EAAU,QAEvCyB,EAAAA,EAAAA,MAACX,EAAc,CAAAY,SAAA,CAAC,iBAEZR,IAAUG,IAAgBM,EAAAA,EAAAA,KAAChC,EAAG,IAC/BuB,IAAUG,IAAgBM,EAAAA,EAAAA,KAACzB,EAAQ,IACnCgB,GAASG,IAAgBM,EAAAA,EAAAA,KAAC3B,EAAU,QAEvCyB,EAAAA,EAAAA,MAACX,EAAc,CAAAY,SAAA,CAAC,yBAEZR,IAAUI,IAAqBK,EAAAA,EAAAA,KAAChC,EAAG,IACpCuB,IAAUI,IAAqBK,EAAAA,EAAAA,KAACzB,EAAQ,IACxCgB,GAASI,IAAqBK,EAAAA,EAAAA,KAAC3B,EAAU,QAE5CyB,EAAAA,EAAAA,MAACX,EAAc,CAAAY,SAAA,CAAC,cAEZR,IAAUM,IAAaG,EAAAA,EAAAA,KAAChC,EAAG,IAC5BuB,IAAUM,IAAaG,EAAAA,EAAAA,KAACzB,EAAQ,IAChCgB,GAASM,IAAaG,EAAAA,EAAAA,KAAC3B,EAAU,YAGb,C","sources":["components/Organisms/PasswordValidator/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { tc } from 'utils/theme';\n\nconst Dot = styled.span`\n  width: 10px;\n  height: 10px;\n  background-color: #dfdfdf;\n  margin: 0 15px 0 10px;\n  display: inline-block;\n  border-radius: 50%;\n`;\n\nconst SuccessDot = styled(Dot)`\n  background-color: #a4c24a;\n`;\n\nconst ErrorDot = styled(Dot)`\n  background-color: #dd4c44;\n`;\n\nconst PasswordValidatorWrapper = styled.div`\n  padding: 0;\n  color: ${tc('fontColor')}\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: -0.3px;\n`;\n\nconst PasswordValidatorHeader = styled.p`\n  margin: 0 0 10px 0;\n`;\n\nconst PasswordItemsUL = styled.ul`\n  display: inline-flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n  list-style-type: none;\n`;\n\nconst PasswordItemLI = styled.li`\n  flex: flex-grow;\n  list-style: none;\n  display: inline-block;\n  margin-top: 10px;\n`;\n\n/**\n * Password validation UI\n * @param {string} value string to validate the password against\n */\nconst PasswordValidator = ({ value }) => {\n  const hasLowerCase = value && value.match(/.*[a-z].*$/);\n  const hasUppercase = value && value.match(/.*[A-Z].*$/);\n  const hasFourCharacters = value && value.length >= 4;\n  const hasNumber = value && value.match(/.*[0-9].*$/);\n  return (\n    <PasswordValidatorWrapper>\n      <PasswordValidatorHeader>\n        Your Password must include:\n      </PasswordValidatorHeader>\n      <PasswordItemsUL>\n        <PasswordItemLI>\n          One lowercase\n          {!value && !hasLowerCase && <Dot />}\n          {value && !hasLowerCase && <ErrorDot />}\n          {value && hasLowerCase && <SuccessDot />}\n        </PasswordItemLI>\n        <PasswordItemLI>\n          One uppercase\n          {!value && !hasUppercase && <Dot />}\n          {value && !hasUppercase && <ErrorDot />}\n          {value && hasUppercase && <SuccessDot />}\n        </PasswordItemLI>\n        <PasswordItemLI>\n          At least 4 characters\n          {!value && !hasFourCharacters && <Dot />}\n          {value && !hasFourCharacters && <ErrorDot />}\n          {value && hasFourCharacters && <SuccessDot />}\n        </PasswordItemLI>\n        <PasswordItemLI>\n          One number\n          {!value && !hasNumber && <Dot />}\n          {value && !hasNumber && <ErrorDot />}\n          {value && hasNumber && <SuccessDot />}\n        </PasswordItemLI>\n      </PasswordItemsUL>\n    </PasswordValidatorWrapper>\n  );\n};\n\nPasswordValidator.propTypes = {\n  value: PropTypes.string.isRequired,\n};\n\nexport default PasswordValidator;\n"],"names":["Dot","styled","span","_templateObject","_taggedTemplateLiteral","SuccessDot","_templateObject2","ErrorDot","_templateObject3","PasswordValidatorWrapper","div","_templateObject4","tc","PasswordValidatorHeader","p","_templateObject5","PasswordItemsUL","ul","_templateObject6","PasswordItemLI","li","_templateObject7","_ref","value","hasLowerCase","match","hasUppercase","hasFourCharacters","length","hasNumber","_jsxs","children","_jsx"],"sourceRoot":""}