3b6226c7c2341a553f691b0d065ac72f.json 22.6 KB
Newer Older
1
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\pages\\\\account\\\\Account.jsx\",\n    _s = $RefreshSig$();\n\n// rfce\nimport React, { useState, useEffect } from 'react';\nimport \"./Account.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { useOktaAuth } from '@okta/okta-react';\nimport ConfirmRemoveAccountModal from \"./confirmRemoveAccountModal/ConfirmRemoveAccountModal\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction Account() {\n  _s();\n\n  const {\n    authState,\n    oktaAuth\n  } = useOktaAuth();\n  const [userInfo, setUserInfo] = useState(null);\n  const [confirmAccountRemoveModalState, setConfirmAccountRemoveModalState] = useState(false);\n\n  const toggleConfirmAccountRemoveModalState = () => setConfirmAccountRemoveModalState(!confirmAccountRemoveModalState);\n\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  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"page-content-container\",\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"content-header\",\n      children: /*#__PURE__*/_jsxDEV(\"h2\", {\n        className: \"welcome-text\",\n        children: \"Account information\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 29,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 28,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"accountpage-content\",\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"personal-information-container\",\n        children: [/*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"container-header\",\n          children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n            icon: \"user-circle\",\n            className: \"user-icon\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 35,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"h5\", {\n            children: \"Personal information\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 36,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n            children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n              icon: \"pen\",\n              className: \"pen-icon\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 38,\n              columnNumber: 15\n            }, this), \"Edit\"]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 37,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 34,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"content\",\n          children: /*#__PURE__*/_jsxDEV(\"ul\", {\n            children: [/*#__PURE__*/_jsxDEV(\"li\", {\n              children: /*#__PURE__*/_jsxDEV(\"b\", {\n                children: \"Name:\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 45,\n                columnNumber: 17\n              }, this)\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 44,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n              children: userInfo ? userInfo.name : \"Fetching firstname\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 47,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n              children: /*#__PURE__*/_jsxDEV(\"b\", {\n                children: \"Email\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 51,\n                columnNumber: 17\n              }, this)\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 50,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n              children: userInfo ? userInfo.email : \"fetching email\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 53,\n              columnNumber: 15\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 43,\n            columnNumber: 13\n          }, this)\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 42,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 33,\n        columnNumber: 9\n      }, this), /*#__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: 62,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"h5\", {\n            children: \"Change password\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 63,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 61,\n          columnNumber: 11\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: 66,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"ul\", {\n            children: [/*#__PURE__*/_jsxDEV(\"li\", {\n              children: \"At least 8 characters\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 68,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n              children: \"No parts of username may be included\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 71,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n              children: \"Your password may not be any of the last 4 passwords\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 74,\n              columnNumber: 15\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 67,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"form\", {\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: 81,\n                  columnNumber: 19\n                }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n                  type: \"password\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 84,\n                  columnNumber: 19\n                }, this)]\n              }, void 0, true, {\n                fileName: _jsxFileName,\n                lineNumber: 80,\n                columnNumber: 17\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: 87,\n                  columnNumber: 19\n                }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n                  type: \"password\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 90,\n                  columnNumber: 19\n                }, this)]\n              }, void 0, true, {\n                fileName: _jsxFileName,\n                lineNumber: 86,\n                columnNumber: 17\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: 93,\n                  columnNumber: 19\n                }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n                  type: \"password\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 96,\n                  columnNumber: 19\n                }, this)]\n              }, void 0, true, {\n                fileName: _jsxFileName,\n                lineNumber: 92,\n                columnNumber: 17\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: 101,\n                    columnNumber: 21\n                  }, this)]\n                }, void 0, true, {\n                  fileName: _jsxFileName,\n                  lineNumber: 99,\n                  columnNumber: 19\n                }, this)\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 98,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 79,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 78,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 65,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 60,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"deactivate-account-container\",\n        children: [/*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"container-header\",\n          children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n            icon: \"trash\",\n            className: \"trash-icon\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 111,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"h5\", {\n            children: \"Delete account\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 112,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 110,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"content\",\n          children: [/*#__PURE__*/_jsxDEV(\"p\", {\n            children: \"Your account and all your data will be permanently deleted\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 115,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n            onClick: toggleConfirmAccountRemoveModalState,\n            children: \"Delete\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 118,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 114,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 109,\n        columnNumber: 9\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 31,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: `modal ${confirmAccountRemoveModalState ? \"active\" : \"inactive\"}`,\n      children: /*#__PURE__*/_jsxDEV(ConfirmRemoveAccountModal, {\n        removeModal: () => setConfirmAccountRemoveModalState(false)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 125,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 124,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 27,\n    columnNumber: 5\n  }, this);\n}\n\n_s(Account, \"Q9dz9d9vt2i1tyA3W6mcd1htZ7g=\", false, function () {\n  return [useOktaAuth];\n});\n\n_c = Account;\nexport default Account;\n\nvar _c;\n\n$RefreshReg$(_c, \"Account\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/pages/account/Account.jsx"],"names":["React","useState","useEffect","FontAwesomeIcon","useOktaAuth","ConfirmRemoveAccountModal","Account","authState","oktaAuth","userInfo","setUserInfo","confirmAccountRemoveModalState","setConfirmAccountRemoveModalState","toggleConfirmAccountRemoveModalState","isAuthenticated","getUser","then","info","name","email"],"mappings":"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","sourcesContent":["// rfce\r\nimport React, { useState, useEffect } from 'react'\r\nimport \"./Account.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { useOktaAuth } from '@okta/okta-react';\r\nimport ConfirmRemoveAccountModal from \"./confirmRemoveAccountModal/ConfirmRemoveAccountModal\"\r\n\r\nfunction Account() {\r\n  const { authState, oktaAuth } = useOktaAuth();\r\n  const [userInfo, setUserInfo] = useState(null);\r\n\r\n  const [confirmAccountRemoveModalState, setConfirmAccountRemoveModalState] = useState(false)\r\n  const toggleConfirmAccountRemoveModalState = () => setConfirmAccountRemoveModalState(!confirmAccountRemoveModalState)\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  return (\r\n    <div className=\"page-content-container\">\r\n      <div className=\"content-header\">\r\n        <h2 className=\"welcome-text\">Account information</h2>\r\n      </div>\r\n      <div className=\"accountpage-content\">\r\n\r\n        <div className=\"personal-information-container\">\r\n          <div className=\"container-header\">\r\n            <FontAwesomeIcon icon=\"user-circle\" className=\"user-icon\"></FontAwesomeIcon>\r\n            <h5>Personal information</h5>\r\n            <button>\r\n              <FontAwesomeIcon icon=\"pen\" className=\"pen-icon\"></FontAwesomeIcon>\r\n              Edit\r\n            </button>\r\n          </div>\r\n          <div className=\"content\">\r\n            <ul>\r\n              <li>\r\n                <b>Name:</b>\r\n              </li>\r\n              <li>\r\n                {userInfo ? userInfo.name : \"Fetching firstname\"}\r\n              </li>\r\n              <li>\r\n                <b>Email</b>\r\n              </li>\r\n              <li>\r\n                {userInfo ? userInfo.email : \"fetching email\"}\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n\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                At least 8 characters\r\n              </li>\r\n              <li>\r\n                No parts of username may be included\r\n              </li>\r\n              <li>\r\n                Your password may not be any of the last 4 passwords\r\n              </li>\r\n            </ul>\r\n            <form>\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 type=\"password\"></input>\r\n                </div>\r\n                <div className=\"form-item\">\r\n                  <label>\r\n                    New password\r\n                  </label>\r\n                  <input type=\"password\"></input>\r\n                </div>\r\n                <div className=\"form-item\">\r\n                  <label>\r\n                    Confirm new password\r\n                  </label>\r\n                  <input type=\"password\"></input>\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>\r\n\r\n        <div className=\"deactivate-account-container\">\r\n          <div className=\"container-header\">\r\n            <FontAwesomeIcon icon=\"trash\" className=\"trash-icon\"></FontAwesomeIcon>\r\n            <h5>Delete account</h5>\r\n          </div>\r\n          <div className=\"content\">\r\n            <p>\r\n              Your account and all your data will be permanently deleted\r\n            </p>\r\n            <button onClick={toggleConfirmAccountRemoveModalState}>\r\n              Delete\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div className={`modal ${confirmAccountRemoveModalState ? \"active\" : \"inactive\"}`}>\r\n        <ConfirmRemoveAccountModal removeModal={() => setConfirmAccountRemoveModalState(false)} />\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Account\r\n"]},"metadata":{},"sourceType":"module"}