881d9f4fd6700167429fafdc779b8170.json 20 KB
Newer Older
1
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\changePassword\\\\ChangePassword.js\",\n    _s = $RefreshSig$();\n\nimport React, { useState, useEffect } from 'react';\nimport { useOktaAuth } from '@okta/okta-react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport MessageModal from '../messageModal/MessageModal';\nimport config from '../../config';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst ChangePassword = () => {\n  _s();\n\n  const {\n    authState,\n    oktaAuth\n  } = useOktaAuth();\n  const accessToken = oktaAuth.getAccessToken();\n  const [submitOkMessageModalState, setSubmitOkMessageModalState] = useState(false);\n  const [userInfo, setUserInfo] = useState(null);\n  const [oldPassword, setOldPassword] = useState('');\n  const [newPassword, setNewPassword] = useState('');\n  const [confirmNewPassword, setConfirmNewPassword] = useState('');\n  useEffect(() => {\n    if (!authState.isAuthenticated) {\n      // When user isn't authenticated, forget any user info\n      setUserInfo(null);\n    } else {\n      oktaAuth.getUser().then(info => {\n        setUserInfo(info);\n      });\n    }\n  }, [authState, oktaAuth]); // Update if authState changes\n\n  const handleOldPasswordChange = e => {\n    setOldPassword(e.target.value);\n  };\n\n  const handleNewPasswordChange = e => {\n    setNewPassword(e.target.value);\n  };\n\n  const handleConfirmNewPasswordChange = e => {\n    setConfirmNewPassword(e.target.value);\n  };\n\n  const userInputData = JSON.stringify({\n    email: `${userInfo && userInfo.email}`,\n    newPassword: `${newPassword}`\n  });\n  const ChangePasswordRequestOptions = {\n    method: 'PUT',\n    headers: {\n      Authorization: `Bearer ${accessToken}`\n    },\n    body: userInputData\n  };\n\n  const handleChangePasswordFormSubmit = e => {\n    e.preventDefault();\n\n    if (!oldPassword || !newPassword || !confirmNewPassword) {\n      window.alert(\"A password field is blank\");\n      return;\n    }\n\n    if (!(confirmNewPassword.length >= 7)) {\n      window.alert(\"Password must consist of 8 characters or more\");\n      return;\n    }\n\n    if (!(newPassword === confirmNewPassword)) {\n      window.alert(\"Passwords do not match\");\n      return;\n    } else {\n      fetch(config.serviceAPI.changePasswordURL, ChangePasswordRequestOptions).then(res => {\n        if (!res.ok) {\n          window.alert(\"Error: password requirements were not met\");\n          Promise.reject(\"\");\n          return;\n        }\n\n        if (res.ok) {\n          setSubmitOkMessageModalState(true);\n          setOldPassword('');\n          setNewPassword('');\n          setConfirmNewPassword('');\n        }\n      });\n    }\n  };\n\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"change-password-container\",\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"container-header\",\n      children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n        icon: \"lock\",\n        className: \"lock-icon\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 92,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"h5\", {\n        children: \"Change password\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 93,\n        columnNumber: 9\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 91,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"content\",\n      children: [/*#__PURE__*/_jsxDEV(\"p\", {\n        children: \"Password requirements:\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 96,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"ul\", {\n        children: [/*#__PURE__*/_jsxDEV(\"li\", {\n          children: \"Old password must be correct\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 98,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n          children: \"New password must consist of at least 8 characters\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 101,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n          children: \"No parts of username may be included in the new password\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 104,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n          children: \"Your new password cannot be any of your last 4 passwords\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 107,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 97,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"form\", {\n        onSubmit: handleChangePasswordFormSubmit,\n        children: /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"reset-password-form-container\",\n          children: [/*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"form-item\",\n            children: [/*#__PURE__*/_jsxDEV(\"label\", {\n              children: \"Old password\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 114,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n              id: \"oldPassword\",\n              type: \"password\",\n              value: oldPassword,\n              onChange: handleOldPasswordChange\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 117,\n              columnNumber: 15\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 113,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"form-item\",\n            children: [/*#__PURE__*/_jsxDEV(\"label\", {\n              children: \"New password\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 123,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n              id: \"newPassword\",\n              type: \"password\",\n              value: newPassword,\n              onChange: handleNewPasswordChange\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 126,\n              columnNumber: 15\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 122,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"form-item\",\n            children: [/*#__PURE__*/_jsxDEV(\"label\", {\n              children: \"Confirm new password\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 132,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n              id: \"confirmNewPassword\",\n              type: \"password\",\n              value: confirmNewPassword,\n              onChange: handleConfirmNewPasswordChange\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 135,\n              columnNumber: 15\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 131,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"form-item\",\n            children: /*#__PURE__*/_jsxDEV(\"button\", {\n              className: \"passwordResetSubmitButton\",\n              type: \"submit\",\n              children: [\"Submit\\xA0\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                icon: \"arrow-right\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 143,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 141,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 140,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 112,\n          columnNumber: 11\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 111,\n        columnNumber: 9\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 95,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: `modal ${submitOkMessageModalState ? \"active\" : \"inactive\"}`,\n      children: /*#__PURE__*/_jsxDEV(MessageModal, {\n        removeModal: () => setSubmitOkMessageModalState(false),\n        headerMessage: \"Password has been changed\",\n        bodyMessage: \"You can now sign in using your new password\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 150,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 149,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 90,\n    columnNumber: 5\n  }, this);\n};\n\n_s(ChangePassword, \"15K9JE0I3O9nxCW5/uA+o64OTY8=\", false, function () {\n  return [useOktaAuth];\n});\n\n_c = ChangePassword;\nexport default ChangePassword;\n\nvar _c;\n\n$RefreshReg$(_c, \"ChangePassword\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/changePassword/ChangePassword.js"],"names":["React","useState","useEffect","useOktaAuth","FontAwesomeIcon","MessageModal","config","ChangePassword","authState","oktaAuth","accessToken","getAccessToken","submitOkMessageModalState","setSubmitOkMessageModalState","userInfo","setUserInfo","oldPassword","setOldPassword","newPassword","setNewPassword","confirmNewPassword","setConfirmNewPassword","isAuthenticated","getUser","then","info","handleOldPasswordChange","e","target","value","handleNewPasswordChange","handleConfirmNewPasswordChange","userInputData","JSON","stringify","email","ChangePasswordRequestOptions","method","headers","Authorization","body","handleChangePasswordFormSubmit","preventDefault","window","alert","length","fetch","serviceAPI","changePasswordURL","res","ok","Promise","reject"],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react'\r\nimport { useOktaAuth } from '@okta/okta-react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport MessageModal from '../messageModal/MessageModal'\r\nimport config from '../../config';\r\n\r\nconst ChangePassword = () => {\r\n  const { authState, oktaAuth } = useOktaAuth();\r\n  const accessToken = oktaAuth.getAccessToken();\r\n  const [submitOkMessageModalState, setSubmitOkMessageModalState] = useState(false);\r\n\r\n  const [userInfo, setUserInfo] = useState(null);\r\n  const [oldPassword, setOldPassword] = useState('')\r\n  const [newPassword, setNewPassword] = useState('')\r\n  const [confirmNewPassword, setConfirmNewPassword] = useState('')\r\n\r\n  useEffect(() => {\r\n    if (!authState.isAuthenticated) {\r\n      // When user isn't authenticated, forget any user info\r\n      setUserInfo(null);\r\n    } else {\r\n      oktaAuth.getUser().then(info => {\r\n        setUserInfo(info);\r\n      });\r\n    }\r\n  }, [authState, oktaAuth]); // Update if authState changes\r\n\r\n  const handleOldPasswordChange = (e) => {\r\n    setOldPassword(e.target.value)\r\n  }\r\n\r\n  const handleNewPasswordChange = (e) => {\r\n    setNewPassword(e.target.value)\r\n  }\r\n\r\n  const handleConfirmNewPasswordChange = (e) => {\r\n    setConfirmNewPassword(e.target.value);\r\n  }\r\n\r\n  const userInputData = JSON.stringify({\r\n    email: `${userInfo && userInfo.email}`,\r\n    newPassword: `${newPassword}`\r\n  })\r\n\r\n  const ChangePasswordRequestOptions = {\r\n    method: 'PUT',\r\n    headers: {\r\n      Authorization: `Bearer ${accessToken}`,\r\n    },\r\n    body: userInputData\r\n  }\r\n\r\n  const handleChangePasswordFormSubmit = (e) => {\r\n    e.preventDefault();\r\n\r\n    if (!oldPassword || !newPassword || !confirmNewPassword) {\r\n      window.alert(\"A password field is blank\")\r\n      return\r\n    }\r\n\r\n    if (!(confirmNewPassword.length >= 7)) {\r\n      window.alert(\"Password must consist of 8 characters or more\")\r\n      return\r\n    }\r\n\r\n    if (!(newPassword === confirmNewPassword)) {\r\n      window.alert(\"Passwords do not match\")\r\n      return\r\n    }\r\n\r\n    else {\r\n      fetch(config.serviceAPI.changePasswordURL, ChangePasswordRequestOptions)\r\n        .then((res) => {\r\n          if (!res.ok) {\r\n            window.alert(\"Error: password requirements were not met\")\r\n            Promise.reject(\"\")\r\n            return\r\n          }\r\n          if (res.ok) {\r\n            setSubmitOkMessageModalState(true)\r\n            setOldPassword('')\r\n            setNewPassword('')\r\n            setConfirmNewPassword('')\r\n          }\r\n        })\r\n    }\r\n  }\r\n\r\n  return (\r\n    <div className=\"change-password-container\">\r\n      <div className=\"container-header\">\r\n        <FontAwesomeIcon icon=\"lock\" className=\"lock-icon\"></FontAwesomeIcon>\r\n        <h5>Change password</h5>\r\n      </div>\r\n      <div className=\"content\">\r\n        <p>Password requirements:</p>\r\n        <ul>\r\n          <li>\r\n            Old password must be correct\r\n          </li>\r\n          <li>\r\n            New password must consist of at least 8 characters\r\n          </li>\r\n          <li>\r\n            No parts of username may be included in the new password\r\n          </li>\r\n          <li>\r\n            Your new password cannot be any of your last 4 passwords\r\n          </li>\r\n        </ul>\r\n        <form onSubmit={handleChangePasswordFormSubmit}>\r\n          <div className=\"reset-password-form-container\">\r\n            <div className=\"form-item\">\r\n              <label>\r\n                Old password\r\n              </label>\r\n              <input\r\n                id=\"oldPassword\" type=\"password\"\r\n                value={oldPassword}\r\n                onChange={handleOldPasswordChange} />\r\n            </div>\r\n            <div className=\"form-item\">\r\n              <label>\r\n                New password\r\n              </label>\r\n              <input\r\n                id=\"newPassword\" type=\"password\"\r\n                value={newPassword}\r\n                onChange={handleNewPasswordChange} />\r\n            </div>\r\n            <div className=\"form-item\">\r\n              <label>\r\n                Confirm new password\r\n              </label>\r\n              <input\r\n                id=\"confirmNewPassword\" type=\"password\"\r\n                value={confirmNewPassword}\r\n                onChange={handleConfirmNewPasswordChange} />\r\n            </div>\r\n            <div className=\"form-item\">\r\n              <button className=\"passwordResetSubmitButton\" type=\"submit\">\r\n                Submit&nbsp;\r\n                <FontAwesomeIcon icon=\"arrow-right\"></FontAwesomeIcon>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <div className={`modal ${submitOkMessageModalState ? \"active\" : \"inactive\"}`}>\r\n        <MessageModal removeModal={() => setSubmitOkMessageModalState(false)} headerMessage={\"Password has been changed\"} bodyMessage={\"You can now sign in using your new password\"} />\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default ChangePassword\r\n"]},"metadata":{},"sourceType":"module"}