diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5952c04..4f10cf2 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,11 @@ "name": "frontend", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.3.0-beta3", + "@fortawesome/free-brands-svg-icons": "^6.0.0-beta3", + "@fortawesome/free-regular-svg-icons": "^6.0.0-beta3", + "@fortawesome/free-solid-svg-icons": "^6.0.0-beta3", + "@fortawesome/react-fontawesome": "^0.1.16", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", @@ -16,10 +21,15 @@ "@types/react": "^17.0.38", "@types/react-dom": "^17.0.11", "@types/react-router-dom": "^5.3.2", + "a17t": "^0.10.1", + "autoprefixer": "^10.4.2", + "fontawesome.macro": "^1.1.0", + "postcss": "^8.4.5", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", + "tailwindcss": "^3.0.12", "typescript": "^4.5.4", "web-vitals": "^2.1.2" } @@ -1909,6 +1919,75 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "0.3.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0-beta3.tgz", + "integrity": "sha512-OT7fRVwAgQPOivlNP2gYcCe2uzyf+r6vSv/TgliTKnOiGVNL5O7LYh8nLucY0gbnhC6OygaXnA8+hY899FVooQ==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "1.3.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0-beta3.tgz", + "integrity": "sha512-LPK7WR5R+7xOhuDZIlqR8rqUyA87mj5OLQwaSO65DolZLiFrYPZwQc/dCfWP3Sa7LwULFJOE+FPqO9Iq/oiQ6Q==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.3.0-beta3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.0.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.0.0-beta3.tgz", + "integrity": "sha512-eE4nY46IMDSdzUUvEnza4gxA2OS7TpDMRVF9UNhdD43WIAe0FpRcXKlLvUZNtpA16vwF81z73jXBq8QTp6jsTg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.3.0-beta3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.0.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.0.0-beta3.tgz", + "integrity": "sha512-4Nyi3FGB/t6c7WP9/0G6pk/mSi2Yc+NRMyI+ewgNjLsSDYaSErocJ27oW6tuglxDLSNXTRaa8sK5DYMaY5Fabg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.3.0-beta3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.0.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.0.0-beta3.tgz", + "integrity": "sha512-7+62D0MK5fy/mzmTNx0P4QzHWzKE4oXdUER6bvR3qzux7hpM3QNzqPAGML7iBf5LG5yYK8mnh+yHWa1KRKUfRg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.3.0-beta3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.1.16", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz", + "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1", + "react": ">=16.x" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.2", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz", @@ -3894,6 +3973,15 @@ "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, + "node_modules/a17t": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/a17t/-/a17t-0.10.1.tgz", + "integrity": "sha512-x5uyU2Au/nY0Miyi2madibSCUsJGu2jt+GNol/Eht9eR+Fa9i1v6fG6UeSvCdU4Oz6teJdZvdxZM0tnq6mHMMw==", + "dependencies": { + "deepmerge": "^4.2.2", + "tailwindcss": "^3.0.7" + } + }, "node_modules/abab": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", @@ -4289,12 +4377,12 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz", - "integrity": "sha512-B3ZEG7wtzXDRCEFsan7HmR2AeNsxdJB0+sEC0Hc5/c2NbhJqPwuZm+tn233GBVw82L+6CtD6IPSfVruwKjfV3A==", + "version": "10.4.2", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz", + "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==", "dependencies": { "browserslist": "^4.19.1", - "caniuse-lite": "^1.0.30001294", + "caniuse-lite": "^1.0.30001297", "fraction.js": "^4.1.2", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", @@ -4898,9 +4986,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001294", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz", - "integrity": "sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==", + "version": "1.0.30001298", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001298.tgz", + "integrity": "sha512-AcKqikjMLlvghZL/vfTHorlQsLDhGRalYf1+GmWCf5SCMziSGjRYQW/JEksj14NaYHIR6KIhrFAy0HV5C25UzQ==", "funding": { "type": "opencollective", "url": "https://opencollective.com/browserslist" @@ -7426,6 +7514,40 @@ } } }, + "node_modules/fontawesome.macro": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fontawesome.macro/-/fontawesome.macro-1.1.0.tgz", + "integrity": "sha512-dt2m7PmAtou8ik7Us+w+DDjs6no1E8klmKem1T66PB1uGbSU/MTtys3TkIxN4MfGzMIwxYrtceyLlCuJ83wSOw==", + "dependencies": { + "@babel/helper-module-imports": "^7.10.4", + "babel-plugin-macros": "^2.8.0" + } + }, + "node_modules/fontawesome.macro/node_modules/babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "node_modules/fontawesome.macro/node_modules/cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/fork-ts-checker-webpack-plugin": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz", @@ -12144,19 +12266,21 @@ } }, "node_modules/postcss-js": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz", - "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz", + "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==", "dependencies": { - "camelcase-css": "^2.0.1", - "postcss": "^8.1.6" + "camelcase-css": "^2.0.1" }, "engines": { - "node": ">=10.0" + "node": "^12 || ^14 || >= 16" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.3.3" } }, "node_modules/postcss-lab-function": { @@ -14558,9 +14682,9 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, "node_modules/tailwindcss": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.8.tgz", - "integrity": "sha512-Yww1eRYO1AxITJmW/KduZPxNvYdHuedeKwPju9Oakp7MdiixRi5xkpLhirsc81QCxHL0eoce6qKmxXwYGt4Cjw==", + "version": "3.0.12", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.12.tgz", + "integrity": "sha512-VqhF86z2c34sJyS5ZS8Q2nYuN0KzqZw1GGsuQQO9kJ3mY1oG7Fsag0vICkxUVXk6P+1sUkTkjMjKWCjEF0hNHw==", "dependencies": { "arg": "^5.0.1", "chalk": "^4.1.2", @@ -14575,14 +14699,13 @@ "is-glob": "^4.0.3", "normalize-path": "^3.0.0", "object-hash": "^2.2.0", - "postcss-js": "^3.0.3", + "postcss-js": "^4.0.0", "postcss-load-config": "^3.1.0", "postcss-nested": "5.0.6", - "postcss-selector-parser": "^6.0.7", + "postcss-selector-parser": "^6.0.8", "postcss-value-parser": "^4.2.0", "quick-lru": "^5.1.1", - "resolve": "^1.20.0", - "tmp": "^0.2.1" + "resolve": "^1.20.0" }, "bin": { "tailwind": "lib/cli.js", @@ -14830,17 +14953,6 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, - "node_modules/tmp": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", - "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==", - "dependencies": { - "rimraf": "^3.0.0" - }, - "engines": { - "node": ">=8.17.0" - } - }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -17411,6 +17523,51 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.3.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0-beta3.tgz", + "integrity": "sha512-OT7fRVwAgQPOivlNP2gYcCe2uzyf+r6vSv/TgliTKnOiGVNL5O7LYh8nLucY0gbnhC6OygaXnA8+hY899FVooQ==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.3.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0-beta3.tgz", + "integrity": "sha512-LPK7WR5R+7xOhuDZIlqR8rqUyA87mj5OLQwaSO65DolZLiFrYPZwQc/dCfWP3Sa7LwULFJOE+FPqO9Iq/oiQ6Q==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.3.0-beta3" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "6.0.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.0.0-beta3.tgz", + "integrity": "sha512-eE4nY46IMDSdzUUvEnza4gxA2OS7TpDMRVF9UNhdD43WIAe0FpRcXKlLvUZNtpA16vwF81z73jXBq8QTp6jsTg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.3.0-beta3" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "6.0.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.0.0-beta3.tgz", + "integrity": "sha512-4Nyi3FGB/t6c7WP9/0G6pk/mSi2Yc+NRMyI+ewgNjLsSDYaSErocJ27oW6tuglxDLSNXTRaa8sK5DYMaY5Fabg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.3.0-beta3" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.0.0-beta3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.0.0-beta3.tgz", + "integrity": "sha512-7+62D0MK5fy/mzmTNx0P4QzHWzKE4oXdUER6bvR3qzux7hpM3QNzqPAGML7iBf5LG5yYK8mnh+yHWa1KRKUfRg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.3.0-beta3" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.16", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz", + "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@humanwhocodes/config-array": { "version": "0.9.2", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz", @@ -18899,6 +19056,15 @@ "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, + "a17t": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/a17t/-/a17t-0.10.1.tgz", + "integrity": "sha512-x5uyU2Au/nY0Miyi2madibSCUsJGu2jt+GNol/Eht9eR+Fa9i1v6fG6UeSvCdU4Oz6teJdZvdxZM0tnq6mHMMw==", + "requires": { + "deepmerge": "^4.2.2", + "tailwindcss": "^3.0.7" + } + }, "abab": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", @@ -19185,12 +19351,12 @@ "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, "autoprefixer": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz", - "integrity": "sha512-B3ZEG7wtzXDRCEFsan7HmR2AeNsxdJB0+sEC0Hc5/c2NbhJqPwuZm+tn233GBVw82L+6CtD6IPSfVruwKjfV3A==", + "version": "10.4.2", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz", + "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==", "requires": { "browserslist": "^4.19.1", - "caniuse-lite": "^1.0.30001294", + "caniuse-lite": "^1.0.30001297", "fraction.js": "^4.1.2", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", @@ -19651,9 +19817,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001294", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz", - "integrity": "sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==" + "version": "1.0.30001298", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001298.tgz", + "integrity": "sha512-AcKqikjMLlvghZL/vfTHorlQsLDhGRalYf1+GmWCf5SCMziSGjRYQW/JEksj14NaYHIR6KIhrFAy0HV5C25UzQ==" }, "case-sensitive-paths-webpack-plugin": { "version": "2.4.0", @@ -21508,6 +21674,39 @@ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz", "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==" }, + "fontawesome.macro": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fontawesome.macro/-/fontawesome.macro-1.1.0.tgz", + "integrity": "sha512-dt2m7PmAtou8ik7Us+w+DDjs6no1E8klmKem1T66PB1uGbSU/MTtys3TkIxN4MfGzMIwxYrtceyLlCuJ83wSOw==", + "requires": { + "@babel/helper-module-imports": "^7.10.4", + "babel-plugin-macros": "^2.8.0" + }, + "dependencies": { + "babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "requires": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + } + } + } + }, "fork-ts-checker-webpack-plugin": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz", @@ -24834,12 +25033,11 @@ "requires": {} }, "postcss-js": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz", - "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz", + "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==", "requires": { - "camelcase-css": "^2.0.1", - "postcss": "^8.1.6" + "camelcase-css": "^2.0.1" } }, "postcss-lab-function": { @@ -26543,9 +26741,9 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, "tailwindcss": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.8.tgz", - "integrity": "sha512-Yww1eRYO1AxITJmW/KduZPxNvYdHuedeKwPju9Oakp7MdiixRi5xkpLhirsc81QCxHL0eoce6qKmxXwYGt4Cjw==", + "version": "3.0.12", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.12.tgz", + "integrity": "sha512-VqhF86z2c34sJyS5ZS8Q2nYuN0KzqZw1GGsuQQO9kJ3mY1oG7Fsag0vICkxUVXk6P+1sUkTkjMjKWCjEF0hNHw==", "requires": { "arg": "^5.0.1", "chalk": "^4.1.2", @@ -26560,14 +26758,13 @@ "is-glob": "^4.0.3", "normalize-path": "^3.0.0", "object-hash": "^2.2.0", - "postcss-js": "^3.0.3", + "postcss-js": "^4.0.0", "postcss-load-config": "^3.1.0", "postcss-nested": "5.0.6", - "postcss-selector-parser": "^6.0.7", + "postcss-selector-parser": "^6.0.8", "postcss-value-parser": "^4.2.0", "quick-lru": "^5.1.1", - "resolve": "^1.20.0", - "tmp": "^0.2.1" + "resolve": "^1.20.0" }, "dependencies": { "ansi-styles": { @@ -26723,14 +26920,6 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, - "tmp": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", - "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==", - "requires": { - "rimraf": "^3.0.0" - } - }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8c32a51..928326d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,6 +4,11 @@ "homepage": ".", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.3.0-beta3", + "@fortawesome/free-brands-svg-icons": "^6.0.0-beta3", + "@fortawesome/free-regular-svg-icons": "^6.0.0-beta3", + "@fortawesome/free-solid-svg-icons": "^6.0.0-beta3", + "@fortawesome/react-fontawesome": "^0.1.16", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", @@ -12,10 +17,15 @@ "@types/react": "^17.0.38", "@types/react-dom": "^17.0.11", "@types/react-router-dom": "^5.3.2", + "a17t": "^0.10.1", + "autoprefixer": "^10.4.2", + "fontawesome.macro": "^1.1.0", + "postcss": "^8.4.5", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", + "tailwindcss": "^3.0.12", "typescript": "^4.5.4", "web-vitals": "^2.1.2" }, diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/frontend/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3494cbe..fd4732b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,11 +1,14 @@ import React from 'react'; +import Layout from './Layout'; import MainView from './MainView'; import { TokenProvider } from './tokenStorage'; const App: React.FC = () => { - return - - + return + + + + } export default App; diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx new file mode 100644 index 0000000..728812f --- /dev/null +++ b/frontend/src/Layout.tsx @@ -0,0 +1,21 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { fab } from "fontawesome.macro"; + +export const Layout: React.FC = (props) => { + return
+
{props.children}
+ +
+} + +export default Layout; \ No newline at end of file diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx index 166f866..511e4bf 100644 --- a/frontend/src/Login.tsx +++ b/frontend/src/Login.tsx @@ -1,4 +1,6 @@ import React, { useState } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { fas } from "fontawesome.macro"; import { TokenContext } from "./tokenStorage"; export const Login: React.FC = () => { @@ -6,27 +8,51 @@ export const Login: React.FC = () => { const [inputState, setInputState] = useState(""); const tokenStorage = React.useContext(TokenContext); + const [tokenFailed, setTokenFailed] = useState(false); + + const onSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + const token = inputState; + + (async () => { + const response = await fetch(`api/${token}/validate`); + + const data = await response.json() as { "success": boolean }; + + if (!data.success) { + setTokenFailed(true); + } else { + setTokenFailed(false); + tokenStorage.set(token); + } + })(); + } + return <> -

- gib token -

-
{ - e.preventDefault(); - tokenStorage.set(inputState); - }}> - - setInputState(e.target.value)}> - - -
-

- The token will be put into your local storage. -

+
+

Authentication

+

Please enter your token. It will be put into local storage

+

Token

+
+ setInputState(e.target.value)}> + + +
+ { + tokenFailed ?

Token failed to validate :(

: <> + } +
} diff --git a/frontend/src/index.css b/frontend/src/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/frontend/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index c1f31c5..d69e1e7 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; +import "./index.css"; ReactDOM.render( diff --git a/frontend/src/tokenStorage.tsx b/frontend/src/tokenStorage.tsx index f5d7e3f..723c7e5 100644 --- a/frontend/src/tokenStorage.tsx +++ b/frontend/src/tokenStorage.tsx @@ -36,7 +36,7 @@ export const TokenProvider: React.FC = (props) => { useEffect(() => { (async () => { if (tokenStorage.token) { - const response = await fetch(`api/${token}/validate`); + const response = await fetch(`api/${tokenStorage.token}/validate`); const data = await response.json() as { "success": boolean }; @@ -49,7 +49,7 @@ export const TokenProvider: React.FC = (props) => { return { - token + tokenStorage.token ? props.children : } diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js new file mode 100644 index 0000000..083b454 --- /dev/null +++ b/frontend/tailwind.config.js @@ -0,0 +1,22 @@ +let colors = require("tailwindcss/colors") + +module.exports = { + content: [ + "./src/**/*.{js,jsx,ts,tsx}" + ], + theme: { + extend: { + colors: { + neutral: colors.slate, + positive: colors.green, + urge: colors.violet, + warning: colors.yellow, + info: colors.blue, + critical: colors.red, + } + }, + }, + plugins: [ + require("a17t"), + ], +}