From 15576df6571002f29795f10fec7574762f7e4ee6 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Sun, 19 Nov 2023 00:43:51 +0700 Subject: [PATCH 1/4] Constructing particle background --- frontend/index.html | 3 + frontend/package.json | 1 + frontend/pnpm-lock.yaml | 187 +++++++++--------- frontend/src/App.css | 2 +- frontend/src/PrivateRoute.jsx | 2 +- frontend/src/assets/particles.json | 109 ++++++++++ .../components/authentication/LoginPage.jsx | 33 ++-- 7 files changed, 225 insertions(+), 112 deletions(-) create mode 100644 frontend/src/assets/particles.json diff --git a/frontend/index.html b/frontend/index.html index e04fea6..54f2ddd 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,6 +8,9 @@
+
+ + diff --git a/frontend/package.json b/frontend/package.json index e03bc04..680e700 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,6 +33,7 @@ "framer-motion": "^10.16.4", "gapi-script": "^1.2.0", "jwt-decode": "^4.0.0", + "particles.js": "^2.0.0", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-bootstrap": "^2.9.1", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index acf0447..d86fba2 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -40,13 +40,13 @@ dependencies: version: 6.1.9(@fullcalendar/core@6.1.9) '@mui/icons-material': specifier: ^5.14.16 - version: 5.14.16(@mui/material@5.14.17)(@types/react@18.2.37)(react@18.2.0) + version: 5.14.18(@mui/material@5.14.18)(@types/react@18.2.37)(react@18.2.0) '@mui/material': specifier: ^5.14.17 - version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) + version: 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) '@mui/system': specifier: ^5.14.17 - version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0) + version: 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0) '@react-oauth/google': specifier: ^0.11.1 version: 0.11.1(react-dom@18.2.0)(react@18.2.0) @@ -58,7 +58,7 @@ dependencies: version: 23.1.36 axios: specifier: ^1.6.1 - version: 1.6.1 + version: 1.6.2 bootstrap: specifier: ^5.3.2 version: 5.3.2(@popperjs/core@2.11.8) @@ -67,13 +67,16 @@ dependencies: version: 16.3.1 framer-motion: specifier: ^10.16.4 - version: 10.16.4(react-dom@18.2.0)(react@18.2.0) + version: 10.16.5(react-dom@18.2.0)(react@18.2.0) gapi-script: specifier: ^1.2.0 version: 1.2.0 jwt-decode: specifier: ^4.0.0 version: 4.0.0 + particles.js: + specifier: ^2.0.0 + version: 2.0.0 react: specifier: ^18.2.0 version: 18.2.0 @@ -88,10 +91,10 @@ dependencies: version: 18.2.0(react@18.2.0) react-icons: specifier: ^4.11.0 - version: 4.11.0(react@18.2.0) + version: 4.12.0(react@18.2.0) react-router-dom: specifier: ^6.18.0 - version: 6.18.0(react-dom@18.2.0)(react@18.2.0) + version: 6.19.0(react-dom@18.2.0)(react@18.2.0) devDependencies: '@tailwindcss/typography': @@ -105,7 +108,7 @@ devDependencies: version: 18.2.15 '@vitejs/plugin-react': specifier: ^4.1.1 - version: 4.1.1(vite@4.5.0) + version: 4.2.0(vite@4.5.0) autoprefixer: specifier: ^10.4.16 version: 10.4.16(postcss@8.4.31) @@ -114,16 +117,16 @@ devDependencies: version: 3.9.4 eslint: specifier: ^8.53.0 - version: 8.53.0 + version: 8.54.0 eslint-plugin-react: specifier: ^7.33.2 - version: 7.33.2(eslint@8.53.0) + version: 7.33.2(eslint@8.54.0) eslint-plugin-react-hooks: specifier: ^4.6.0 - version: 4.6.0(eslint@8.53.0) + version: 4.6.0(eslint@8.54.0) eslint-plugin-react-refresh: specifier: ^0.4.4 - version: 0.4.4(eslint@8.53.0) + version: 0.4.4(eslint@8.54.0) postcss: specifier: ^8.4.31 version: 8.4.31 @@ -755,13 +758,13 @@ packages: dev: true optional: true - /@eslint-community/eslint-utils@4.4.0(eslint@8.53.0): + /@eslint-community/eslint-utils@4.4.0(eslint@8.54.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 dependencies: - eslint: 8.53.0 + eslint: 8.54.0 eslint-visitor-keys: 3.4.3 dev: true @@ -778,7 +781,7 @@ packages: debug: 4.3.4 espree: 9.6.1 globals: 13.23.0 - ignore: 5.2.4 + ignore: 5.3.0 import-fresh: 3.3.0 js-yaml: 4.1.0 minimatch: 3.1.2 @@ -787,8 +790,8 @@ packages: - supports-color dev: true - /@eslint/js@8.53.0: - resolution: {integrity: sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==} + /@eslint/js@8.54.0: + resolution: {integrity: sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true @@ -913,8 +916,8 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true - /@mui/base@5.0.0-beta.23(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-9L8SQUGAWtd/Qi7Qem26+oSSgpY7f2iQTuvcz/rsGpyZjSomMMO6lwYeQSA0CpWM7+aN7eGoSY/WV6wxJiIxXw==} + /@mui/base@5.0.0-beta.24(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-bKt2pUADHGQtqWDZ8nvL2Lvg2GNJyd/ZUgZAJoYzRgmnxBL9j36MSlS3+exEdYkikcnvVafcBtD904RypFKb0w==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -926,8 +929,8 @@ packages: dependencies: '@babel/runtime': 7.23.2 '@floating-ui/react-dom': 2.0.4(react-dom@18.2.0)(react@18.2.0) - '@mui/types': 7.2.8(@types/react@18.2.37) - '@mui/utils': 5.14.17(@types/react@18.2.37)(react@18.2.0) + '@mui/types': 7.2.9(@types/react@18.2.37) + '@mui/utils': 5.14.18(@types/react@18.2.37)(react@18.2.0) '@popperjs/core': 2.11.8 '@types/react': 18.2.37 clsx: 2.0.0 @@ -936,12 +939,12 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@mui/core-downloads-tracker@5.14.17: - resolution: {integrity: sha512-eE0uxrpJAEL2ZXkeGLKg8HQDafsiXY+6eNpP4lcv3yIjFfGbU6Hj9/P7Adt8jpU+6JIhmxvILGj2r27pX+zdrQ==} + /@mui/core-downloads-tracker@5.14.18: + resolution: {integrity: sha512-yFpF35fEVDV81nVktu0BE9qn2dD/chs7PsQhlyaV3EnTeZi9RZBuvoEfRym1/jmhJ2tcfeWXiRuHG942mQXJJQ==} dev: false - /@mui/icons-material@5.14.16(@mui/material@5.14.17)(@types/react@18.2.37)(react@18.2.0): - resolution: {integrity: sha512-wmOgslMEGvbHZjFLru8uH5E+pif/ciXAvKNw16q6joK6EWVWU5rDYWFknDaZhCvz8ZE/K8ZnJQ+lMG6GgHzXbg==} + /@mui/icons-material@5.14.18(@mui/material@5.14.18)(@types/react@18.2.37)(react@18.2.0): + resolution: {integrity: sha512-o2z49R1G4SdBaxZjbMmkn+2OdT1bKymLvAYaB6pH59obM1CYv/0vAVm6zO31IqhwtYwXv6A7sLIwCGYTaVkcdg==} engines: {node: '>=12.0.0'} peerDependencies: '@mui/material': ^5.0.0 @@ -952,13 +955,13 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.2 - '@mui/material': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) + '@mui/material': 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.37 react: 18.2.0 dev: false - /@mui/material@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-+y0VeOLWfEA4Z98We/UH6KCo8+f2HLZDK45FY+sJf8kSojLy3VntadKtC/u0itqnXXb1Pr4wKB2tSIBW02zY4Q==} + /@mui/material@5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-y3UiR/JqrkF5xZR0sIKj6y7xwuEiweh9peiN3Zfjy1gXWXhz5wjlaLdoxFfKIEBUFfeQALxr/Y8avlHH+B9lpQ==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -977,11 +980,11 @@ packages: '@babel/runtime': 7.23.2 '@emotion/react': 11.11.1(@types/react@18.2.37)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.37)(react@18.2.0) - '@mui/base': 5.0.0-beta.23(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) - '@mui/core-downloads-tracker': 5.14.17 - '@mui/system': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0) - '@mui/types': 7.2.8(@types/react@18.2.37) - '@mui/utils': 5.14.17(@types/react@18.2.37)(react@18.2.0) + '@mui/base': 5.0.0-beta.24(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) + '@mui/core-downloads-tracker': 5.14.18 + '@mui/system': 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0) + '@mui/types': 7.2.9(@types/react@18.2.37) + '@mui/utils': 5.14.18(@types/react@18.2.37)(react@18.2.0) '@types/react': 18.2.37 '@types/react-transition-group': 4.4.9 clsx: 2.0.0 @@ -993,8 +996,8 @@ packages: react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0) dev: false - /@mui/private-theming@5.14.17(@types/react@18.2.37)(react@18.2.0): - resolution: {integrity: sha512-u4zxsCm9xmQrlhVPug+Ccrtsjv7o2+rehvrgHoh0siSguvVgVQq5O3Hh10+tp/KWQo2JR4/nCEwquSXgITS1+g==} + /@mui/private-theming@5.14.18(@types/react@18.2.37)(react@18.2.0): + resolution: {integrity: sha512-WSgjqRlzfHU+2Rou3HlR2Gqfr4rZRsvFgataYO3qQ0/m6gShJN+lhVEvwEiJ9QYyVzMDvNpXZAcqp8Y2Vl+PAw==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -1004,14 +1007,14 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.2 - '@mui/utils': 5.14.17(@types/react@18.2.37)(react@18.2.0) + '@mui/utils': 5.14.18(@types/react@18.2.37)(react@18.2.0) '@types/react': 18.2.37 prop-types: 15.8.1 react: 18.2.0 dev: false - /@mui/styled-engine@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0): - resolution: {integrity: sha512-AqpVjBEA7wnBvKPW168bNlqB6EN7HxTjLOY7oi275AzD/b1C7V0wqELy6NWoJb2yya5sRf7ENf4iNi3+T5cOgw==} + /@mui/styled-engine@5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0): + resolution: {integrity: sha512-pW8bpmF9uCB5FV2IPk6mfbQCjPI5vGI09NOLhtGXPeph/4xIfC3JdIX0TILU0WcTs3aFQqo6s2+1SFgIB9rCXA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -1032,8 +1035,8 @@ packages: react: 18.2.0 dev: false - /@mui/system@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0): - resolution: {integrity: sha512-Ccz3XlbCqka6DnbHfpL3o3TfOeWQPR+ewvNAgm8gnS9M0yVMmzzmY6z0w/C1eebb+7ZP7IoLUj9vojg/GBaTPg==} + /@mui/system@5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0): + resolution: {integrity: sha512-hSQQdb3KF72X4EN2hMEiv8EYJZSflfdd1TRaGPoR7CIAG347OxCslpBUwWngYobaxgKvq6xTrlIl+diaactVww==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -1051,10 +1054,10 @@ packages: '@babel/runtime': 7.23.2 '@emotion/react': 11.11.1(@types/react@18.2.37)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.37)(react@18.2.0) - '@mui/private-theming': 5.14.17(@types/react@18.2.37)(react@18.2.0) - '@mui/styled-engine': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0) - '@mui/types': 7.2.8(@types/react@18.2.37) - '@mui/utils': 5.14.17(@types/react@18.2.37)(react@18.2.0) + '@mui/private-theming': 5.14.18(@types/react@18.2.37)(react@18.2.0) + '@mui/styled-engine': 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/types': 7.2.9(@types/react@18.2.37) + '@mui/utils': 5.14.18(@types/react@18.2.37)(react@18.2.0) '@types/react': 18.2.37 clsx: 2.0.0 csstype: 3.1.2 @@ -1062,8 +1065,8 @@ packages: react: 18.2.0 dev: false - /@mui/types@7.2.8(@types/react@18.2.37): - resolution: {integrity: sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==} + /@mui/types@7.2.9(@types/react@18.2.37): + resolution: {integrity: sha512-k1lN/PolaRZfNsRdAqXtcR71sTnv3z/VCCGPxU8HfdftDkzi335MdJ6scZxvofMAd/K/9EbzCZTFBmlNpQVdCg==} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -1073,8 +1076,8 @@ packages: '@types/react': 18.2.37 dev: false - /@mui/utils@5.14.17(@types/react@18.2.37)(react@18.2.0): - resolution: {integrity: sha512-yxnWgSS4J6DMFPw2Dof85yBkG02VTbEiqsikymMsnZnXDurtVGTIhlNuV24GTmFTuJMzEyTTU9UF+O7zaL8LEQ==} + /@mui/utils@5.14.18(@types/react@18.2.37)(react@18.2.0): + resolution: {integrity: sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -1136,8 +1139,8 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@remix-run/router@1.11.0: - resolution: {integrity: sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==} + /@remix-run/router@1.12.0: + resolution: {integrity: sha512-2hXv036Bux90e1GXTWSMfNzfDDK8LA8JYEWfyHxzvwdp6GyoWEovKc9cotb3KCKmkdwsIBuFGX7ScTWyiHv7Eg==} engines: {node: '>=14.0.0'} dev: false @@ -1374,11 +1377,11 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-react@4.1.1(vite@4.5.0): - resolution: {integrity: sha512-Jie2HERK+uh27e+ORXXwEP5h0Y2lS9T2PRGbfebiHGlwzDO0dEnd2aNtOR/qjBlPb1YgxwAONeblL1xqLikLag==} + /@vitejs/plugin-react@4.2.0(vite@4.5.0): + resolution: {integrity: sha512-+MHTH/e6H12kRp5HUkzOGqPMksezRMmW+TNzlh/QXfI8rRf6l2Z2yH/v12no1UvTwhZgEDMuQ7g7rrfMseU6FQ==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: - vite: ^4.2.0 + vite: ^4.2.0 || ^5.0.0 dependencies: '@babel/core': 7.23.3 '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.3) @@ -1530,7 +1533,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.22.1 - caniuse-lite: 1.0.30001561 + caniuse-lite: 1.0.30001563 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -1543,8 +1546,8 @@ packages: engines: {node: '>= 0.4'} dev: true - /axios@1.6.1: - resolution: {integrity: sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==} + /axios@1.6.2: + resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==} dependencies: follow-redirects: 1.15.3 form-data: 4.0.0 @@ -1598,8 +1601,8 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001561 - electron-to-chromium: 1.4.581 + caniuse-lite: 1.0.30001563 + electron-to-chromium: 1.4.588 node-releases: 2.0.13 update-browserslist-db: 1.0.13(browserslist@4.22.1) dev: true @@ -1621,8 +1624,8 @@ packages: engines: {node: '>= 6'} dev: true - /caniuse-lite@1.0.30001561: - resolution: {integrity: sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==} + /caniuse-lite@1.0.30001563: + resolution: {integrity: sha512-na2WUmOxnwIZtwnFI2CZ/3er0wdNzU7hN+cPYz/z2ajHThnkWjNBOpEPP4n+4r2WPM847JaMotaJE3bnfzjyKw==} dev: true /chalk@2.4.2: @@ -1845,8 +1848,8 @@ packages: engines: {node: '>=12'} dev: false - /electron-to-chromium@1.4.581: - resolution: {integrity: sha512-6uhqWBIapTJUxgPTCHH9sqdbxIMPt7oXl0VcAL1kOtlU6aECdcMncCrX5Z7sHQ/invtrC9jUQUef7+HhO8vVFw==} + /electron-to-chromium@1.4.588: + resolution: {integrity: sha512-soytjxwbgcCu7nh5Pf4S2/4wa6UIu+A3p03U2yVr53qGxi1/VTR3ENI+p50v+UxqqZAfl48j3z55ud7VHIOr9w==} dev: true /error-ex@1.3.2: @@ -1986,24 +1989,24 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} - /eslint-plugin-react-hooks@4.6.0(eslint@8.53.0): + /eslint-plugin-react-hooks@4.6.0(eslint@8.54.0): resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} engines: {node: '>=10'} peerDependencies: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 dependencies: - eslint: 8.53.0 + eslint: 8.54.0 dev: true - /eslint-plugin-react-refresh@0.4.4(eslint@8.53.0): + /eslint-plugin-react-refresh@0.4.4(eslint@8.54.0): resolution: {integrity: sha512-eD83+65e8YPVg6603Om2iCIwcQJf/y7++MWm4tACtEswFLYMwxwVWAfwN+e19f5Ad/FOyyNg9Dfi5lXhH3Y3rA==} peerDependencies: eslint: '>=7' dependencies: - eslint: 8.53.0 + eslint: 8.54.0 dev: true - /eslint-plugin-react@7.33.2(eslint@8.53.0): + /eslint-plugin-react@7.33.2(eslint@8.54.0): resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==} engines: {node: '>=4'} peerDependencies: @@ -2014,7 +2017,7 @@ packages: array.prototype.tosorted: 1.1.2 doctrine: 2.1.0 es-iterator-helpers: 1.0.15 - eslint: 8.53.0 + eslint: 8.54.0 estraverse: 5.3.0 jsx-ast-utils: 3.3.5 minimatch: 3.1.2 @@ -2041,15 +2044,15 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint@8.53.0: - resolution: {integrity: sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==} + /eslint@8.54.0: + resolution: {integrity: sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0) '@eslint-community/regexpp': 4.10.0 '@eslint/eslintrc': 2.1.3 - '@eslint/js': 8.53.0 + '@eslint/js': 8.54.0 '@humanwhocodes/config-array': 0.11.13 '@humanwhocodes/module-importer': 1.0.1 '@nodelib/fs.walk': 1.2.8 @@ -2071,7 +2074,7 @@ packages: glob-parent: 6.0.2 globals: 13.23.0 graphemer: 1.4.0 - ignore: 5.2.4 + ignore: 5.3.0 imurmurhash: 0.1.4 is-glob: 4.0.3 is-path-inside: 3.0.3 @@ -2158,7 +2161,7 @@ packages: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} dependencies: - flat-cache: 3.1.1 + flat-cache: 3.2.0 dev: true /fill-range@7.0.1: @@ -2180,9 +2183,9 @@ packages: path-exists: 4.0.0 dev: true - /flat-cache@3.1.1: - resolution: {integrity: sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==} - engines: {node: '>=12.0.0'} + /flat-cache@3.2.0: + resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==} + engines: {node: ^10.12.0 || >=12.0.0} dependencies: flatted: 3.2.9 keyv: 4.5.4 @@ -2222,8 +2225,8 @@ packages: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true - /framer-motion@10.16.4(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==} + /framer-motion@10.16.5(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==} peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 @@ -2408,8 +2411,8 @@ packages: react-is: 16.13.1 dev: false - /ignore@5.2.4: - resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==} + /ignore@5.3.0: + resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==} engines: {node: '>= 4'} dev: true @@ -2925,6 +2928,10 @@ packages: lines-and-columns: 1.2.4 dev: false + /particles.js@2.0.0: + resolution: {integrity: sha512-8e0JIqkRbMMPlFBnF9f+92hX1s07jdkd3tqB8uHE9L+cwGGjIYjQM7QLgt0FQ5MZp6SFFYYDm/Y48pqK3ZvJOQ==} + dev: false + /path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -3144,8 +3151,8 @@ packages: scheduler: 0.23.0 dev: false - /react-icons@4.11.0(react@18.2.0): - resolution: {integrity: sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==} + /react-icons@4.12.0(react@18.2.0): + resolution: {integrity: sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==} peerDependencies: react: '*' dependencies: @@ -3194,26 +3201,26 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react-router-dom@6.18.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==} + /react-router-dom@6.19.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-N6dWlcgL2w0U5HZUUqU2wlmOrSb3ighJmtQ438SWbhB1yuLTXQ8yyTBMK3BSvVjp7gBtKurT554nCtMOgxCZmQ==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.11.0 + '@remix-run/router': 1.12.0 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-router: 6.18.0(react@18.2.0) + react-router: 6.19.0(react@18.2.0) dev: false - /react-router@6.18.0(react@18.2.0): - resolution: {integrity: sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==} + /react-router@6.19.0(react@18.2.0): + resolution: {integrity: sha512-0W63PKCZ7+OuQd7Tm+RbkI8kCLmn4GPjDbX61tWljPxWgqTKlEpeQUwPkT1DRjYhF8KSihK0hQpmhU4uxVMcdw==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' dependencies: - '@remix-run/router': 1.11.0 + '@remix-run/router': 1.12.0 react: 18.2.0 dev: false diff --git a/frontend/src/App.css b/frontend/src/App.css index 48931c9..eaac616 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -43,4 +43,4 @@ to { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/frontend/src/PrivateRoute.jsx b/frontend/src/PrivateRoute.jsx index d72491a..defeaea 100644 --- a/frontend/src/PrivateRoute.jsx +++ b/frontend/src/PrivateRoute.jsx @@ -8,4 +8,4 @@ const PrivateRoute = () => { return auth ? : ; }; -export default PrivateRoute; +export default PrivateRoute; \ No newline at end of file diff --git a/frontend/src/assets/particles.json b/frontend/src/assets/particles.json new file mode 100644 index 0000000..b5e677d --- /dev/null +++ b/frontend/src/assets/particles.json @@ -0,0 +1,109 @@ +{ + "particles": { + "number": { + "value": 50, + "density": { + "enable": true, + "value_area": 800 + } + }, + "color": { + "value": "#000" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000000" + }, + "polygon": { + "nb_sides": 5 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.5, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 10, + "random": true, + "anim": { + "enable": false, + "speed": 80, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 150, + "color": "#000", + "opacity": 0.4, + "width": 2 + }, + "move": { + "enable": true, + "speed": 6, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": true, + "mode": "repulse" + }, + "onclick": { + "enable": false, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 150, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 800, + "size": 80, + "duration": 2, + "opacity": 0.8, + "speed": 3 + }, + "repulse": { + "distance": 400, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + } + } \ No newline at end of file diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index d1eedf9..1528e26 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -1,15 +1,12 @@ import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useGoogleLogin } from "@react-oauth/google"; - import refreshAccessToken from "./refreshAcesstoken"; import axiosapi from "../../api/AuthenticationApi"; - import { useAuth } from "../../hooks/authentication/IsAuthenticated"; function LoginPage() { const Navigate = useNavigate(); - const { isAuthenticated, setIsAuthenticated } = useAuth(); useEffect(() => { @@ -74,15 +71,23 @@ function LoginPage() { }, onError: errorResponse => console.log(errorResponse), }); + useEffect(() => { + // Load particles.js configuration + particlesJS.load('particles-js', 'src/assets/particles.json', function() { + console.log('callback - particles.js config loaded'); + }); + }, []); + return ( -
+
+
{/* Left Section (Login Box) */}

