{"version":3,"file":"js/5779-93816eb732cfda8b2ca5.js","mappings":"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","sources":["webpack://app/./app/javascript/packs/pages/AuthForm.jsx","webpack://app/./app/javascript/packs/signup.jsx"],"sourcesContent":["import styled from \"styled-components\";\n\nconst Card = styled.div`\n  @media only screen and (max-width: 720px) {\n    grid-area: 2/1/3/4;\n    margin: 25px 0px 0px 0px;\n\n    //width: 100%;\n  }\n  position: relative;\n  grid-area: 1/3/2/4;\n  box-sizing: border-box;\n  max-width: 600px;\n  width: 99vw;\n  margin-left: 20px;\n  //padding: 0 2rem;\n\n  //margin-top: 100px;\n  padding: 40px 0px 0px 0px;\n\n  background-color: #fff;\n  border: 1px solid transparent;\n\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);\n  border-radius: 8px;\n\n  justify-self: start;\n  align-self: center;\n  background-color: RGB(244, 244, 244);\n`;\n\nconst H2 = styled.h2`\n  margin: 0 20px;\n  line-height: 1.5;\n  // font-size: 24px;\n`;\n\nconst Form = styled.form`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* padding: 0 20px 0px 20px; */\n  box-sizing: border-box;\n\n  /* @media only screen and (max-width: 1111px){\n    padding: 0 20px 0px 8px;\n\n\n  } */\n`;\n\nconst FormItem = styled.div`\n  position: relative;\n  margin: 0 0 38px 0;\n  padding: 0;\n`;\n\nconst FormItemSqueeze = styled.div`\n  position: relative;\n  margin: 0 0 50px 0;\n  padding: 0;\n\n  @media only screen and (max-width: 985px) {\n    margin: 0 0 75px 0;\n  }\n`;\n\nconst FormItemEmail = styled.div`\n  position: relative;\n  margin: 0 0 38px 0;\n  padding: 20px;\n`;\n\nconst Label = styled.label`\n  //height: 100%;\n  //line-height: 44px;\n\n  color: #62748e;\n\n  font-weight: bold;\n\n  display: inline-block;\n  position: absolute;\n  top: -20px;\n  left: 24px;\n  //border-top: 1px solid #cbcbd2;\n  //border-left: 1px solid #cbcbd2;\n  //border-right: 1px solid #cbcbd2;\n  transition: all 150ms ease-in;\n  //color: #9FA5C4;\n  pointer-events: none;\n\n  transform: translateY(-11px);\n  padding: 2px 2px;\n  //background-color: white;\n  border-radius: 5px;\n\n  // font-size: 1rem;\n\n  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff,\n    0 1px 0 #fff, 0 -1px 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff;\n\n  @media only screen and (max-width: 985px) {\n    // font-size: 2rem;\n    top: -36px;\n  }\n`;\nconst EmailLabel = styled(Label)`\n  //left: 24px;\n`;\n\nconst Input = styled.input`\n  padding: 1rem;\n  box-sizing: border-box;\n  margin: 0px;\n  width: 100%;\n  height: 44px;\n  padding-left: 50px;\n  box-shadow: inset 0 1px 2px rgba(203, 203, 210, 0.4);\n\n  padding-right: 8px;\n\n  // font-size: 1.1rem;\n  line-height: 1.42857;\n  color: #3f3f44;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #cbcbd2;\n  border-radius: 4px;\n\n  filter: none;\n\n  @media only screen and (max-width: 985px) {\n    // font-size: 3rem;\n  }\n`;\n\nconst InputForSignup = styled.input`\n  //padding: 3rem;\n  box-sizing: border-box;\n  margin: 0px;\n  width: 100%;\n  //height: 98px;\n  padding-left: 25px;\n  box-shadow: inset 0 1px 2px rgba(203, 203, 210, 0.4);\n  height: 44px;\n  padding-right: 8px;\n\n  // font-size: 2.5rem;\n  line-height: 1.42857;\n  color: #3f3f44;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #cbcbd2;\n  border-radius: 4px;\n\n  filter: none;\n\n  @media only screen and (min-width: 986px) {\n    //height: 44px;\n    // font-size: 1.1rem;\n  }\n`;\n\nconst Button = styled.button`\n  border-color: ${(props) => (props.isBtnDisabled ? \"#cccccc\" : \"#3f4eae\")};\n  border-radius: 3px;\n  //padding: 1rem;\n  color: white;\n  font-weight: 700;\n  width: 100%;\n  //margin-bottom: 1rem;\n  // font-size: 2rem;\n  height: 60px;\n  cursor: pointer;\n\n  background: linear-gradient(to bottom, #5fcc61, #318e33);\n  /* border-color: ${(props) =>\n    props.isBtnDisabled ? \"#cccccc\" : \"#3f4eae\"} ;*/\n\n  border-color: #5fcc61;\n\n  @media only screen and (max-width: 985px) {\n    // font-size: 4rem;\n  }\n`;\n\nconst ButtonForSignup = styled.button`\n  //border-color: ${(props) => (props.isBtnDisabled ? \"#cccccc\" : \"#3f4eae\")};\n  /* border-radius: 3px;\n  //padding: 1rem;\n  color: white;\n  font-weight: 700;\n  width: 100%;\n  margin-bottom: 1rem;\n  // font-size: 2rem;\n  height: 58px;\n  cursor: pointer;\n\n  background: linear-gradient(to bottom, #5fcc61, #318e33);\n  \n\n  border-color: #5fcc61; */\n\n  background: linear-gradient(to right, #e52d27 0%, #b31217 51%, #e52d27 100%);\n  margin: 10px;\n  padding: 15px 45px;\n  text-align: center;\n  text-transform: uppercase;\n  transition: 0.5s;\n  background-size: 200% auto;\n  color: white;\n  box-shadow: 0 0 20px #eee;\n  border-radius: 10px;\n  display: block;\n\n  &:hover {\n    background-position: right center; /* change the direction of the change here */\n    color: #fff;\n    text-decoration: none;\n  }\n\n  @media only screen and (max-width: 985px) {\n    //// font-size: 4rem;\n  }\n`;\n\nconst Logo = styled.img`\n  width: 51px;\n  height: 51px;\n\n  //margin: 0 0 40px;\n  justify-self: center;\n`;\n\nconst ErrorWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  //padding: 10px 0px 0px 0px;\n  line-height: 0.7em;\n  height: 20px;\n`;\nconst ErrorMsg = styled.h4`\n  // font-size: 0.5rem;\n  padding: 5px 0px 5px 12px;\n`;\n\nconst XorCheckIcon = styled.img`\n  //display: ${(props) => (props.status == \"\" ? \"none\" : \"initial\")};\n  display: initial;\n  height: 15px;\n`;\nconst LoginWrapper = styled.div`\n  @media only screen and (max-width: 720px) {\n    grid-template-columns: minmax(20px, 1fr) 1fr minmax(20px, 1fr);\n    min-width: 100%;\n    //padding-left: 20px;\n    //justify-self: center;\n  }\n  position: relative;\n  height: 100%;\n  background-color: RGB(244, 244, 244);\n  display: grid;\n\n  align-items: center;\n  justify-content: center;\n  //justify-self: start;\n  //grid-template-columns: minmax(170px,350px) minmax(340px,600px);\n  //grid-template-columns: minmax(20px, 1fr) minmax(300px, 350px) minmax(420px,600px) minmax(20px, 1fr);\n\n  // grid-template-columns:\n  // \tminmax(20px, 40px) minmax(250px, 450px) minmax(150px, 600px)\n  // \tminmax(40px, 1fr);\n\n  grid-area: 1/1/-1/-1;\n  grid-column-gap: 0.5em;\n  padding-top: 60px;\n  padding-bottom: 20px;\n  text-align: center;\n  //width: 100vw;\n`;\n\nconst LogoWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 15px 10px 15px;\n  margin-bottom: 30px;\n`;\n\nconst InputIcon = styled.div`\n  position: absolute;\n  bottom: 13px;\n  margin-top: -9px;\n  left: 12px;\n  width: 18px;\n  height: 18px;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    right: -11px;\n    top: -10px;\n    bottom: -10px;\n    width: 1px;\n    opacity: 0.5;\n    background-color: rgba(212, 212, 212, 0);\n    background-image: linear-gradient(\n      to top,\n      rgba(212, 212, 212, 0) 0,\n      #d4d4d4 30%,\n      #d4d4d4 70%,\n      rgba(212, 212, 212, 0) 100%\n    );\n  }\n`;\n\nexport {\n  Form,\n  Input,\n  InputForSignup,\n  Button,\n  ButtonForSignup,\n  Logo,\n  Card,\n  XorCheckIcon,\n  LoginWrapper,\n  InputIcon,\n  LogoWrapper,\n  H2,\n  FormItem,\n  FormItemSqueeze,\n  Label,\n  EmailLabel,\n  ErrorMsg,\n  ErrorWrapper,\n};\n","import React, { useEffect, useState } from \"react\";\nimport styled, { ThemeProvider } from \"styled-components\";\n//import { Parallax, Background } from 'react-parallax';\n\n//import { GoogleLogin } from \"react-google-login\";\n//import FacebookLogin from \"react-facebook-login\";\n\nimport floridaBlankPink from \"../../assets/images/floridaBlankPink.png\";\nimport floridaMaskCell from \"../../assets/images/floridaMaskThinBlanco1.png\";\nimport floridaMask from \"../../assets/images/floridaMaskBlanco.png\";\nimport floridaMaskThinLongist from \"../../assets/images/floridaMaskThinLongist.png\";\nimport floridaMaskBig from \"../../assets/images/floridaMaskBig1.png\";\nimport floridaMaskSmaller from \"../../assets/images/floridaMaskSmaller.png\";\nimport floridaMaskSmaller3 from \"../../assets/images/floridaMaskSmaller3.png\";\nimport floridaMaskSmaller5 from \"../../assets/images/floridaMaskSmaller5.png\";\n\nimport flFists from \"../../assets/images/flFists.png\";\nimport thebullet from \"../../assets/images/thebullet.png\";\n\nimport wleaf from \"../../assets/images/wleafRed.jpg\";\n\nimport { Link, useLocation } from \"react-router-dom\";\n\nimport redX from \"../../assets/images/redXmark.jpg\";\nimport userIcon from \"../../assets/images/signup2.svg\";\nimport greenCheck from \"../../assets/images/greenCheck.png\";\nimport dummy_avatar from \"../../assets/images/dummy_avatar.png\";\nimport \"../../assets/stylesheets/signup.scss\";\n\nimport {\n  Card,\n  Logo,\n  Form,\n  InputForSignup,\n  ButtonForSignup,\n  ErrorMsg,\n  XorCheckIcon,\n  LoginWrapper,\n  InputIcon,\n  LogoWrapper,\n  H2,\n  FormItem,\n  FormItemSqueeze,\n  Label,\n  EmailLabel,\n  ErrorWrapper,\n} from \"./pages/AuthForm\";\n\nimport axios from \"axios\";\nimport $ from \"jquery\";\n\nimport { gsap } from \"gsap\";\n\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\ngsap.registerPlugin(ScrollTrigger);\ngsap.core.globals(\"ScrollTrigger\", ScrollTrigger);\n\n//var Spinner = require(\"react-spinkit\");\n//var randomColor = require('randomcolor');\n\nconst SignupWrapper = styled.div`\n  @media only screen and (max-width: 985px) {\n    grid-template-columns: 2% 1fr 2%;\n    min-width: 100%;\n    border-top: 37px solid white;\n  }\n\n  position: relative;\n\n  background-color: #ffffff;\n  display: ${(props) => (props.show_offer == \"true\" ? \"none\" : \"grid\")};\n\n  align-items: center;\n  justify-content: center;\n\n  grid-template-columns:\n    minmax(3%, 0.5fr) minmax(400px, 586px) minmax(500px, 700px)\n    minmax(3%, 0.5fr);\n\n  text-align: center;\n  height: 100%;\n\n  border-bottom: 37px white solid;\n\n  background: url(${wleaf}) fixed;\n  background-size: cover;\n  background-position: right bottom;\n`;\n\nconst SignupMaskWrapper = styled.div`\n  @media only screen and (max-width: 985px) {\n    grid-area: 1/2/2/3;\n    width: 100%;\n    //height: 100%;\n  }\n\n  display: grid;\n  grid-area: 1/3/2/4;\n  width: 100%;\n  height: 100%;\n  //max-width: 600px;\n  //max-height: 500px;\n  //grid-template-columns: 1fr max-content 1fr;\n  grid-template-rows: min-content 1fr;\n`;\n\nconst TopFiLL = styled.div`\n  grid-area: 1/1/2/4;\n  background: white;\n  width: 100%;\n  height: 100%;\n`;\n\nconst BottomFiLL = styled.div`\n  @media only screen and (max-width: 985px) {\n    grid-area: 2/1/3/4;\n  }\n\n  grid-area: 2/1/3/2;\n  background: white;\n  width: 100%;\n  height: 100%;\n`;\n\nconst LeftFiLL = styled.div`\n  grid-area: 1/1/4/2;\n  background: white;\n  width: 100%;\n  height: 100%;\n`;\n\nconst RightFiLL = styled.div`\n  grid-area: 1/3/4/4;\n  background: white;\n  width: 100%;\n  height: 100%;\n`;\n\nconst TopFiller = styled.div`\n  grid-area: 1/1/2/2;\n  background: white;\n  width: 100%;\n  height: 100%;\n`;\n\nconst BottomFiller = styled.div`\n  @media only screen and (max-width: 985px) {\n    grid-area: 2/1/3/4;\n    width: 100%;\n    //height: 100%;\n  }\n\n  grid-area: 2/1/3/-1;\n  background: white;\n  width: 100%;\n  height: 100%;\n`;\n\nconst SignupMaskImageContainer = styled.div`\n  @media only screen and (max-width: 985px) {\n    grid-area: 1/1/2/4;\n  }\n\n  grid-area: 1/1/2/2;\n`;\n\nconst SignupMaskImage = styled.img`\n  @media only screen and (max-width: 985px) {\n    width: 100%;\n\n    //max-height: initial\n  }\n\n  //grid-area: 1/3/-1/4;\n  grid-area: 1/1/2/2;\n  @media only screen and (max-width: 400px) {\n    //max-height: initial\n  }\n\n  grid-area: 1/1/2/2;\n  width: 100%;\n  /* width: 100%;\n  height: 100%; */\n  height: 100%;\n  max-width: 1400px;\n\n  max-height: 1125px;\n\n  justify-self: center;\n\n  //opacity: .3;\n`;\n\nconst LeftFiller = styled.div`\n  @media only screen and (max-width: 985px) {\n    //display: none;\n  }\n  grid-area: 1/1/2/2;\n  background: white;\n  width: 100%;\n  height: 100%;\n`;\n\nconst RightFiller = styled.div`\n  @media only screen and (max-width: 985px) {\n    grid-area: 1/3/2/4;\n  }\n\n  grid-area: 1/4/2/5;\n  background: white;\n  width: 100%;\n  height: 100%;\n`;\n\n// const FloridaImg = styled.img`\n//   //justify-self: end;\n//   //align-self: start;\n//   //grid-area: 1/1/7/3;\n//   height: 100%;\n//   width: 100%;\n//   position: relative;\n// `;\n\nconst SignupWrapperInner = styled.div`\n  /* @media only screen and (max-width: 720px) {\n\t\tgrid-template-columns: minmax(20px, 1fr) 1fr minmax(20px, 1fr);\n\t\tmin-width: 100%;\n\t\t//padding-left: 20px;\n\t\t//justify-self: center;\n\t} */\n  position: relative;\n  height: 100%;\n  //background-color: RGB(244, 244, 244);\n  background-color: #ffffff;\n  display: grid;\n\n  align-items: center;\n  justify-content: center;\n  //justify-self: start;\n  //grid-template-columns: minmax(170px,350px) minmax(340px,600px);\n  //grid-template-columns: minmax(20px, 1fr) minmax(300px, 350px) minmax(420px,600px) minmax(20px, 1fr);\n\n  grid-template-columns: 1fr 3fr 3fr 1fr;\n\n  grid-area: 1/1/-1/-1;\n  grid-column-gap: 0.5em;\n  padding-top: 60px;\n  padding-bottom: 20px;\n  text-align: center;\n  //width: 100vw;\n`;\n\nconst LoginCardWrapper = styled.div`\n  background: white;\n  grid-area: 1/3/2/4;\n  height: 100%;\n  //padding-top: 60px;\n`;\n\nconst LoginCard = styled.div`\n  @media only screen and (max-width: 720px) {\n    grid-area: 2/1/3/4;\n    //margin: 25px 0px 0px 0px;\n\n    //width: 100%;\n  }\n  position: relative;\n\n  box-sizing: border-box;\n  //max-width: 600px;\n\n  //width: 100%;\n  //margin-left: 20px;\n  //padding: 0 2rem;\n  //margin-left: 20px;\n  //margin-top: 100px;\n  //padding: 50px 0px 0px 0px;\n  padding: 75px 0px 0px 0px;\n\n  background-color: #fff;\n  //border: 1px solid transparent;\n\n  //box-shadow: 0 1px 1px rgba(0,0,0,0.05);\n  //border-radius: 8px;\n\n  justify-self: start;\n  align-self: center;\n\n  overflow: hidden;\n  //margin: 0 auto;\n`;\n\nconst LoginCardFillLeft = styled.div`\n  background: white;\n  grid-area: 2/1/3/2;\n  width: 100%;\n  height: 100%;\n`;\n\nconst LoginCardFillRight = styled.div`\n  background: white;\n  grid-area: 2/3/3/4;\n  width: 100%;\n  height: 100%;\n`;\n\n///////////////////////////////////  HANDLE_CHANGE /////////////////////////////\n// function handleChange(event){\n\n//   //const value = event.target.value;\n//   const target = e.target;\n//   const value = target.type === 'checkbox' ? target.checked : target.value;\n//   const name = target.name;\n//   //const value = target.type === 'checkbox' ? !event.target.checked : event.target.value;\n\n//   setState({\n//     ...state,\n//     [name]: value\n//   });\n\n// }\n\nfunction handleImageChange(e) {\n  formData.append(\"user[avatar]\", e.target.files[0]);\n\n  setState({\n    ...state,\n    avatar: URL.createObjectURL(e.target.files[0]),\n  });\n\n  //if (e.target.files[0]) setState({ ...state, avatar: e.target.files[0] });\n}\n\nconst LabelForFile = styled.label`\n  text-align: center;\n  display: inline-block;\n  // font-size: 12px;\n  position: absolute;\n  right: -15px;\n  bottom: -13px;\n  z-index: 5;\n  border-radius: 50px;\n  //background-color: orange;\n  padding: 5px;\n  margin: 0 auto;\n\n  //background-color: orange;\n  cursor: pointer;\n\n  &:hover {\n    //background-color: #fce1b3;\n  }\n`;\n\nconst Span = styled.h4`\n  // font-size: 0.5rem;\n  padding: 5px 12px;\n  margin-right: 5px;\n\n  //transition: opacity 2s ease-in;\n`;\n\nconst StatusSpinner = styled.div`\n  max-height: ${(props) =>\n    props.show_status_spinner == \"true\" ? \"100%\" : \"0px\"};\n  opacity: ${(props) => (props.show_status_spinner == \"true\" ? \"1\" : \"0\")};\n  transition: opacity 0.4s;\n  transition-timing-function: ease-out;\n`;\n\nconst LeftSection = styled.div`\n  @media only screen and (max-width: 400px) {\n    //margin: 700px 0px 0px 0px;\n  }\n\n  /* @media only screen and (max-width: 720px){\n\n    grid-area: 1/1/2/4;\n    margin: 0px 0px 0px 0px;\n    //padding-left: 20px;\n    //width: 100vw;\n\n  } */\n\n  /* @media only screen and (max-width: 940px){\n  \n    padding-left: 20px;\n    padding-right: 20px;\n    \n  } */\n\n  align-self: start;\n\n  text-align: left;\n  grid-area: 1/2/2/3;\n  height: 100%;\n  //margin-right: 4.20em;\n  //padding-left: 60px;\n  font-style: normal;\n  font-weight: 800;\n  //min-width: 420px;\n  //max-width: 1000px;\n  //border-right: 1px rgba(114, 111, 111, 0.3) solid;\n\n  h2 {\n    color: rgb(6, 7, 1, 0.9);\n    padding: 47px 0 0 10px;\n    margin: 0px;\n    font-size: 3rem;\n    word-break: keep-all;\n    background: white;\n    //text-align: center;\n\n    @media only screen and (max-width: 200px) {\n      font-size: 2rem;\n    }\n  }\n\n  sub {\n    color: rgb(6, 7, 1, 0.9);\n  }\n\n  @media only screen and (max-width: 985px) {\n    //margin: 500px 0px 0px 0px;\n    grid-area: 2/2/3/3;\n    border-right: initial;\n    max-width: initial;\n\n    h1 {\n      // font-size: 3rem;\n    }\n  }\n`;\n\nconst SocialMedia = styled.div`\n  display: grid;\n  grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr);\n  grid-template-rows: min-content;\n\n  h3 {\n    grid-area: 1/1/2/3;\n    justify-self: center;\n    // font-size: 0.8rem;\n    margin-bottom: 10px;\n  }\n\n  /* button {\n    height: 35px;\n    width: 35px;\n  } */\n`;\n\nconst RightSection = styled.div`\n  //background: #C4C4C4;\n  grid-area: 1/3/2/4;\n  //height: 80%;\n  border-top-left-radius: 60px;\n  border-bottom-left-radius: 60px;\n\n  display: grid;\n  padding: 0px 50px 50px 14px;\n\n  /* grid-template-columns: 28px 30px minmax(430px, 620px); */\n  grid-template-columns: 54px 30px 1fr;\n  grid-template-rows: 250px repeat(4, 58px) 1fr;\n\n  align-self: start;\n  //min-width: 525px;\n  //max-width: 600px;\n\n  max-width: 800px;\n\n  @media only screen and (max-width: 985px) {\n    grid-area: 1/2/2/3;\n    /* grid-template-columns: 1px 30px 1fr; */\n    grid-template-columns: 36px 30px 1fr;\n    grid-template-rows: 284px repeat(4, min-content) 1fr;\n  }\n\n  @media only screen and (max-width: 450px) {\n    grid-template-columns: 4px 30px 1fr;\n    grid-template-rows: 192px repeat(4, min-content) 1fr;\n    padding: 0px 5px 11px 5px;\n  }\n\n  @media only screen and (max-width: 200px) {\n    grid-template-columns: 0px 22px 1fr;\n  }\n`;\n\nconst WeedBullet1 = styled.img`\n  width: 21px;\n  grid-area: 2/2/3/3;\n  align-self: start;\n  justify-self: center;\n  margin-top: 1.5px;\n  margin-top: 20px;\n`;\n\nconst WeedBullet2 = styled.img`\n  width: 21px;\n  grid-area: 3/2/4/3;\n  align-self: start;\n  justify-self: center;\n  margin-top: 1.5px;\n  margin-top: 20px;\n`;\n\nconst WeedBullet3 = styled.img`\n  width: 21px;\n  grid-area: 4/2/5/3;\n  align-self: start;\n  justify-self: center;\n  margin-top: 1.5px;\n  margin-top: 20px;\n`;\n\nconst WeedBullet4 = styled.img`\n  width: 21px;\n  grid-area: 5/2/6/3;\n  align-self: start;\n  margin-top: 20px;\n  justify-self: center;\n`;\n\nconst WeedBulletText1 = styled.h2`\n  grid-area: 2/3/3/4;\n  justify-self: start;\n  align-self: start;\n  margin-top: 19px;\n  padding-left: 10px;\n  font-size: 1.3rem;\n\n  text-align: start;\n\n  @media only screen and (max-width: 500px) {\n    font-size: 1rem;\n    margin-top: 26px;\n  }\n  @media only screen and (max-width: 275px) {\n    font-size: 0.6rem;\n  }\n`;\n\nconst WeedBulletText2 = styled.h2`\n  grid-area: 3/3/4/4;\n  justify-self: start;\n  align-self: start;\n  // font-size: 3vw;\n  padding-left: 10px;\n\n  margin-top: 19px;\n  font-size: 1.3rem;\n  text-align: start;\n  @media only screen and (max-width: 500px) {\n    font-size: 1rem;\n    margin-top: 26px;\n  }\n  @media only screen and (max-width: 275px) {\n    font-size: 0.6rem;\n  }\n`;\n\nconst WeedBulletText3 = styled.h2`\n  grid-area: 4/3/5/4;\n  justify-self: start;\n  align-self: start;\n  font-size: 1.3rem;\n  padding-left: 10px;\n\n  margin-top: 19px;\n  text-align: start;\n  @media only screen and (max-width: 500px) {\n    font-size: 1rem;\n    margin-top: 26px;\n  }\n  @media only screen and (max-width: 275px) {\n    font-size: 0.6rem;\n  }\n`;\n\nconst WeedBulletText4 = styled.h2`\n  grid-area: 5/3/6/4;\n  justify-self: start;\n  align-self: start;\n  padding-left: 10px;\n  font-size: 1.3rem;\n\n  margin-top: 19px;\n  text-align: start;\n  @media only screen and (max-width: 500px) {\n    font-size: 1rem;\n    margin-top: 26px;\n  }\n  @media only screen and (max-width: 275px) {\n    font-size: 0.6rem;\n  }\n`;\nconst Spacer = styled.h2`\n  font-style: normal;\n  font-weight: normal;\n  // font-size: 2.5vw;\n  //line-height: 100%;\n\n  z-index: -10;\n  grid-area: 1/3/2/5;\n  color: #e3b55a;\n  margin: 0px 0px 8px 20px;\n\n  @media only screen and (max-width: 720px) {\n    display: none;\n  }\n`;\n\nconst formData = new FormData();\n///////////////////////////////////  SIGN_UP_PAGE //////////////////////////////\n\nfunction Signup(props, ref) {\n  console.log(\"==============Signup Section===============\");\n  console.log(\"============= Signup Section Props===============\", props);\n\n  function useWindowDimensions() {\n    const [windowDimensions, setWindowDimensions] = useState(\n      getWindowDimensions()\n    );\n\n    useEffect(() => {\n      function handleResize() {\n        setWindowDimensions(getWindowDimensions());\n      }\n\n      window.addEventListener(\"resize\", handleResize);\n      return () => window.removeEventListener(\"resize\", handleResize);\n    }, []);\n\n    return windowDimensions;\n  }\n\n  const locationFromHook = useLocation();\n\n  const { section2ScrollToRef } = ref;\n\n  const [mobile, setMobile] = useState(false);\n\n  const [state, setState] = React.useState({\n    full_name: \"\",\n    full_nameFieldActive: false,\n\n    email: \"\",\n    emailFieldActive: false,\n\n    password: \"\",\n    passwordFieldActive: false,\n\n    opt_in: false,\n\n    status: \"\",\n\n    ///showErrorBackground: \"false\",\n\n    errors: {},\n    color: \"#45B5644\",\n    isBtnDisabled: false,\n    showStatusSpinner: \"false\",\n    waitMessage: \"\",\n  });\n\n  const responseGoogle = async (response) => {\n    //send googles response to registrations#google\n    //console.log(\"google_response\", response);\n\n    axios\n      .post(\n        \"/auth/rgsi\",\n        {\n          data: {\n            gtoken: \"test_data\",\n          },\n        },\n        {\n          headers: {\n            Authorization: response.tokenId,\n          },\n        },\n        { wals: true }\n      )\n      .then((reithCredentisponse) => {\n        //console.log(\"rgsi response\", response.data.status)\n        if (response.data.status == \"green\") {\n          props.handleSuccessfulAuth(response.data);\n          console.log(\n            \"result from google signin axios call\",\n            response.data.error\n          );\n        } else if (response.data.status == \"pink\") {\n          console.log(\n            \"result from google signin axios call\",\n            response.data.error\n          );\n        } else {\n          console.log(\n            \"result from google signin axios call, this should never happen\"\n          );\n        }\n      })\n      .catch((error) => {\n        //console.log(\"articleErrors\", error)\n      });\n  };\n\n  const responseFacebook = async (response) => {\n    console.log(\"About to make axios call to send info to server\", response);\n\n    //send googles response to registrations#google\n    //console.log(\"google_response\", response);\n\n    axios\n      .post(\n        \"/auth/rfsi\",\n        {\n          data: {\n            gtoken: \"test_data\",\n          },\n        },\n        {\n          headers: {\n            Authorization: JSON.stringify(response),\n          },\n        },\n        { withCredentials: true }\n      )\n      .then((response) => {\n        //console.log(\"rgsi response\", response.data.status)\n        if (response.data.status == \"green\") {\n          props.handleSuccessfulAuth(response.data);\n          console.log(\n            \"result from google signin axios call\",\n            response.data.error\n          );\n        } else if (response.data.status == \"pink\") {\n          console.log(\n            \"result from google signin axios call\",\n            response.data.error\n          );\n        } else {\n          console.log(\n            \"result from google signin axios call, this should never happen\"\n          );\n        }\n      })\n      .catch((error) => {\n        //console.log(\"articleErrors\", error)\n      });\n  };\n\n  useEffect(() => {\n    console.log(\"==============Signup section useEffect===============\");\n\n    let homeWrapper = document.querySelectorAll(\".homeWrapper\");\n    let formItem = document.querySelectorAll(\".formItemSqueeze\");\n    let formWrapper = document.querySelectorAll(\".formWrapper\");\n\n    let tl = gsap.timeline({\n      duration: \".1\",\n      scrollTrigger: {\n        //markers: {startColor: \"green\", endColor: \"red\", fontSize: \"12px\"},\n        trigger: homeWrapper,\n        start: \"25% 87%\",\n        end: \"bottom bottom\",\n        toggleActions: \"play none none none\",\n      },\n    });\n\n    tl.from(\n      formWrapper,\n\n      {\n        opacity: 0,\n      }\n    );\n\n    tl.from(\n      formItem,\n\n      {\n        x: 100,\n        opacity: 0,\n        ease: \"back\",\n        stagger: 0.1,\n      },\n      \"<.1\"\n    );\n\n    // function handleResize() {\n    //   setWindowDimensions(getWindowDimensions());\n    // }\n\n    // window.addEventListener('resize', handleResize);\n\n    // return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  function getWindowDimensions() {\n    const { innerWidth: width, innerHeight: height } = window;\n    return {\n      width,\n      height,\n    };\n  }\n\n  const validForm = () => {\n    if (state.full_name) {\n      return true;\n    } else {\n      return true;\n    }\n  };\n\n  const handleChange = (e) => {\n    const target = e.target;\n\n    const value = target.type === \"checkbox\" ? target.checked : target.value;\n    const name = target.name;\n\n    console.log(\"TARGET_CHECKED \" + target.checked.toString());\n    console.log(\"target_name \" + target.name.toString());\n    console.log(\"value \" + value.toString());\n    //const value = target.type === 'checkbox' ? !event.target.checked : event.target.value;\n    setState({\n      ...state,\n      [name]: value,\n    });\n  };\n\n  ////////////////////// Handlev Submit V2 //////////////////////////\n  const handleAdd = (e) => {\n    e.preventDefault();\n\n    setState({\n      ...state,\n      status: \"\",\n      errors: {},\n      ////showErrorBackground: \"true\",\n      waitMessage: \"...one moment\",\n      showStatusSpinner: \"true\",\n      isBtnDisabled: true,\n    });\n\n    if (validForm()) {\n      formData.append(\"user[full_name]\", state.full_name);\n\n      formData.append(\"user[email]\", state.email);\n      formData.append(\"user[password]\", state.password);\n      formData.append(\"user[opt_in]\", state.opt_in);\n\n      console.log(\"formdata from handle add in signup\");\n      console.log(formData);\n\n      //get token for form submission\n      const csrf = document\n        .querySelector(\"meta[name='csrf-token']\")\n        .getAttribute(\"content\");\n\n      $.ajax({\n        url: \"/registrations\",\n        headers: {\n          \"X-CSRF-Token\": csrf,\n        },\n        method: \"POST\",\n        data: formData,\n        contentType: false,\n        processData: false,\n\n        success: function (response) {\n          //props.handleAdd(data);\n\n          if (response.status === \"green\") {\n            setState({\n              ...state,\n              //focussed: (props.focussed) || false,\n              full_name: \"\",\n              full_nameFieldActive: false,\n\n              email: \"\",\n              emailFieldActive: false,\n              password: \"\",\n              passwordFieldActive: false,\n\n              opt_in: false,\n              ////showErrorBackground: \"true\",\n              status: response.status,\n\n              errors: response.error,\n            });\n\n            props.handleSuccessfulAuth(response);\n            //props.history.push(\"/\")\n          } else {\n            //update error state\n            setState({\n              ...state,\n              ////showErrorBackground: \"true\",\n              status: response.status,\n              errors: response.error,\n            });\n          }\n        },\n        error: function (xhr, status, error) {\n          //alert('Message did not reach server: ', error);\n        },\n      });\n    } else {\n      //alert('Please fill all fields.');\n    }\n  };\n\n  ///////////////////////////////////  SETUP ERRORMESSAGES //////////////////////\n  let errorMessages = [];\n\n  if (state.errors) {\n    if (state.errors.success) {\n      errorMessages.push(<ErrorMsg> {state.errors.success[0]} </ErrorMsg>);\n    }\n\n    if (state.errors.auth) {\n      errorMessages.push(<ErrorMsg> {state.errors.auth[0]} </ErrorMsg>);\n    }\n\n    if (state.errors.password) {\n      errorMessages.push(\n        <ErrorMsg> {\"Password \" + state.errors.password[0]} </ErrorMsg>\n      );\n    }\n\n    if (state.errors.password_confirmation) {\n      errorMessages.push(\n        <ErrorMsg>\n          {\" \"}\n          {\"Confirmation \" + state.errors.password_confirmation[0]}{\" \"}\n        </ErrorMsg>\n      );\n    }\n\n    if (state.errors.green) {\n      errorMessages.push(<ErrorMsg> {state.errors.green} </ErrorMsg>);\n    }\n  }\n\n  // to activate the input field while typing\n  function activateField(e) {\n    setState({\n      ...state,\n      [e.target.name + \"FieldActive\"]: true,\n    });\n  }\n\n  // to deactivate input only if it's empty\n  function disableField(e) {\n    if (e.target.value === \"\") {\n      setState({\n        ...state,\n        [e.target.name + \"FieldActive\"]: false,\n      });\n    }\n  }\n\n  const componentClicked = () => {\n    console.log(\"clickedd\");\n  };\n\n  const { height, width } = useWindowDimensions();\n\n  if (locationFromHook.pathname === \"/edit\") {\n    return null;\n  } else {\n    return (\n      <SignupWrapper\n        className=\"homeWrapper\"\n        ref={section2ScrollToRef}\n        show_offer={props.show_offer}\n      >\n        <SignupMaskWrapper>\n          <SignupMaskImageContainer>\n            <SignupMaskImage src={floridaMaskBig} alt=\"\" />\n          </SignupMaskImageContainer>\n\n          {/* <TopFiLL/> */}\n          <BottomFiLL />\n          {/* <LeftFiLL/>\n        <RightFiLL/> */}\n\n          {/* <BottomFiller/> */}\n        </SignupMaskWrapper>\n\n        <LeftFiller />\n        <RightFiller />\n\n        <LeftSection>\n          <h2>Sign Up!</h2>\n\n          <LoginCardWrapper>\n            <LoginCard className=\"formWrapper\">\n              <Form onSubmit={handleAdd}>\n                <FormItemSqueeze className=\"formItemSqueeze\">\n                  <Label\n                    className={state.full_nameFieldActive ? \"field-active\" : \"\"}\n                  >\n                    {\" \"}\n                    full name{\" \"}\n                  </Label>\n\n                  <InputForSignup\n                    name=\"full_name\"\n                    type=\"text\"\n                    value={state.full_name}\n                    onChange={handleChange}\n                    onFocus={activateField}\n                    onBlur={disableField}\n                    required\n                  />\n                </FormItemSqueeze>\n\n                <FormItemSqueeze className=\"formItemSqueeze\">\n                  <EmailLabel\n                    className={state.emailFieldActive ? \"field-active\" : \"\"}\n                  >\n                    email\n                  </EmailLabel>\n\n                  <InputForSignup\n                    name=\"email\"\n                    type=\"email\"\n                    value={state.email}\n                    onChange={handleChange}\n                    onFocus={activateField}\n                    onBlur={disableField}\n                    required\n                  />\n                </FormItemSqueeze>\n\n                <FormItemSqueeze className=\"formItemSqueeze\">\n                  <Label\n                    className={state.passwordFieldActive ? \"field-active\" : \"\"}\n                  >\n                    password\n                  </Label>\n\n                  <InputForSignup\n                    name=\"password\"\n                    type=\"password\"\n                    autoComplete=\"off\"\n                    value={state.password}\n                    onChange={handleChange}\n                    onFocus={activateField}\n                    onBlur={disableField}\n                    required\n                  />\n                </FormItemSqueeze>\n\n                {/* <div  style={{display: \"flex\", justifyContent: \"center\"}}>\n                  \n                  \n              <input\n                name=\"opt_in\" \n                type=\"checkbox\" \n                id=\"opt_in\"\n                checked={state.opt_in}\n                  \n                onChange={handleChange} \n                  \n              />\n                  \n              \n              <h3 style={{marginLeft: \"5px\", fontSize: \".6em\", color: \"gray\"}} htmlFor=\"opt_in\" >Opt In to receive e-mails from FloridaBlaze </h3>\n            \n            </div> */}\n\n                <ButtonForSignup\n                  //className=\"formItemSqueeze\"\n                  type=\"submit\"\n                  disabled={state.isBtnDisabled}\n                >\n                  GO!\n                </ButtonForSignup>\n\n                <SocialMedia>\n                  <h3\n                    style={{\n                      color: \"gray\",\n                      alignSelf: \"center\",\n                      justifySelf: \"center\",\n                    }}\n                    htmlFor=\"opt_in\"\n                  >\n                    {/* --- or ---{\" \"} */}\n                  </h3>\n\n                  {/* <GoogleLogin\n\t\t\t\t\t\t\t\t\t\trender={(renderProps) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"loginBtn loginBtn--google\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={renderProps.onClick}\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={renderProps.disabled}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tGoogle\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\tbuttonText=\"Login\"\n\t\t\t\t\t\t\t\t\t\tonSuccess={responseGoogle}\n\t\t\t\t\t\t\t\t\t\tonFailure={responseGoogle}\n\t\t\t\t\t\t\t\t\t\tcookiePolicy={\"single_host_origin\"}\n\t\t\t\t\t\t\t\t\t/> */}\n\n                  {/* <FacebookLogin\n                    appId=\"293426502140339\"\n                    autoLoad={false}\n                    fields=\"name,email,picture\"\n                    onClick={componentClicked}\n                    callback={responseFacebook}\n                    cssClass=\"loginBtn loginBtn--facebook\"\n                    textButton=\"Facebook\"\n                  /> */}\n                </SocialMedia>\n              </Form>\n\n              {/* <ErrorWrapper show_error_background={state.showErrorBackground}> */}\n              <ErrorWrapper>\n                <Span wait_message={state.waitMessage}>\n                  {\" \"}\n                  {state.waitMessage}\n                </Span>\n\n                <XorCheckIcon\n                  status={state.status}\n                  style={{ display: state.status == \"\" ? \"none\" : \"initial\" }}\n                  src={state.status === \"green\" ? greenCheck : redX}\n                  alt=\"\"\n                />\n                <h1 style={{ display: \"none\" }}>ss={state.status}</h1>\n                {errorMessages}\n\n                <StatusSpinner show_status_spinner={state.showStatusSpinner}>\n                  {/* <Spinner name=\"wave\" color=\"#56c5cc\" /> */}\n                </StatusSpinner>\n              </ErrorWrapper>\n            </LoginCard>\n          </LoginCardWrapper>\n        </LeftSection>\n        <LoginCardFillLeft />\n        <LoginCardFillRight />\n\n        <RightSection>\n          <WeedBullet1 src={thebullet} alt=\"\" />\n          <WeedBulletText1>Make Florida green.</WeedBulletText1>\n          <WeedBullet2 src={thebullet} alt=\"\" />\n          <WeedBulletText2> Contact your state Reps. </WeedBulletText2>\n          <WeedBullet3 src={thebullet} alt=\"\" />\n          <WeedBulletText3>Marijuana local news.</WeedBulletText3>\n          <WeedBullet4 src={thebullet} alt=\"\" />\n          <WeedBulletText4>\n            Stay up to date on latest State laws.\n          </WeedBulletText4>\n        </RightSection>\n\n        {/* <Spacer>\n        Contact Your State Representatives\n\n        </Spacer> */}\n      </SignupWrapper>\n    );\n  }\n}\n\nconst Wtf = React.forwardRef(Signup);\nexport default Wtf;\n"],"names":["Card","styled","div","withConfig","displayName","componentId","H2","h2","Form","form","FormItem","FormItemSqueeze","Label","label","EmailLabel","Input","input","InputForSignup","Button","button","props","isBtnDisabled","ButtonForSignup","Logo","img","ErrorWrapper","ErrorMsg","h4","XorCheckIcon","LoginWrapper","LogoWrapper","InputIcon","gsap","registerPlugin","ScrollTrigger","core","globals","SignupWrapper","show_offer","wleaf","SignupMaskWrapper","BottomFiLL","SignupMaskImageContainer","SignupMaskImage","LeftFiller","RightFiller","LoginCardWrapper","LoginCard","LoginCardFillLeft","LoginCardFillRight","Span","StatusSpinner","show_status_spinner","LeftSection","SocialMedia","RightSection","WeedBullet1","WeedBullet2","WeedBullet3","WeedBullet4","WeedBulletText1","WeedBulletText2","WeedBulletText3","WeedBulletText4","formData","FormData","Signup","ref","console","log","locationFromHook","useLocation","section2ScrollToRef","mobile","setMobile","useState","state","setState","React","full_name","full_nameFieldActive","email","emailFieldActive","password","passwordFieldActive","opt_in","status","errors","color","showStatusSpinner","waitMessage","getWindowDimensions","innerWidth","width","innerHeight","height","window","useEffect","homeWrapper","document","querySelectorAll","formItem","formWrapper","tl","timeline","duration","scrollTrigger","trigger","start","end","toggleActions","from","opacity","x","ease","stagger","handleChange","e","target","value","type","checked","name","toString","handleAdd","preventDefault","append","csrf","querySelector","getAttribute","$","url","headers","method","data","contentType","processData","success","response","error","handleSuccessfulAuth","xhr","errorMessages","activateField","disableField","push","auth","password_confirmation","green","windowDimensions","setWindowDimensions","handleResize","addEventListener","removeEventListener","useWindowDimensions","pathname","className","src","floridaMaskBig","alt","onSubmit","onChange","onFocus","onBlur","required","autoComplete","disabled","style","alignSelf","justifySelf","htmlFor","wait_message","display","greenCheck","redX","thebullet"],"sourceRoot":""}