102ef0ab8637adac1a4d783b1d595c52.json 21.9 KB
Newer Older
1
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\pages\\\\login\\\\signUp\\\\SignUp.jsx\",\n    _s = $RefreshSig$();\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport config from '../../../config';\nimport { useOktaAuth } from '@okta/okta-react';\nimport \"./SignUp.css\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst SignUp = () => {\n  _s();\n\n  const {\n    authState,\n    oktaAuth\n  } = useOktaAuth();\n  const [sessionToken, setSessionToken] = useState();\n  const [signUpFormVisibilityState, showSignUpForm] = useState(false);\n  const signUpFormRef = useRef(null);\n\n  const toggleSignUpFormVisible = () => showSignUpForm(!signUpFormVisibilityState);\n\n  useEffect(() => {\n    const pageClickEvent = e => {\n      if (signUpFormRef.current !== null && !signUpFormRef.current.contains(e.target)) {\n        toggleSignUpFormVisible();\n      }\n    }; // If the item is active (ie open) then listen for clicks\n\n\n    if (signUpFormVisibilityState) {\n      window.addEventListener('click', pageClickEvent);\n    }\n\n    return () => {\n      window.removeEventListener('click', pageClickEvent);\n    };\n  }, [signUpFormVisibilityState]);\n  const [firstname, setfirstname] = useState('');\n  const [lastname, setlastname] = useState('');\n  const [username, setUsername] = useState('');\n  const [password, setPassword] = useState('');\n  const [confirmPassword, setConfirmPassword] = useState('');\n  const userInputData = JSON.stringify({\n    firstname: `${firstname}`,\n    lastname: `${lastname}`,\n    email: `${username}`,\n    password: `${password}`\n  });\n  const loginRequestOptions = {\n    method: 'POST',\n    body: userInputData\n  };\n\n  const handlefirstnameChange = e => {\n    setfirstname(e.target.value);\n  };\n\n  const handlelastnameChange = e => {\n    setlastname(e.target.value);\n  };\n\n  const handleUsernameChange = e => {\n    setUsername(e.target.value);\n  };\n\n  const handlePasswordChange = e => {\n    setPassword(e.target.value);\n  };\n\n  const handleConfirmPasswordChange = e => {\n    setConfirmPassword(e.target.value);\n  };\n\n  const handleSignUpFormSubmit = e => {\n    e.preventDefault();\n\n    if (!password || !confirmPassword) {\n      window.alert(\"A password field is blank\");\n      return;\n    }\n\n    if (!(confirmPassword.length >= 7)) {\n      window.alert(\"Password must consist of 8 characters or more\");\n      return;\n    }\n\n    if (!(password == confirmPassword)) {\n      window.alert(\"Passwords fo not match\");\n      return;\n    } else {\n      fetch(config.serviceAPI.createNewUserURL, loginRequestOptions).then(res => {\n        if (!res.ok) {\n          window.alert(\"Error\");\n          Promise.reject(\"\");\n          return;\n        }\n\n        if (res.ok) {\n          handleSignInFormSubmit(e);\n        }\n      });\n    }\n  };\n\n  const handleSignInFormSubmit = e => {\n    e.preventDefault();\n    oktaAuth.signInWithCredentials({\n      username,\n      password\n    }).then(res => {\n      const sessionToken = res.sessionToken;\n      setSessionToken(sessionToken); // sessionToken is a one-use token, so make sure this is only called once\n\n      oktaAuth.signInWithRedirect({\n        sessionToken,\n        originalUri: '/home'\n      });\n    }).catch(err => console.log('Found an error', err));\n  };\n\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"signUpContainer\",\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      className: `modal ${signUpFormVisibilityState ? \"active\" : \"inactive\"}`,\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        ref: signUpFormRef,\n        className: \"modal-content\",\n        children: /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"signUpForm\",\n          children: [/*#__PURE__*/_jsxDEV(\"h2\", {\n            children: \"Sign Up\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 122,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"form\", {\n            onSubmit: handleSignUpFormSubmit,\n            children: [/*#__PURE__*/_jsxDEV(\"label\", {\n              children: [\"First name:\", /*#__PURE__*/_jsxDEV(\"input\", {\n                id: \"firstname\",\n                type: \"text\",\n                value: firstname,\n                onChange: handlefirstnameChange\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 126,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 124,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"label\", {\n              children: [\"Last Name:\", /*#__PURE__*/_jsxDEV(\"input\", {\n                id: \"lastname\",\n                type: \"text\",\n                value: lastname,\n                onChange: handlelastnameChange\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 133,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 131,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"label\", {\n              children: [\"Email:\", /*#__PURE__*/_jsxDEV(\"input\", {\n                id: \"email\",\n                type: \"text\",\n                value: username,\n                onChange: handleUsernameChange\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 140,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 138,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"label\", {\n              children: [\"Password:\", /*#__PURE__*/_jsxDEV(\"input\", {\n                id: \"password\",\n                type: \"password\",\n                value: password,\n                onChange: handlePasswordChange\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 147,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 145,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"label\", {\n              children: [\"Confirm Password:\", /*#__PURE__*/_jsxDEV(\"input\", {\n                id: \"password\",\n                type: \"password\",\n                value: confirmPassword,\n                onChange: handleConfirmPasswordChange\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 154,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 152,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"label\", {\n              className: \"password-requirements\",\n              children: \"Requirements: At least 8 characters, no parts of your username\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 159,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n              className: \"formSubmitButton\",\n              type: \"submit\",\n              children: [\"Sign Up\\xA0\\xA0\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                icon: \"user-plus\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 164,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 162,\n              columnNumber: 15\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 123,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 121,\n          columnNumber: 11\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 120,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 119,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"spacer\",\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"text-container\",\n        children: [/*#__PURE__*/_jsxDEV(\"h1\", {\n          children: \"Get started with PipIt\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 173,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"h5\", {\n          children: \"Track bugs and usabilty issues\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 174,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n          className: \"signUpForm-show-button\",\n          onClick: toggleSignUpFormVisible,\n          children: \"Sign up\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 175,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 172,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 171,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 118,\n    columnNumber: 5\n  }, this);\n};\n\n_s(SignUp, \"zaW+hWyZ5ozdpRaUbww+EQWIQgM=\", false, function () {\n  return [useOktaAuth];\n});\n\n_c = SignUp;\nexport default SignUp;\n\nvar _c;\n\n$RefreshReg$(_c, \"SignUp\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/pages/login/signUp/SignUp.jsx"],"names":["React","useState","useEffect","useRef","FontAwesomeIcon","config","useOktaAuth","SignUp","authState","oktaAuth","sessionToken","setSessionToken","signUpFormVisibilityState","showSignUpForm","signUpFormRef","toggleSignUpFormVisible","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener","firstname","setfirstname","lastname","setlastname","username","setUsername","password","setPassword","confirmPassword","setConfirmPassword","userInputData","JSON","stringify","email","loginRequestOptions","method","body","handlefirstnameChange","value","handlelastnameChange","handleUsernameChange","handlePasswordChange","handleConfirmPasswordChange","handleSignUpFormSubmit","preventDefault","alert","length","fetch","serviceAPI","createNewUserURL","then","res","ok","Promise","reject","handleSignInFormSubmit","signInWithCredentials","signInWithRedirect","originalUri","catch","err","console","log"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from 'react'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport config from '../../../config';\r\nimport { useOktaAuth } from '@okta/okta-react';\r\nimport \"./SignUp.css\"\r\n\r\nconst SignUp = () => {\r\n  const { authState, oktaAuth } = useOktaAuth();\r\n  const [sessionToken, setSessionToken] = useState()\r\n\r\n  const [signUpFormVisibilityState, showSignUpForm] = useState(false)\r\n  const signUpFormRef = useRef(null);\r\n  const toggleSignUpFormVisible = () => showSignUpForm(!signUpFormVisibilityState)\r\n\r\n  useEffect(() => {\r\n    const pageClickEvent = (e) => {\r\n      if (signUpFormRef.current !== null && !signUpFormRef.current.contains(e.target)) {\r\n        toggleSignUpFormVisible()\r\n      }\r\n    };\r\n\r\n    // If the item is active (ie open) then listen for clicks\r\n    if (signUpFormVisibilityState) {\r\n      window.addEventListener('click', pageClickEvent);\r\n    }\r\n\r\n    return () => {\r\n      window.removeEventListener('click', pageClickEvent);\r\n    }\r\n\r\n  }, [signUpFormVisibilityState]);\r\n\r\n  const [firstname, setfirstname] = useState('')\r\n  const [lastname, setlastname] = useState('')\r\n  const [username, setUsername] = useState('');\r\n  const [password, setPassword] = useState('');\r\n  const [confirmPassword, setConfirmPassword] = useState('');\r\n\r\n  const userInputData = JSON.stringify({\r\n    firstname: `${firstname}`,\r\n    lastname: `${lastname}`,\r\n    email: `${username}`,\r\n    password: `${password}`\r\n  })\r\n\r\n  const loginRequestOptions = {\r\n    method: 'POST',\r\n    body: userInputData\r\n  };\r\n\r\n  const handlefirstnameChange = (e) => {\r\n    setfirstname(e.target.value)\r\n  }\r\n\r\n  const handlelastnameChange = (e) => {\r\n    setlastname(e.target.value)\r\n  }\r\n\r\n  const handleUsernameChange = (e) => {\r\n    setUsername(e.target.value);\r\n  };\r\n\r\n  const handlePasswordChange = (e) => {\r\n    setPassword(e.target.value)\r\n  }\r\n\r\n  const handleConfirmPasswordChange = (e) => {\r\n    setConfirmPassword(e.target.value)\r\n  }\r\n\r\n  const handleSignUpFormSubmit = (e) => {\r\n    e.preventDefault();\r\n\r\n    if (!password || !confirmPassword) {\r\n      window.alert(\"A password field is blank\")\r\n      return\r\n    }\r\n\r\n    if (!(confirmPassword.length >= 7)) {\r\n      window.alert(\"Password must consist of 8 characters or more\")\r\n      return\r\n    }\r\n\r\n    if (!(password == confirmPassword)) {\r\n      window.alert(\"Passwords fo not match\")\r\n      return\r\n    }\r\n\r\n    else {\r\n      fetch(config.serviceAPI.createNewUserURL, loginRequestOptions)\r\n        .then((res) => {\r\n          if (!res.ok) {\r\n            window.alert(\"Error\")\r\n            Promise.reject(\"\")\r\n            return\r\n          }\r\n          if (res.ok) {\r\n            handleSignInFormSubmit(e)\r\n          }\r\n        })\r\n    }\r\n  }\r\n\r\n  const handleSignInFormSubmit = (e) => {\r\n    e.preventDefault();\r\n\r\n    oktaAuth.signInWithCredentials({ username, password })\r\n      .then(res => {\r\n        const sessionToken = res.sessionToken;\r\n        setSessionToken(sessionToken);\r\n        // sessionToken is a one-use token, so make sure this is only called once\r\n        oktaAuth.signInWithRedirect({ sessionToken, originalUri: '/home' });\r\n      })\r\n      .catch(err => console.log('Found an error', err));\r\n  };\r\n\r\n  return (\r\n    <div className=\"signUpContainer\">\r\n      <div className={`modal ${signUpFormVisibilityState ? \"active\" : \"inactive\"}`}>\r\n        <div ref={signUpFormRef} className=\"modal-content\">\r\n          <div className=\"signUpForm\">\r\n            <h2>Sign Up</h2>\r\n            <form onSubmit={handleSignUpFormSubmit}>\r\n              <label>\r\n                First name:\r\n                <input\r\n                  id=\"firstname\" type=\"text\"\r\n                  value={firstname}\r\n                  onChange={handlefirstnameChange} />\r\n              </label>\r\n              <label>\r\n                Last Name:\r\n                <input\r\n                  id=\"lastname\" type=\"text\"\r\n                  value={lastname}\r\n                  onChange={handlelastnameChange} />\r\n              </label>\r\n              <label>\r\n                Email:\r\n                <input\r\n                  id=\"email\" type=\"text\"\r\n                  value={username}\r\n                  onChange={handleUsernameChange} />\r\n              </label>\r\n              <label>\r\n                Password:\r\n                <input\r\n                  id=\"password\" type=\"password\"\r\n                  value={password}\r\n                  onChange={handlePasswordChange} />\r\n              </label>\r\n              <label>\r\n                Confirm Password:\r\n                <input\r\n                  id=\"password\" type=\"password\"\r\n                  value={confirmPassword}\r\n                  onChange={handleConfirmPasswordChange} />\r\n              </label>\r\n              <label className=\"password-requirements\">\r\n                Requirements: At least 8 characters, no parts of your username\r\n              </label>\r\n              <button className=\"formSubmitButton\" type=\"submit\">\r\n                Sign Up&nbsp;&nbsp;\r\n                <FontAwesomeIcon icon=\"user-plus\"></FontAwesomeIcon>\r\n              </button>\r\n            </form>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"spacer\">\r\n        <div className=\"text-container\">\r\n          <h1>Get started with PipIt</h1>\r\n          <h5>Track bugs and usabilty issues</h5>\r\n          <button className=\"signUpForm-show-button\" onClick={toggleSignUpFormVisible}>\r\n            Sign up\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  )\r\n}\r\n\r\nexport default SignUp\r\n"]},"metadata":{},"sourceType":"module"}