From 4219103a159e4a0d17ff08b37e2ca120b1025383 Mon Sep 17 00:00:00 2001 From: rlly92 Date: Fri, 2 Jun 2023 12:53:54 +0800 Subject: [PATCH 01/25] testing git procedure with Daniel --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index 4a6f800f..87173885 100644 --- a/src/App.js +++ b/src/App.js @@ -18,3 +18,5 @@ class App extends React.Component { } export default App; + +// Hello Daniel From 09c8ba16c697bf0cd7528c6674349228f5d2f795 Mon Sep 17 00:00:00 2001 From: daniellimss Date: Fri, 2 Jun 2023 13:00:27 +0800 Subject: [PATCH 02/25] hello from daniel --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index 4a6f800f..d3754eab 100644 --- a/src/App.js +++ b/src/App.js @@ -18,3 +18,5 @@ class App extends React.Component { } export default App; + +//Hello from Daniel From b79a2ca94c42419963b3ce91322d7798f9fff9c4 Mon Sep 17 00:00:00 2001 From: daniellimss Date: Fri, 2 Jun 2023 13:22:53 +0800 Subject: [PATCH 03/25] testing 123 --- src/App.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 6176283a..85153967 100644 --- a/src/App.js +++ b/src/App.js @@ -20,4 +20,5 @@ class App extends React.Component { export default App; -//Hello from Daniel and Reuben \ No newline at end of file +//Hello from Daniel and Reuben +//testing 123 From 71948472ce8df130665bed447ecfc339bc30734d Mon Sep 17 00:00:00 2001 From: rlly92 Date: Fri, 2 Jun 2023 13:40:31 +0800 Subject: [PATCH 04/25] testing commit branch --- src/App.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 85153967..9ca4cf72 100644 --- a/src/App.js +++ b/src/App.js @@ -19,6 +19,7 @@ class App extends React.Component { export default App; - //Hello from Daniel and Reuben //testing 123 + +// testing branch commit again From 585226377c817a1b4782f338a4f96af6a305c57b Mon Sep 17 00:00:00 2001 From: daniellimss Date: Fri, 2 Jun 2023 13:57:35 +0800 Subject: [PATCH 05/25] 2nd test --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index 9ca4cf72..bc32403c 100644 --- a/src/App.js +++ b/src/App.js @@ -23,3 +23,4 @@ export default App; //testing 123 // testing branch commit again +// add in From b27e16696147bca89d29ae29609aaca871955659 Mon Sep 17 00:00:00 2001 From: daniellimss Date: Sat, 3 Jun 2023 13:17:32 +0800 Subject: [PATCH 06/25] testing --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index bc32403c..10bf2b46 100644 --- a/src/App.js +++ b/src/App.js @@ -24,3 +24,4 @@ export default App; // testing branch commit again // add in +// new clone \ No newline at end of file From 889136b22afab735ce6495fb56141a8dce3d0c9d Mon Sep 17 00:00:00 2001 From: daniellimss Date: Sat, 3 Jun 2023 13:35:42 +0800 Subject: [PATCH 07/25] 2nd test --- src/App.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 10bf2b46..b4dca72e 100644 --- a/src/App.js +++ b/src/App.js @@ -24,4 +24,5 @@ export default App; // testing branch commit again // add in -// new clone \ No newline at end of file +// new clone +// new testing From 49641ab899be03ed90832b2f109509513b4fbca1 Mon Sep 17 00:00:00 2001 From: daniellimss Date: Sat, 3 Jun 2023 13:57:22 +0800 Subject: [PATCH 08/25] basic outline of login form --- src/components/Login.js | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/components/Login.js diff --git a/src/components/Login.js b/src/components/Login.js new file mode 100644 index 00000000..d705015f --- /dev/null +++ b/src/components/Login.js @@ -0,0 +1,41 @@ +import React from 'react' + +export const Login = () => { + + const handleEmail = () => { + //email validation + //authentication + console.log('email') + } + + const handlePassword = () => { + //password validation + //authentication + console.log('password') + } + + return ( +
+
+ +
+ +
+ + +
+
+ ) +} From e8342557fcc7082c7e096d056431b782716f7dd6 Mon Sep 17 00:00:00 2001 From: daniellimss Date: Sat, 3 Jun 2023 14:17:11 +0800 Subject: [PATCH 09/25] 2nd test --- src/components/Login.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Login.js b/src/components/Login.js index d705015f..b075d163 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -34,6 +34,7 @@ export const Login = () => { />
+
From c3107774f511228d89e71b41695be6aa0efd00c6 Mon Sep 17 00:00:00 2001 From: rlly92 Date: Sat, 3 Jun 2023 18:51:51 +0800 Subject: [PATCH 10/25] installed Auth0 --- package-lock.json | 174 ++++++++++++++++++++++++++++++++++++++++++---- package.json | 5 +- src/App.js | 2 +- 3 files changed, 166 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 35392e08..65ae870f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,11 @@ "name": "project-3-frontend-bootcamp", "version": "0.1.0", "dependencies": { - "react": "^18.1.0", + "@auth0/auth0-react": "^2.1.0", + "axios": "^1.4.0", + "react": "^18.2.0", "react-dom": "^18.1.0", + "react-router-dom": "^6.11.2", "react-scripts": "5.0.1" } }, @@ -25,6 +28,23 @@ "node": ">=6.0.0" } }, + "node_modules/@auth0/auth0-react": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-2.1.0.tgz", + "integrity": "sha512-+86qLx97BcSwL/ZwIzGq9jFa5SaV5z7goLU5gi+4R9KhzDg9vhmmZ+iQWW0GMiuwjJ8vcfX4hRTD6iF0DbGZWw==", + "dependencies": { + "@auth0/auth0-spa-js": "^2.0.4" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17 || ^18", + "react-dom": "^16.11.0 || ^17 || ^18" + } + }, + "node_modules/@auth0/auth0-spa-js": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.0.7.tgz", + "integrity": "sha512-iQ22AZCqOMG0q8/YPkvT4lGe2gsaopZ2kZb2cIBa7w+0hhGJhl6ANpFI6FzAKMzGRGmVocKxYdHha7lxAhbyPA==" + }, "node_modules/@babel/code-frame": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", @@ -2866,6 +2886,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -4226,6 +4254,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -7171,9 +7222,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "node_modules/follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", "funding": [ { "type": "individual", @@ -12815,6 +12866,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -12939,9 +12995,9 @@ } }, "node_modules/react": { - "version": "18.1.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz", - "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { "loose-envify": "^1.1.0" }, @@ -13112,6 +13168,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "dependencies": { + "@remix-run/router": "1.6.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "dependencies": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -15883,6 +15969,19 @@ "@jridgewell/trace-mapping": "^0.3.9" } }, + "@auth0/auth0-react": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-2.1.0.tgz", + "integrity": "sha512-+86qLx97BcSwL/ZwIzGq9jFa5SaV5z7goLU5gi+4R9KhzDg9vhmmZ+iQWW0GMiuwjJ8vcfX4hRTD6iF0DbGZWw==", + "requires": { + "@auth0/auth0-spa-js": "^2.0.4" + } + }, + "@auth0/auth0-spa-js": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.0.7.tgz", + "integrity": "sha512-iQ22AZCqOMG0q8/YPkvT4lGe2gsaopZ2kZb2cIBa7w+0hhGJhl6ANpFI6FzAKMzGRGmVocKxYdHha7lxAhbyPA==" + }, "@babel/code-frame": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", @@ -17810,6 +17909,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -18818,6 +18922,28 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==" }, + "axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -20985,9 +21111,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" }, "fork-ts-checker-webpack-plugin": { "version": "6.5.2", @@ -24908,6 +25034,11 @@ } } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -24989,9 +25120,9 @@ } }, "react": { - "version": "18.1.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz", - "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "requires": { "loose-envify": "^1.1.0" } @@ -25119,6 +25250,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "requires": { + "@remix-run/router": "1.6.2" + } + }, + "react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "requires": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 6fd77e8c..1cd3754a 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,11 @@ "version": "0.1.0", "private": true, "dependencies": { - "react": "^18.1.0", + "@auth0/auth0-react": "^2.1.0", + "axios": "^1.4.0", + "react": "^18.2.0", "react-dom": "^18.1.0", + "react-router-dom": "^6.11.2", "react-scripts": "5.0.1" }, "scripts": { diff --git a/src/App.js b/src/App.js index bc32403c..3a01253d 100644 --- a/src/App.js +++ b/src/App.js @@ -23,4 +23,4 @@ export default App; //testing 123 // testing branch commit again -// add in +// add in From f1aefadb564bdfd3807c58ac66486f7b3bcb3174 Mon Sep 17 00:00:00 2001 From: rlly92 Date: Sat, 3 Jun 2023 19:50:14 +0800 Subject: [PATCH 11/25] login page has been constructed. Complete Auth0 setup to follow --- package-lock.json | 1423 ++++++++++++++++++++++++++++++++++- package.json | 5 + src/App.js | 19 +- src/components/LoginPage.js | 140 ++-- 4 files changed, 1523 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5a5f3bd3..c3615450 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,11 @@ "version": "0.1.0", "dependencies": { "@auth0/auth0-react": "^2.1.0", + "@emotion/react": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@material-ui/icons": "^4.11.3", + "@mui/material": "^5.13.3", + "@mui/styles": "^5.13.2", "axios": "^1.4.0", "react": "^18.2.0", "react-dom": "^18.1.0", @@ -1785,11 +1790,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", - "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "version": "7.22.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz", + "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.13.11" }, "engines": { "node": ">=6.9.0" @@ -2018,6 +2023,169 @@ "postcss": "^8.3" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "peer": true + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/react": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz", + "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/serialize/node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@eslint/eslintrc": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz", @@ -2806,6 +2974,451 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz", "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==" }, + "node_modules/@material-ui/core": { + "version": "4.12.4", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz", + "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==", + "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.11.5", + "@material-ui/system": "^4.12.2", + "@material-ui/types": "5.1.0", + "@material-ui/utils": "^4.11.3", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0", + "react-transition-group": "^4.4.0" + }, + "engines": { + "node": ">=8.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/material-ui" + }, + "peerDependencies": { + "@types/react": "^16.8.6 || ^17.0.0", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@material-ui/core/node_modules/@material-ui/styles": { + "version": "4.11.5", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz", + "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==", + "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "5.1.0", + "@material-ui/utils": "^4.11.3", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.5.1", + "jss-plugin-camel-case": "^10.5.1", + "jss-plugin-default-unit": "^10.5.1", + "jss-plugin-global": "^10.5.1", + "jss-plugin-nested": "^10.5.1", + "jss-plugin-props-sort": "^10.5.1", + "jss-plugin-rule-value-function": "^10.5.1", + "jss-plugin-vendor-prefixer": "^10.5.1", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=8.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/material-ui" + }, + "peerDependencies": { + "@types/react": "^16.8.6 || ^17.0.0", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@material-ui/core/node_modules/@material-ui/system": { + "version": "4.12.2", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz", + "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.11.3", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=8.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/material-ui" + }, + "peerDependencies": { + "@types/react": "^16.8.6 || ^17.0.0", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@material-ui/core/node_modules/@material-ui/utils": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz", + "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + }, + "engines": { + "node": ">=8.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, + "node_modules/@material-ui/core/node_modules/csstype": { + "version": "2.6.21", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", + "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==", + "peer": true + }, + "node_modules/@material-ui/icons": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz", + "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==", + "dependencies": { + "@babel/runtime": "^7.4.4" + }, + "engines": { + "node": ">=8.0.0" + }, + "peerDependencies": { + "@material-ui/core": "^4.0.0", + "@types/react": "^16.8.6 || ^17.0.0", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==", + "peer": true, + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.3.tgz", + "integrity": "sha512-ErOMoGNpgf6BF5W+jgXDiRlXJnpSeg8XSRonuY5UCCMHIlOWtKDtt/LS3qDAbFFGb7tV/y6EBddbcMeexx+zHw==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "@popperjs/core": "^2.11.7", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/base/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.13.3", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.3.tgz", + "integrity": "sha512-w4//nRIi9fiMow/MmhkForOezd8nc229EpSZZ5DzwpJNOmAXwypFTapOUVAGTUQiTJyeZXUNbQqYuUIrIs2nbg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + } + }, + "node_modules/@mui/material": { + "version": "5.13.3", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.3.tgz", + "integrity": "sha512-10pek+Bz+PZ4rjUf3KTKfXWjPMUqU1nSnRPf4DAXABhsjzelGGfGW/EICgrLRrttYplTJZhoponWALezAge8ug==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@mui/base": "5.0.0-beta.3", + "@mui/core-downloads-tracker": "^5.13.3", + "@mui/system": "^5.13.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "@types/react-transition-group": "^4.4.6", + "clsx": "^1.2.1", + "csstype": "^3.1.2", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@mui/private-theming": { + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz", + "integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@mui/utils": "^5.13.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", + "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.2", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/styles": { + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.13.2.tgz", + "integrity": "sha512-gKNkVyk6azQ8wfCamh3yU/wLv1JscYrsQX9huQBwfwtE7kUTq2rgggdfJjRADjbcmT6IPX+oCHYjGfqqFgDIQQ==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@emotion/hash": "^0.9.1", + "@mui/private-theming": "^5.13.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "clsx": "^1.2.1", + "csstype": "^3.1.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.10.0", + "jss-plugin-camel-case": "^10.10.0", + "jss-plugin-default-unit": "^10.10.0", + "jss-plugin-global": "^10.10.0", + "jss-plugin-nested": "^10.10.0", + "jss-plugin-props-sort": "^10.10.0", + "jss-plugin-rule-value-function": "^10.10.0", + "jss-plugin-vendor-prefixer": "^10.10.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styles/node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@mui/system": { + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.2.tgz", + "integrity": "sha512-TPyWmRJPt0JPVxacZISI4o070xEJ7ftxpVtu6LWuYVOUOINlhoGOclam4iV8PDT3EMQEHuUrwU49po34UdWLlw==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@mui/private-theming": "^5.13.1", + "@mui/styled-engine": "^5.13.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "clsx": "^1.2.1", + "csstype": "^3.1.2", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz", + "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==", + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz", + "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@types/prop-types": "^15.7.5", + "@types/react-is": "^18.2.0", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2887,6 +3500,15 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", @@ -3416,6 +4038,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz", "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==" }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "node_modules/@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -3431,6 +4058,32 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "node_modules/@types/react": { + "version": "17.0.60", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.60.tgz", + "integrity": "sha512-pCH7bqWIfzHs3D+PDs3O/COCQJka+Kcw3RnO9rFA2zalqoXg7cNjJDh6mZ7oRtY1wmY4LVwDdAbA1F7Z8tv3BQ==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -3444,6 +4097,11 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==" }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "node_modules/@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -5485,6 +6143,15 @@ "node": ">=0.10.0" } }, + "node_modules/css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "dependencies": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -5646,6 +6313,11 @@ "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -5889,6 +6561,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -7198,6 +7879,11 @@ "url": "https://github.com/avajs/find-cache-dir?sponsor=1" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -7765,6 +8451,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -7981,6 +8680,11 @@ "node": ">=10.17.0" } }, + "node_modules/hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -8252,6 +8956,11 @@ "node": ">=0.10.0" } }, + "node_modules/is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" + }, "node_modules/is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -10619,6 +11328,88 @@ "node": ">=0.10.0" } }, + "node_modules/jss": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", + "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/jss" + } + }, + "node_modules/jss-plugin-camel-case": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", + "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-default-unit": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", + "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-global": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", + "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-nested": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", + "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-props-sort": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", + "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-rule-value-function": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", + "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-vendor-prefixer": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", + "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.10.0" + } + }, "node_modules/jsx-ast-utils": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz", @@ -11664,6 +12455,12 @@ "node": ">=4" } }, + "node_modules/popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==", + "peer": true + }, "node_modules/portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -13291,6 +14088,21 @@ "react-dom": ">=16" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -13354,9 +14166,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "node_modules/regenerator-transform": { "version": "0.15.0", @@ -14353,6 +15165,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -14723,6 +15540,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -17164,11 +17986,11 @@ } }, "@babel/runtime": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", - "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "version": "7.22.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz", + "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==", "requires": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.13.11" } }, "@babel/runtime-corejs3": { @@ -17307,6 +18129,145 @@ "integrity": "sha512-T5ZyNSw9G0x0UDFiXV40a7VjKw2b+l4G+S0sctKqxhx8cg9QtMUAGwJBVU9mHPDPoZEmwm0tEoukjl4zb9MU7Q==", "requires": {} }, + "@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "requires": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==" + } + } + }, + "@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "requires": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "peer": true + }, + "@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "requires": { + "@emotion/memoize": "^0.8.1" + } + }, + "@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "@emotion/react": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz", + "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==", + "requires": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + } + }, + "@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "requires": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + } + } + }, + "@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "requires": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + } + }, + "@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "requires": {} + }, + "@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "@eslint/eslintrc": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz", @@ -17891,6 +18852,241 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz", "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==" }, + "@material-ui/core": { + "version": "4.12.4", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz", + "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==", + "peer": true, + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.11.5", + "@material-ui/system": "^4.12.2", + "@material-ui/types": "5.1.0", + "@material-ui/utils": "^4.11.3", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0", + "react-transition-group": "^4.4.0" + }, + "dependencies": { + "@material-ui/styles": { + "version": "4.11.5", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz", + "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==", + "peer": true, + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "5.1.0", + "@material-ui/utils": "^4.11.3", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.5.1", + "jss-plugin-camel-case": "^10.5.1", + "jss-plugin-default-unit": "^10.5.1", + "jss-plugin-global": "^10.5.1", + "jss-plugin-nested": "^10.5.1", + "jss-plugin-props-sort": "^10.5.1", + "jss-plugin-rule-value-function": "^10.5.1", + "jss-plugin-vendor-prefixer": "^10.5.1", + "prop-types": "^15.7.2" + } + }, + "@material-ui/system": { + "version": "4.12.2", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz", + "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==", + "peer": true, + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.11.3", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + } + }, + "@material-ui/utils": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz", + "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==", + "peer": true, + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + }, + "csstype": { + "version": "2.6.21", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", + "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==", + "peer": true + } + } + }, + "@material-ui/icons": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz", + "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==", + "peer": true, + "requires": {} + }, + "@mui/base": { + "version": "5.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.3.tgz", + "integrity": "sha512-ErOMoGNpgf6BF5W+jgXDiRlXJnpSeg8XSRonuY5UCCMHIlOWtKDtt/LS3qDAbFFGb7tV/y6EBddbcMeexx+zHw==", + "requires": { + "@babel/runtime": "^7.21.0", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "@popperjs/core": "^2.11.7", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } + } + }, + "@mui/core-downloads-tracker": { + "version": "5.13.3", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.3.tgz", + "integrity": "sha512-w4//nRIi9fiMow/MmhkForOezd8nc229EpSZZ5DzwpJNOmAXwypFTapOUVAGTUQiTJyeZXUNbQqYuUIrIs2nbg==" + }, + "@mui/material": { + "version": "5.13.3", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.3.tgz", + "integrity": "sha512-10pek+Bz+PZ4rjUf3KTKfXWjPMUqU1nSnRPf4DAXABhsjzelGGfGW/EICgrLRrttYplTJZhoponWALezAge8ug==", + "requires": { + "@babel/runtime": "^7.21.0", + "@mui/base": "5.0.0-beta.3", + "@mui/core-downloads-tracker": "^5.13.3", + "@mui/system": "^5.13.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "@types/react-transition-group": "^4.4.6", + "clsx": "^1.2.1", + "csstype": "^3.1.2", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } + } + }, + "@mui/private-theming": { + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz", + "integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==", + "requires": { + "@babel/runtime": "^7.21.0", + "@mui/utils": "^5.13.1", + "prop-types": "^15.8.1" + } + }, + "@mui/styled-engine": { + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", + "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", + "requires": { + "@babel/runtime": "^7.21.0", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.2", + "prop-types": "^15.8.1" + } + }, + "@mui/styles": { + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.13.2.tgz", + "integrity": "sha512-gKNkVyk6azQ8wfCamh3yU/wLv1JscYrsQX9huQBwfwtE7kUTq2rgggdfJjRADjbcmT6IPX+oCHYjGfqqFgDIQQ==", + "requires": { + "@babel/runtime": "^7.21.0", + "@emotion/hash": "^0.9.1", + "@mui/private-theming": "^5.13.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "clsx": "^1.2.1", + "csstype": "^3.1.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.10.0", + "jss-plugin-camel-case": "^10.10.0", + "jss-plugin-default-unit": "^10.10.0", + "jss-plugin-global": "^10.10.0", + "jss-plugin-nested": "^10.10.0", + "jss-plugin-props-sort": "^10.10.0", + "jss-plugin-rule-value-function": "^10.10.0", + "jss-plugin-vendor-prefixer": "^10.10.0", + "prop-types": "^15.8.1" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + } + } + }, + "@mui/system": { + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.2.tgz", + "integrity": "sha512-TPyWmRJPt0JPVxacZISI4o070xEJ7ftxpVtu6LWuYVOUOINlhoGOclam4iV8PDT3EMQEHuUrwU49po34UdWLlw==", + "requires": { + "@babel/runtime": "^7.21.0", + "@mui/private-theming": "^5.13.1", + "@mui/styled-engine": "^5.13.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "clsx": "^1.2.1", + "csstype": "^3.1.2", + "prop-types": "^15.8.1" + } + }, + "@mui/types": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz", + "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==", + "requires": {} + }, + "@mui/utils": { + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz", + "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==", + "requires": { + "@babel/runtime": "^7.21.0", + "@types/prop-types": "^15.7.5", + "@types/react-is": "^18.2.0", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -17930,6 +19126,11 @@ "source-map": "^0.7.3" } }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, "@remix-run/router": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", @@ -18326,6 +19527,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz", "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==" }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -18341,6 +19547,32 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "@types/react": { + "version": "17.0.60", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.60.tgz", + "integrity": "sha512-pCH7bqWIfzHs3D+PDs3O/COCQJka+Kcw3RnO9rFA2zalqoXg7cNjJDh6mZ7oRtY1wmY4LVwDdAbA1F7Z8tv3BQ==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ==", + "requires": { + "@types/react": "*" + } + }, + "@types/react-transition-group": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -18354,6 +19586,11 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==" }, + "@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -19845,6 +21082,15 @@ } } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -19961,6 +21207,11 @@ } } }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -20142,6 +21393,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -21113,6 +22373,11 @@ "pkg-dir": "^4.1.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -21493,6 +22758,21 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -21656,6 +22936,11 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==" }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -21836,6 +23121,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" + }, "is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -23557,6 +24847,84 @@ "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.0.tgz", "integrity": "sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg==" }, + "jss": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", + "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", + "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.10.0" + } + }, + "jss-plugin-default-unit": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", + "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "jss-plugin-global": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", + "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "jss-plugin-nested": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", + "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", + "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", + "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", + "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.10.0" + } + }, "jsx-ast-utils": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz", @@ -24316,6 +25684,12 @@ } } }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==", + "peer": true + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -25356,6 +26730,17 @@ "clsx": "^1.1.1" } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -25406,9 +26791,9 @@ } }, "regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "regenerator-transform": { "version": "0.15.0", @@ -26137,6 +27522,11 @@ "postcss-selector-parser": "^6.0.4" } }, + "stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -26420,6 +27810,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", diff --git a/package.json b/package.json index 5a53ff28..2d303354 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,11 @@ "private": true, "dependencies": { "@auth0/auth0-react": "^2.1.0", + "@emotion/react": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@material-ui/icons": "^4.11.3", + "@mui/material": "^5.13.3", + "@mui/styles": "^5.13.2", "axios": "^1.4.0", "react": "^18.2.0", "react-dom": "^18.1.0", diff --git a/src/App.js b/src/App.js index 4a6f800f..63087fd7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,20 @@ -import React from "react"; -import logo from "./logo.png"; +import React, { createContext, useCallback, useEffect, useState } from "react"; +import LoginPage from "./components/LoginPage"; +import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; +import { ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; + import "./App.css"; class App extends React.Component { render() { return (
-
- logo -

- Edit src/App.js and save to reload. -

-
+ + + } /> + +
); } diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js index b075d163..b87605a5 100644 --- a/src/components/LoginPage.js +++ b/src/components/LoginPage.js @@ -1,42 +1,98 @@ -import React from 'react' - -export const Login = () => { - - const handleEmail = () => { - //email validation - //authentication - console.log('email') - } - - const handlePassword = () => { - //password validation - //authentication - console.log('password') - } - - return ( -
-
- -
- -
- -
- -
-
- ) -} +import React, { useState, useContext, useEffect } from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +import { useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; +import { UserContext } from "../App"; +import { Button, Paper, Stack, TextField, Typography } from "@mui/material"; +import { toast } from "react-toastify"; + +const LoginPage = () => { + const { loginWithRedirect } = useAuth0(); + const [state, setState] = useState({ emailInput: "", passwordInput: "" }); + const navigate = useNavigate(); + + // const context = useContext(UserContext); + + // useEffect(() => { + // if (context.loggedInUser != null) { + // navigate("/"); + // } + // }, [context.loggedInUser]); + + const handleSubmit = (e) => { + e.preventDefault(); + + toast + .promise(loginWithRedirect(), { + pending: "Logging in...", + success: "Successfully logged in!", + error: "Oops, check your email and password.", + }) + .then((userCredential) => { + console.log("somebody has signed in"); + }) + + .then(() => { + setState({ emailInput: "", passwordInput: "" }); + }) + .then(() => { + navigate("/"); + }) + .catch((error) => { + console.log("theres is an error signing in"); + }); + }; + + const handleChange = (e) => { + setState({ ...state, [e.target.name]: e.target.value }); + }; + + return ( + + + + Reuben & Daniel's Ecommerce Store + + + Join Our Ecommerce Store Today. +
+ + + + +
+ Not part of the community yet? + + + + +
+ + ); +}; + +export default LoginPage; From 01dbf841fa5433f218d66a67033e9972a10083df Mon Sep 17 00:00:00 2001 From: rlly92 Date: Sat, 3 Jun 2023 19:50:43 +0800 Subject: [PATCH 12/25] login page has been constructed. Complete Auth0 setup to follow --- src/components/LoginPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js index b87605a5..497729c2 100644 --- a/src/components/LoginPage.js +++ b/src/components/LoginPage.js @@ -52,7 +52,7 @@ const LoginPage = () => { - Reuben & Daniel's Ecommerce Store + Reuben & Daniel's Ecommerce Stores Join Our Ecommerce Store Today. From fef50c56fec5dc44410fd0caa798c62e716f9ce8 Mon Sep 17 00:00:00 2001 From: rlly92 Date: Sun, 4 Jun 2023 01:02:02 +0800 Subject: [PATCH 13/25] created base for loginpage and userprofilepage. Authentication to be completed --- .gitignore | 1 + package-lock.json | 33 +++++-- package.json | 1 + src/App.js | 7 +- src/components/LoginPage.js | 159 +++++++++++++++++------------- src/components/UserProfilePage.js | 77 +++++++++++++++ src/index.js | 17 +++- 7 files changed, 210 insertions(+), 85 deletions(-) create mode 100644 src/components/UserProfilePage.js diff --git a/.gitignore b/.gitignore index 4d29575d..f21726c7 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ .env.development.local .env.test.local .env.production.local +.env npm-debug.log* yarn-debug.log* diff --git a/package-lock.json b/package-lock.json index c3615450..0a0060ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@mui/material": "^5.13.3", "@mui/styles": "^5.13.2", "axios": "^1.4.0", + "dotenv": "^16.1.3", "react": "^18.2.0", "react-dom": "^18.1.0", "react-router-dom": "^6.11.2", @@ -6650,11 +6651,14 @@ } }, "node_modules/dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "version": "16.1.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.1.3.tgz", + "integrity": "sha512-FYssxsmCTtKL72fGBSvb1K9dRz0/VZeWqFme/vSb7r7323x4CRaHu4LvQ5JG3+s6yt2YPbBrkpiEODktfyjI9A==", "engines": { - "node": ">=10" + "node": ">=12" + }, + "funding": { + "url": "https://github.com/motdotla/dotenv?sponsor=1" } }, "node_modules/dotenv-expand": { @@ -14076,6 +14080,14 @@ } } }, + "node_modules/react-scripts/node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "engines": { + "node": ">=10" + } + }, "node_modules/react-toastify": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz", @@ -21460,9 +21472,9 @@ } }, "dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + "version": "16.1.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.1.3.tgz", + "integrity": "sha512-FYssxsmCTtKL72fGBSvb1K9dRz0/VZeWqFme/vSb7r7323x4CRaHu4LvQ5JG3+s6yt2YPbBrkpiEODktfyjI9A==" }, "dotenv-expand": { "version": "5.1.0", @@ -26720,6 +26732,13 @@ "webpack-dev-server": "^4.6.0", "webpack-manifest-plugin": "^4.0.2", "workbox-webpack-plugin": "^6.4.1" + }, + "dependencies": { + "dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + } } }, "react-toastify": { diff --git a/package.json b/package.json index 2d303354..254b2a6b 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@mui/material": "^5.13.3", "@mui/styles": "^5.13.2", "axios": "^1.4.0", + "dotenv": "^16.1.3", "react": "^18.2.0", "react-dom": "^18.1.0", "react-router-dom": "^6.11.2", diff --git a/src/App.js b/src/App.js index 63087fd7..0295b9ac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import React, { createContext, useCallback, useEffect, useState } from "react"; + import LoginPage from "./components/LoginPage"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import { ToastContainer } from "react-toastify"; @@ -10,11 +11,7 @@ class App extends React.Component { render() { return (
- - - } /> - - +
); } diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js index 497729c2..3638c0ec 100644 --- a/src/components/LoginPage.js +++ b/src/components/LoginPage.js @@ -9,8 +9,9 @@ import { toast } from "react-toastify"; const LoginPage = () => { const { loginWithRedirect } = useAuth0(); - const [state, setState] = useState({ emailInput: "", passwordInput: "" }); - const navigate = useNavigate(); + const { logout } = useAuth0(); + // const [state, setState] = useState({ emailInput: "", passwordInput: "" }); + // const navigate = useNavigate(); // const context = useContext(UserContext); @@ -20,78 +21,98 @@ const LoginPage = () => { // } // }, [context.loggedInUser]); - const handleSubmit = (e) => { - e.preventDefault(); + // const handleSubmit = (e) => { + // e.preventDefault(); - toast - .promise(loginWithRedirect(), { - pending: "Logging in...", - success: "Successfully logged in!", - error: "Oops, check your email and password.", - }) - .then((userCredential) => { - console.log("somebody has signed in"); - }) + // toast + // .promise(loginWithRedirect(), { + // pending: "Logging in...", + // success: "Successfully logged in!", + // error: "Oops, check your email and password.", + // }) + // .then((userCredential) => { + // console.log("somebody has signed in"); + // }) - .then(() => { - setState({ emailInput: "", passwordInput: "" }); - }) - .then(() => { - navigate("/"); - }) - .catch((error) => { - console.log("theres is an error signing in"); - }); - }; + // .then(() => { + // setState({ emailInput: "", passwordInput: "" }); + // }) + // .then(() => { + // navigate("/"); + // }) + // .catch((error) => { + // console.log("theres is an error signing in"); + // }); + // }; - const handleChange = (e) => { - setState({ ...state, [e.target.name]: e.target.value }); - }; + // const handleChange = (e) => { + // setState({ ...state, [e.target.name]: e.target.value }); + // }; return ( - - - - Reuben & Daniel's Ecommerce Stores - - - Join Our Ecommerce Store Today. -
- - - - -
- Not part of the community yet? - - - - -
- +
+ +
+ +
+ + // + // + // + // Reuben & Daniel's Ecommerce Stores + // + // + // Join Our Ecommerce Store Today. + //
+ // + // + // + // + // + + //
+ // Don't have an account yet? + // + // + // + // + //
+ // ); }; diff --git a/src/components/UserProfilePage.js b/src/components/UserProfilePage.js new file mode 100644 index 00000000..3ab17480 --- /dev/null +++ b/src/components/UserProfilePage.js @@ -0,0 +1,77 @@ +import React, { useState, useContext, useEffect } from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +import { useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; +import { UserContext } from "../App"; +import { Button, Paper, Stack, TextField, Typography } from "@mui/material"; +import { toast } from "react-toastify"; + +const UserProfilePage = () => { + const { + user, + isAuthenticated, + isLoading, + getAccessTokenSilently, + loginWithRedirect, + } = useAuth0(); + + const [accessToken, setAccessToken] = useState(""); + const [userMetadata, setUserMetadata] = useState(null); + + useEffect(() => { + if (isAuthenticated) { + let token = getAccessTokenSilently(); + console.log(token); + setAccessToken(token); + } else { + loginWithRedirect(); + } + }, []); + // const getUserMetadata = async () => { + // const domain = "dev-uun7isc4ev72mwao.us.auth0.com"; + + // try { + // const accessToken = await getAccessTokenSilently({ + // authorizationParams: { + // audience: `https://${domain}/api/v2/`, + // scope: "read:current_user", + // }, + // }); + + // const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`; + + // const metadataResponse = await fetch(userDetailsByIdUrl, { + // headers: { + // Authorization: `Bearer ${accessToken}`, + // }, + // }); + + // const { user_metadata } = await metadataResponse.json(); + + // setUserMetadata(user_metadata); + // } catch (e) { + // console.log(e.message); + // } + // }; + + // getUserMetadata(); + // }, [getAccessTokenSilently, user?.sub]); + return ( + isAuthenticated && ( +
+ {user.name} +

{user.name}

+

{user.email}

+

User Metadata

+ {userMetadata ? ( + 
{JSON.stringify(userMetadata, null, 2)}
+ ) : ( + "No user metadata defined" + )} +
+ ) + ); +}; + +export default UserProfilePage; diff --git a/src/index.js b/src/index.js index 7c149466..834f0117 100644 --- a/src/index.js +++ b/src/index.js @@ -4,16 +4,25 @@ import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { Auth0Provider } from "@auth0/auth0-react"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + + + } /> + + ); From 3e5d584453cb05161293d07bb5f7e1836e541fdf Mon Sep 17 00:00:00 2001 From: daniellimss Date: Sun, 4 Jun 2023 19:56:58 +0800 Subject: [PATCH 14/25] created skeleton Listings and Carts components --- src/components/Carts.js | 16 ++++++++++++ src/components/Listings.js | 53 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+) create mode 100644 src/components/Carts.js create mode 100644 src/components/Listings.js diff --git a/src/components/Carts.js b/src/components/Carts.js new file mode 100644 index 00000000..c59f7ff8 --- /dev/null +++ b/src/components/Carts.js @@ -0,0 +1,16 @@ +import React, { useState, useContext, useEffect } from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +import { useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; +import { UserContext } from "../App"; +import { Button, Paper, Stack, TextField, Typography } from "@mui/material"; +import { toast } from "react-toastify"; + +const Carts = () => { + return ( +
Carts
+ ) +} + +export default Carts; diff --git a/src/components/Listings.js b/src/components/Listings.js new file mode 100644 index 00000000..e4454225 --- /dev/null +++ b/src/components/Listings.js @@ -0,0 +1,53 @@ +import React, { useState, useContext, useEffect } from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +import { useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; +import { UserContext } from "../App"; +import { Button, Paper, Stack, TextField, Typography } from "@mui/material"; +import { styled } from "@mui/material/styles"; +import Grid from "@mui/matieral/Grid"; +import Paper from "@mui/material/Paper"; + +import { toast } from "react-toastify"; + +const Listings = () => { + return ( +
+

Listings

+

Welcome!

+
+ + + Product 1 + + + Product 2 + + + Product 3 + + + Product 4 + + + Product 5 + + + Product 6 + + + Product 7 + + + Product 8 + + + Product 9 + + + +
+ ) +} +export default Listings; \ No newline at end of file From 19af265e43314a8fbc209184998a51ece1041cdf Mon Sep 17 00:00:00 2001 From: daniellimss Date: Mon, 5 Jun 2023 12:50:05 +0800 Subject: [PATCH 15/25] improved on FE Listings ver 01 --- src/App.js | 2 + src/components/Listings.js | 123 +++++++++++++++++++++++++++---------- 2 files changed, 94 insertions(+), 31 deletions(-) diff --git a/src/App.js b/src/App.js index 0295b9ac..c9479f6d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { createContext, useCallback, useEffect, useState } from "react"; import LoginPage from "./components/LoginPage"; +import Listings from "./components/Listings"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; @@ -12,6 +13,7 @@ class App extends React.Component { return (
+
); } diff --git a/src/components/Listings.js b/src/components/Listings.js index e4454225..b73fca56 100644 --- a/src/components/Listings.js +++ b/src/components/Listings.js @@ -4,49 +4,110 @@ import { useAuth0 } from "@auth0/auth0-react"; import { useNavigate } from "react-router-dom"; import { Link } from "react-router-dom"; import { UserContext } from "../App"; -import { Button, Paper, Stack, TextField, Typography } from "@mui/material"; +import { Stack, TextField, Typography } from "@mui/material"; +/* import Typography from '@mui/joy/Typography'; */ +import Card from "@mui/joy/Card"; import { styled } from "@mui/material/styles"; -import Grid from "@mui/matieral/Grid"; +import Box from "@mui/material/Box"; +import Grid from "@mui/material/Grid"; import Paper from "@mui/material/Paper"; +import Button from "@mui/material/Button"; + + import { toast } from "react-toastify"; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.text.secondary, +})); + const Listings = () => { return (

Listings

Welcome!


- - - Product 1 - - - Product 2 - - - Product 3 - - - Product 4 + + + + Product Title 1 + Price + Description + Shipping Cost + Shipping Details + + + + Product Title 2 + Price + Description + Shipping Cost + Shipping Details + + + + Product Title 3 + Price + Description + Shipping Cost + Shipping Details + + + + Product Title 4 + Price + Description + Shipping Cost + Shipping Details + + + + Product Title 5 + Price + Description + Shipping Cost + Shipping Details + + + + Product Title 6 + Price + Description + Shipping Cost + Shipping Details + + + + Product Title 7 + Price + Description + Shipping Cost + Shipping Details + + + + Product Title 8 + Price + Description + Shipping Cost + Shipping Details + + + + Product Title 9 + Price + Description + Shipping Cost + Shipping Details + + - - Product 5 - - - Product 6 - - - Product 7 - - - Product 8 - - - Product 9 - - - +
) } From 02d9ec710023d7850da8e705bd58fd12dc1d5e5c Mon Sep 17 00:00:00 2001 From: daniellimss Date: Mon, 5 Jun 2023 20:45:46 +0800 Subject: [PATCH 16/25] created skeleton ItemListing and few css files --- src/App.js | 4 +- src/components/CartsStyle.css | 0 src/components/ItemListing.js | 74 +++++++++++++++++++++++++++++ src/components/ItemListingStyle.css | 3 ++ src/components/Listings.js | 20 ++++---- src/components/ListingsStyle.css | 0 6 files changed, 90 insertions(+), 11 deletions(-) create mode 100644 src/components/CartsStyle.css create mode 100644 src/components/ItemListing.js create mode 100644 src/components/ItemListingStyle.css create mode 100644 src/components/ListingsStyle.css diff --git a/src/App.js b/src/App.js index c9479f6d..8da0f4cb 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React, { createContext, useCallback, useEffect, useState } from "react"; import LoginPage from "./components/LoginPage"; import Listings from "./components/Listings"; +import ItemListing from "./components/ItemListing"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; @@ -13,7 +14,8 @@ class App extends React.Component { return (
- + {/* */} +
); } diff --git a/src/components/CartsStyle.css b/src/components/CartsStyle.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/ItemListing.js b/src/components/ItemListing.js new file mode 100644 index 00000000..3cef6fbb --- /dev/null +++ b/src/components/ItemListing.js @@ -0,0 +1,74 @@ +import React, { useState, useContext, useEffect } from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +import { useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; +import { UserContext } from "../App"; +import { Stack, TextField, Typography } from "@mui/material"; +/* import Typography from '@mui/joy/Typography'; */ +/* import Card from "@mui/joy/Card"; */ +import { styled } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Grid from "@mui/material/Grid"; +import Paper from "@mui/material/Paper"; + +import Button from "@mui/material/Button"; + + +import { toast } from "react-toastify"; +import ItemListingStyle from "./ItemListingStyle.css" + +/* const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.text.secondary, +})); */ + +const ItemListing = () => { + return ( +
+

Product Title

+ + + +

Product Image

+ + + + +

Product Details

+

Product Title

+

Price

+

Quantity Available

+

Description

+
+ + + + + +

Reviews

+ + + +
+ ) +} +export default ItemListing; \ No newline at end of file diff --git a/src/components/ItemListingStyle.css b/src/components/ItemListingStyle.css new file mode 100644 index 00000000..959cb1c9 --- /dev/null +++ b/src/components/ItemListingStyle.css @@ -0,0 +1,3 @@ +h1 { + font-weight: 400; +} diff --git a/src/components/Listings.js b/src/components/Listings.js index b73fca56..a20b5096 100644 --- a/src/components/Listings.js +++ b/src/components/Listings.js @@ -6,7 +6,7 @@ import { Link } from "react-router-dom"; import { UserContext } from "../App"; import { Stack, TextField, Typography } from "@mui/material"; /* import Typography from '@mui/joy/Typography'; */ -import Card from "@mui/joy/Card"; +/* import Card from "@mui/joy/Card"; */ import { styled } from "@mui/material/styles"; import Box from "@mui/material/Box"; import Grid from "@mui/material/Grid"; @@ -38,7 +38,7 @@ const Listings = () => { Product Title 1 Price Description - Shipping Cost + Shipping Details @@ -46,7 +46,7 @@ const Listings = () => { Product Title 2 Price Description - Shipping Cost + Shipping Details @@ -54,7 +54,7 @@ const Listings = () => { Product Title 3 Price Description - Shipping Cost + Shipping Details @@ -62,7 +62,7 @@ const Listings = () => { Product Title 4 Price Description - Shipping Cost + Shipping Details @@ -70,7 +70,7 @@ const Listings = () => { Product Title 5 Price Description - Shipping Cost + Shipping Details @@ -78,7 +78,7 @@ const Listings = () => { Product Title 6 Price Description - Shipping Cost + Shipping Details @@ -86,7 +86,7 @@ const Listings = () => { Product Title 7 Price Description - Shipping Cost + Shipping Details @@ -94,7 +94,7 @@ const Listings = () => { Product Title 8 Price Description - Shipping Cost + Shipping Details @@ -102,7 +102,7 @@ const Listings = () => { Product Title 9 Price Description - Shipping Cost + Shipping Details diff --git a/src/components/ListingsStyle.css b/src/components/ListingsStyle.css new file mode 100644 index 00000000..e69de29b From 78478017ed14751b6a3de7784c678d67e05acadf Mon Sep 17 00:00:00 2001 From: rlly92 Date: Tue, 6 Jun 2023 01:43:22 +0800 Subject: [PATCH 17/25] basic signupinfo page has been constructed. awaiting backend config --- package-lock.json | 379 ++++++++++++++++++++++++++++++ package.json | 3 + src/App.js | 9 +- src/components/Listings.js | 229 ++++++++++-------- src/components/LoginPage.js | 130 +++------- src/components/NavBar.js | 102 ++++++++ src/components/SignUpInfoPage.js | 151 ++++++++++++ src/components/UserProfilePage.js | 66 +++--- src/components/UserSearchBar.js | 63 +++++ src/index.js | 9 +- 10 files changed, 913 insertions(+), 228 deletions(-) create mode 100644 src/components/NavBar.js create mode 100644 src/components/SignUpInfoPage.js create mode 100644 src/components/UserSearchBar.js diff --git a/package-lock.json b/package-lock.json index 0a0060ec..60ec1fbc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,11 +12,14 @@ "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@material-ui/icons": "^4.11.3", + "@mui/joy": "^5.0.0-alpha.82", "@mui/material": "^5.13.3", "@mui/styles": "^5.13.2", "axios": "^1.4.0", + "bootstrap": "^5.1.3", "dotenv": "^16.1.3", "react": "^18.2.0", + "react-bootstrap": "^2.7.4", "react-dom": "^18.1.0", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", @@ -3190,6 +3193,53 @@ "url": "https://opencollective.com/mui" } }, + "node_modules/@mui/joy": { + "version": "5.0.0-alpha.82", + "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-alpha.82.tgz", + "integrity": "sha512-zKIUq0f8v/qp2okolcUu1AU7tBvFOVcvZ/1tFEtlTs/0/vWimSfBisO2LMNqlI3Mei1Ollg/zRwBPHscZyGevA==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@mui/base": "5.0.0-beta.3", + "@mui/core-downloads-tracker": "^5.13.3", + "@mui/system": "^5.13.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "clsx": "^1.2.1", + "csstype": "^3.1.2", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/joy/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/@mui/material": { "version": "5.13.3", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.3.tgz", @@ -3510,6 +3560,17 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-aria/ssr": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz", + "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==", + "dependencies": { + "@swc/helpers": "^0.4.14" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", @@ -3518,6 +3579,45 @@ "node": ">=14" } }, + "node_modules/@restart/hooks": { + "version": "0.4.9", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz", + "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==", + "dependencies": { + "dequal": "^2.0.2" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz", + "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.2.tgz", + "integrity": "sha512-/GDx+K1STGtpgTsj5Dj3J51YaKxZDblbCQHTH1zHLuoBEWodj6MjtRVv3TUijj1JYLRLSFsFzN8NV4M3QV4d9w==", + "peerDependencies": { + "react": ">=16.14.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3836,6 +3936,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -4138,6 +4246,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "node_modules/@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -5346,6 +5459,18 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "node_modules/bootstrap": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "@popperjs/core": "^2.10.2" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5602,6 +5727,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz", @@ -6431,6 +6561,14 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -8825,6 +8963,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -13651,6 +13797,23 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, + "node_modules/prop-types-extra/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -13831,6 +13994,35 @@ "node": ">=14" } }, + "node_modules/react-bootstrap": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz", + "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.3", + "@types/react-transition-group": "^4.4.5", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -13970,6 +14162,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -15757,6 +15954,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -15935,6 +16146,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz", @@ -18981,6 +19200,30 @@ "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.3.tgz", "integrity": "sha512-w4//nRIi9fiMow/MmhkForOezd8nc229EpSZZ5DzwpJNOmAXwypFTapOUVAGTUQiTJyeZXUNbQqYuUIrIs2nbg==" }, + "@mui/joy": { + "version": "5.0.0-alpha.82", + "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-alpha.82.tgz", + "integrity": "sha512-zKIUq0f8v/qp2okolcUu1AU7tBvFOVcvZ/1tFEtlTs/0/vWimSfBisO2LMNqlI3Mei1Ollg/zRwBPHscZyGevA==", + "requires": { + "@babel/runtime": "^7.21.0", + "@mui/base": "5.0.0-beta.3", + "@mui/core-downloads-tracker": "^5.13.3", + "@mui/system": "^5.13.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.1", + "clsx": "^1.2.1", + "csstype": "^3.1.2", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } + } + }, "@mui/material": { "version": "5.13.3", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.3.tgz", @@ -19143,11 +19386,51 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, + "@react-aria/ssr": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz", + "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==", + "requires": { + "@swc/helpers": "^0.4.14" + } + }, "@remix-run/router": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==" }, + "@restart/hooks": { + "version": "0.4.9", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz", + "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==", + "requires": { + "dequal": "^2.0.2" + } + }, + "@restart/ui": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz", + "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==", + "requires": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "dependencies": { + "uncontrollable": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.2.tgz", + "integrity": "sha512-/GDx+K1STGtpgTsj5Dj3J51YaKxZDblbCQHTH1zHLuoBEWodj6MjtRVv3TUijj1JYLRLSFsFzN8NV4M3QV4d9w==", + "requires": {} + } + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -19342,6 +19625,14 @@ "loader-utils": "^2.0.0" } }, + "@swc/helpers": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "requires": { + "tslib": "^2.4.0" + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -19638,6 +19929,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -20538,6 +20834,12 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "requires": {} + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -20714,6 +21016,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz", @@ -21304,6 +21611,11 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==" }, + "dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==" + }, "destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -23049,6 +23361,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -26430,6 +26750,22 @@ } } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -26552,6 +26888,25 @@ "whatwg-fetch": "^3.6.2" } }, + "react-bootstrap": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz", + "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==", + "requires": { + "@babel/runtime": "^7.21.0", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.3", + "@types/react-transition-group": "^4.4.5", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -26657,6 +27012,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -27985,6 +28345,17 @@ "which-boxed-primitive": "^1.0.2" } }, + "uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -28120,6 +28491,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz", diff --git a/package.json b/package.json index 254b2a6b..f230f37d 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,14 @@ "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@material-ui/icons": "^4.11.3", + "@mui/joy": "^5.0.0-alpha.82", "@mui/material": "^5.13.3", "@mui/styles": "^5.13.2", "axios": "^1.4.0", + "bootstrap": "^5.1.3", "dotenv": "^16.1.3", "react": "^18.2.0", + "react-bootstrap": "^2.7.4", "react-dom": "^18.1.0", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", diff --git a/src/App.js b/src/App.js index c9479f6d..b4fc886d 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,8 @@ import React, { createContext, useCallback, useEffect, useState } from "react"; import LoginPage from "./components/LoginPage"; import Listings from "./components/Listings"; -import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; +import NavBar from "./components/NavBar"; +import { BrowserRouter, Route, Routes, Navigate, Link } from "react-router-dom"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; @@ -13,7 +14,11 @@ class App extends React.Component { return (
- + Listings +
+ Profile +
+ Sign Up Info
); } diff --git a/src/components/Listings.js b/src/components/Listings.js index b73fca56..a9d5c6ea 100644 --- a/src/components/Listings.js +++ b/src/components/Listings.js @@ -13,102 +13,145 @@ import Grid from "@mui/material/Grid"; import Paper from "@mui/material/Paper"; import Button from "@mui/material/Button"; - - +import NavBar from "./NavBar"; import { toast } from "react-toastify"; - const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: theme.palette.text.secondary, + backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff", + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: "center", + color: theme.palette.text.secondary, })); const Listings = () => { - return ( -
-

Listings

-

Welcome!

-
- - - - Product Title 1 - Price - Description - Shipping Cost - Shipping Details - - - - Product Title 2 - Price - Description - Shipping Cost - Shipping Details - - - - Product Title 3 - Price - Description - Shipping Cost - Shipping Details - - - - Product Title 4 - Price - Description - Shipping Cost - Shipping Details - - - - Product Title 5 - Price - Description - Shipping Cost - Shipping Details - - - - Product Title 6 - Price - Description - Shipping Cost - Shipping Details - - - - Product Title 7 - Price - Description - Shipping Cost - Shipping Details - - - - Product Title 8 - Price - Description - Shipping Cost - Shipping Details - - - - Product Title 9 - Price - Description - Shipping Cost - Shipping Details - - - - -
- ) -} -export default Listings; \ No newline at end of file + const { logout, isAuthenticated } = useAuth0(); + + return ( + isAuthenticated && ( +
+ +

ADD TO CART NOW! WHILE STOCKS LAST!

+ +
+ + + + + Product Title 1 + + Price + Description + Shipping Cost + Shipping Details + + + + + + + Product Title 2 + + Price + Description + Shipping Cost + Shipping Details + + + + + + + Product Title 3 + + Price + Description + Shipping Cost + Shipping Details + + + + + + + Product Title 4 + + Price + Description + Shipping Cost + Shipping Details + + + + + + + Product Title 5 + + Price + Description + Shipping Cost + Shipping Details + + + + + + + Product Title 6 + + Price + Description + Shipping Cost + Shipping Details + + + + + + + Product Title 7 + + Price + Description + Shipping Cost + Shipping Details + + + + + + + Product Title 8 + + Price + Description + Shipping Cost + Shipping Details + + + + + + + Product Title 9 + + Price + Description + Shipping Cost + Shipping Details + + + + + + +
+ ) + ); +}; +export default Listings; diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js index 3638c0ec..9c82fdf8 100644 --- a/src/components/LoginPage.js +++ b/src/components/LoginPage.js @@ -9,110 +9,40 @@ import { toast } from "react-toastify"; const LoginPage = () => { const { loginWithRedirect } = useAuth0(); - const { logout } = useAuth0(); - // const [state, setState] = useState({ emailInput: "", passwordInput: "" }); - // const navigate = useNavigate(); - // const context = useContext(UserContext); - - // useEffect(() => { - // if (context.loggedInUser != null) { - // navigate("/"); - // } - // }, [context.loggedInUser]); - - // const handleSubmit = (e) => { - // e.preventDefault(); - - // toast - // .promise(loginWithRedirect(), { - // pending: "Logging in...", - // success: "Successfully logged in!", - // error: "Oops, check your email and password.", - // }) - // .then((userCredential) => { - // console.log("somebody has signed in"); - // }) - - // .then(() => { - // setState({ emailInput: "", passwordInput: "" }); - // }) - // .then(() => { - // navigate("/"); - // }) - // .catch((error) => { - // console.log("theres is an error signing in"); - // }); - // }; - - // const handleChange = (e) => { - // setState({ ...state, [e.target.name]: e.target.value }); - // }; + // sign up button logic to redirect first time users to sign up page on Auth0: + const handleSignUp = () => { + loginWithRedirect({ + appState: { + returnTo: "/signupinfo", + }, + authorizationParams: { + screen_hint: "signup", + }, + }); + }; return ( -
- + + + + BENDAN Ecommerce + + + + Because online shopping should be STUPID easy. +
- -
- - // - // - // - // Reuben & Daniel's Ecommerce Stores - // - // - // Join Our Ecommerce Store Today. - //
- // - // - // - // - // - - //
- // Don't have an account yet? - // - // - // - // - //
- // + +
+ Don't have an account yet? +
+ + ); }; diff --git a/src/components/NavBar.js b/src/components/NavBar.js new file mode 100644 index 00000000..25ac4bc4 --- /dev/null +++ b/src/components/NavBar.js @@ -0,0 +1,102 @@ +import React, { useContext } from "react"; +import { UserContext } from "../App"; +import { useAuth0 } from "@auth0/auth0-react"; +import { + AppBar, + Toolbar, + IconButton, + Typography, + Stack, + Button, + Avatar, +} from "@mui/material"; +import SearchBar from "./UserSearchBar"; +import { useNavigate, Outlet } from "react-router-dom"; + +const NavBar = () => { + const navigate = useNavigate(); + const { logout, isAuthenticated } = useAuth0(); + + // const context = useContext(UserContext); + // const displayName = context.loggedInUser + // ? context.loggedInUser.displayName + // : ""; + + const benDanButton = () => { + navigate("/"); + }; + + // const handleProfileClick = () => { + // navigate(`/user/${displayName}`); + // }; + + return ( + <> + + + + + + + {/* {context.loggedInUser != null ? ( + "" + ) : ( */} + + {/* )} */} + {/* + + {context.loggedInUser != null ? ( + + + */} + + + {/* + ) : ( + + )} + */} + + + + + ); +}; + +export default NavBar; diff --git a/src/components/SignUpInfoPage.js b/src/components/SignUpInfoPage.js new file mode 100644 index 00000000..f7314aed --- /dev/null +++ b/src/components/SignUpInfoPage.js @@ -0,0 +1,151 @@ +import React, { useState, useEffect, useContext } from "react"; +import { useAuth0 } from "@auth0/auth0-react"; +import { useNavigate } from "react-router-dom"; + +import { Button, Stack, TextField, Typography } from "@mui/material"; +import { toast } from "react-toastify"; + +const SignUpInfoPage = () => { + const { logout, isAuthenticated } = useAuth0(); + + const [state, setState] = useState({ + email: "", + first_name: "", + last_name: "", + phone: "", + buyer_address: "", + seller_address: "", + }); + const navigate = useNavigate(); + + // useEffect(() => { + // if (!isAuthenticated) { + // navigate("/"); + // } + // }, []); + + // const handleSubmit = (e) => { + // e.preventDefault(); + + // toast + // .promise( + // createUserWithEmailAndPassword( + // auth, + // state.emailInput, + // state.passwordInput + // ), + // { + // pending: "Creating an account...", + // success: "Successfully created an account!", + // error: "Oops, something went wrong. Try again!", + // } + // ) + // .then(() => { + // toast.success("🐝 Successfully created a new account!"); + // setState({ emailInput: "", passwordInput: "" }); + // }) + // .then(() => { + // navigate("/createprofile"); + // }); + // }; + + const handleSubmit = (e) => { + e.preventDefault(); + return console.log("you've submitted user info!"); + }; + + const handleChange = (e) => { + setState({ ...state, [e.target.id]: e.target.value }); + console.log(state); + }; + + return ( + + + Thank you for signing up! Welcome to our community! + + + Please kindly provide your details below to make your shopping a breeze: + +
+ + + + + + + + + +
+
+
+ + + ); +}; + +export default SignUpInfoPage; diff --git a/src/components/UserProfilePage.js b/src/components/UserProfilePage.js index 3ab17480..3e241496 100644 --- a/src/components/UserProfilePage.js +++ b/src/components/UserProfilePage.js @@ -16,47 +16,49 @@ const UserProfilePage = () => { loginWithRedirect, } = useAuth0(); - const [accessToken, setAccessToken] = useState(""); + // const [accessToken, setAccessToken] = useState(""); const [userMetadata, setUserMetadata] = useState(null); useEffect(() => { - if (isAuthenticated) { - let token = getAccessTokenSilently(); - console.log(token); - setAccessToken(token); - } else { - loginWithRedirect(); - } - }, []); - // const getUserMetadata = async () => { - // const domain = "dev-uun7isc4ev72mwao.us.auth0.com"; + // if (isAuthenticated) { + // let token = getAccessTokenSilently(); + // console.log(token); + // setAccessToken(token); + // } else { + // loginWithRedirect(); + // } + // }, []); - // try { - // const accessToken = await getAccessTokenSilently({ - // authorizationParams: { - // audience: `https://${domain}/api/v2/`, - // scope: "read:current_user", - // }, - // }); + const getUserMetadata = async () => { + const domain = "dev-uun7isc4ev72mwao.us.auth0.com"; - // const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`; + try { + const accessToken = await getAccessTokenSilently({ + authorizationParams: { + audience: `https://${domain}/api/v2/`, + scope: "read:current_user", + }, + }); - // const metadataResponse = await fetch(userDetailsByIdUrl, { - // headers: { - // Authorization: `Bearer ${accessToken}`, - // }, - // }); + const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`; - // const { user_metadata } = await metadataResponse.json(); + const metadataResponse = await fetch(userDetailsByIdUrl, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); - // setUserMetadata(user_metadata); - // } catch (e) { - // console.log(e.message); - // } - // }; + const { user_metadata } = await metadataResponse.json(); + + setUserMetadata(user_metadata); + } catch (e) { + console.log(e.message); + } + }; + + getUserMetadata(); + }, [getAccessTokenSilently, user?.sub]); - // getUserMetadata(); - // }, [getAccessTokenSilently, user?.sub]); return ( isAuthenticated && (
diff --git a/src/components/UserSearchBar.js b/src/components/UserSearchBar.js new file mode 100644 index 00000000..feb91b40 --- /dev/null +++ b/src/components/UserSearchBar.js @@ -0,0 +1,63 @@ +// import React, { useState, useContext, useEffect } from "react"; +// import { useNavigate } from "react-router-dom"; + +// import Input from "@mui/material/Input"; +// import Stack from "@mui/material/Stack"; +// import TextField from "@mui/material/TextField"; +// import Autocomplete from "@mui/material/Autocomplete"; +// import { Box } from "@mui/system"; +// import { UserContext } from "../App"; +// import { UserInfoContext } from "../components/UserInfoContext/UserInfoProvider"; + +// function SearchBar() { +// const [state, setState] = useState([{ username: "" }]); +// const [results, setResults] = useState([]); +// const navigate = useNavigate(); + +// // context for database of users and the data of each user within that database: +// const userInfoData = useContext(UserInfoContext); + +// console.log(userInfoData.userInfo); + +// function handleUserSelection(username) { +// // Navigate to the page that conditionally renders user data based on the selected username + +// navigate(`/user/${username}`); +// } +// return ( +//
+// +// option.displayName} +// options={userInfoData.userInfo} +// sx={{ width: 300 }} +// isOptionEqualToValue={(option, value) => +// option.displayName === value.displayName +// } +// noOptionsText={"NO USERS CAN BE FOUND"} +// renderOption={(props, option) => ( +// +// handleUserSelection(option.displayName) +// } +// > +// {option.displayName} +// +// )} +// renderInput={(params) => ( +// +// )} +// /> +// +//
+// ); +// } + +// export default SearchBar; diff --git a/src/index.js b/src/index.js index 834f0117..28768f25 100644 --- a/src/index.js +++ b/src/index.js @@ -3,8 +3,11 @@ import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; +import Listings from "./components/Listings"; +import UserProfilePage from "./components/UserProfilePage"; import { Auth0Provider } from "@auth0/auth0-react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; +import SignUpInfoPage from "./components/SignUpInfoPage"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( @@ -12,16 +15,20 @@ root.render( domain={process.env.REACT_APP_DOMAIN} clientId={process.env.REACT_APP_CLIENT_ID} authorizationParams={{ - redirectUri: window.location.origin, + redirect_uri: "http://localhost:3000/listings", audience: process.env.REACT_APP_AUDIENCE, scope: "read:current_user update:current_user_metadata", }} + // useRefreshTokens={true} // useRefreshTokensFallback={false} > } /> + } /> + } /> + } /> From b523f82fb0d99d1dc6b9843daeafe95c8708bfc9 Mon Sep 17 00:00:00 2001 From: rlly92 Date: Tue, 6 Jun 2023 03:38:03 +0800 Subject: [PATCH 18/25] attempting user redirection to signupinfo page on sign up --- src/components/LoginPage.js | 2 +- src/components/NavBar.js | 2 +- src/index.js | 7 +++++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js index 9c82fdf8..1ee99836 100644 --- a/src/components/LoginPage.js +++ b/src/components/LoginPage.js @@ -10,7 +10,7 @@ import { toast } from "react-toastify"; const LoginPage = () => { const { loginWithRedirect } = useAuth0(); - // sign up button logic to redirect first time users to sign up page on Auth0: + // sign up button logic to redirect first time users to sign up on Auth0 and after hitting sign up button to redirect them to /signupinfo page: const handleSignUp = () => { loginWithRedirect({ appState: { diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 25ac4bc4..3281f851 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -23,7 +23,7 @@ const NavBar = () => { // : ""; const benDanButton = () => { - navigate("/"); + navigate("/listings"); }; // const handleProfileClick = () => { diff --git a/src/index.js b/src/index.js index 28768f25..e4c713d8 100644 --- a/src/index.js +++ b/src/index.js @@ -9,11 +9,18 @@ import { Auth0Provider } from "@auth0/auth0-react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import SignUpInfoPage from "./components/SignUpInfoPage"; +// const onRedirectCallback = (appState) => { +// history.push( +// appState && appState.returnTo ? appState.returnTo : window.location.pathname +// ); +// }; + const root = ReactDOM.createRoot(document.getElementById("root")); root.render( Date: Tue, 6 Jun 2023 21:05:21 +0800 Subject: [PATCH 19/25] centralized navbar, navbar appear on every page, test out cart input with MUI and corrected ItemListing error --- src/App.js | 7 +- src/components/Carts.js | 6 +- src/components/CreateListing.js | 35 +++++++ src/components/ItemListing.js | 8 +- src/components/Listings.js | 171 ++++++++++++++++--------------- src/components/ListingsStyle.css | 4 + src/index.js | 6 +- 7 files changed, 142 insertions(+), 95 deletions(-) create mode 100644 src/components/CreateListing.js diff --git a/src/App.js b/src/App.js index 20ba3a2b..9882982e 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import Listings from "./components/Listings"; import NavBar from "./components/NavBar"; import ItemListing from "./components/ItemListing"; +import CreateListing from "./components/CreateListing"; import { BrowserRouter, Route, Routes, Navigate, Link } from "react-router-dom"; import { ToastContainer } from "react-toastify"; @@ -17,14 +18,14 @@ class App extends React.Component { return (
- - + + Listings
Profile
Sign Up Info - +
); } diff --git a/src/components/Carts.js b/src/components/Carts.js index c59f7ff8..b489aba6 100644 --- a/src/components/Carts.js +++ b/src/components/Carts.js @@ -6,10 +6,14 @@ import { Link } from "react-router-dom"; import { UserContext } from "../App"; import { Button, Paper, Stack, TextField, Typography } from "@mui/material"; import { toast } from "react-toastify"; +import NavBar from "./NavBar"; const Carts = () => { return ( -
Carts
+ <> + +
Carts
+ ) } diff --git a/src/components/CreateListing.js b/src/components/CreateListing.js new file mode 100644 index 00000000..a8d44caa --- /dev/null +++ b/src/components/CreateListing.js @@ -0,0 +1,35 @@ +import React, { useState, useContext, useEffect } from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +import { useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; +import { UserContext } from "../App"; +import { Stack, TextField, Typography } from "@mui/material"; +/* import Typography from '@mui/joy/Typography'; */ +/* import Card from "@mui/joy/Card"; */ +import { styled } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Grid from "@mui/material/Grid"; +import Paper from "@mui/material/Paper"; +import Button from "@mui/material/Button"; +import { toast } from "react-toastify"; +import NavBar from "./NavBar"; + + +const CreateListing = () => { + + return ( + <> + + + + + + + + + + + ) +} +export default CreateListing; \ No newline at end of file diff --git a/src/components/ItemListing.js b/src/components/ItemListing.js index 3cef6fbb..8fbd2e19 100644 --- a/src/components/ItemListing.js +++ b/src/components/ItemListing.js @@ -16,6 +16,7 @@ import Button from "@mui/material/Button"; import { toast } from "react-toastify"; +import NavBar from "./NavBar" import ItemListingStyle from "./ItemListingStyle.css" /* const Item = styled(Paper)(({ theme }) => ({ @@ -29,9 +30,10 @@ import ItemListingStyle from "./ItemListingStyle.css" const ItemListing = () => { return (
+

Product Title

- + {

Product Image

 - + { }} variant="outlined">Add to Cart - + ({ backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff", @@ -27,92 +28,92 @@ const Item = styled(Paper)(({ theme }) => ({ const Listings = () => { const { logout, isAuthenticated } = useAuth0(); - return ( + return ( isAuthenticated && ( -
- -

ADD TO CART NOW! WHILE STOCKS LAST!

- -
- - - - Product Title 1 - Price - Description - - Shipping Details - - - - Product Title 2 - Price - Description - - Shipping Details - - - - Product Title 3 - Price - Description - - Shipping Details - - - - Product Title 4 - Price - Description - - Shipping Details - - - - Product Title 5 - Price - Description - - Shipping Details - - - - Product Title 6 - Price - Description - - Shipping Details - - - - Product Title 7 - Price - Description - - Shipping Details - - - - Product Title 8 - Price - Description - - Shipping Details - - - - Product Title 9 - Price - Description - - Shipping Details - - - - -
- ) -) +
+ +

ADD TO CART NOW! WHILE STOCKS LAST!

+ +
+ + + + Product Title 1 + Price + Description + + Shipping Details + + + + Product Title 2 + Price + Description + + Shipping Details + + + + Product Title 3 + Price + Description + + Shipping Details + + + + Product Title 4 + Price + Description + + Shipping Details + + + + Product Title 5 + Price + Description + + Shipping Details + + + + Product Title 6 + Price + Description + + Shipping Details + + + + Product Title 7 + Price + Description + + Shipping Details + + + + Product Title 8 + Price + Description + + Shipping Details + + + + Product Title 9 + Price + Description + + Shipping Details + + + + +
+ ) + ) } export default Listings; diff --git a/src/components/ListingsStyle.css b/src/components/ListingsStyle.css index e69de29b..8affc310 100644 --- a/src/components/ListingsStyle.css +++ b/src/components/ListingsStyle.css @@ -0,0 +1,4 @@ +.centralized { + margin: 0 auto; + text-align: center; +} diff --git a/src/index.js b/src/index.js index 28768f25..b161c62f 100644 --- a/src/index.js +++ b/src/index.js @@ -15,13 +15,13 @@ root.render( domain={process.env.REACT_APP_DOMAIN} clientId={process.env.REACT_APP_CLIENT_ID} authorizationParams={{ - redirect_uri: "http://localhost:3000/listings", + redirect_uri: process.env.REACT_APP_REDIRECT_URI, audience: process.env.REACT_APP_AUDIENCE, scope: "read:current_user update:current_user_metadata", }} - // useRefreshTokens={true} - // useRefreshTokensFallback={false} + // useRefreshTokens={true} + // useRefreshTokensFallback={false} > From ae3df57253907deedfcae496098e21fbb458506d Mon Sep 17 00:00:00 2001 From: daniellimss Date: Wed, 7 Jun 2023 12:16:40 +0800 Subject: [PATCH 20/25] new commit --- src/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 9882982e..19ed895b 100644 --- a/src/App.js +++ b/src/App.js @@ -19,13 +19,13 @@ class App extends React.Component {
- + {/* */} Listings
Profile
Sign Up Info - + {/* */}
); } From 99cd62aa6c37a538dc64a51d5a9a8942713cba91 Mon Sep 17 00:00:00 2001 From: rlly92 Date: Wed, 7 Jun 2023 18:20:55 +0800 Subject: [PATCH 21/25] 99% of authentication and login and signup routes and logic complete --- src/App.js | 2 - src/components/Listings.js | 325 +++++++++++++++++++------------ src/components/LoginPage.js | 42 ++-- src/components/NavBar.js | 39 +--- src/components/SignUpInfoPage.js | 130 ++++++++----- src/constants.js | 1 + src/index.js | 10 +- 7 files changed, 314 insertions(+), 235 deletions(-) create mode 100644 src/constants.js diff --git a/src/App.js b/src/App.js index 20ba3a2b..708f2bd2 100644 --- a/src/App.js +++ b/src/App.js @@ -18,13 +18,11 @@ class App extends React.Component {
- Listings
Profile
Sign Up Info -
); } diff --git a/src/components/Listings.js b/src/components/Listings.js index 20be5862..ff47f39f 100644 --- a/src/components/Listings.js +++ b/src/components/Listings.js @@ -1,6 +1,7 @@ import React, { useState, useContext, useEffect } from "react"; import { useAuth0 } from "@auth0/auth0-react"; - +import axios from "axios"; +import { BACKEND_URL } from "../constants"; import { useNavigate } from "react-router-dom"; import { Link } from "react-router-dom"; import { UserContext } from "../App"; @@ -25,135 +26,209 @@ const Item = styled(Paper)(({ theme }) => ({ })); const Listings = () => { - const { logout, isAuthenticated } = useAuth0(); + const { logout, isAuthenticated, getAccessTokenSilently, user, isLoading } = + useAuth0(); + const navigate = useNavigate(); + const [state, setState] = useState({ email: "" }); + const accessToken = localStorage.getItem("accessToken"); + + // GET TOKEN AND EMAIL ON MOUNT: + useEffect(() => { + const getTokenAndEmail = async () => { + const domain = process.env.REACT_APP_DOMAIN; + console.log("domain:", domain); + try { + const token = await getAccessTokenSilently({ + authorizationParams: { + audience: process.env.REACT_APP_AUDIENCE, + scope: "read:current_user", + }, + }); + console.log("token:", token); + localStorage.setItem("accessToken", token); + + if (isAuthenticated && user) { + setState({ + email: user.email, + }); + console.log("user email:", user.email); + } + } catch (err) { + console.log(err); + } + }; + getTokenAndEmail(); + }, [getAccessTokenSilently, isAuthenticated, user?.sub]); // insert UseEffect here to validate if new user has given backend his user data to populate user table, if no, redirect them to /signupinfo page. - return ( - isAuthenticated && ( + useEffect(() => { + const checkUserInfoExists = async () => { + if (state.email !== "") { + try { + const response = await axios.get( + `${BACKEND_URL}/users/checkuserinfo?email=${state.email}`, + { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + } + ); + console.log(response.data); + // Check the response to determine if the project exists + if (!response.data.error) { + console.log("user info exists!"); + } else { + console.log("user info does not exist!"); + navigate("/signupinfo"); + } + } catch (error) { + console.error( + "Error occurred while checking user info exists on db:", + error + ); + } + } + }; + checkUserInfoExists(); + }, [state?.email, accessToken]); + + if (isLoading) { + // Show loading state + return (
- -

ADD TO CART NOW! WHILE STOCKS LAST!

- -
- - - - - Product Title 1 - - Price - Description - - Shipping Details - - - - - - - Product Title 2 - - Price - Description - - Shipping Details - - - - - - - Product Title 3 - - Price - Description - - Shipping Details - - - - - - - Product Title 4 - - Price - Description - - Shipping Details - - - - - - - Product Title 5 - - Price - Description - - Shipping Details - - - - - - - Product Title 6 - - Price - Description - - Shipping Details - - - - - - - Product Title 7 - - Price - Description - - Shipping Details - - - - - - - Product Title 8 - - Price - Description - - Shipping Details - - - - - - - Product Title 9 - - Price - Description - - Shipping Details - - - - - - +

Loading...Your patience is appreciated.

- ) + ); + } + + return isAuthenticated ? ( +
+ +

ADD TO CART NOW! WHILE STOCKS LAST!

+ +
+ + + + + Product Title 1 + + Price + Description + + Shipping Details + + + + + + + Product Title 2 + + Price + Description + + Shipping Details + + + + + + + Product Title 3 + + Price + Description + + Shipping Details + + + + + + + Product Title 4 + + Price + Description + + Shipping Details + + + + + + + Product Title 5 + + Price + Description + + Shipping Details + + + + + + + Product Title 6 + + Price + Description + + Shipping Details + + + + + + + Product Title 7 + + Price + Description + + Shipping Details + + + + + + + Product Title 8 + + Price + Description + + Shipping Details + + + + + + + Product Title 9 + + Price + Description + + Shipping Details + + + + + + +
+ ) : ( + // content rendered for users that are NOT signed in NOR logged in: +
+

You are not logged in or signed up.

+ +
); }; export default Listings; diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js index 1ee99836..fdb65de9 100644 --- a/src/components/LoginPage.js +++ b/src/components/LoginPage.js @@ -8,19 +8,23 @@ import { Button, Paper, Stack, TextField, Typography } from "@mui/material"; import { toast } from "react-toastify"; const LoginPage = () => { - const { loginWithRedirect } = useAuth0(); + const { loginWithRedirect, isAuthenticated, isLoading } = useAuth0(); + const navigate = useNavigate(); - // sign up button logic to redirect first time users to sign up on Auth0 and after hitting sign up button to redirect them to /signupinfo page: - const handleSignUp = () => { - loginWithRedirect({ - appState: { - returnTo: "/signupinfo", - }, - authorizationParams: { - screen_hint: "signup", - }, - }); - }; + useEffect(() => { + if (isAuthenticated) { + navigate("/listings"); + } + }); + + if (isLoading) { + // Show loading state + return ( +
+

Loading...Your patience is appreciated.

+
+ ); + } return ( @@ -39,7 +43,19 @@ const LoginPage = () => {
Don't have an account yet?
- diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 3281f851..ea49cc96 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -50,48 +50,17 @@ const NavBar = () => { - {/* {context.loggedInUser != null ? ( - "" - ) : ( */} - - {/* )} */} - {/* - - {context.loggedInUser != null ? ( - - - */} - - {/* - ) : ( - - )} - */} diff --git a/src/components/SignUpInfoPage.js b/src/components/SignUpInfoPage.js index f7314aed..eb8ea59e 100644 --- a/src/components/SignUpInfoPage.js +++ b/src/components/SignUpInfoPage.js @@ -1,56 +1,86 @@ import React, { useState, useEffect, useContext } from "react"; import { useAuth0 } from "@auth0/auth0-react"; import { useNavigate } from "react-router-dom"; - +import axios from "axios"; +import { BACKEND_URL } from "../constants"; import { Button, Stack, TextField, Typography } from "@mui/material"; import { toast } from "react-toastify"; const SignUpInfoPage = () => { - const { logout, isAuthenticated } = useAuth0(); + const { logout, isAuthenticated, user, getAccessTokenSilently, isLoading } = + useAuth0(); + + const accessToken = localStorage.getItem("accessToken"); + console.log("access token:", accessToken); const [state, setState] = useState({ email: "", first_name: "", last_name: "", - phone: "", + phone_number: "", buyer_address: "", seller_address: "", }); const navigate = useNavigate(); - // useEffect(() => { - // if (!isAuthenticated) { - // navigate("/"); - // } - // }, []); + // GET EMAIL ON MOUNT: + useEffect(() => { + if (!isAuthenticated) { + navigate("/"); + } + if (isAuthenticated && user) { + setState({ + email: user.email, + }); + console.log("user email:", user.email); + } + }, [isAuthenticated]); - // const handleSubmit = (e) => { - // e.preventDefault(); - - // toast - // .promise( - // createUserWithEmailAndPassword( - // auth, - // state.emailInput, - // state.passwordInput - // ), - // { - // pending: "Creating an account...", - // success: "Successfully created an account!", - // error: "Oops, something went wrong. Try again!", - // } - // ) - // .then(() => { - // toast.success("🐝 Successfully created a new account!"); - // setState({ emailInput: "", passwordInput: "" }); - // }) - // .then(() => { - // navigate("/createprofile"); - // }); - // }; + console.log("email:", state.email); const handleSubmit = (e) => { e.preventDefault(); + // Perform form submission actions + axios + .post( + `${BACKEND_URL}/users/signupinfo`, + { + email: state.email, + first_name: state.first_name, + last_name: state.last_name, + phone_number: state.phone_number, + buyer_address: state.buyer_address, + seller_address: state.seller_address, + }, + { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + } + ) + .then((res) => { + setState({ + email: "", + first_name: "", + last_name: "", + phone_number: "", + buyer_address: "", + seller_address: "", + }); + + navigate("/listings"); + }) + .catch((error) => { + console.log(error); + }); + console.log({ + email: state.email, + first_name: state.first_name, + last_name: state.last_name, + phone_number: state.phone_number, + buyer_address: state.buyer_address, + seller_address: state.seller_address, + }); return console.log("you've submitted user info!"); }; @@ -59,11 +89,22 @@ const SignUpInfoPage = () => { console.log(state); }; + if (isLoading) { + // Show loading state + return ( +
+

Loading...Your patience is appreciated.

+
+ ); + } return ( - Thank you for signing up! Welcome to our community! + Thank you for signing up! +
+ Welcome to our community! +
Please kindly provide your details below to make your shopping a breeze: @@ -74,16 +115,6 @@ const SignUpInfoPage = () => { spacing={2} mt={2} > - { { -
-
- ); }; diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 00000000..79d2d5d3 --- /dev/null +++ b/src/constants.js @@ -0,0 +1 @@ +export const BACKEND_URL = "http://localhost:8000"; diff --git a/src/index.js b/src/index.js index 841f1728..d83e349b 100644 --- a/src/index.js +++ b/src/index.js @@ -9,22 +9,16 @@ import { Auth0Provider } from "@auth0/auth0-react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import SignUpInfoPage from "./components/SignUpInfoPage"; -// const onRedirectCallback = (appState) => { -// history.push( -// appState && appState.returnTo ? appState.returnTo : window.location.pathname -// ); -// }; - const root = ReactDOM.createRoot(document.getElementById("root")); root.render( Date: Wed, 7 Jun 2023 18:43:44 +0800 Subject: [PATCH 22/25] created Create Listing pg and modified Item Listing pg but unable to display addn navbar btns --- src/App.js | 6 +- src/components/CreateListing.js | 165 +++++++++++++++++++++++++++++++- src/components/ItemListing.js | 74 +++++++++++++- src/components/NavBar.js | 3 + src/index.js | 4 + 5 files changed, 244 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 19ed895b..762c3cd7 100644 --- a/src/App.js +++ b/src/App.js @@ -18,14 +18,14 @@ class App extends React.Component { return (
- - {/* */} + + Listings
Profile
Sign Up Info - {/* */} +
); } diff --git a/src/components/CreateListing.js b/src/components/CreateListing.js index a8d44caa..6613007f 100644 --- a/src/components/CreateListing.js +++ b/src/components/CreateListing.js @@ -12,21 +12,180 @@ import Box from "@mui/material/Box"; import Grid from "@mui/material/Grid"; import Paper from "@mui/material/Paper"; import Button from "@mui/material/Button"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; import { toast } from "react-toastify"; import NavBar from "./NavBar"; const CreateListing = () => { + const [category, setCategory] = useState(''); + const handleCatChange = (e) => { + setCategory(e.target.value); + } return ( <> - + + Create Your Listing + + + Type in your product details to create a new listing. + +
+ + + + + Product Title: + + + + + + + +
+ + + + + Category: + + + + + Category + + + + + + + +
+ + + + + Selling Price (per item): + + + + + + + +
+ + + + + Quantity Available: + + + + + + + +
+ + + + + Description: + + + + + + + +
+ + + + + Picture: + + + + + + + + {/* - +
+ +
+ +
+ +
+ +
- + */} + +
diff --git a/src/components/ItemListing.js b/src/components/ItemListing.js index 8fbd2e19..ee1aa752 100644 --- a/src/components/ItemListing.js +++ b/src/components/ItemListing.js @@ -31,7 +31,77 @@ const ItemListing = () => { return (
-

Product Title

+ + + Item Listing + + + Details of the product you are viewing + +
+ + + + + + + + Bungalow + + + House + + + $$6.9m + + + 1 + + + This fine Good-Class-Bungalow is located near Holland Village, a stone's throw away from the bustling melting pot of bars, restaurants and night clubs. + + + + +
+ + + + + Good location, very good investment for future generations! + + + + + + Good location, very good investment for future generations! + + + + + Good location, very good investment for future generations! + + + + + + + {/*

Product Title

{

Reviews

 - + */}
) } diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 25ac4bc4..cac3ded2 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -48,6 +48,9 @@ const NavBar = () => { BENDAN + + + {/* {context.loggedInUser != null ? ( diff --git a/src/index.js b/src/index.js index b161c62f..61b74ad3 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,8 @@ import UserProfilePage from "./components/UserProfilePage"; import { Auth0Provider } from "@auth0/auth0-react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import SignUpInfoPage from "./components/SignUpInfoPage"; +import CreateListing from "./components/CreateListing"; +import Carts from "./components/Carts"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( @@ -29,6 +31,8 @@ root.render( } /> } /> } /> + } /> + } /> From b424f5d0db6a35094ddc237a5e026142662b994d Mon Sep 17 00:00:00 2001 From: rlly92 Date: Fri, 9 Jun 2023 02:34:01 +0800 Subject: [PATCH 23/25] some logic done for seller pathway --- package-lock.json | 92 ++++++ package.json | 1 + src/App.js | 9 - src/components/CreateListing.js | 501 +++++++++++++++++++----------- src/components/Listings.js | 200 +++++++----- src/components/LoginPage.js | 13 +- src/components/NavBar.js | 35 ++- src/components/SignUpInfoPage.js | 32 ++ src/components/UserProfilePage.js | 2 + 9 files changed, 609 insertions(+), 276 deletions(-) diff --git a/package-lock.json b/package-lock.json index 60ec1fbc..c577eb66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-dom": "^18.1.0", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", + "react-select": "^5.7.3", "react-toastify": "^9.1.3" } }, @@ -2250,6 +2251,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@floating-ui/core": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz", + "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==" + }, + "node_modules/@floating-ui/dom": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz", + "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==", + "dependencies": { + "@floating-ui/core": "^1.2.6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -11799,6 +11813,11 @@ "node": ">= 4.0.0" } }, + "node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -14285,6 +14304,26 @@ "node": ">=10" } }, + "node_modules/react-select": { + "version": "5.7.3", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz", + "integrity": "sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==", + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@floating-ui/dom": "^1.0.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^6.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0", + "use-isomorphic-layout-effect": "^1.1.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-toastify": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz", @@ -16053,6 +16092,19 @@ "punycode": "^2.1.0" } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -18543,6 +18595,19 @@ } } }, + "@floating-ui/core": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz", + "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==" + }, + "@floating-ui/dom": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz", + "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==", + "requires": { + "@floating-ui/core": "^1.2.6" + } + }, "@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -25444,6 +25509,11 @@ "fs-monkey": "1.0.3" } }, + "memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -27101,6 +27171,22 @@ } } }, + "react-select": { + "version": "5.7.3", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz", + "integrity": "sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==", + "requires": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@floating-ui/dom": "^1.0.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^6.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0", + "use-isomorphic-layout-effect": "^1.1.2" + } + }, "react-toastify": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz", @@ -28416,6 +28502,12 @@ "punycode": "^2.1.0" } }, + "use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index f230f37d..d4440520 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-dom": "^18.1.0", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", + "react-select": "^5.7.3", "react-toastify": "^9.1.3" }, "scripts": { diff --git a/src/App.js b/src/App.js index 36dfd7d4..540c7f95 100644 --- a/src/App.js +++ b/src/App.js @@ -18,15 +18,6 @@ class App extends React.Component { return (
- - - Listings -
- Profile -
- Sign Up Info - -
); } diff --git a/src/components/CreateListing.js b/src/components/CreateListing.js index 6613007f..aadbd2d1 100644 --- a/src/components/CreateListing.js +++ b/src/components/CreateListing.js @@ -1,7 +1,9 @@ import React, { useState, useContext, useEffect } from "react"; +import axios from "axios"; import { useAuth0 } from "@auth0/auth0-react"; +import { BACKEND_URL } from "../constants"; +import { useNavigate, useParams } from "react-router-dom"; -import { useNavigate } from "react-router-dom"; import { Link } from "react-router-dom"; import { UserContext } from "../App"; import { Stack, TextField, Typography } from "@mui/material"; @@ -15,180 +17,331 @@ import Button from "@mui/material/Button"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; -import Select from "@mui/material/Select"; +// import Select from "@mui/material/Select"; +import Select from "react-select"; import { toast } from "react-toastify"; import NavBar from "./NavBar"; - const CreateListing = () => { - const [category, setCategory] = useState(''); - - const handleCatChange = (e) => { - setCategory(e.target.value); - } - return ( - <> - - - Create Your Listing - - - Type in your product details to create a new listing. - -
- - - - - Product Title: - - - - - - - -
- - - - - Category: - - - - - Category - - - - - - - -
- - - - - Selling Price (per item): - - - - - - - -
- - - - - Quantity Available: - - - - - - - -
- - - - - Description: - - - - - - - -
- - - - - Picture: - - - - - - - - {/* - -
- -
- -
- -
- - -
- */} - - -
- - - - ) -} -export default CreateListing; \ No newline at end of file + const navigate = useNavigate(); + const { isAuthenticated, user, isLoading } = useAuth0(); + const accessToken = localStorage.getItem("accessToken"); + + const [allCategories, setAllCategories] = useState([]); + const [selectedCategories, setSelectedCategories] = useState([]); + + const [state, setState] = useState({ + user_id: "", + title: "", + price: "", + description: "", + shipping_detail: "", + sku_number: "", + quantity: "", + photo_url_1: "", + photo_url_2: "", + photo_url_3: "", + }); + + // WHEN USER FIRST ACCESSES THIS PAGE: GET USER ID AND STORE IN LOCAL STATE: + // GET USER ID ON MOUNT, USE EMAIL TO FISH OUT THE ID: + useEffect(() => { + if (!isAuthenticated) { + navigate("/"); + } + if (isAuthenticated && user) { + console.log("user email:", user.email); + + const checkUserInfoExists = async () => { + try { + const response = await axios.get( + `${BACKEND_URL}/users/checkuserinfo?email=${user.email}`, + { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + } + ); + console.log(response.data); + // Check the response to determine if the project exists + if (!response.data.error) { + console.log("user info exists!"); + setState({ user_id: response.data.id }); + } else { + console.log("user info does not exist!"); + } + } catch (error) { + console.error( + "Error occurred while checking user info exists on db:", + error + ); + } + }; + checkUserInfoExists(); + } + }, [user?.email, accessToken, isAuthenticated]); + + console.log("state.user_id:", state.user_id); + + // LOGIC FOR SUBMIT BUTTON: + const handleSubmit = (e) => { + e.preventDefault(); + + // Extract category IDs to send to backend + const selectedCategoryIDs = selectedCategories.map(({ value }) => value); + console.log(selectedCategoryIDs); + + // FIREBASE LOGIC GOES HERE: (need to call the FIREBASE URL up and store it here first before pushing it into backend) + + // Perform form submission actions to the backend: + axios + .post( + `${BACKEND_URL}/listings/create`, + { + user_id: state.user_id, + title: state.title, + price: state.price, + description: state.description, + shipping_detail: state.shipping_detail, + sku_number: state.sku_number, + quantity: state.quantity, + selectedCategoryIDs, + photo_url_1: state.photo_url_1, + photo_url_2: state.photo_url_2, + photo_url_3: state.photo_url_3, + }, + { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + } + ) + .then((res) => { + setState({ + user_id: "", + title: "", + price: "", + description: "", + shipping_detail: "", + sku_number: "", + quantity: "", + photo_url_1: "", + photo_url_2: "", + photo_url_3: "", + }); + setSelectedCategories([]); + + navigate(`/listings`); + }) + .catch((error) => { + console.log(error); + }); + console.log({ + user_id: state.user_id, + title: state.title, + price: state.price, + description: state.description, + shipping_detail: state.shipping_detail, + sku_number: state.sku_number, + quantity: state.quantity, + selectedCategoryIDs, + photo_url_1: state.photo_url_1, + photo_url_2: state.photo_url_2, + photo_url_3: state.photo_url_3, + }); + return console.log("you've submitted user info!"); + }; + + // Handle Change for field inputs: + const handleChange = (e) => { + setState({ ...state, [e.target.id]: e.target.value }); + console.log(state); + }; + + // LOGIC REQUIRED FOR HANDLING CATEGORY SUBMISSIONS: + // call all the categories first upon page loading: + useEffect(() => { + const getAllCategories = async () => { + const categories = await axios.get(`${BACKEND_URL}/categories`, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + console.log(getAllCategories); + setAllCategories(categories.data); + console.log(categories); + }; + getAllCategories(); + }, []); + + console.log("all categories in local state:", allCategories); + // categoryOptions for Category form input selection: + const categoryOptions = allCategories.map((category) => ({ + value: category.id, + label: category.name, + })); + // handle change for category selection form: + const handleSelectChange = (categories) => { + setSelectedCategories(categories); + }; + console.log("selected categories:", selectedCategories); + // styling colours for the category selection: + const selectFieldStyles = { + option: (provided) => ({ + ...provided, + color: "black", + }), + }; + + if (isLoading) { + // Show loading state + return ( +
+

Loading...Your patience is appreciated.

+
+ ); + } + + return ( +
+ + + <> + + + Create A New Listing: + + + Type in your product details to create a new listing. + + +
+ + + + + + + + + + + +