From 3d95af5f4b7b24a4e5e22b062ffaed7db907104b Mon Sep 17 00:00:00 2001 From: Tim Chamberlain Date: Tue, 19 Jul 2022 18:36:26 -0500 Subject: [PATCH] QQQ-27: checkpoint commit of initial version of Auth0 integration --- .env-op | 3 + .eslintrc.json | 2 + package-lock.json | 184 +++++++++++++++++++++ package.json | 2 + public/apple-icon.png | Bin 2446 -> 2470 bytes public/favicon.png | Bin 2761 -> 2470 bytes scripts/nodeWrapper.sh | 2 + src/App.tsx | 208 ++++++++++++++++-------- src/index.tsx | 39 ++--- src/page.routes.tsx | 58 +++---- src/qqq/auth0/code-snippet.tsx | 28 ++++ src/qqq/auth0/loader.tsx | 14 ++ src/qqq/auth0/profile.tsx | 31 ++++ src/qqq/auth0/protected-route.tsx | 16 ++ src/qqq/components/BaseLayout/index.tsx | 2 +- src/qqq/pages/entity-list/index.tsx | 5 +- src/qqq/pages/process-run/index.tsx | 6 +- 17 files changed, 477 insertions(+), 123 deletions(-) create mode 100644 .env-op create mode 100755 scripts/nodeWrapper.sh create mode 100644 src/qqq/auth0/code-snippet.tsx create mode 100644 src/qqq/auth0/loader.tsx create mode 100644 src/qqq/auth0/profile.tsx create mode 100644 src/qqq/auth0/protected-route.tsx diff --git a/.env-op b/.env-op new file mode 100644 index 0000000..2a180dc --- /dev/null +++ b/.env-op @@ -0,0 +1,3 @@ +REACT_APP_AUTH0_DOMAIN="op://Kingsrook/Auth0 Developer Keys/domain" +REACT_APP_AUTH0_CLIENT_ID="op://Kingsrook/Auth0 Developer Keys/clientId" +MATERIAL_UI_LICENSE_KEY="op://Kingsrook/Material UI Licence/key" diff --git a/.eslintrc.json b/.eslintrc.json index 86d3b2b..1d1d0b2 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -56,12 +56,14 @@ "devDependencies": true } ], + "import/order": "off", "max-len": "off", "no-console": "off", "no-constant-condition": "off", "no-shadow": "off", "no-unused-vars": "off", "no-plusplus": "off", + "no-underscore-dangle": "off", "spaced-comment": "off", "object-curly-spacing": [ "error", diff --git a/package-lock.json b/package-lock.json index 11ad173..7b5dae0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "@asseinfo/react-kanban": "2.2.0", + "@auth0/auth0-react": "1.10.2", "@emotion/cache": "11.7.1", "@emotion/react": "11.7.1", "@emotion/styled": "11.6.0", @@ -20,6 +21,7 @@ "@mui/icons-material": "5.4.1", "@mui/material": "5.4.1", "@mui/styled-engine": "5.4.1", + "@mui/x-data-grid": "5.13.0", "@mui/x-data-grid-pro": "5.13.0", "@mui/x-license-pro": "5.12.3", "@react-jvectormap/core": "1.0.1", @@ -39,6 +41,7 @@ "html-react-parser": "1.4.8", "react": "17.0.2", "react-chartjs-2": "3.0.4", + "react-cookie": "4.1.1", "react-dom": "17.0.2", "react-flatpickr": "3.10.7", "react-github-btn": "1.2.1", @@ -120,6 +123,32 @@ "react-dom": "^16.8.0 || ^17.0.0" } }, + "node_modules/@auth0/auth0-react": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-1.10.2.tgz", + "integrity": "sha512-s622ac/gLZ9pUX7d5dOhRggF4VI3MaLLCPVBFR5CKOGcPtPG80/4w2jMoBQtRRn6uKS6IVMWAUAFKWB7yATAoQ==", + "dependencies": { + "@auth0/auth0-spa-js": "^1.22.0" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17 || ^18", + "react-dom": "^16.11.0 || ^17 || ^18" + } + }, + "node_modules/@auth0/auth0-spa-js": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-1.22.1.tgz", + "integrity": "sha512-l0FCmiN3XubpgCtB3U0ds4h+5WQNTnIF4eLT/fudHEtcyrT65QF/03LybGVdLyuvqdIF/D6OQsfjwYw0Ms605Q==", + "dependencies": { + "abortcontroller-polyfill": "^1.7.3", + "browser-tabs-lock": "^1.2.15", + "core-js": "^3.22.6", + "es-cookie": "^1.3.2", + "fast-text-encoding": "^1.0.3", + "promise-polyfill": "^8.2.3", + "unfetch": "^4.2.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", @@ -4131,6 +4160,11 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz", + "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==" + }, "node_modules/@types/dropzone": { "version": "5.7.4", "resolved": "https://registry.npmjs.org/@types/dropzone/-/dropzone-5.7.4.tgz", @@ -4912,6 +4946,11 @@ "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==" }, + "node_modules/abortcontroller-polyfill": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz", + "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==" + }, "node_modules/accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -5782,6 +5821,15 @@ "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==" }, + "node_modules/browser-tabs-lock": { + "version": "1.2.15", + "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.2.15.tgz", + "integrity": "sha512-J8K9vdivK0Di+b8SBdE7EZxDr88TnATing7XoLw6+nFkXMQ6sVBh92K3NQvZlZU91AIkFRi0w3sztk5Z+vsswA==", + "hasInstallScript": true, + "dependencies": { + "lodash": ">=4.17.21" + } + }, "node_modules/browserslist": { "version": "4.21.1", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz", @@ -7399,6 +7447,11 @@ "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz", "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==" }, + "node_modules/es-cookie": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz", + "integrity": "sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==" + }, "node_modules/es-module-lexer": { "version": "0.9.3", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", @@ -8475,6 +8528,11 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==" }, + "node_modules/fast-text-encoding": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.4.tgz", + "integrity": "sha512-x6lDDm/tBAzX9kmsPcZsNbvDs3Zey3+scsxaZElS8xWLgUMAg/oFLeewfUz0mu1CblHhhsu15jGkraldkFh8KQ==" + }, "node_modules/fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -13638,6 +13696,11 @@ "asap": "~2.0.6" } }, + "node_modules/promise-polyfill": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.3.tgz", + "integrity": "sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==" + }, "node_modules/prompts": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz", @@ -13902,6 +13965,19 @@ "react": "^16.8.0 || ^17.0.0" } }, + "node_modules/react-cookie": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz", + "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.0.1", + "hoist-non-react-statics": "^3.0.0", + "universal-cookie": "^4.0.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -16105,6 +16181,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/unfetch": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz", + "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==" + }, "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", @@ -16152,6 +16233,23 @@ "node": ">=8" } }, + "node_modules/universal-cookie": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz", + "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==", + "dependencies": { + "@types/cookie": "^0.3.3", + "cookie": "^0.4.0" + } + }, + "node_modules/universal-cookie/node_modules/cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", @@ -17196,6 +17294,28 @@ "react-beautiful-dnd": "^13.0.0" } }, + "@auth0/auth0-react": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-1.10.2.tgz", + "integrity": "sha512-s622ac/gLZ9pUX7d5dOhRggF4VI3MaLLCPVBFR5CKOGcPtPG80/4w2jMoBQtRRn6uKS6IVMWAUAFKWB7yATAoQ==", + "requires": { + "@auth0/auth0-spa-js": "^1.22.0" + } + }, + "@auth0/auth0-spa-js": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-1.22.1.tgz", + "integrity": "sha512-l0FCmiN3XubpgCtB3U0ds4h+5WQNTnIF4eLT/fudHEtcyrT65QF/03LybGVdLyuvqdIF/D6OQsfjwYw0Ms605Q==", + "requires": { + "abortcontroller-polyfill": "^1.7.3", + "browser-tabs-lock": "^1.2.15", + "core-js": "^3.22.6", + "es-cookie": "^1.3.2", + "fast-text-encoding": "^1.0.3", + "promise-polyfill": "^8.2.3", + "unfetch": "^4.2.0" + } + }, "@babel/code-frame": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", @@ -19879,6 +19999,11 @@ "@types/node": "*" } }, + "@types/cookie": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz", + "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==" + }, "@types/dropzone": { "version": "5.7.4", "resolved": "https://registry.npmjs.org/@types/dropzone/-/dropzone-5.7.4.tgz", @@ -20520,6 +20645,11 @@ "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==" }, + "abortcontroller-polyfill": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz", + "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==" + }, "accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -21173,6 +21303,14 @@ "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==" }, + "browser-tabs-lock": { + "version": "1.2.15", + "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.2.15.tgz", + "integrity": "sha512-J8K9vdivK0Di+b8SBdE7EZxDr88TnATing7XoLw6+nFkXMQ6sVBh92K3NQvZlZU91AIkFRi0w3sztk5Z+vsswA==", + "requires": { + "lodash": ">=4.17.21" + } + }, "browserslist": { "version": "4.21.1", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz", @@ -22352,6 +22490,11 @@ "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz", "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==" }, + "es-cookie": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz", + "integrity": "sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==" + }, "es-module-lexer": { "version": "0.9.3", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", @@ -23127,6 +23270,11 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==" }, + "fast-text-encoding": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.4.tgz", + "integrity": "sha512-x6lDDm/tBAzX9kmsPcZsNbvDs3Zey3+scsxaZElS8xWLgUMAg/oFLeewfUz0mu1CblHhhsu15jGkraldkFh8KQ==" + }, "fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -26691,6 +26839,11 @@ "asap": "~2.0.6" } }, + "promise-polyfill": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.3.tgz", + "integrity": "sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==" + }, "prompts": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz", @@ -26890,6 +27043,16 @@ "lodash": "^4.17.19" } }, + "react-cookie": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz", + "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==", + "requires": { + "@types/hoist-non-react-statics": "^3.0.1", + "hoist-non-react-statics": "^3.0.0", + "universal-cookie": "^4.0.0" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -28541,6 +28704,11 @@ "which-boxed-primitive": "^1.0.2" } }, + "unfetch": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz", + "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==" + }, "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", @@ -28573,6 +28741,22 @@ "crypto-random-string": "^2.0.0" } }, + "universal-cookie": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz", + "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==", + "requires": { + "@types/cookie": "^0.3.3", + "cookie": "^0.4.0" + }, + "dependencies": { + "cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==" + } + } + }, "universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", diff --git a/package.json b/package.json index 660b569..33467e2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@mui/icons-material": "5.4.1", "@mui/material": "5.4.1", "@mui/styled-engine": "5.4.1", + "@mui/x-data-grid": "5.13.0", "@mui/x-data-grid-pro": "5.13.0", "@mui/x-license-pro": "5.12.3", "@react-jvectormap/core": "1.0.1", @@ -36,6 +37,7 @@ "html-react-parser": "1.4.8", "react": "17.0.2", "react-chartjs-2": "3.0.4", + "react-cookie": "4.1.1", "react-dom": "17.0.2", "react-flatpickr": "3.10.7", "react-github-btn": "1.2.1", diff --git a/public/apple-icon.png b/public/apple-icon.png index a20470fac33b4c58417dc4790349de2f62839da2..59c68b9103b9ab967b5e481843112202c7dd894b 100644 GIT binary patch literal 2470 zcmV;X30d}uP)DO=Wi51haAg2tc42g3a^wOUVE_OLL`g(JRCwC$U2AL3O)dlr?v91JUoXzh21lEI=eeFJ9l^QNxr0+?%sRn+{by|vjBz+88T$Zff^#R z5xI2Ig&CFy$~NGj(EUuCmcmALG(ssrTc1soLBm}I2c)rIKilm zpA zYH5vP{G=`y=+68OtZB%>lO@_IiFR-&9ynH7meiuc;ClT66A5xDRBtkWlove*(=3Fg4HBhr!Iv03@4!2CMOwAl%B zgSHcfDfIjmNq+3uQDcQnILn4+VCtr{aCaoBz>P&P?^0OI?SnXa%EUlwl1$Z%mpUu# zgt9~*Mda0#j18+#8IwzmGbSal>ZsGc2F-y0_ZV1IDe5VNt7ef)G9~FVs zfj8doPARx?Ky*3_(wAlnUhD^-!<%Ek>d$YL#uGsAE)xmH_-Tyn5S`5cLo>kYc=RPn zthdm7D5RHf_AN=1Z4&czl**)a?*VfQT*xh9@cfhG^ubLCS7843XD@f?j1y!TH7uWh?xE zc#4^lC~Cp#XZV6}l{-Wsw&TJE$PJMBSzyh?IO{MOClQ|`?g9T3smT8m9wj5*<)qRC zG=@m0AYn4%RR~>ea=PsIJB026bOe907;?n~RJ-Mujz`cc!PL+AIj!!y5ubuOyLRb~yR(DTv}Wos#Hm)4FU>6NoU-A z4JLpXu~m%gtvJ=%I}sl$v@6xF*vhs=J4m2MSh}MtKo58HL@};EUFzJF)jbli4xDRG zkg7=uxq}m6TWA}Q$!8-goH1S`$dY|PS5{wPSAvt^{sThUfgSx?n5vLuU(kbOiu@NI zw@-eYyI7rcvMtC5M8T@jh%3E*(RrX}P=2t&z-r@DUu6H3u*T&ixU1Q=@T?}0u4ySv z_y`Ce+eDxHY`_}VT(GZ!p|ULs-5Ni-CT7h7kA3hl5DEPUAar-ksk~Y(+ZH1r&ZI3} zQxk6%S_>TyT@yS8l9TP(w%8Sg`{N)Rc`;Eh&@(xgR{OW0PvSsBwk;Mq*cP=AW7Y%- zlPb_NJ^eAo3e!PVuCp!H+8j~qVpUyry`VuZ<-f()hJrpsyR?Wc?sLM;5tAWDt4bEz z)8&fN5;3mjnpo^qQ{oZCmxzDF7)gVR*#$lxtd$LQxTGg9kdT#J5a5m+$%~-As*Q2^ z)l}D1*JxlDWGcorIf4C?q4p?ZB}4}1?N9|SDz4~yQG2QwQziIUG$ezyKvDo!MalGY zY{brlP~gUuP*IgC=p66_6bLr~z3?4AFnu%|RVN|36q%n`R(1ss%O#WHAxl2)bUU*i zP&s&;pGiz_#~NUH3@e>@K_1oHeB6Z>R6SX)hSCIsELS6g_D3Q9is{!wC?tD23Z@eu zwjriNsAx$-GV|ytdK=UQn}VuLo(I+d{6lfB{PHOLJ6jM_5H~?U^)i~+3^d4+WwONB z>NsqI_BPflF?|!_Iaa^5C{m(Z(LNcprz0d*ckno{X4O%AyaQ-j8HO?q_9`Y}WdMR% z6|{db#^dK3NNk+J6DkCC?NCy~Zb|T1WYB(B405SJ96z<7aluyA;J1T1lVDr|(C{M-OZO0;b$AJZ;)P5L_hfP-JRSV%>d+1(F2d`FgK+X5+25ASLS#+&w`FG;;Qy@i%cEf$F5jlAaDbJJQr7ggHP^F`Amz-f2gWd5X zKU)kbMmelyMDsINHLQVjFT?JXTjF-H&`DRj~9T?mEjPQ^F@FVxev4B9Ud|Cje5svy0p0V{=eJ_}>2IzoXJ z3jI;)A*GEUV!gha|6ay&!H#6m{y1E^AxX#2_hJHG21B+J(};C^62Q6qx0AL+>g{g9 z|$8$Jxvo6u%0J$lEQJ9Y1rjG6^fN!%XY#hF#)d`R{2NLNmwR)KO`r* z8aDYyBOElTU(E62zp8t%o(Y&~SmZwq2lZ9dN(WWekcUL}1;u^IB~Dq&rQmJl6hl!^ k2HOzk%r|7nkRgEo0XMNcESt%R>;M1&07*qoM6N<$f|2@zL;wH) literal 2446 zcmeH`iC2?X7QkQF41~=pt38!XD@c+r8zf&DhR~oy0%Tzm2g{e0Ab|jZ3}8{QB83k0 zAhr>yR1i~8DZ-#aJr0rxYH?{%o7#v#-JpO_78SSoFmtA9&zUoSz|1@6-FNSOzkBcZ z-uv#y+?b6HcAjnbh2d!7% z9zzW;Q6xVafWox^?EDCTMbx$P5de7*0OP3uz#0JDly%*_5CAN`;d0_4P{7jC(#FOH zgTYu>SfJ+r$N%OHps$Y(^fy3{Z&Fa*WTGCEZj$ErW9~P>sC<*@H(}2I+iSv1A?Cn; z)lGq~U%%eFr@jxR@2mJRf;UkZ%jG^H-tUA`9kG8BR_l#<*4Nr=a$^G=?ERDW{4~4R z<#*)Ole4=Mn=o6DK|M49`2>!m&?G z*+q=LYw4xbFLW*=?;4nUW&2U%CVR?Xdu@H|2V9**mkx1M$=hJfx-3=L=M40q7-7^# z)}ysI)JxrJtBl;73jl7#(!_w;I(M|8W7sTaT#`Tcbby7H3}Uf8OhP59jg1B2eh zexikj zNBk>3oog>B2LVH&=Zarp=vPEIti7Ehsi@pOT<1KpdTM5+3yZZOqW>a-`-kDoQ>%k4 z>iyV#)g$QwKiYLkefp8xN1J4+n*9g%f3X|6F{te-cm}zoTgRTnRP{D+;u@2>DxwD3 zTJV3{-OMKHT85iT`HXV;i;!^_Lwx9o<0bypeNFe8BWcyK0;_EUN`KCYJpq@$I@aH` zp^>@M1uOi~AoLjZ+(%V57mW{Db<&y`7FwT&Y$Y*TX6I~tv$1AgUn6ecE-XO z6goLIHu+0Els)QKZ`3~R5l59Ff}^7ycb zO(o66{@4Krc6qh5=HUDdmQ9An_;!G1UNsfchRiWbOXo^T#fq-9qv42`}JP+J#DnN}P3unF~kfN7uMgJ})O!#BM$3V^IYk zOejNy4MX(z8`Mq7fl$@G4h(L`-uM;St4`G}OFk6uKf*oSCB?7i$G2y`ER|h56#C)9 z#IsqMmkk;EcvnmLPi39rNRAzu)%w`|K#*dnect0@AV+uV%3hbrVuLX&rA_=^@=g6& z(Zkj|28VBlECqj8uP)^U9GhJbCFlm0IlcpLx2iw_4o$aI{=BZR@OpI}Veg3`nKUH- zh5nL2``u(rip}X~1Dn<21Nw-ES64y9ATZF4u(jJ*<$BpC1nXk=AvRl$zuP%0@=#j3 zezrdGi?36hn630%bf0@}y~#}J5RK^?Jndl}y*5~OC;i-Hf)n1Bm&|Nehu!*WE>U_n zy^DR_51T4ccNY<#=O5`(>j!P0{OJ7FqLY!Il1RPw3CY>_`*mpzWNeW;(X-~|BT_s5 z*VxQFWj*41$xl;tfqZqk(aL`PP0zcgzJcsY9RVmSn`_GhPh-$_Tce6dQi&0j1Qz8; z&;^ho5)BVA@MKyXi2{?!FonJzf?x>RIet_3y8uO&SS~I2&jB;16+6&?4NDbrv!p6D zk|P0Z1tOC~BQm*Yn^zDam_WxfywH+VJVe8j$X+~BkXM>YrG$w@wOUP(FVW~kX+ll1vp0b5S%GkhHJAA^w4RQxk^MByw4r3Xm9NCy=uT zW!%j2{EJDHi&be$$l!5rEQ)xTA<=S$L{*@afHz-7RA$Ql+@7#>hvs>r<4_8as8kAx z9!#OpD>r#(qllAP9)Y}20-*5lnugE`bSuGZE1u5=QhA01Jw8#9smjQb5v54JT$GiW zOZ@F&h+-;TOok|ADMct`kf?~5&Y(&W2?ZhxML`HfL_i}5==VkW`{tt+06QXv)f%2! F@=rJ{z@GpB diff --git a/public/favicon.png b/public/favicon.png index 7d8b7d072215eadc900d6e9e74e51971ea9895e7..59c68b9103b9ab967b5e481843112202c7dd894b 100644 GIT binary patch delta 2460 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 diff --git a/scripts/nodeWrapper.sh b/scripts/nodeWrapper.sh new file mode 100755 index 0000000..fab759d --- /dev/null +++ b/scripts/nodeWrapper.sh @@ -0,0 +1,2 @@ +#!/bin/bash +op run --env-file='.env-op' -- npm "$@" diff --git a/src/App.tsx b/src/App.tsx index 7014811..c518743 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,8 @@ import { Routes, Route, Navigate, useLocation, } from "react-router-dom"; +import {useAuth0} from "@auth0/auth0-react"; + // @mui material components import {LicenseInfo} from "@mui/x-license-pro"; import {ThemeProvider} from "@mui/material/styles"; @@ -35,9 +37,10 @@ import {useMaterialUIController, setMiniSidenav, setOpenConfigurator} from "cont // Images import nfLogo from "assets/images/nutrifresh_one_icon_white.png"; -import brandWhite from "assets/images/logo-ct.png"; -import brandDark from "assets/images/logo-ct-dark.png"; import {Md5} from "ts-md5/dist/md5"; +import AuthenticationButton from "qqq/components/buttons/AuthenticationButton"; +import {useCookies} from "react-cookie"; +import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; import EntityCreate from "./qqq/pages/entity-create"; import EntityList from "./qqq/pages/entity-list"; import EntityView from "./qqq/pages/entity-view"; @@ -51,42 +54,12 @@ import Analytics from "./layouts/dashboards/analytics"; import Sales from "./layouts/dashboards/sales"; import QClient from "./qqq/utils/QClient"; -const gravatarBase = "http://www.gravatar.com/avatar/"; -const hash = Md5.hashStr("tim@nutrifreshservices.com"); -const profilePicture = `${gravatarBase}${hash}`; - /////////////////////////////////////////////////////////////////////////////////////////////// // define the parts of the nav that are static - before the qqq tables etc get dynamic added // /////////////////////////////////////////////////////////////////////////////////////////////// function getStaticRoutes() { return [ - { - type: "collapse", - name: "Tim Chamberlain", - key: "tim-chamberlain", - icon: , - collapse: [ - { - name: "My Profile", - key: "my-profile", - route: "/pages/profile/profile-overview", - component: , - }, - { - name: "Settings", - key: "profile-settings", - route: "/pages/account/settings", - component: , - }, - { - name: "Logout", - key: "logout", - route: "/authentication/sign-in/basic", - component: , - }, - ], - }, {type: "divider", key: "divider-0"}, { type: "collapse", @@ -113,10 +86,44 @@ function getStaticRoutes() ]; } -LicenseInfo.setLicenseKey("4ef48a0226ec7b5fb49d99f14c6b3170Tz00NzI0NyxFPTE2ODkyODU1NzUxMDYsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI="); +const SESSION_ID_COOKIE_NAME = "sessionId"; +LicenseInfo.setLicenseKey(process.env.MATERIAL_UI_LICENSE_KEY); export default function App() { + const [, setCookie] = useCookies([SESSION_ID_COOKIE_NAME]); + const { + user, getAccessTokenSilently, getIdTokenClaims, logout, + } = useAuth0(); + const [loadingToken, setLoadingToken] = useState(false); + const [isFullyAuthenticated, setIsFullyAuthenticated] = useState(false); + + useEffect(() => + { + if (loadingToken) + { + return; + } + setLoadingToken(true); + (async () => + { + try + { + console.log("Loading token..."); + const accessToken = await getAccessTokenSilently(); + const idToken = await getIdTokenClaims(); + setCookie(SESSION_ID_COOKIE_NAME, idToken.__raw, {path: "/"}); + setIsFullyAuthenticated(true); + console.log("Token load complete."); + } + catch (e) + { + console.log(`Error loading token: ${JSON.stringify(e)}`); + logout(); + } + })(); + }, [loadingToken]); + const [controller, dispatch] = useMaterialUIController(); const { miniSidenav, @@ -139,7 +146,7 @@ export default function App() //////////////////////////////////////////// useEffect(() => { - if (!needToLoadRoutes) + if (!needToLoadRoutes || !isFullyAuthenticated) { return; } @@ -147,43 +154,87 @@ export default function App() (async () => { - const metaData = await QClient.loadMetaData(); + try + { + console.log("ok now loading qqq things"); + const metaData = await QClient.loadMetaData(); - // get the keys sorted - const keys = [...metaData.tables.keys()].sort((a, b): number => - { - const labelA = metaData.tables.get(a).label; - const labelB = metaData.tables.get(b).label; - return (labelA.localeCompare(labelB)); - }); - const tableList = [] as any[]; - keys.forEach((key) => - { - const table = metaData.tables.get(key); - if (!table.isHidden) + // get the keys sorted + const keys = [...metaData.tables.keys()].sort((a, b): number => { - tableList.push({ - name: `${table.label}`, - key: table.name, - route: `/${table.name}`, - component: , - }); + const labelA = metaData.tables.get(a).label; + const labelB = metaData.tables.get(b).label; + return (labelA.localeCompare(labelB)); + }); + const tableList = [] as any[]; + keys.forEach((key) => + { + const table = metaData.tables.get(key); + if (!table.isHidden) + { + tableList.push({ + name: `${table.label}`, + key: table.name, + route: `/${table.name}`, + component: , + }); + } + }); + + let profileRoute = {}; + const gravatarBase = "http://www.gravatar.com/avatar/"; + const hash = Md5.hashStr(user.email); + const profilePicture = `${gravatarBase}${hash}`; + profileRoute = { + type: "collapse", + name: user.name, + key: user.name, + icon: , + collapse: [ + { + name: "My Profile", + key: "my-profile", + route: "/pages/profile/profile-overview", + component: , + }, + { + name: "Settings", + key: "profile-settings", + route: "/pages/account/settings", + component: , + }, + { + name: "Logout", + key: "logout", + route: "/authentication/sign-in/basic", + component: , + }, + ], + }; + + const tables = { + type: "collapse", + name: "Tables", + key: "tables", + icon: dashboard, + collapse: tableList, + }; + + const newDynamicRoutes = getStaticRoutes(); + // @ts-ignore + newDynamicRoutes.unshift(profileRoute); + newDynamicRoutes.push(tables); + setRoutes(newDynamicRoutes); + } + catch (e) + { + if (e.toString().indexOf("status code 401") !== -1) + { + logout(); } - }); - - const tables = { - type: "collapse", - name: "Tables", - key: "tables", - icon: dashboard, - collapse: tableList, - }; - - const newDynamicRoutes = getStaticRoutes(); - newDynamicRoutes.push(tables); - setRoutes(newDynamicRoutes); + } })(); - }, [needToLoadRoutes]); + }, [needToLoadRoutes, isFullyAuthenticated]); // Open sidenav when mouse enter on mini sidenav const handleOnMouseEnter = () => @@ -243,6 +294,27 @@ export default function App() }, ); + const authButton = ( + + + + ); + const configsButton = ( {configsButton} + {authButton} )} - {layout === "vr" && } } /> diff --git a/src/index.tsx b/src/index.tsx index 3a535ca..bc76917 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,33 +1,30 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 Creative Tim (https://www.creative-tim.com) - -Coded by www.creative-tim.com - - ========================================================= - -* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -*/ - import ReactDOM from "react-dom"; import {BrowserRouter} from "react-router-dom"; +import {Auth0Provider} from "@auth0/auth0-react"; import App from "App"; // Material Dashboard 2 PRO React TS Context Provider import {MaterialUIControllerProvider} from "context"; import "./qqq/styles/qqq-override-styles.css"; +import ProtectedRoute from "qqq/auth0/protected-route"; +import React from "react"; + +// Auth0 params from env +const domain = process.env.REACT_APP_AUTH0_DOMAIN; +const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID; ReactDOM.render( - - - - - , + + + + + + + , document.getElementById("root"), ); - export * from "components/MDButton"; diff --git a/src/page.routes.tsx b/src/page.routes.tsx index 3974ada..01cefc6 100644 --- a/src/page.routes.tsx +++ b/src/page.routes.tsx @@ -1,39 +1,39 @@ /** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= + ========================================================= + * Material Dashboard 2 PRO React TS - v1.0.0 + ========================================================= -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 Creative Tim (https://www.creative-tim.com) + * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts + * Copyright 2022 Creative Tim (https://www.creative-tim.com) -Coded by www.creative-tim.com + Coded by www.creative-tim.com ========================================================= -* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -*/ + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + */ /** - All of the routes for the Material Kit 2 PRO React React are added here, - You can add a new route, customize the routes and delete the routes here. + All of the routes for the Material Kit 2 PRO React React are added here, + You can add a new route, customize the routes and delete the routes here. - Once you add a new route on this file it will be visible automatically on - the Navbar. + Once you add a new route on this file it will be visible automatically on + the Navbar. - For adding a new route you can follow the existing routes in the routes array. - 1. The `name` key is used for the name of the route on the Navbar. - 2. The `icon` key is used for the icon of the route on the Navbar. - 3. The `collapse` key is used for making a collapsible item on the Navbar that contains other routes - inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key. - 4. The `route` key is used to store the route location which is used for the react router. - 5. The `href` key is used to store the external links location. - 7. The `dropdown` key is used to define that the item should open a dropdown for its collapse items . - 8. The `description` key is used to define the description of - a route under its name. - 9. The `columns` key is used to define that how the content should look inside the dropdown menu as columns, - you can set the columns amount based on this key. - 10. The `rowsPerColumn` key is used to define that how many rows should be in a column. -*/ + For adding a new route you can follow the existing routes in the routes array. + 1. The `name` key is used for the name of the route on the Navbar. + 2. The `icon` key is used for the icon of the route on the Navbar. + 3. The `collapse` key is used for making a collapsible item on the Navbar that contains other routes + inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key. + 4. The `route` key is used to store the route location which is used for the react router. + 5. The `href` key is used to store the external links location. + 7. The `dropdown` key is used to define that the item should open a dropdown for its collapse items . + 8. The `description` key is used to define the description of + a route under its name. + 9. The `columns` key is used to define that how the content should look inside the dropdown menu as columns, + you can set the columns amount based on this key. + 10. The `rowsPerColumn` key is used to define that how many rows should be in a column. + */ // @mui material components import Icon from "@mui/material/Icon"; @@ -76,9 +76,9 @@ const pageRoutes = [ name: "pricing page", route: "/pages/pricing-page", }, - { name: "RTL", route: "/pages/rtl" }, - { name: "widgets", route: "/pages/widgets" }, - { name: "charts", route: "/pages/charts" }, + {name: "RTL", route: "/pages/rtl"}, + {name: "widgets", route: "/pages/widgets"}, + {name: "charts", route: "/pages/charts"}, { name: "notfications", route: "/pages/notifications", diff --git a/src/qqq/auth0/code-snippet.tsx b/src/qqq/auth0/code-snippet.tsx new file mode 100644 index 0000000..e2d55e1 --- /dev/null +++ b/src/qqq/auth0/code-snippet.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +interface CodeSnippetProps +{ + code: string; + title?: string; +} + +// eslint-disable-next-line react/function-component-definition +function CodeSnippet({title, code}: CodeSnippetProps): JSX.Element +{ + return ( +
+ {title} +
+
+ 
{code}
+
+
+
+ ); +} + +CodeSnippet.defaultProps = { + title: undefined, +}; + +export default CodeSnippet; diff --git a/src/qqq/auth0/loader.tsx b/src/qqq/auth0/loader.tsx new file mode 100644 index 0000000..b38d26e --- /dev/null +++ b/src/qqq/auth0/loader.tsx @@ -0,0 +1,14 @@ +import React from "react"; + +function Loader() : JSX.Element +{ + const loadingImg = "https://cdn.auth0.com/blog/hello-auth0/loader.svg"; + + return ( +
+ Loading... +
+ ); +} + +export default Loader; diff --git a/src/qqq/auth0/profile.tsx b/src/qqq/auth0/profile.tsx new file mode 100644 index 0000000..7d51b7a --- /dev/null +++ b/src/qqq/auth0/profile.tsx @@ -0,0 +1,31 @@ +import {useAuth0} from "@auth0/auth0-react"; +import React from "react"; +import CodeSnippet from "./code-snippet"; + +export function Profile() +{ + const {user} = useAuth0(); + + if (!user) + { + console.log("no user"); + return null; + } + + return ( +
+
+
+
+ +
+
+
+
+ ); +} + +export default Profile; diff --git a/src/qqq/auth0/protected-route.tsx b/src/qqq/auth0/protected-route.tsx new file mode 100644 index 0000000..2e66154 --- /dev/null +++ b/src/qqq/auth0/protected-route.tsx @@ -0,0 +1,16 @@ +import {withAuthenticationRequired} from "@auth0/auth0-react"; +import React from "react"; +import Loader from "./loader"; + +// @ts-ignore +function ProtectedRoute({component}) : JSX.Element +{ + const Component = withAuthenticationRequired(component, { + // eslint-disable-next-line react/no-unstable-nested-components + onRedirecting: () => , + }); + + return ; +} + +export default ProtectedRoute; diff --git a/src/qqq/components/BaseLayout/index.tsx b/src/qqq/components/BaseLayout/index.tsx index f8c8416..b0c4572 100644 --- a/src/qqq/components/BaseLayout/index.tsx +++ b/src/qqq/components/BaseLayout/index.tsx @@ -59,7 +59,7 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element return ( - + {children}