Log in to your account

{/* Email Input */} -
+
@@ -112,12 +118,12 @@ function LoginPage() { />
{/* Login Button */} -
OR
{/* Login with Google Button */} - {/* Forgot Password Link */} @@ -129,19 +135,6 @@ function LoginPage() {
- {/* Right Section (Blurred Image Background) */} -
-
- -
- Text Overlay -
-
); } From e25a6b6d2490f9754ea6ae862fbbd0bed00b9407 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Sun, 19 Nov 2023 10:33:54 +0700 Subject: [PATCH 2/4] Completed particle background --- frontend/index.html | 2 - frontend/package.json | 5 +- frontend/pnpm-lock.yaml | 327 +++++++++++++++++- frontend/src/assets/particles.json | 109 ------ .../components/authentication/LoginPage.jsx | 128 +++++-- 5 files changed, 427 insertions(+), 144 deletions(-) delete mode 100644 frontend/src/assets/particles.json diff --git a/frontend/index.html b/frontend/index.html index 54f2ddd..ced3ebb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,9 +8,7 @@
-
- diff --git a/frontend/package.json b/frontend/package.json index 680e700..3001ce7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,13 +33,14 @@ "framer-motion": "^10.16.4", "gapi-script": "^1.2.0", "jwt-decode": "^4.0.0", - "particles.js": "^2.0.0", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-icons": "^4.11.0", - "react-router-dom": "^6.18.0" + "react-router-dom": "^6.18.0", + "react-tsparticles": "^2.12.2", + "tsparticles": "^2.12.0" }, "devDependencies": { "@tailwindcss/typography": "^0.5.10", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index d86fba2..b18f1f5 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -74,9 +74,6 @@ dependencies: jwt-decode: specifier: ^4.0.0 version: 4.0.0 - particles.js: - specifier: ^2.0.0 - version: 2.0.0 react: specifier: ^18.2.0 version: 18.2.0 @@ -95,6 +92,12 @@ dependencies: react-router-dom: specifier: ^6.18.0 version: 6.19.0(react-dom@18.2.0)(react@18.2.0) + react-tsparticles: + specifier: ^2.12.2 + version: 2.12.2(react@18.2.0) + tsparticles: + specifier: ^2.12.0 + version: 2.12.0 devDependencies: '@tailwindcss/typography': @@ -2928,10 +2931,6 @@ packages: lines-and-columns: 1.2.4 dev: false - /particles.js@2.0.0: - resolution: {integrity: sha512-8e0JIqkRbMMPlFBnF9f+92hX1s07jdkd3tqB8uHE9L+cwGGjIYjQM7QLgt0FQ5MZp6SFFYYDm/Y48pqK3ZvJOQ==} - dev: false - /path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -3238,6 +3237,16 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-tsparticles@2.12.2(react@18.2.0): + resolution: {integrity: sha512-/nrEbyL8UROXKIMXe+f+LZN2ckvkwV2Qa+GGe/H26oEIc+wq/ybSG9REDwQiSt2OaDQGu0MwmA4BKmkL6wAWcA==} + requiresBuild: true + peerDependencies: + react: '>=16' + dependencies: + react: 18.2.0 + tsparticles-engine: 2.12.0 + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -3571,6 +3580,310 @@ packages: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} dev: false + /tsparticles-basic@2.12.0: + resolution: {integrity: sha512-pN6FBpL0UsIUXjYbiui5+IVsbIItbQGOlwyGV55g6IYJBgdTNXgFX0HRYZGE9ZZ9psEXqzqwLM37zvWnb5AG9g==} + dependencies: + tsparticles-engine: 2.12.0 + tsparticles-move-base: 2.12.0 + tsparticles-shape-circle: 2.12.0 + tsparticles-updater-color: 2.12.0 + tsparticles-updater-opacity: 2.12.0 + tsparticles-updater-out-modes: 2.12.0 + tsparticles-updater-size: 2.12.0 + dev: false + + /tsparticles-engine@2.12.0: + resolution: {integrity: sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==} + requiresBuild: true + dev: false + + /tsparticles-interaction-external-attract@2.12.0: + resolution: {integrity: sha512-0roC6D1QkFqMVomcMlTaBrNVjVOpyNzxIUsjMfshk2wUZDAvTNTuWQdUpmsLS4EeSTDN3rzlGNnIuuUQqyBU5w==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-bounce@2.12.0: + resolution: {integrity: sha512-MMcqKLnQMJ30hubORtdq+4QMldQ3+gJu0bBYsQr9BsThsh8/V0xHc1iokZobqHYVP5tV77mbFBD8Z7iSCf0TMQ==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-bubble@2.12.0: + resolution: {integrity: sha512-5kImCSCZlLNccXOHPIi2Yn+rQWTX3sEa/xCHwXW19uHxtILVJlnAweayc8+Zgmb7mo0DscBtWVFXHPxrVPFDUA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-connect@2.12.0: + resolution: {integrity: sha512-ymzmFPXz6AaA1LAOL5Ihuy7YSQEW8MzuSJzbd0ES13U8XjiU3HlFqlH6WGT1KvXNw6WYoqrZt0T3fKxBW3/C3A==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-grab@2.12.0: + resolution: {integrity: sha512-iQF/A947hSfDNqAjr49PRjyQaeRkYgTYpfNmAf+EfME8RsbapeP/BSyF6mTy0UAFC0hK2A2Hwgw72eT78yhXeQ==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-pause@2.12.0: + resolution: {integrity: sha512-4SUikNpsFROHnRqniL+uX2E388YTtfRWqqqZxRhY0BrijH4z04Aii3YqaGhJxfrwDKkTQlIoM2GbFT552QZWjw==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-push@2.12.0: + resolution: {integrity: sha512-kqs3V0dgDKgMoeqbdg+cKH2F+DTrvfCMrPF1MCCUpBCqBiH+TRQpJNNC86EZYHfNUeeLuIM3ttWwIkk2hllR/Q==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-remove@2.12.0: + resolution: {integrity: sha512-2eNIrv4m1WB2VfSVj46V2L/J9hNEZnMgFc+A+qmy66C8KzDN1G8aJUAf1inW8JVc0lmo5+WKhzex4X0ZSMghBg==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-repulse@2.12.0: + resolution: {integrity: sha512-rSzdnmgljeBCj5FPp4AtGxOG9TmTsK3AjQW0vlyd1aG2O5kSqFjR+FuT7rfdSk9LEJGH5SjPFE6cwbuy51uEWA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-slow@2.12.0: + resolution: {integrity: sha512-2IKdMC3om7DttqyroMtO//xNdF0NvJL/Lx7LDo08VpfTgJJozxU+JAUT8XVT7urxhaDzbxSSIROc79epESROtA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-external-trail@2.12.0: + resolution: {integrity: sha512-LKSapU5sPTaZqYx+y5VJClj0prlV7bswplSFQaIW1raXkvsk45qir2AVcpP5JUhZSFSG+SwsHr+qCgXhNeN1KA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-particles-attract@2.12.0: + resolution: {integrity: sha512-Hl8qwuwF9aLq3FOkAW+Zomu7Gb8IKs6Y3tFQUQScDmrrSCaeRt2EGklAiwgxwgntmqzL7hbMWNx06CHHcUQKdQ==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-particles-collisions@2.12.0: + resolution: {integrity: sha512-Se9nPWlyPxdsnHgR6ap4YUImAu3W5MeGKJaQMiQpm1vW8lSMOUejI1n1ioIaQth9weKGKnD9rvcNn76sFlzGBA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-interaction-particles-links@2.12.0: + resolution: {integrity: sha512-e7I8gRs4rmKfcsHONXMkJnymRWpxHmeaJIo4g2NaDRjIgeb2AcJSWKWZvrsoLnm7zvaf/cMQlbN6vQwCixYq3A==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-move-base@2.12.0: + resolution: {integrity: sha512-oSogCDougIImq+iRtIFJD0YFArlorSi8IW3HD2gO3USkH+aNn3ZqZNTqp321uB08K34HpS263DTbhLHa/D6BWw==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-move-parallax@2.12.0: + resolution: {integrity: sha512-58CYXaX8Ih5rNtYhpnH0YwU4Ks7gVZMREGUJtmjhuYN+OFr9FVdF3oDIJ9N6gY5a5AnAKz8f5j5qpucoPRcYrQ==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-particles.js@2.12.0: + resolution: {integrity: sha512-LyOuvYdhbUScmA4iDgV3LxA0HzY1DnOwQUy3NrPYO393S2YwdDjdwMod6Btq7EBUjg9FVIh+sZRizgV5elV2dg==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-plugin-absorbers@2.12.0: + resolution: {integrity: sha512-2CkPreaXHrE5VzFlxUKLeRB5t66ff+3jwLJoDFgQcp+R4HOEITo0bBZv2DagGP0QZdYN4grpnQzRBVdB4d1rWA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-plugin-easing-quad@2.12.0: + resolution: {integrity: sha512-2mNqez5pydDewMIUWaUhY5cNQ80IUOYiujwG6qx9spTq1D6EEPLbRNAEL8/ecPdn2j1Um3iWSx6lo340rPkv4Q==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-plugin-emitters@2.12.0: + resolution: {integrity: sha512-fbskYnaXWXivBh9KFReVCfqHdhbNQSK2T+fq2qcGEWpwtDdgujcaS1k2Q/xjZnWNMfVesik4IrqspcL51gNdSA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-shape-circle@2.12.0: + resolution: {integrity: sha512-L6OngbAlbadG7b783x16ns3+SZ7i0SSB66M8xGa5/k+YcY7zm8zG0uPt1Hd+xQDR2aNA3RngVM10O23/Lwk65Q==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-shape-image@2.12.0: + resolution: {integrity: sha512-iCkSdUVa40DxhkkYjYuYHr9MJGVw+QnQuN5UC+e/yBgJQY+1tQL8UH0+YU/h0GHTzh5Sm+y+g51gOFxHt1dj7Q==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-shape-line@2.12.0: + resolution: {integrity: sha512-RcpKmmpKlk+R8mM5wA2v64Lv1jvXtU4SrBDv3vbdRodKbKaWGGzymzav1Q0hYyDyUZgplEK/a5ZwrfrOwmgYGA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-shape-polygon@2.12.0: + resolution: {integrity: sha512-5YEy7HVMt1Obxd/jnlsjajchAlYMr9eRZWN+lSjcFSH6Ibra7h59YuJVnwxOxAobpijGxsNiBX0PuGQnB47pmA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-shape-square@2.12.0: + resolution: {integrity: sha512-33vfajHqmlODKaUzyPI/aVhnAOT09V7nfEPNl8DD0cfiNikEuPkbFqgJezJuE55ebtVo7BZPDA9o7GYbWxQNuw==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-shape-star@2.12.0: + resolution: {integrity: sha512-4sfG/BBqm2qBnPLASl2L5aBfCx86cmZLXeh49Un+TIR1F5Qh4XUFsahgVOG0vkZQa+rOsZPEH04xY5feWmj90g==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-shape-text@2.12.0: + resolution: {integrity: sha512-v2/FCA+hyTbDqp2ymFOe97h/NFb2eezECMrdirHWew3E3qlvj9S/xBibjbpZva2gnXcasBwxn0+LxKbgGdP0rA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-slim@2.12.0: + resolution: {integrity: sha512-27w9aGAAAPKHvP4LHzWFpyqu7wKyulayyaZ/L6Tuuejy4KP4BBEB4rY5GG91yvAPsLtr6rwWAn3yS+uxnBDpkA==} + dependencies: + tsparticles-basic: 2.12.0 + tsparticles-engine: 2.12.0 + tsparticles-interaction-external-attract: 2.12.0 + tsparticles-interaction-external-bounce: 2.12.0 + tsparticles-interaction-external-bubble: 2.12.0 + tsparticles-interaction-external-connect: 2.12.0 + tsparticles-interaction-external-grab: 2.12.0 + tsparticles-interaction-external-pause: 2.12.0 + tsparticles-interaction-external-push: 2.12.0 + tsparticles-interaction-external-remove: 2.12.0 + tsparticles-interaction-external-repulse: 2.12.0 + tsparticles-interaction-external-slow: 2.12.0 + tsparticles-interaction-particles-attract: 2.12.0 + tsparticles-interaction-particles-collisions: 2.12.0 + tsparticles-interaction-particles-links: 2.12.0 + tsparticles-move-base: 2.12.0 + tsparticles-move-parallax: 2.12.0 + tsparticles-particles.js: 2.12.0 + tsparticles-plugin-easing-quad: 2.12.0 + tsparticles-shape-circle: 2.12.0 + tsparticles-shape-image: 2.12.0 + tsparticles-shape-line: 2.12.0 + tsparticles-shape-polygon: 2.12.0 + tsparticles-shape-square: 2.12.0 + tsparticles-shape-star: 2.12.0 + tsparticles-shape-text: 2.12.0 + tsparticles-updater-color: 2.12.0 + tsparticles-updater-life: 2.12.0 + tsparticles-updater-opacity: 2.12.0 + tsparticles-updater-out-modes: 2.12.0 + tsparticles-updater-rotate: 2.12.0 + tsparticles-updater-size: 2.12.0 + tsparticles-updater-stroke-color: 2.12.0 + dev: false + + /tsparticles-updater-color@2.12.0: + resolution: {integrity: sha512-KcG3a8zd0f8CTiOrylXGChBrjhKcchvDJjx9sp5qpwQK61JlNojNCU35xoaSk2eEHeOvFjh0o3CXWUmYPUcBTQ==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-destroy@2.12.0: + resolution: {integrity: sha512-6NN3dJhxACvzbIGL4dADbYQSZJmdHfwjujj1uvnxdMbb2x8C/AZzGxiN33smo4jkrZ5VLEWZWCJPJ8aOKjQ2Sg==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-life@2.12.0: + resolution: {integrity: sha512-J7RWGHAZkowBHpcLpmjKsxwnZZJ94oGEL2w+wvW1/+ZLmAiFFF6UgU0rHMC5CbHJT4IPx9cbkYMEHsBkcRJ0Bw==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-opacity@2.12.0: + resolution: {integrity: sha512-YUjMsgHdaYi4HN89LLogboYcCi1o9VGo21upoqxq19yRy0hRCtx2NhH22iHF/i5WrX6jqshN0iuiiNefC53CsA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-out-modes@2.12.0: + resolution: {integrity: sha512-owBp4Gk0JNlSrmp12XVEeBroDhLZU+Uq3szbWlHGSfcR88W4c/0bt0FiH5bHUqORIkw+m8O56hCjbqwj69kpOQ==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-roll@2.12.0: + resolution: {integrity: sha512-dxoxY5jP4C9x15BxlUv5/Q8OjUPBiE09ToXRyBxea9aEJ7/iMw6odvi1HuT0H1vTIfV7o1MYawjeCbMycvODKQ==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-rotate@2.12.0: + resolution: {integrity: sha512-waOFlGFmEZOzsQg4C4VSejNVXGf4dMf3fsnQrEROASGf1FCd8B6WcZau7JtXSTFw0OUGuk8UGz36ETWN72DkCw==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-size@2.12.0: + resolution: {integrity: sha512-B0yRdEDd/qZXCGDL/ussHfx5YJ9UhTqNvmS5X2rR2hiZhBAE2fmsXLeWkdtF2QusjPeEqFDxrkGiLOsh6poqRA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-stroke-color@2.12.0: + resolution: {integrity: sha512-MPou1ZDxsuVq6SN1fbX+aI5yrs6FyP2iPCqqttpNbWyL+R6fik1rL0ab/x02B57liDXqGKYomIbBQVP3zUTW1A==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-tilt@2.12.0: + resolution: {integrity: sha512-HDEFLXazE+Zw+kkKKAiv0Fs9D9sRP61DoCR6jZ36ipea6OBgY7V1Tifz2TSR1zoQkk57ER9+EOQbkSQO+YIPGQ==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-twinkle@2.12.0: + resolution: {integrity: sha512-JhK/DO4kTx7IFwMBP2EQY9hBaVVvFnGBvX21SQWcjkymmN1hZ+NdcgUtR9jr4jUiiSNdSl7INaBuGloVjWvOgA==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles-updater-wobble@2.12.0: + resolution: {integrity: sha512-85FIRl95ipD3jfIsQdDzcUC5PRMWIrCYqBq69nIy9P8rsNzygn+JK2n+P1VQZowWsZvk0mYjqb9OVQB21Lhf6Q==} + dependencies: + tsparticles-engine: 2.12.0 + dev: false + + /tsparticles@2.12.0: + resolution: {integrity: sha512-aw77llkaEhcKYUHuRlggA6SB1Dpa814/nrStp9USGiDo5QwE1Ckq30QAgdXU6GRvnblUFsiO750ZuLQs5Y0tVw==} + dependencies: + tsparticles-engine: 2.12.0 + tsparticles-interaction-external-trail: 2.12.0 + tsparticles-plugin-absorbers: 2.12.0 + tsparticles-plugin-emitters: 2.12.0 + tsparticles-slim: 2.12.0 + tsparticles-updater-destroy: 2.12.0 + tsparticles-updater-roll: 2.12.0 + tsparticles-updater-tilt: 2.12.0 + tsparticles-updater-twinkle: 2.12.0 + tsparticles-updater-wobble: 2.12.0 + dev: false + /type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} diff --git a/frontend/src/assets/particles.json b/frontend/src/assets/particles.json deleted file mode 100644 index b5e677d..0000000 --- a/frontend/src/assets/particles.json +++ /dev/null @@ -1,109 +0,0 @@ -{ - "particles": { - "number": { - "value": 50, - "density": { - "enable": true, - "value_area": 800 - } - }, - "color": { - "value": "#000" - }, - "shape": { - "type": "circle", - "stroke": { - "width": 0, - "color": "#000000" - }, - "polygon": { - "nb_sides": 5 - }, - "image": { - "src": "img/github.svg", - "width": 100, - "height": 100 - } - }, - "opacity": { - "value": 0.5, - "random": false, - "anim": { - "enable": false, - "speed": 1, - "opacity_min": 0.1, - "sync": false - } - }, - "size": { - "value": 10, - "random": true, - "anim": { - "enable": false, - "speed": 80, - "size_min": 0.1, - "sync": false - } - }, - "line_linked": { - "enable": true, - "distance": 150, - "color": "#000", - "opacity": 0.4, - "width": 2 - }, - "move": { - "enable": true, - "speed": 6, - "direction": "none", - "random": false, - "straight": false, - "out_mode": "out", - "bounce": false, - "attract": { - "enable": false, - "rotateX": 600, - "rotateY": 1200 - } - } - }, - "interactivity": { - "detect_on": "canvas", - "events": { - "onhover": { - "enable": true, - "mode": "repulse" - }, - "onclick": { - "enable": false, - "mode": "push" - }, - "resize": true - }, - "modes": { - "grab": { - "distance": 150, - "line_linked": { - "opacity": 1 - } - }, - "bubble": { - "distance": 800, - "size": 80, - "duration": 2, - "opacity": 0.8, - "speed": 3 - }, - "repulse": { - "distance": 400, - "duration": 0.4 - }, - "push": { - "particles_nb": 4 - }, - "remove": { - "particles_nb": 2 - } - } - } - } \ No newline at end of file diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index 1528e26..7626ef2 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -1,9 +1,12 @@ import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useGoogleLogin } from "@react-oauth/google"; +import { useCallback } from "react"; +import Particles from "react-tsparticles"; +import { loadFull } from "tsparticles"; import refreshAccessToken from "./refreshAcesstoken"; import axiosapi from "../../api/AuthenticationApi"; -import { useAuth } from "../../hooks/authentication/IsAuthenticated"; +import { useAuth } from "../../hooks/authentication/IsAuthenticated"; function LoginPage() { const Navigate = useNavigate(); @@ -18,15 +21,14 @@ function LoginPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - const handleEmailChange = event => { + const handleEmailChange = (event) => { setEmail(event.target.value); }; - const handlePasswordChange = event => { + const handlePasswordChange = (event) => { setPassword(event.target.value); }; - - const handleSubmit = event => { + const handleSubmit = (event) => { event.preventDefault(); // Send a POST request to the authentication API @@ -35,15 +37,16 @@ function LoginPage() { email: email, password: password, }) - .then(res => { + .then((res) => { // On successful login, store tokens and set the authorization header localStorage.setItem("access_token", res.data.access); localStorage.setItem("refresh_token", res.data.refresh); - axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access; + axiosapi.axiosInstance.defaults.headers["Authorization"] = + "Bearer " + res.data.access; setIsAuthenticated(true); Navigate("/"); }) - .catch(err => { + .catch((err) => { console.log("Login failed"); console.log(err); setIsAuthenticated(false); @@ -53,7 +56,7 @@ function LoginPage() { const googleLoginImplicit = useGoogleLogin({ flow: "auth-code", redirect_uri: "postmessage", - onSuccess: async response => { + onSuccess: async (response) => { try { const loginResponse = await axiosapi.googleLogin(response.code); if (loginResponse && loginResponse.data) { @@ -69,23 +72,99 @@ function LoginPage() { setIsAuthenticated(false); } }, - onError: errorResponse => console.log(errorResponse), + onError: (errorResponse) => console.log(errorResponse), }); - useEffect(() => { - // Load particles.js configuration - particlesJS.load('particles-js', 'src/assets/particles.json', function() { - console.log('callback - particles.js config loaded'); - }); + const particlesInit = useCallback(async (engine) => { + console.log(engine); + await loadFull(engine); }, []); + const particlesLoaded = useCallback(async (container) => { + console.log(container); + }, []); return ( -
-
- {/* Left Section (Login Box) */} -
-
-

