{"version":3,"file":"component---src-pages-sign-up-tsx-2439c799ddba68dc5d1a.js","mappings":"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","sources":["webpack://marine-debris-tracker/./src/components/Button/Button.tsx","webpack://marine-debris-tracker/./src/mdtApi/registerUser.ts","webpack://marine-debris-tracker/./src/components/AuthComponents/SignUpPage/SignUp.tsx","webpack://marine-debris-tracker/./src/pages/sign-up.tsx","webpack://marine-debris-tracker/./src/styles/colors.ts","webpack://marine-debris-tracker/./src/util/urls.ts","webpack://marine-debris-tracker/./src/images/beach-clean-hero.jpg"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { colors } from \"../../styles/colors\";\n\nconst ButtonWrapperBtn = styled.button`\n  font-size: 16pt;\n  border: none;\n  align-self: center;\n  color: ${colors.white};\n  background-color: #edbd7f;\n  min-width: 120px;\n  padding: 10px;\n  text-align: center;\n  display: inline-block;\n  cursor: pointer;\n  opacity: 0.95;\n  user-select: none;\n  text-decoration: none;\n  &:hover {\n    opacity: 1;\n  }\n`;\n\nconst ButtonWrapper = styled.button`\n  font-size: 16pt;\n  border: none;\n  align-self: center;\n  color: ${colors.white};\n  background-color: #edbd7f;\n  min-width: 120px;\n  padding: 10px;\n  text-align: center;\n  display: inline-block;\n  cursor: pointer;\n  opacity: 0.95;\n  user-select: none;\n  text-decoration: none;\n  &:hover {\n    opacity: 1;\n  }\n`;\n\nconst Button = ({\n  children,\n  btn,\n  ...props\n}: {\n  children: any;\n  onClick?: (e?: any) => void;\n  style?: any;\n  btn?: boolean;\n  [k: string]: any;\n}) => {\n  return (\n    <>\n      {btn ? (\n        <ButtonWrapperBtn {...props}>{children}</ButtonWrapperBtn>\n      ) : (\n        <ButtonWrapper {...props}>{children}</ButtonWrapper>\n      )}\n    </>\n  );\n};\n\nexport default Button;\n","import fetch from \"isomorphic-fetch\";\nimport { devAPI } from \"../util/urls\";\n\nconst registerUser = async (\n  firstname: string,\n  lastname: string,\n  username: string,\n  email: string,\n  password1: string,\n  password2: string\n) => {\n  try {\n    const res = await fetch(`${devAPI}/users/`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({\n        firstname,\n        lastname,\n        username,\n        email,\n        password1,\n        password2,\n      }),\n    });\n    if (res.status === 400) throw \"This email is already in use\";\n    let parsed = await res.json();\n    return parsed;\n  } catch (err) {\n    return { error: err };\n  }\n};\n\nexport default registerUser;\n","import { StaticImage } from \"gatsby-plugin-image\";\nimport React, { useContext, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { DebrisTrackerContext } from \"../../../context/DebrisTrackerContext\";\nimport background from \"../../../images/beach-clean-hero.jpg\";\nimport Button from \"../../Button/Button\";\nimport { navigate } from \"gatsby\";\nimport registerUser from \"../../../mdtApi/registerUser\";\n\nconst SignUpWrapper = styled.div`\n  display: flex;\n  width: 100%;\n  min-height: 100vh;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n`;\n\nconst SignUpInputContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 50%;\n  padding: 50px 40px;\n  text-align: center;\n  @media only screen and (max-width: 767px) {\n    width: 75%;\n  }\n`;\n\nconst SignUpHeader = styled.div``;\n\nconst SignUpBackground = styled.div`\n  display: flex;\n  width: 50%;\n  background-color: black;\n  background-image: url(${background});\n  background-size: cover;\n  background-position: 100% 0;\n  background-repeat: no-repeat;\n  box-shadow: inset 0 300px 300px -100px rgba(0, 0, 0, 0.4);\n\n  @media only screen and (max-width: 767px) {\n    display: none;\n  }\n`;\n\nconst SignUpForm = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 100px;\n  flex-grow: 1;\n\n  @media only screen and (max-width: 767px) {\n    margin-top: 40px;\n    display: block;\n  }\n`;\n\nconst SignUpInputs = styled.form`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst NameInputContainer = styled.div`\n  display: grid;\n  grid-template-rows: 1fr;\n  grid-template-columns: 1fr 1fr;\n  column-gap: 10px;\n\n  @media only screen and (max-width: 767px) {\n    grid-template-columns: 1fr;\n  }\n`;\n\nconst LoginSignup = styled.div`\n  @media only screen and (max-width: 767px) {\n    margin-top: 15px;\n  }\n`;\n\nconst SignUpInput = styled.input`\n  border: 1px solid #d4d4d4;\n  font-family: \"Lato\";\n  font-size: 12pt;\n  padding: 20px;\n  margin: 10px 0px;\n  width: auto;\n\n  @media only screen and (max-width: 478px) {\n    padding: 15px;\n  }\n`;\n\nconst ErrorContainer = styled.div`\n  padding: 20px;\n  border: solid 2px #801801;\n  color: #801801;\n  background-color: #dfdfdf;\n`;\n\nconst SignUp = () => {\n  // controlled input fields\n  const [firstname, setFirstname] = useState<string>(\"\");\n  const [lastname, setLastname] = useState<string>(\"\");\n  const [username, setUsername] = useState<string>(\"\");\n  const [email, setEmail] = useState<string>(\"\");\n  const [password1, setPassword1] = useState<string>(\"\");\n  const [password2, setPassword2] = useState<string>(\"\");\n\n  const [err, setErr] = useState<string>(\"\");\n\n  const formRef = useRef<any>(undefined);\n  const { setUser } = useContext(DebrisTrackerContext);\n\n  const testEmail = (email: string) => {\n    const validEmail = /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    return validEmail.test(email);\n  };\n\n  const validateSignup = () => {\n    // check all fields\n    if (\n      !firstname ||\n      !lastname ||\n      !username ||\n      !email ||\n      !password1 ||\n      !password2\n    ) {\n      setErr(\"All fields are required\");\n      return false;\n    }\n\n    // check passwords match\n    if (password1 !== password2) {\n      setErr(\"Passwords do not match\");\n      return false;\n    }\n\n    // check email is an email\n    if (!testEmail(email)) {\n      setErr(\"Email not valid\");\n      return false;\n    }\n\n    return true;\n  };\n\n  const handleSignUp = async (e?: any) => {\n    if (e) {\n      e.preventDefault();\n    }\n    if (!validateSignup()) {\n      return;\n    }\n    try {\n      const user = await registerUser(\n        firstname,\n        lastname,\n        username,\n        email,\n        password1,\n        password2\n      );\n      if (user.error) {\n        setErr(user.error);\n        return;\n      } else if (!user) {\n        throw \"Failed\";\n      }\n      setUser(user);\n      sessionStorage.setItem(\"user\", JSON.stringify(user));\n      navigate(\"/\");\n    } catch (e) {\n      setErr(\"Something went wrong - Please try again\");\n      console.error(e);\n    }\n  };\n\n  return (\n    <SignUpWrapper>\n      <SignUpInputContainer>\n        <SignUpHeader>\n          <a href=\"/\">\n            <StaticImage\n              src=\"../../../images/MarineDebrisTracker_Logo_Horizontal2.svg\"\n              quality={100}\n              width={350}\n              alt=\"Marine Debris Tracker\"\n              placeholder=\"tracedSVG\"\n            />\n          </a>\n        </SignUpHeader>\n        <SignUpForm>\n          <SignUpInputs ref={formRef} onSubmit={handleSignUp}>\n            {err && <ErrorContainer>{err}</ErrorContainer>}\n            <input type=\"submit\" style={{ display: \"none\" }} />\n            <NameInputContainer>\n              <SignUpInput\n                value={firstname}\n                onChange={(e) => {\n                  setFirstname(e.target.value);\n                }}\n                placeholder={\"First Name\"}\n              />\n              <SignUpInput\n                value={lastname}\n                onChange={(e) => {\n                  setLastname(e.target.value);\n                }}\n                placeholder={\"Last Name\"}\n              />\n            </NameInputContainer>\n            <SignUpInput\n              value={username}\n              onChange={(e) => {\n                setUsername(e.target.value);\n              }}\n              placeholder={\"Username\"}\n            />\n            <SignUpInput\n              value={email}\n              onChange={(e) => {\n                setEmail(e.target.value);\n              }}\n              placeholder={\"Email\"}\n            />\n            <SignUpInput\n              value={password1}\n              onChange={(e) => {\n                setPassword1(e.target.value);\n              }}\n              placeholder={\"Password\"}\n              type=\"password\"\n            />\n            <SignUpInput\n              value={password2}\n              onChange={(e) => {\n                setPassword2(e.target.value);\n              }}\n              placeholder={\"Confirm Password\"}\n              type=\"password\"\n            />\n            <Button btn={true} style={{ width: \"100%\", padding: \"20px 0px\" }}>\n              Sign Up\n            </Button>\n          </SignUpInputs>\n        </SignUpForm>\n        <LoginSignup>\n          Already have an account?{\" \"}\n          <a style={{ textDecoration: \"none\" }} href=\"/login\">\n            Login!\n          </a>\n        </LoginSignup>\n      </SignUpInputContainer>\n      <SignUpBackground />\n    </SignUpWrapper>\n  );\n};\n\nexport default SignUp;\n","import React from \"react\";\nimport SignUp from \"../components/AuthComponents/SignUpPage/SignUp\";\nimport Seo from \"../components/seo\";\n\nconst SignupPage = () => {\n  return (\n    <>\n      <link\n        rel=\"stylesheet\"\n        href=\"https://unpkg.com/leaflet@1.0.1/dist/leaflet.css\"\n      />\n      <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n      <link\n        rel=\"preconnect\"\n        href=\"https://fonts.gstatic.com\"\n        crossOrigin=\"true\"\n      />\n      <link\n        href=\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,900;1,100;1,300;1,400;1,700;1,900&display=swap\"\n        rel=\"stylesheet\"\n      />\n      <link\n        href=\"https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap\"\n        rel=\"stylesheet\"\n      />\n      <Seo title=\"Signup\" />\n      <SignUp />\n    </>\n  );\n};\n\nexport default SignupPage;\n","export const colors = {\n  orange: \"#edbd7f\",\n  blue: \"#62789d\",\n  lightBlue: \"#5f6871\",\n  bottleBlue: \"rgba(127, 174, 195, 1)\",\n  white: \"#ffffff\",\n  black: \"#000000\",\n  grey: \"#808080\",\n  green: \"#ACED80\",\n  red: \"#ED7E89\",\n};\n","export const apiUrl = \"https://marinedebris.engr.uga.edu/mdtapp\";\nexport const devAPI = process.env.GATSBY_API_URL;\nexport const loginUrl = process.env.GATSBY_LOGIN_URL;\n","export default __webpack_public_path__ + \"static/beach-clean-hero-3362d0772ebde8d8532b6f02ae0ce44d.jpg\";"],"names":["ButtonWrapperBtn","styled","button","withConfig","displayName","componentId","colors","white","ButtonWrapper","_ref","children","btn","props","React","async","firstname","lastname","username","email","password1","password2","res","fetch","devAPI","method","headers","body","JSON","stringify","status","json","err","error","SignUpWrapper","div","SignUpInputContainer","SignUpHeader","SignUpBackground","background","SignUpForm","SignUpInputs","form","NameInputContainer","LoginSignup","SignUpInput","input","ErrorContainer","SignUp","setFirstname","useState","setLastname","setUsername","setEmail","setPassword1","setPassword2","setErr","formRef","useRef","undefined","setUser","useContext","DebrisTrackerContext","href","StaticImage","src","quality","width","alt","placeholder","__imageData","require","ref","onSubmit","e","preventDefault","test","testEmail","user","registerUser","sessionStorage","setItem","navigate","console","type","style","display","value","onChange","target","Button","padding","textDecoration","SignupPage","rel","crossOrigin","Seo","title","orange","blue","lightBlue","bottleBlue","black","grey","green","red","apiUrl","process"],"sourceRoot":""}