diff --git a/client_web/package-lock.json b/client_web/package-lock.json index 374542b..3b8bfca 100644 --- a/client_web/package-lock.json +++ b/client_web/package-lock.json @@ -10,6 +10,9 @@ "dependencies": { "@azure/msal-browser": "^3.27.0", "@react-oauth/google": "^0.12.1", + "@tsparticles/engine": "^3.7.1", + "@tsparticles/react": "^3.0.0", + "@tsparticles/slim": "^3.7.1", "@types/js-cookie": "^3.0.6", "antd": "^5.22.1", "axios": "^1.7.7", @@ -17,8 +20,10 @@ "framer-motion": "^11.11.17", "js-cookie": "^3.0.5", "react": "^18.3.1", + "react-color": "^2.19.3", "react-dom": "^18.3.1", - "react-router-dom": "^6.28.0" + "react-router-dom": "^6.28.0", + "react-toastify": "^10.0.6" }, "devDependencies": { "@eslint/js": "^9.13.0", @@ -1099,6 +1104,15 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", @@ -1636,6 +1650,470 @@ "node": ">=10" } }, + "node_modules/@tsparticles/basic": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.7.1.tgz", + "integrity": "sha512-oJMJ3qzYUROYaOEsaFXkVynxT2OTWBXbQ9MNc1bJi/bVc1VOU44VN7X/KmiZjD+w1U+Qalk6BeVvDRwpFshblw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1", + "@tsparticles/move-base": "3.7.1", + "@tsparticles/plugin-hex-color": "3.7.1", + "@tsparticles/plugin-hsl-color": "3.7.1", + "@tsparticles/plugin-rgb-color": "3.7.1", + "@tsparticles/shape-circle": "3.7.1", + "@tsparticles/updater-color": "3.7.1", + "@tsparticles/updater-opacity": "3.7.1", + "@tsparticles/updater-out-modes": "3.7.1", + "@tsparticles/updater-size": "3.7.1" + } + }, + "node_modules/@tsparticles/engine": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.7.1.tgz", + "integrity": "sha512-GYzBgq/oOE9YJdOL1++MoawWmYg4AvVct6CIrJGx84ZRb3U2owYmLsRGabYl0qX1CWWOvUG569043RJmyp/vQA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "hasInstallScript": true, + "license": "MIT" + }, + "node_modules/@tsparticles/interaction-external-attract": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.7.1.tgz", + "integrity": "sha512-cpnMsFJ7ZJNKccpQvskKvSs1ofknByHE6FGqbEb17ij7HqvbECQOCOVKHPFnYipHe14cXor/Cd+nVisRcTASoQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-bounce": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.7.1.tgz", + "integrity": "sha512-npvU9Qt6WDonjezHqi+hWM44ga2Oh5yXdr8eSoJpvuHZrCP7rIdRSz5XseHouO1bMS9DbXk86sx4qwrhB5w58w==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-bubble": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.7.1.tgz", + "integrity": "sha512-WdbYL46lMfuf2g5kfVB1hhhxRBtEXDvnwz8PJwLKurSThL/27bqsqysyXsMzXtLByXUneGhtJTj4D5I5RYdgjA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-connect": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.7.1.tgz", + "integrity": "sha512-hqx0ANIbjLIz/nxmk0LvqANBiNLLmVybbCA7N+xDHtEORvpKjNlKEvMz6Razocl6vRjoHZ/olSwcxIG84dh/cg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-grab": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.7.1.tgz", + "integrity": "sha512-JMYpFW+7YvkpK5MYlt4Ec3Gwb5ZxS7RLVL8IRUSd5yJOw25husPTYg+FQywxrt5WhKe+tPsCAYo+uGIbTTHi9w==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-pause": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.7.1.tgz", + "integrity": "sha512-Kkp+7sCe24hawH0XvS1V6UCCuHfMvpLK7oseqSam9Gt4SyGrFvaqIXxkjXhRhn9MysJyKFPBV4/dtBM1HR9p6A==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-push": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.7.1.tgz", + "integrity": "sha512-4VoaR5jvXgQdB7irtq4uSZYr5c+D6TBTVEnLVpBfJhUs6jhw6mgN5g7yp5izIYkK0AlcO431MHn8dvJacvRLDw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-remove": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.7.1.tgz", + "integrity": "sha512-FRBW7U7zD5MkO6/b7e8iSMk/UTtRLY2XiIVFZNsKri3Re3yPpvZzzd5tl2YlYGQlg1Xc+K8SJYMQQA3PtgQ/Tg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-repulse": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.7.1.tgz", + "integrity": "sha512-mwM06dVmg2FEvHMQsPOfRBQWACbjf3qnelODkqI9DSVxQ0B8DESP4BYNXyraFGYv00YiPzRv5Xy/uejHdbsQUA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-external-slow": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.7.1.tgz", + "integrity": "sha512-CfCAs3kUQC3pLOj0dbzn5AolQyBHgjxORLdfnYBhepvFV1BXB+4ytChRfXBzjykBPI6U+rCnw5Fk/vVjAroSFA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-particles-attract": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.7.1.tgz", + "integrity": "sha512-UABbBORKaiItAT8vR0t4ye2H3VE6/Ah4zcylBlnq0Jd5yDkyP4rnkwhicaY6y4Zlfwyx+0PWdAC4f/ziFAyObg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-particles-collisions": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.7.1.tgz", + "integrity": "sha512-0GY9++Gn2KXViyeifXWkH7a2UO5+uRwyS1rDeTN8eleyiq2j9zQf4xztZEIft8T0hTetq2rkWxQ92j2kev6NVA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/interaction-particles-links": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.7.1.tgz", + "integrity": "sha512-BxCXAAOBNmEvlyOQzwprryW8YdtMIop2v4kgSCff5MCtDwYWoQIfzaQlWbBAkD9ey6BoF8iMjhBUaY1MnDecTA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/move-base": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.7.1.tgz", + "integrity": "sha512-LPtMHwJHhzwfRIcSAk814fY9NcRiICwaEbapaJSYyP1DwscSXqOWoyAEWwzV9hMgAcPdsED6nGeg8RCXGm58lw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/move-parallax": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.7.1.tgz", + "integrity": "sha512-B40azo6EJyMdI+kmIxpqWDaObPwODTYLDCikzkZ73n5tS6OhFUlkz81Scfo+g1iGTdryKFygUKhVGcG1EFuA5g==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-easing-quad": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.7.1.tgz", + "integrity": "sha512-nSwKCRe6C/noCi3dyZlm1GiQGask0aXdWDuS36b82iwzwQ01cBTXeXR25mLr4fsfMLFfYAZXyBxEMMpw3rkSiw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-hex-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hex-color/-/plugin-hex-color-3.7.1.tgz", + "integrity": "sha512-7xu3MV8EdNNejjYyEmrq5fCDdYAcqz/9VatLpnwtwR5Q5t2qI0tD4CrcGaFfC/rTAVJacfiJe02UV/hlj03KKA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-hsl-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hsl-color/-/plugin-hsl-color-3.7.1.tgz", + "integrity": "sha512-zzAI1CuoCMBJhgeYZ5Rq42nGbPg35ZzIs11eQegjsWG5Msm5QKSj60qPzERnoUcCc4HCKtIWP7rYMz6h3xpoEg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/plugin-rgb-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/plugin-rgb-color/-/plugin-rgb-color-3.7.1.tgz", + "integrity": "sha512-taEraTpCYR6jpjflqBL95tN0zFU8JrAChXTt8mxVn7gddxoNMHI/LGymEPRCweLukwV6GQyAGOkeGEdWDPtYTA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/react": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz", + "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==", + "peerDependencies": { + "@tsparticles/engine": "^3.0.2", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@tsparticles/shape-circle": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.7.1.tgz", + "integrity": "sha512-kmOWaUuFwuTtcCFYjuyJbdA5qDqWdGsharLalYnIczkLu2c1I8jJo/OmGePKhWn62ocu7mqKMomfElkIcw2AsA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-emoji": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.7.1.tgz", + "integrity": "sha512-mX18c/xhYVljS/r5Xbowzclw+1YwhtWoQFOOfkmjjZppA+RjgcwSKLvH6E20PaH1yVTjBOfSF+3POKpwsULzTg==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-image": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.7.1.tgz", + "integrity": "sha512-eDzfkQhqLY6fb9QH2Vo9TGfdJBFFpYnojhxQxc7IdzIwOFMD3JK4B52RVl9oowR+rNE8dNp6P2L+eMAF4yld0g==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-line": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.7.1.tgz", + "integrity": "sha512-lMPYApUpg7avxmYPfHHr4dQepZSNn/g0Q1/g2+lnTi8ZtUBiCZ2WMVy9R3GOzyozbnzigLQ6AJRnOpsUZV7H4g==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-polygon": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.7.1.tgz", + "integrity": "sha512-5FrRfpYC3qnvV2nXBLE4Q0v+SMNWJO8xgzh6MBFwfptvqH4EOrqc/58eS5x0jlf+evwf9LjPgeGkOTcwaHHcYQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-square": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.7.1.tgz", + "integrity": "sha512-7VCqbRwinjBZ+Ryme27rOtl+jKrET8qDthqZLrAoj3WONBqyt+R9q6SXAJ9WodqEX68IBvcluqbFY5qDZm8iAQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/shape-star": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.7.1.tgz", + "integrity": "sha512-3G4oipioyWKLEQYT11Sx3k6AObu3dbv/A5LRqGGTQm5IR6UACa+INwykZYI0a+MdJJMb83E0e4Fn3hlZbi0/8w==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/slim": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.7.1.tgz", + "integrity": "sha512-OtJEhud2KleX7OxiG2r/VYriHNIwTpFm3sPFy4EOJzAD0EW7KZoKXGpGn5gwGI1NWeB0jso92yNTrTC2ZTW0qw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "license": "MIT", + "dependencies": { + "@tsparticles/basic": "3.7.1", + "@tsparticles/engine": "3.7.1", + "@tsparticles/interaction-external-attract": "3.7.1", + "@tsparticles/interaction-external-bounce": "3.7.1", + "@tsparticles/interaction-external-bubble": "3.7.1", + "@tsparticles/interaction-external-connect": "3.7.1", + "@tsparticles/interaction-external-grab": "3.7.1", + "@tsparticles/interaction-external-pause": "3.7.1", + "@tsparticles/interaction-external-push": "3.7.1", + "@tsparticles/interaction-external-remove": "3.7.1", + "@tsparticles/interaction-external-repulse": "3.7.1", + "@tsparticles/interaction-external-slow": "3.7.1", + "@tsparticles/interaction-particles-attract": "3.7.1", + "@tsparticles/interaction-particles-collisions": "3.7.1", + "@tsparticles/interaction-particles-links": "3.7.1", + "@tsparticles/move-parallax": "3.7.1", + "@tsparticles/plugin-easing-quad": "3.7.1", + "@tsparticles/shape-emoji": "3.7.1", + "@tsparticles/shape-image": "3.7.1", + "@tsparticles/shape-line": "3.7.1", + "@tsparticles/shape-polygon": "3.7.1", + "@tsparticles/shape-square": "3.7.1", + "@tsparticles/shape-star": "3.7.1", + "@tsparticles/updater-life": "3.7.1", + "@tsparticles/updater-rotate": "3.7.1", + "@tsparticles/updater-stroke-color": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.7.1.tgz", + "integrity": "sha512-QimV3yn17dcdJx7PpTwLtw9BhkQ0q8qFF035OdcZpnynBPAO/hg0zvSMpMGoeuDVFH02wWBy4h2/BYCv6wh6Sw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-life": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.7.1.tgz", + "integrity": "sha512-NY5gUrgO5AsARNC0usP9PKahXf7JCxbP/H1vzTfA0SJw4veANfWTldOvhIlcm2CHVP5P1b827p0hWsBHECwz7A==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-opacity": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.7.1.tgz", + "integrity": "sha512-YcyviCooTv7SAKw7sxd84CfJqZ7dYPSdYZzCpedV6TKIObRiwLqXlyLXQGJ3YltghKQSCSolmVy8woWBCDm1qA==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-out-modes": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.7.1.tgz", + "integrity": "sha512-Cb5sWquRtUYLSiFpmBjjYKRdpNV52diCo9+qMtK1oVlldDBhUwqO+1TQjdlaA2yl5DURlY9ZfOHXvY+IT7CHCw==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-rotate": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.7.1.tgz", + "integrity": "sha512-toVHwl+h6SvtA8dyxSA2kMH2QdDA71vehuAa+HoRqf1y06h5kxyYiMKZFHCqDJ6lFfRPs47MjrC9dD2bDz14MQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-size": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.7.1.tgz", + "integrity": "sha512-+Y0H0PnDJVIsJ+zHTyubYu1jtRFmVnY1dAv3VCjScIDw6bcpL/ol+HrtHTGIX0WbMyUfjCyALfAoaXi/Wm8VcQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, + "node_modules/@tsparticles/updater-stroke-color": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.7.1.tgz", + "integrity": "sha512-VHhQkCNuxjx/Hy7A+g0Yijb24T0+wQ3jNsF/yfrR9dEdZWSBiimZLvV1bilPdAeEtieAJTAZo2VNhcD1snF0iQ==", + "license": "MIT", + "dependencies": { + "@tsparticles/engine": "3.7.1" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -2376,6 +2854,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3664,6 +4151,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "license": "MIT" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3717,6 +4216,12 @@ "node": ">=10" } }, + "node_modules/material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==", + "license": "ISC" + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -3838,6 +4343,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", @@ -4028,6 +4542,23 @@ "node": ">=0.4.0" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "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", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -4706,6 +5237,24 @@ "node": ">=0.10.0" } }, + "node_modules/react-color": { + "version": "2.19.3", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", + "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", + "license": "MIT", + "dependencies": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.15", + "lodash-es": "^4.17.15", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -4767,6 +5316,28 @@ "react-dom": ">=16.8" } }, + "node_modules/react-toastify": { + "version": "10.0.6", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz", + "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "license": "MIT", + "dependencies": { + "lodash": "^4.0.1" + } + }, "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", @@ -5062,6 +5633,12 @@ "node": ">=12.22" } }, + "node_modules/tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==", + "license": "MIT" + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/client_web/package.json b/client_web/package.json index 80fa366..8013ac0 100644 --- a/client_web/package.json +++ b/client_web/package.json @@ -16,6 +16,9 @@ "dependencies": { "@azure/msal-browser": "^3.27.0", "@react-oauth/google": "^0.12.1", + "@tsparticles/engine": "^3.7.1", + "@tsparticles/react": "^3.0.0", + "@tsparticles/slim": "^3.7.1", "@types/js-cookie": "^3.0.6", "antd": "^5.22.1", "axios": "^1.7.7", @@ -23,8 +26,10 @@ "framer-motion": "^11.11.17", "js-cookie": "^3.0.5", "react": "^18.3.1", + "react-color": "^2.19.3", "react-dom": "^18.3.1", - "react-router-dom": "^6.28.0" + "react-router-dom": "^6.28.0", + "react-toastify": "^10.0.6" }, "devDependencies": { "@eslint/js": "^9.13.0", diff --git a/client_web/public/google-icon.png b/client_web/public/google-icon.png new file mode 100644 index 0000000..494aced Binary files /dev/null and b/client_web/public/google-icon.png differ diff --git a/client_web/src/App.tsx b/client_web/src/App.tsx index a0133ef..c4bd551 100644 --- a/client_web/src/App.tsx +++ b/client_web/src/App.tsx @@ -1,10 +1,22 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { ContextManager } from "./Context/ContextManager"; -import { uri } from './Config/uri'; +// @ts-ignore +import { uri } from '@Config/uri'; + +import { useEffect, useMemo, useState } from "react"; +import Particles, { initParticlesEngine } from "@tsparticles/react"; +import { + type Container, + type ISourceOptions, + MoveDirection, + OutMode, +} from "@tsparticles/engine"; +import { loadSlim } from "@tsparticles/slim"; import Home from './Pages/Home'; import NotFound from './Pages/NotFound'; -import Layout from './components/Layout/Layout'; +// @ts-ignore +import Layout from '@/Components/Layout/Layout'; import Login from './Pages/Auth/Forms/Login'; import Register from './Pages/Auth/Forms/Register'; @@ -13,27 +25,147 @@ import SpotifyCallback from './Pages/Auth/Callback/SpotifyCallback'; import MicrosoftCallback from './Pages/Auth/Callback/MicrosoftCallback'; import DiscordCallback from './Pages/Auth/Callback/DiscordCallback'; +import CreateWorkflow from "./Pages/Workflows/CreateWorkflow"; +import WorkflowsTable from "./Pages/Workflows/WorkflowsTable"; + import Dashboard from './Pages/Dashboard/Dashboard'; +import { ToastContainer } from 'react-toastify'; +// @ts-ignore +import 'react-toastify/dist/ReactToastify.css'; + const App = () => { + const [init, setInit] = useState(false); + const [backgroundColor, setBackgroundColor] = useState("#FFA500"); + + useEffect(() => { + initParticlesEngine(async (engine) => { + await loadSlim(engine); + }).then(() => { + setInit(true); + }); + setBackgroundColor(sessionStorage.getItem("backgroundColor") || "#FFA500"); + }, []); + + const particlesLoaded = async (container?: Container): Promise => { + console.log(container); + }; + + const options: ISourceOptions = useMemo( + () => ({ + background: { + color: { + value: backgroundColor, + }, + }, + fpsLimit: 60, + interactivity: { + events: { + onClick: { + enable: true, + mode: "push", + }, + onHover: { + enable: true, + mode: "repulse", + }, + }, + modes: { + push: { + quantity: 1, + }, + repulse: { + distance: 200, + duration: 0.4, + }, + }, + }, + particles: { + color: { + value: "#ffffff", + }, + links: { + color: "#ffffff", + distance: 150, + enable: true, + opacity: 0.5, + width: 1, + }, + move: { + direction: MoveDirection.none, + enable: true, + outModes: { + default: OutMode.out, + }, + random: false, + speed: 6, + straight: false, + }, + number: { + density: { + enable: true, + }, + value: 80, + }, + opacity: { + value: 0.5, + }, + shape: { + type: "circle", + }, + size: { + value: { min: 1, max: 5 }, + }, + }, + detectRetina: true, + }), + [backgroundColor], + ); + return ( - - - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - - + <> + + {init && ( + + )} + + + + + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + + + + + ); }; diff --git a/client_web/src/components/auth/Buttons/DiscordAuth.tsx b/client_web/src/Components/Auth/Buttons/DiscordAuth.tsx similarity index 100% rename from client_web/src/components/auth/Buttons/DiscordAuth.tsx rename to client_web/src/Components/Auth/Buttons/DiscordAuth.tsx diff --git a/client_web/src/Components/Auth/Buttons/GoogleAuth.tsx b/client_web/src/Components/Auth/Buttons/GoogleAuth.tsx new file mode 100644 index 0000000..ae8b42e --- /dev/null +++ b/client_web/src/Components/Auth/Buttons/GoogleAuth.tsx @@ -0,0 +1,54 @@ +import { Form, Button } from 'antd'; +import { GoogleOAuthProvider } from '@react-oauth/google'; +// @ts-ignore +import { uri } from '@Config/uri'; + +interface GoogleAuthProps { + onSuccess: (response: unknown) => void; + onError: () => void; + buttonText: string; +} + +const GoogleAuth = ({ onSuccess, onError, buttonText }: GoogleAuthProps) => { + if (!uri.google.auth.clientId || uri.google.auth.clientId === '') { + return null; + } + + const handleGoogleLogin = () => { + // Initialize the Google Sign-In client + let google: any; + const client = google.accounts.oauth2.initCodeClient({ + client_id: uri.google.auth.clientId, + scope: 'email profile', // TODO: Add other scopes as needed + callback: (response: unknown) => { + // @ts-ignore + if (response?.code) { + onSuccess(response); + } else { + onError(); + } + }, + }); + client.requestCode(); + }; + + return ( + + + + + + ); +}; + +export default GoogleAuth; diff --git a/client_web/src/components/auth/Buttons/LinkedinAuth.tsx b/client_web/src/Components/Auth/Buttons/LinkedinAuth.tsx similarity index 100% rename from client_web/src/components/auth/Buttons/LinkedinAuth.tsx rename to client_web/src/Components/Auth/Buttons/LinkedinAuth.tsx diff --git a/client_web/src/components/auth/Buttons/MicrosoftAuth.tsx b/client_web/src/Components/Auth/Buttons/MicrosoftAuth.tsx similarity index 100% rename from client_web/src/components/auth/Buttons/MicrosoftAuth.tsx rename to client_web/src/Components/Auth/Buttons/MicrosoftAuth.tsx diff --git a/client_web/src/components/auth/Buttons/SpotifyAuth.tsx b/client_web/src/Components/Auth/Buttons/SpotifyAuth.tsx similarity index 100% rename from client_web/src/components/auth/Buttons/SpotifyAuth.tsx rename to client_web/src/Components/Auth/Buttons/SpotifyAuth.tsx diff --git a/client_web/src/components/auth/OAuthButtons.tsx b/client_web/src/Components/Auth/OAuthButtons.tsx similarity index 95% rename from client_web/src/components/auth/OAuthButtons.tsx rename to client_web/src/Components/Auth/OAuthButtons.tsx index 7c92f22..b6379e4 100644 --- a/client_web/src/components/auth/OAuthButtons.tsx +++ b/client_web/src/Components/Auth/OAuthButtons.tsx @@ -31,7 +31,7 @@ const OAuthButtons = ({ = ({ text, url, type = "primary", style = {}, goBack = false }) => { + const navigate = useNavigate(); + + const handleClick = () => { + if (goBack) { + navigate(-1); + } else if (url) { + navigate(url); + } + }; + + const buttonStyle = type === "danger" ? { ...style, backgroundColor: 'red', borderColor: 'red', color: 'white' } : style; + + return ( + + ); +}; + +export default LinkButton; diff --git a/client_web/src/components/Security.tsx b/client_web/src/Components/Security.tsx similarity index 100% rename from client_web/src/components/Security.tsx rename to client_web/src/Components/Security.tsx diff --git a/client_web/src/Pages/Auth/Forms/Login.tsx b/client_web/src/Pages/Auth/Forms/Login.tsx index 3f152ec..b7508c6 100644 --- a/client_web/src/Pages/Auth/Forms/Login.tsx +++ b/client_web/src/Pages/Auth/Forms/Login.tsx @@ -1,6 +1,6 @@ import {Form, Input, Button, Card } from 'antd'; import { Link } from 'react-router-dom'; -import OAuthButtons from '../../../components/auth/OAuthButtons'; +import OAuthButtons from '../../../Components/Auth/OAuthButtons'; const Login = () => { const onFinish = (values: { email: string, password: string }) => { @@ -41,9 +41,6 @@ const Login = () => { return (
{ width: '100%', top: 0, left: 0 - }}> + }} role="main">
{ const onFinish = (values: unknown) => { @@ -41,9 +42,6 @@ const Register = () => { return (
{ width: '100%', top: 0, left: 0 - }}> + }} role="main"> { return ( -
- {/* Header */} - + <div style={{padding: 24, position: 'relative', zIndex: 1}} role="main"> + <Title level={3} style={{marginBottom: 16}}> Dashboard {/* Stats Cards */} - + - - - 12 + + + {/* TODO: Replace X with the number of active automations */} + X Active Automations - - - 1,234 + + + {/* TODO: Replace X with the number of tasks completed */} + X Tasks Completed - - - 5 + + + {/* TODO: Replace X with the number of pending updates */} + X Pending Updates @@ -48,13 +53,16 @@ const Dashboard: FC = () => { {/* Main Content Area */} - + {/* Activity content would go here */} - - {/* Quick actions content would go here */} + + + + + diff --git a/client_web/src/Pages/Home.tsx b/client_web/src/Pages/Home.tsx index b39954c..df2413e 100644 --- a/client_web/src/Pages/Home.tsx +++ b/client_web/src/Pages/Home.tsx @@ -1,20 +1,31 @@ -import { Layout, Typography, Row, Col, Button, Card } from 'antd'; +import {Layout, Typography, Row, Col, Button, Card } from 'antd'; import { ThunderboltOutlined, ApiOutlined, SafetyCertificateOutlined } from '@ant-design/icons'; import { motion } from 'framer-motion'; import { Link } from 'react-router-dom'; +// @ts-ignore +import { BlockPicker } from 'react-color'; +import React from "react"; const { Content } = Layout; const { Title, Paragraph } = Typography; -const Home = () => { +interface HomeProps { + backgroundColor: string; + setBackgroundColor: (color: string) => void; +} + +const Home: React.FC = ({ backgroundColor, setBackgroundColor }) => { + const handleColorChange = (color: { hex: any; }) => { + setBackgroundColor(color.hex); + sessionStorage.setItem('backgroundColor', color.hex); + }; + return ( - {/* Hero Section */} @@ -42,13 +53,12 @@ const Home = () => { - {/* Features Section */} - + Easy Automation Create powerful automation workflows with our intuitive drag-and-drop interface. @@ -60,7 +70,7 @@ const Home = () => { - + Connect Services Integrate with popular services and apps. Make them work together seamlessly. @@ -71,7 +81,7 @@ const Home = () => { - + Secure & Reliable Your data is protected with enterprise-grade security. Run your automations with confidence. @@ -82,7 +92,6 @@ const Home = () => { - {/* How It Works Section */}
@@ -96,24 +105,32 @@ const Home = () => { ].map((item) => ( <Col xs={24} md={8} key={item.step}> <motion.div whileHover={{ y: -10 }} style={{ textAlign: 'center' }}> - <Title - style={{ - color: '#1890ff', - opacity: 0.2, - fontSize: 64, - marginBottom: 16 - }} - > - {item.step} - - {item.title} - {item.description} + + + {item.step} + + {item.title} + {item.description} + ))}
+ + + ); }; diff --git a/client_web/src/Pages/NotFound.tsx b/client_web/src/Pages/NotFound.tsx index 9cf1700..a66e131 100644 --- a/client_web/src/Pages/NotFound.tsx +++ b/client_web/src/Pages/NotFound.tsx @@ -1,5 +1,6 @@ -import { Result, Button } from 'antd'; -import { Link } from 'react-router-dom'; +import { Result } from 'antd'; +// @ts-ignore +import LinkButton from "@/Components/LinkButton"; import React from 'react'; const NotFound: React.FC = () => { @@ -9,9 +10,7 @@ const NotFound: React.FC = () => { title="404" subTitle="Sorry, the page you visited does not exist." extra={ - + } /> ); diff --git a/client_web/src/Pages/Workflows/CreateWorkflow.tsx b/client_web/src/Pages/Workflows/CreateWorkflow.tsx new file mode 100644 index 0000000..020c542 --- /dev/null +++ b/client_web/src/Pages/Workflows/CreateWorkflow.tsx @@ -0,0 +1,613 @@ +import React, { useState } from "react"; +import { Button, Row, Typography, Spin, Space, Card, List, Form, Input, Col, Collapse } from "antd"; +// @ts-ignore +import Security from "@/Components/Security.tsx"; +// @ts-ignore +import LinkButton from "@/Components/LinkButton.tsx"; +// @ts-ignore +import { normalizeName } from "@/Pages/Workflows/CreateWorkflow.utils"; + +// @ts-ignore +import { About, Client, Server, Service, Action, Reaction, Workflow } from "@/types"; +import {toast} from "react-toastify"; + +const { Title, Text } = Typography; +const { Panel } = Collapse; + +const _data: About = { // Fixtures + client: { + host: "10.101.53.35" + }, + server: { + current_time: 1531680780, + services: [ + { + name: "facebook", + actions: [ + { + name: "new_message_in_group_w/o", + description: "A new message is posted in the group", + parameters: [] + }, + { + name: "new_message_inbox", + description: "A new private message is received by the user", + parameters: [ + { name: "message_id", description: "ID of the message", type: "number" } + ] + }, + { + name: "new_like_w/o", + description: "The user gains a like from one of their messages", + parameters: [] + } + ], + reactions: [ + { + name: "like_message", + description: "The user likes a message", + parameters: [ + { name: "message_id", description: "ID of the message to like", type: "string" } + ] + } + ] + }, + { + name: "twitter", + actions: [ + { + name: "new_tweet", + description: "A new tweet is posted", + parameters: [ + { name: "tweet_id", description: "ID of the tweet", type: "string" } + ] + }, + { + name: "new_follower_w/o", + description: "The user gains a new follower", + parameters: [] + } + ], + reactions: [ + { + name: "retweet", + description: "The user retweets a tweet", + parameters: [ + { name: "tweet_id", description: "ID of the tweet to retweet", type: "string" } + ] + }, + { + name: "like_tweet_w/o", + description: "The user likes a tweet", + parameters: [] + } + ] + }, + { + name: "github", + actions: [ + { + name: "new_issue", + description: "A new issue is created in a repository", + parameters: [ + { name: "issue_id", description: "ID of the issue", type: "string" } + ] + }, + { + name: "new_pull_request_w/o", + description: "A new pull request is created in a repository", + parameters: [] + } + ], + reactions: [ + { + name: "create_issue", + description: "The user creates a new issue", + parameters: [ + { name: "repository", description: "Name of the repository", type: "string" }, + { name: "title", description: "Title of the issue", type: "string" } + ] + }, + { + name: "merge_pull_request_w/o", + description: "The user merges a pull request", + parameters: [] + } + ] + }, + { + name: "slack", + actions: [ + { + name: "new_message", + description: "A new message is posted in a channel", + parameters: [ + { name: "channel_id", description: "ID of the channel", type: "string" }, + { name: "message_text", description: "Text of the message", type: "string" } + ] + }, + { + name: "new_reaction_w/o", + description: "A new reaction is added to a message", + parameters: [] + } + ], + reactions: [ + { + name: "send_message", + description: "The user sends a message to a channel", + parameters: [ + { name: "channel_id", description: "ID of the channel", type: "string" }, + { name: "message_text", description: "Text of the message", type: "string" } + ] + }, + { + name: "add_reaction_w/o", + description: "The user adds a reaction to a message", + parameters: [] + } + ] + } + ] + } +}; + +const CreateWorkflow: React.FC = () => { + const [loading, setLoading] = React.useState(false); + const [about, setAbout] = React.useState(null); + const [selectedActions, setSelectedActions] = React.useState([]); + const [selectedReactions, setSelectedReactions] = React.useState([]); + const [workflowName, setWorkflowName] = React.useState(''); + const [workflowDescription, setWorkflowDescription] = React.useState(''); + const [workflowNameTouched, setWorkflowNameTouched] = React.useState(false); + const [activeActionKeys, setActiveActionKeys] = useState([]); + const [activeReactionKeys, setActiveReactionKeys] = useState([]); + + React.useEffect(() => { + setLoading(true); + setAbout(_data); // TODO: Fetch workflow from the server + setLoading(false); + }, []); + + const toggleAction = (action: Action) => { + const parameters = action.parameters?.length + ? action.parameters.reduce((acc: any, param: { name: any; }) => ({...acc, [param.name]: ''}), {}) + : undefined; + + setSelectedActions(prev => [ + ...prev, + { + id: `${action.name}-${Date.now()}`, + name: action.name, + parameters + } + ]); + }; + + const toggleReaction = (reaction: Reaction) => { + const parameters = reaction.parameters?.length + ? reaction.parameters.reduce((acc: any, param: { name: any; }) => ({...acc, [param.name]: ''}), {}) + : undefined; + + setSelectedReactions(prev => [ + ...prev, + { + id: `${reaction.name}-${Date.now()}`, + name: reaction.name, + parameters + } + ]); + }; + + const areAllParametersFilled = () => { + // Check actions parameters + const actionsComplete = selectedActions.every(action => { + if (!action.parameters) return true; + return Object.values(action.parameters).every(value => value !== ''); + }); + + // Check reactions parameters + const reactionsComplete = selectedReactions.every(reaction => { + if (!reaction.parameters) return true; + return Object.values(reaction.parameters).every(value => value !== ''); + }); + + return actionsComplete && reactionsComplete; + }; + + const handleCreateWorkflow = () => { + const workflow: Workflow = { + name: workflowName, + description: workflowDescription, + actions: selectedActions.map(action => { + const actionDef = about?.server.services + .flatMap((s: { actions: any; }) => s.actions) + .find((a: { name: any; }) => a.name === action.name); + + return { + name: action.name, + description: actionDef?.description || '', + parameters: Object.entries(action.parameters || {}).map(([name, value]) => { + const paramDef = actionDef?.parameters.find((p: { name: string; }) => p.name === name); + return { + name, + type: paramDef?.type || 'string', + value + }; + }) + }; + }), + reactions: selectedReactions.map(reaction => { + // Find the original reaction definition to get description and parameter types + const reactionDef = about?.server.services + .flatMap((s: { reactions: any; }) => s.reactions) + .find((r: { name: any; }) => r.name === reaction.name); + + return { + name: reaction.name, + description: reactionDef?.description || '', + parameters: Object.entries(reaction.parameters || {}).map(([name, value]) => { + const paramDef = reactionDef?.parameters.find((p: { name: string; }) => p.name === name); + return { + name, + type: paramDef?.type || 'string', + value + }; + }) + }; + }) + }; + + console.log('Create Workflow', workflow); + toast.error("API not connected yet"); + }; + + const handleFoldAllActions = () => { + setActiveActionKeys([]); + }; + + const handleUnfoldAllActions = () => { + if (about) { + setActiveActionKeys(about.server.services.map((service: Service) => service.name)); + } + }; + + const handleFoldAllReactions = () => { + setActiveReactionKeys([]); + }; + + const handleUnfoldAllReactions = () => { + if (about) { + setActiveReactionKeys(about.server.services.map((service: Service) => service.name)); + } + }; + + return ( + +
+ + Create Workflow + + + {loading ? ( + + ) : ( + <> + + + + + + setWorkflowName(e.target.value)} + onBlur={() => setWorkflowNameTouched(true)} + aria-required="true" + /> + + + setWorkflowDescription(e.target.value)} + /> + + + + + + + + + + + + + + + {about?.server?.services.map((service: Service) => ( + + ( + toggleAction(action)} + style={{ + cursor: 'pointer', + backgroundColor: selectedActions.some(a => a.name === action.name) + ? '#e6f7ff' + : 'transparent' + }} + > + + {service.name} +
+ {action.description} + + } + /> + + )} + /> + + ))} + + + + + + +
+ {selectedActions.length > 0 && ( + + When: + + {selectedActions.map(action => ( + { + e.stopPropagation(); + setSelectedActions(prev => prev.filter(a => a.id !== action.id)); + }} + > + × + + } + > + + {normalizeName(action.name)} + {action.parameters && Object.entries(action.parameters).map(([key, value]) => { + const paramDef = about?.server.services + .flatMap((s: any) => s.actions) + .find((a: any) => a.name === action.name) + ?.parameters + .find((p: any) => p.name === key); + + return ( + + {paramDef?.type === 'number' ? ( + { + setSelectedActions(prev => prev.map(a => + a.id === action.id + ? {...a, parameters: {...a.parameters, [key]: e.target.value}} + : a + )); + }} + /> + ) : ( + { + setSelectedActions(prev => prev.map(a => + a.id === action.id + ? {...a, parameters: {...a.parameters, [key]: e.target.value}} + : a + )); + }} + /> + )} + + ); + })} + + + ))} + + + )} + + {selectedReactions.length > 0 && ( + + Then: + + {selectedReactions.map(reaction => ( + { + e.stopPropagation(); + setSelectedReactions(prev => prev.filter(r => r.id !== reaction.id)); + }} + > + × + + } + > + + {normalizeName(reaction.name)} + {reaction.parameters && Object.entries(reaction.parameters).map(([key, value]) => { + const paramDef = about?.server.services + .flatMap((s: any) => s.reactions) + .find((r: any) => r.name === reaction.name) + ?.parameters + .find((p: any) => p.name === key); + + return ( + + {paramDef?.type === 'number' ? ( + { + setSelectedReactions(prev => prev.map(r => + r.id === reaction.id + ? {...r, parameters: {...r.parameters, [key]: e.target.value}} + : r + )); + }} + /> + ) : ( + { + setSelectedReactions(prev => prev.map(r => + r.id === reaction.id + ? {...r, parameters: {...r.parameters, [key]: e.target.value}} + : r + )); + }} + /> + )} + + ); + })} + + + ))} + + + )} + + + + + + +
+ + + + + + + + + + + {about?.server?.services.map((service: Service) => ( + + ( + toggleReaction(reaction)} + style={{ + cursor: 'pointer', + backgroundColor: selectedReactions.some(r => r.name === reaction.name) + ? '#e6f7ff' + : 'transparent' + }} + > + + {service.name} +
+ {reaction.description} + + } + /> + + )} + /> + + ))} + + + + + + )} +
+ + ); +}; + +export default CreateWorkflow; diff --git a/client_web/src/Pages/Workflows/CreateWorkflow.utils.ts b/client_web/src/Pages/Workflows/CreateWorkflow.utils.ts new file mode 100644 index 0000000..424b810 --- /dev/null +++ b/client_web/src/Pages/Workflows/CreateWorkflow.utils.ts @@ -0,0 +1,3 @@ +export const normalizeName = (name: string): string => { + return name.replace(/_/g, " ").replace(/\b\w/g, (c: string): string => c.toUpperCase()); +}; diff --git a/client_web/src/Pages/Workflows/WorkflowsTable.tsx b/client_web/src/Pages/Workflows/WorkflowsTable.tsx new file mode 100644 index 0000000..c372afb --- /dev/null +++ b/client_web/src/Pages/Workflows/WorkflowsTable.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import { Row, Typography, Spin, Space } from "antd"; +// @ts-ignore +import Security from "@/Components/Security.tsx"; +// @ts-ignore +import LinkButton from "@/Components/LinkButton.tsx"; + +// @ts-ignore +import { Workflow } from "@/types"; + +const { Title } = Typography; + +const WorkflowTable: React.FC = () => { + const [loading, setLoading] = React.useState(false); + const [_, setWorkflows] = React.useState([]); + + React.useEffect(() => { + setLoading(true); + setWorkflows([]); // TODO: Fetch workflows from the server + setLoading(false); + }, []); + + return ( + +
+ + Create Workflow + + + {loading ? ( + + ) : ( + <> + + + This is where you see all your workflows. + + + + + + + + + )} +
+ + ); +}; + +export default WorkflowTable; diff --git a/client_web/src/components/auth/Buttons/GoogleAuth.tsx b/client_web/src/components/auth/Buttons/GoogleAuth.tsx deleted file mode 100644 index da9b668..0000000 --- a/client_web/src/components/auth/Buttons/GoogleAuth.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Form } from 'antd'; -import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google'; -// @ts-ignore -import { uri } from '@Config/uri'; - -interface GoogleAuthProps { - onSuccess: (response: unknown) => void; - onError: () => void; - buttonText?: string; -} - -const GoogleAuth = ({ onSuccess, onError, buttonText = "signin_with"}: GoogleAuthProps) => { - if (!uri.google.auth.clientId || uri.google.auth.clientId === '') { - return null; - } - - return ( - - - - - - ); -}; - -export default GoogleAuth; diff --git a/client_web/src/types.ts b/client_web/src/types.ts new file mode 100644 index 0000000..c550305 --- /dev/null +++ b/client_web/src/types.ts @@ -0,0 +1,71 @@ +export type Parameter = { + name: string; + description: string; + type: "string" | "number" | "datetime"; +}; + +export type Action = { + name: string; + description: string; + parameters: Parameter[]; +}; + +export type Reaction = { + name: string; + description: string; + parameters: Parameter[]; +}; + +export type Service = { + name: string; + actions: Action[]; + reactions: Reaction[]; +}; + +export type Server = { + current_time: number; + services: Service[]; +}; + +export type Client = { + host: string; +}; + +export type About = { + client: Client; + server: Server; +}; + +/* --------------------------------- */ + +export interface WorkflowParameter { + name: string; + type: "string" | "number" | "datetime"; + value: unknown; +} + +export interface WorkflowDefinition { + name: string; + parameters: WorkflowParameter[]; +} + +export interface WorkflowAction extends WorkflowDefinition { + +} + +export interface WorkflowReaction extends WorkflowDefinition { + +} + +export type Workflow = { + name: string; + description: string; + actions: WorkflowAction[]; + reactions: WorkflowReaction[]; +}; + +export interface WorkflowItem { + id: string; + name: string; + parameters?: Record; +} diff --git a/client_web/tsconfig.json b/client_web/tsconfig.json index 66eae90..3391afc 100644 --- a/client_web/tsconfig.json +++ b/client_web/tsconfig.json @@ -1,5 +1,12 @@ { "compilerOptions": { + "baseUrl": "./", + "paths": { + "@/*": ["src/*"], + "@Config/*": ["src/Config/*"] + }, + "skipLibCheck": true, + "strict": true, "forceConsistentCasingInFileNames": true, "module": "commonjs", "target": "es2015", diff --git a/docs/source/client_web/index.rst b/docs/source/client_web/index.rst index 0f4fcca..e357c70 100644 --- a/docs/source/client_web/index.rst +++ b/docs/source/client_web/index.rst @@ -32,7 +32,8 @@ Contents -------- .. toctree:: - :maxdepth: 2 + :maxdepth: 2 - installation - context + installation + context + workflowCreation diff --git a/docs/source/client_web/workflowCreation.rst b/docs/source/client_web/workflowCreation.rst new file mode 100644 index 0000000..4a32989 --- /dev/null +++ b/docs/source/client_web/workflowCreation.rst @@ -0,0 +1,52 @@ +Create Workflow +=============== + +The "Create Workflow" feature allows users to create custom workflows by selecting actions and reactions from various services. Follow the steps below to create a workflow. + +Steps to Create a Workflow +-------------------------- + +1. **Enter Workflow Name**: + - Provide a name for your workflow in the "Enter workflow name" field. + - This field is required. + +2. **Enter Workflow Description**: + - Optionally, provide a description for your workflow in the "Enter workflow description" field. + +3. **Select Actions**: + - Browse through the available actions listed under "Available Actions". + - Click on an action to add it to your workflow. + - Use the "Fold All" and "Unfold All" buttons to manage the visibility of action categories. + +4. **Select Reactions**: + - Browse through the available reactions listed under "Available Reactions". + - Click on a reaction to add it to your workflow. + - Use the "Fold All" and "Unfold All" buttons to manage the visibility of reaction categories. + +5. **Review Selected Items**: + - The selected actions and reactions will be displayed in the "Selected Items" section. + - You can remove any selected action or reaction by clicking the "×" button next to it. + +6. **Clear Selections**: + - Use the "Clear Actions" button to remove all selected actions. + - Use the "Clear Reactions" button to remove all selected reactions. + +7. **Create Workflow**: + - Click the "Create Workflow" button to create your workflow. + - Ensure that you have provided a workflow name and selected at least one action and one reaction. + - If the workflow creation is successful, a confirmation message will be displayed. + +8. **Cancel**: + - Click the "Cancel" button to discard the workflow creation process and go back to the previous page. + +Accessibility Features +---------------------- + +- The "Create Workflow" page is designed to be accessible with keyboard navigation and screen readers. +- The "Fold All" and "Unfold All" buttons help manage the visibility of action and reaction categories for easier navigation. + +Error Handling +-------------- + +- If the workflow name is not provided, an error message will be displayed indicating that the workflow name is required. +- If the workflow creation fails, an error message will be displayed.