Log in to your account

+
+ {/* Particles Container */} +
+ +
+ {/* Login Box */} +
+
+

Login

{/* Email Input */}
@@ -123,7 +201,10 @@ function LoginPage() {
OR
{/* Login with Google Button */} - {/* Forgot Password Link */} @@ -134,7 +215,6 @@ function LoginPage() {
-
); } From 9e43ca4ce3b8a03129ae35a9026d06c84d00f8b6 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Sun, 19 Nov 2023 10:44:12 +0700 Subject: [PATCH 3/4] Completed login page improvement. --- frontend/src/components/authentication/LoginPage.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index 7626ef2..f946686 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -124,7 +124,7 @@ function LoginPage() { value: "#008000", }, links: { - color: "#ffffff", + color: "#00ff00", distance: 150, enable: true, opacity: 0.1, @@ -164,7 +164,7 @@ function LoginPage() { {/* Login Box */}
-

Login

+

Login

{/* Email Input */}
{/* Login Button */} -
OR
From 5aa46a8553f3667a868bf53954970f917de8fdf8 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Sun, 19 Nov 2023 10:45:03 +0700 Subject: [PATCH 4/4] Completed login page improvement. --- frontend/src/components/authentication/LoginPage.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index f946686..12ad18e 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -74,6 +74,9 @@ function LoginPage() { }, onError: (errorResponse) => console.log(errorResponse), }); + { + /* Particles Loader*/ + } const particlesInit = useCallback(async (engine) => { console.log(engine); await loadFull(engine);