added ability to remove account from account page

client/node_modules/.cache/babel-loader/d69260d92dd6772aa0aad2b88f9b1b61.json

+{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\confirmRemoveAccountModal\\\\ConfirmRemoveAccountModal.jsx\";\nimport React from 'react';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst YesNoModal = ({\n  removeModal,\n  headerMessage,\n  bodyMessage\n}) => {\n  const stopProp = e => {\n    e.stopPropagation();\n  };\n\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"modal-content\",\n    onClick: e => removeModal(),\n    children: /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"yes-no-modal\",\n      children: [/*#__PURE__*/_jsxDEV(\"h2\", {\n        children: headerMessage\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 11,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"label\", {\n        children: bodyMessage\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 12,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n        children: \"Yes\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 15,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n        className: \"formSubmitButton\",\n        onClick: e => removeModal(),\n        children: \"No\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 18,\n        columnNumber: 9\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 10,\n      columnNumber: 7\n    }, this)\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 9,\n    columnNumber: 5\n  }, this);\n};\n\n_c = YesNoModal;\nexport default YesNoModal;\n\nvar _c;\n\n$RefreshReg$(_c, \"YesNoModal\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/confirmRemoveAccountModal/ConfirmRemoveAccountModal.jsx"],"names":["React","YesNoModal","removeModal","headerMessage","bodyMessage","stopProp","e","stopPropagation"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAEA,MAAMC,UAAU,GAAG,CAAC;AAAEC,EAAAA,WAAF;AAAeC,EAAAA,aAAf;AAA8BC,EAAAA;AAA9B,CAAD,KAAiD;AAClE,QAAMC,QAAQ,GAAGC,CAAC,IAAI;AACpBA,IAAAA,CAAC,CAACC,eAAF;AACD,GAFD;;AAIA,sBACE;AAAK,IAAA,SAAS,EAAC,eAAf;AAA+B,IAAA,OAAO,EAAED,CAAC,IAAIJ,WAAW,EAAxD;AAAA,2BACE;AAAK,MAAA,SAAS,EAAC,cAAf;AAAA,8BACE;AAAA,kBAAKC;AAAL;AAAA;AAAA;AAAA;AAAA,cADF,eAEE;AAAA,kBACGC;AADH;AAAA;AAAA;AAAA;AAAA,cAFF,eAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cALF,eAQE;AAAQ,QAAA,SAAS,EAAC,kBAAlB;AAAqC,QAAA,OAAO,EAAEE,CAAC,IAAIJ,WAAW,EAA9D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cARF;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,UADF;AAgBD,CArBD;;KAAMD,U;AAuBN,eAAeA,UAAf","sourcesContent":["import React from 'react'\r\n\r\nconst YesNoModal = ({ removeModal, headerMessage, bodyMessage }) => {\r\n  const stopProp = e => {\r\n    e.stopPropagation()\r\n  }\r\n\r\n  return (\r\n    <div className=\"modal-content\" onClick={e => removeModal()}>\r\n      <div className=\"yes-no-modal\">\r\n        <h2>{headerMessage}</h2>\r\n        <label>\r\n          {bodyMessage}\r\n        </label>\r\n        <button>\r\n          Yes\r\n        </button>\r\n        <button className=\"formSubmitButton\" onClick={e => removeModal()}>\r\n          No\r\n        </button>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default YesNoModal\r\n"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file

client/src/components/confirmRemoveAccountModal/ConfirmRemoveAccountModal.css

+.confirmRemoveAccountModal .buttonContainer {
+  margin-top: 10px;
+  display: flex;
+}
+
+.confirmRemoveAccountModal .buttonContainer .noButton {
+  margin-right: 10px;
+  background-color: white;
+  color: black;
+  border-color: black;
+}
+
+.confirmRemoveAccountModal .buttonContainer .yesButton {
+  margin-left: 10px;
+}
\ No newline at end of file

client/src/components/confirmRemoveAccountModal/ConfirmRemoveAccountModal.jsx

+import React, { useEffect, useState } from 'react'
+import { useOktaAuth } from '@okta/okta-react';
+import "./ConfirmRemoveAccountModal.css"
+import config from '../../config';
+
+const ConfirmRemoveAccountModal = ({ removeModal, headerMessage, bodyMessage }) => {
+  const { authState, oktaAuth } = useOktaAuth();
+  const [userInfo, setUserInfo] = useState(null);
+
+  const stopProp = e => {
+    e.stopPropagation()
+  }
+
+  useEffect(() => {
+    if (!authState.isAuthenticated) {
+      // When user isn't authenticated, forget any user info
+      setUserInfo(null);
+    } else {
+      oktaAuth.getUser().then(info => {
+        setUserInfo(info);
+      });
+    }
+  }, [authState, oktaAuth]); // Update if authState changes
+
+  const removeAccountRequestOptions = {
+    method: 'DELETE',
+    body: JSON.stringify(
+      {
+        email: `${userInfo && userInfo.email}`,
+      }
+    )
+  }
+
+  const handleRemoveAccount = () => {
+    console.log(removeAccountRequestOptions.body)
+    fetch(config.serviceAPI.removeAccountURL, removeAccountRequestOptions)
+      .then((res) => {
+        if (!res.ok) {
+          console.log(res)
+          window.alert("Error")
+          Promise.reject("")
+          return
+        }
+        if (res.ok) {
+          oktaAuth.signOut()
+        }
+      })
+  }
+
+  return (
+    <div className="modal-content">
+      <div className="confirmRemoveAccountModal">
+        <h2>Delete account</h2>
+        <label>
+          Are you sure you want to delete your account?
+        </label>
+        <div className="buttonContainer">
+          <button className="noButton" onClick={e => removeModal()}>
+            No
+          </button>
+          <button className="yesButton" onClick={handleRemoveAccount}>
+            Yes
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ConfirmRemoveAccountModal

client/src/components/messageModal/MessageModal.jsx

-import React, { useState, useEffect, useRef } from 'react'
+import React from 'react'
 
 const MessageModal = ({ removeModal, headerMessage, bodyMessage }) => {
   const stopProp = e => {