Start frontend styling

This commit is contained in:
Kai Vogelgesang 2022-01-10 01:38:08 +01:00
parent 63d6fe4b26
commit a11524516c
Signed by: kai
GPG Key ID: 0A95D3B6E62C0879
10 changed files with 364 additions and 83 deletions

View File

@ -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",

View File

@ -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"
},

View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View File

@ -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 <TokenProvider>
return <Layout>
<TokenProvider>
<MainView />
</TokenProvider>
</Layout>
}
export default App;

21
frontend/src/Layout.tsx Normal file
View File

@ -0,0 +1,21 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { fab } from "fontawesome.macro";
export const Layout: React.FC = (props) => {
return <div className="max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8 min-h-screen flex flex-col justify-between">
<main className="mb-auto">{props.children}</main>
<footer className="text-xs md:flex justify-between">
<div>
Frontend: <a className="portal ~neutral active" href="https://reactjs.org/"><FontAwesomeIcon icon={fab`react`} />&nbsp;React</a>, <a className="portal ~neutral active" href="https://tailwindcss.com"><FontAwesomeIcon icon={fab`css3-alt`} />&nbsp;tailwind</a> and <a className="portal ~neutral active" href="https://a17t.miles.land/"><div className="select-none font-black">&there4;</div>&nbsp;a17t</a>
</div>
<div>
<a className="portal ~neutral active" href="https://git.leafbla.de/turtles-1.18.1/controlpanel"><FontAwesomeIcon icon={fab`git-alt`} />&nbsp;Source</a>
</div>
<div>
Backend: <a className="portal ~neutral active" href="https://fastapi.tiangolo.com/"><FontAwesomeIcon icon={fab`python`} />&nbsp;FastAPI</a>
</div>
</footer>
</div>
}
export default Layout;

View File

@ -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);
return <>
<h1>
gib token
</h1>
<form onSubmit={(e) => {
const [tokenFailed, setTokenFailed] = useState(false);
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
tokenStorage.set(inputState);
}}>
<label htmlFor="token">Token: </label>
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 <>
<div className="card">
<h1 className="heading">Authentication</h1>
<p className="pb-5">Please enter your token. It will be put into local storage <FontAwesomeIcon icon={fas`cookie`} /></p>
<p className="label">Token</p>
<form className="flex flex-row space-x-1"
onSubmit={onSubmit}>
<input
type="text"
id="token"
placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
className={`field ${tokenFailed ? "~critical" : "~neutral"}`}
value={inputState}
onChange={(e) => setInputState(e.target.value)}>
</input>
<button type="submit"> Submit </button>
<button
type="submit"
className="button ~info @high">
Submit
</button>
</form>
<p>
The token will be put into your local storage.
</p>
{
tokenFailed ? <p className="support ~critical">Token failed to validate :(</p> : <></>
}
</div>
</>
}

3
frontend/src/index.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import "./index.css";
ReactDOM.render(
<React.StrictMode>

View File

@ -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 <TokenContext.Provider value={tokenStorage}>
{
token
tokenStorage.token
? props.children
: <Login />
}

View File

@ -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"),
],
}