Frontend fixes
This commit is contained in:
parent
9f9e0524f5
commit
ec6c0cc45b
SSH Key Fingerprint:
SHA256:KjAds8wHfD2mBYK2H815s/+ABcSdcIHUndwHEdSxml4
@ -57,7 +57,7 @@
|
||||
|
||||
src = ./frontend;
|
||||
|
||||
npmDepsHash = "sha256-hFoGepzNZjDFaHhb6tO3FUmW6AdEyOTXIQ6rDcUokLo=";
|
||||
npmDepsHash = "sha256-cN+xm9wBRcpDHuYy8PelV1YWhudw4y8B6Ap4+3En8/4=";
|
||||
|
||||
installPhase = ''
|
||||
mkdir -p $out
|
||||
|
||||
178
frontend/package-lock.json
generated
178
frontend/package-lock.json
generated
@ -6,10 +6,12 @@
|
||||
"": {
|
||||
"name": "apiary-frontend",
|
||||
"dependencies": {
|
||||
"@types/humanize-duration": "^3.27.4",
|
||||
"@types/node": "^22.13.9",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"chart.js": "^4.4.8",
|
||||
"humanize-duration": "^3.32.1",
|
||||
"react": "^19.0.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^19.0.0",
|
||||
@ -20,6 +22,7 @@
|
||||
"@ngneat/falso": "^7.3.0",
|
||||
"parcel": "^2.13.3",
|
||||
"process": "^0.11.10",
|
||||
"svgo": "^3.3.2",
|
||||
"ts-loader": "^9.5.2",
|
||||
"typescript": "^5.8.2"
|
||||
}
|
||||
@ -2056,6 +2059,16 @@
|
||||
"@swc/counter": "^0.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@trysound/sax": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
|
||||
"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||
@ -2094,6 +2107,12 @@
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@types/humanize-duration": {
|
||||
"version": "3.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/humanize-duration/-/humanize-duration-3.27.4.tgz",
|
||||
"integrity": "sha512-yaf7kan2Sq0goxpbcwTQ+8E9RP6HutFBPv74T/IA/ojcHKhuKVlk2YFYyHhWZeLvZPzzLE3aatuQB4h0iqyyUA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@ -2419,6 +2438,13 @@
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/braces": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
||||
@ -2619,6 +2645,86 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/css-select": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
|
||||
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"boolbase": "^1.0.0",
|
||||
"css-what": "^6.1.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"domutils": "^3.0.1",
|
||||
"nth-check": "^2.0.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
|
||||
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.30",
|
||||
"source-map-js": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-what": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
|
||||
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/csso": {
|
||||
"version": "5.0.5",
|
||||
"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
|
||||
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"css-tree": "~2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
|
||||
"npm": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/csso/node_modules/css-tree": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
|
||||
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.28",
|
||||
"source-map-js": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
|
||||
"npm": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/csso/node_modules/mdn-data": {
|
||||
"version": "2.0.28",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
|
||||
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
|
||||
"dev": true,
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
@ -3027,6 +3133,12 @@
|
||||
"entities": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/humanize-duration": {
|
||||
"version": "3.32.1",
|
||||
"resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.32.1.tgz",
|
||||
"integrity": "sha512-inh5wue5XdfObhu/IGEMiA1nUXigSGcaKNemcbLRKa7jXYGDZXr3LoT9pTIzq2hPEbld7w/qv9h+ikWGz8fL1g==",
|
||||
"license": "Unlicense"
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||
@ -3462,6 +3574,13 @@
|
||||
"node": ">=6.11.5"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
||||
"dev": true,
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
@ -3616,6 +3735,19 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nth-check": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
|
||||
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"boolbase": "^1.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/nth-check?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/nullthrows": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
|
||||
@ -4081,6 +4213,16 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support": {
|
||||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
@ -4132,6 +4274,42 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
|
||||
"integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@trysound/sax": "0.2.0",
|
||||
"commander": "^7.2.0",
|
||||
"css-select": "^5.1.0",
|
||||
"css-tree": "^2.3.1",
|
||||
"css-what": "^6.1.0",
|
||||
"csso": "^5.0.5",
|
||||
"picocolors": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"svgo": "bin/svgo"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/svgo"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/commander": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
|
||||
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/swr": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/swr/-/swr-2.3.2.tgz",
|
||||
|
||||
@ -8,14 +8,17 @@
|
||||
"@ngneat/falso": "^7.3.0",
|
||||
"parcel": "^2.13.3",
|
||||
"process": "^0.11.10",
|
||||
"svgo": "^3.3.2",
|
||||
"ts-loader": "^9.5.2",
|
||||
"typescript": "^5.8.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/humanize-duration": "^3.27.4",
|
||||
"@types/node": "^22.13.9",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"chart.js": "^4.4.8",
|
||||
"humanize-duration": "^3.32.1",
|
||||
"react": "^19.0.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^19.0.0",
|
||||
|
||||
77
frontend/src/assets/apiary.svg
Normal file
77
frontend/src/assets/apiary.svg
Normal file
@ -0,0 +1,77 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 511.573 511.573" xml:space="preserve">
|
||||
<g transform="translate(1 1)">
|
||||
<polygon style="fill:#FFE100;" points="254.787,7.107 84.12,143.64 425.453,143.64 "/>
|
||||
<polygon style="fill:#FFFFFF;" points="84.12,143.64 254.787,7.107 41.453,143.64 "/>
|
||||
<polygon style="fill:#FFA800;" points="254.787,7.107 425.453,143.64 468.12,143.64 "/>
|
||||
<g>
|
||||
<polygon style="fill:#FFE100;" points="41.453,502.04 92.653,502.04 92.653,450.84 41.453,450.84 "/>
|
||||
<polygon style="fill:#FFE100;" points="416.92,502.04 468.12,502.04 468.12,450.84 416.92,450.84 "/>
|
||||
<polygon style="fill:#FFE100;" points="41.453,450.84 468.12,450.84 468.12,143.64 41.453,143.64 "/>
|
||||
</g>
|
||||
<polygon style="fill:#FFA800;" points="442.52,126.573 442.52,502.04 468.12,502.04 468.12,146.2 "/>
|
||||
<polygon style="fill:#FFFFFF;" points="41.453,143.64 41.453,502.04 67.053,502.04 67.053,126.573 "/>
|
||||
<path style="fill:#63D3FD;" d="M314.52,450.84H195.053V341.613c0-15.36,12.8-27.307,27.307-27.307h64
|
||||
c15.36,0,27.307,12.8,27.307,27.307V450.84H314.52z"/>
|
||||
<path style="fill:#3DB9F9;" d="M287.213,314.307h-25.6c15.36,0,27.307,12.8,27.307,27.307V450.84h25.6V341.613
|
||||
C314.52,327.107,302.573,314.307,287.213,314.307"/>
|
||||
<path d="M468.12,459.373H41.453c-5.12,0-8.533-3.413-8.533-8.533v-307.2c0-2.56,1.707-5.973,4.267-6.827L250.52,0.28
|
||||
c2.56-1.707,5.973-1.707,9.387,0L473.24,136.813c2.56,1.707,4.267,4.267,4.267,6.827v307.2
|
||||
C476.653,455.96,473.24,459.373,468.12,459.373z M49.987,442.307h409.6v-294.4l-204.8-130.56l-204.8,130.56V442.307z"/>
|
||||
<path d="M92.653,510.573h-51.2c-5.12,0-8.533-3.413-8.533-8.533v-51.2c0-5.12,3.413-8.533,8.533-8.533h51.2
|
||||
c5.12,0,8.533,3.413,8.533,8.533v51.2C101.187,507.16,97.773,510.573,92.653,510.573z M49.987,493.507H84.12v-34.133H49.987
|
||||
V493.507z"/>
|
||||
<path d="M468.12,510.573h-51.2c-5.12,0-8.533-3.413-8.533-8.533v-51.2c0-5.12,3.413-8.533,8.533-8.533h51.2
|
||||
c5.12,0,8.533,3.413,8.533,8.533v51.2C476.653,507.16,473.24,510.573,468.12,510.573z M425.453,493.507h34.133v-34.133h-34.133
|
||||
V493.507z"/>
|
||||
<path d="M7.32,177.773c-2.56,0-5.12-0.853-6.827-3.413c-2.56-3.413-1.707-9.387,1.707-11.947l34.133-25.6
|
||||
c3.413-2.56,9.387-1.707,11.947,1.707c2.56,3.413,1.707,9.387-1.707,11.947l-34.133,25.6C10.733,176.92,9.027,177.773,7.32,177.773
|
||||
z"/>
|
||||
<path d="M502.253,177.773c-1.707,0-3.413-0.853-5.12-1.707L463,150.467c-3.413-2.56-4.267-8.533-1.707-11.947
|
||||
c2.56-3.413,8.533-4.267,11.947-1.707l34.133,25.6c3.413,2.56,4.267,8.533,1.707,11.947
|
||||
C507.373,176.92,504.813,177.773,502.253,177.773z"/>
|
||||
<path d="M468.12,254.573H41.453c-5.12,0-8.533-3.413-8.533-8.533v-102.4c0-5.12,3.413-8.533,8.533-8.533H468.12
|
||||
c5.12,0,8.533,3.413,8.533,8.533v102.4C476.653,251.16,473.24,254.573,468.12,254.573z M49.987,237.507h409.6v-85.333h-409.6
|
||||
V237.507z"/>
|
||||
<path d="M314.52,459.373H195.053c-5.12,0-8.533-3.413-8.533-8.533V341.613c0-19.627,16.213-35.84,35.84-35.84h64
|
||||
c19.627,0,35.84,16.213,35.84,35.84V450.84C323.053,455.96,319.64,459.373,314.52,459.373z M203.587,442.307h102.4V341.613
|
||||
c0-10.24-8.533-18.773-18.773-18.773h-64c-11.093,0-19.627,8.533-19.627,18.773V442.307z"/>
|
||||
<path d="M195.053,459.373h-153.6c-5.12,0-8.533-3.413-8.533-8.533v-102.4c0-5.12,3.413-8.533,8.533-8.533h153.6
|
||||
c5.12,0,8.533,3.413,8.533,8.533v102.4C203.587,455.96,200.173,459.373,195.053,459.373z M49.987,442.307H186.52v-85.333H49.987
|
||||
V442.307z"/>
|
||||
<path d="M468.12,459.373h-153.6c-5.12,0-8.533-3.413-8.533-8.533v-102.4c0-5.12,3.413-8.533,8.533-8.533h153.6
|
||||
c5.12,0,8.533,3.413,8.533,8.533v102.4C476.653,455.96,473.24,459.373,468.12,459.373z M323.053,442.307h136.533v-85.333H323.053
|
||||
V442.307z"/>
|
||||
<path d="M468.12,356.973h-153.6c-5.12,0-8.533-3.413-8.533-8.533v-6.827c0-10.24-8.533-18.773-18.773-18.773h-64
|
||||
c-11.093,0-19.627,8.533-19.627,18.773v6.827c0,5.12-3.413,8.533-8.533,8.533h-153.6c-5.12,0-8.533-3.413-8.533-8.533v-102.4
|
||||
c0-5.12,3.413-8.533,8.533-8.533H468.12c5.12,0,8.533,3.413,8.533,8.533v102.4C476.653,353.56,473.24,356.973,468.12,356.973z
|
||||
M323.053,339.907h136.533v-85.333h-409.6v85.333H186.52c0.853-18.773,17.067-34.133,35.84-34.133h64
|
||||
C305.987,305.773,322.2,321.133,323.053,339.907z"/>
|
||||
<path d="M468.12,288.707h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h59.733
|
||||
c5.12,0,8.533,3.413,8.533,8.533S473.24,288.707,468.12,288.707z"/>
|
||||
<path d="M468.12,322.84h-34.133c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h34.133
|
||||
c5.12,0,8.533,3.413,8.533,8.533C476.653,319.427,473.24,322.84,468.12,322.84z"/>
|
||||
<path d="M101.187,288.707H41.453c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h59.733
|
||||
c5.12,0,8.533,3.413,8.533,8.533S106.307,288.707,101.187,288.707z"/>
|
||||
<path d="M75.587,322.84H41.453c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h34.133
|
||||
c5.12,0,8.533,3.413,8.533,8.533C84.12,319.427,80.707,322.84,75.587,322.84z"/>
|
||||
<path d="M468.12,186.307h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h59.733
|
||||
c5.12,0,8.533,3.413,8.533,8.533C476.653,182.893,473.24,186.307,468.12,186.307z"/>
|
||||
<path d="M468.12,220.44h-34.133c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h34.133
|
||||
c5.12,0,8.533,3.413,8.533,8.533C476.653,217.027,473.24,220.44,468.12,220.44z"/>
|
||||
<path d="M101.187,186.307H41.453c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h59.733
|
||||
c5.12,0,8.533,3.413,8.533,8.533C109.72,182.893,106.307,186.307,101.187,186.307z"/>
|
||||
<path d="M75.587,220.44H41.453c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h34.133
|
||||
c5.12,0,8.533,3.413,8.533,8.533C84.12,217.027,80.707,220.44,75.587,220.44z"/>
|
||||
<path d="M468.12,391.107h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h59.733
|
||||
c5.12,0,8.533,3.413,8.533,8.533C476.653,387.693,473.24,391.107,468.12,391.107z"/>
|
||||
<path d="M468.12,425.24h-34.133c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533h34.133c5.12,0,8.533,3.413,8.533,8.533
|
||||
S473.24,425.24,468.12,425.24z"/>
|
||||
<path d="M101.187,391.107H41.453c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h59.733
|
||||
c5.12,0,8.533,3.413,8.533,8.533C109.72,387.693,106.307,391.107,101.187,391.107z"/>
|
||||
<path d="M75.587,425.24H41.453c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533h34.133c5.12,0,8.533,3.413,8.533,8.533
|
||||
S80.707,425.24,75.587,425.24z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
@ -1,10 +1,36 @@
|
||||
:root {
|
||||
--main-color-bg: white;
|
||||
--main-color: black;
|
||||
/* Menu */
|
||||
--menu-color-bg: #212529;
|
||||
--menu-color-text: hsla(0,0%,100%,.5);
|
||||
--menu-color-text-hover: white;
|
||||
--menu-color-title-text: white;
|
||||
--table-color-bg: #009879;
|
||||
|
||||
/* Table */
|
||||
--table-color-header-bg: var(--menu-color-bg);
|
||||
--table-color-header-text: #dddddd;
|
||||
--table-row-odd: #dddddd;
|
||||
--table-row-even: #f3f3f3;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
--main-color-bg: #15141a;
|
||||
--main-color: white;
|
||||
/* Menu */
|
||||
--menu-color-bg: #35393d;
|
||||
--menu-color-text: hsla(0,0%,100%,.5);
|
||||
--menu-color-text-hover: white;
|
||||
--menu-color-title-text: white;
|
||||
|
||||
/* Table */
|
||||
--table-color-header-bg: var(--menu-color-bg);
|
||||
--table-color-header-text: var(--menu-color-text);
|
||||
--table-row-odd: #302f36;
|
||||
--table-row-even: #232229;
|
||||
}
|
||||
|
||||
|
||||
#root {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@ -12,6 +38,8 @@
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: var(--main-color-bg);
|
||||
color: var(--main-color);
|
||||
margin: 0;
|
||||
margin-top: 100px;
|
||||
}
|
||||
@ -21,7 +49,6 @@ body {
|
||||
*::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-box: box-sizing;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -59,12 +86,10 @@ a {
|
||||
.navbar h2 {
|
||||
line-height: 40px;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--menu-color-text);
|
||||
height: 1;
|
||||
}
|
||||
|
||||
@ -100,11 +125,15 @@ a {
|
||||
text-align: left;
|
||||
}
|
||||
#menu-title {
|
||||
color: white;
|
||||
color: var(--menu-color-text-hover);
|
||||
font-family: "Secular One", sans-serif;
|
||||
font-size: 30px;
|
||||
font-weight: 300;
|
||||
}
|
||||
#menu-logo {
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
.menu-link {
|
||||
color: var(--menu-color-text);
|
||||
}
|
||||
@ -114,15 +143,6 @@ a {
|
||||
.menu-link-active {
|
||||
color: var(--menu-color-text-hover);
|
||||
}
|
||||
.sub-menu-link {
|
||||
color: var(--menu-color-text);
|
||||
}
|
||||
.sub-menu-link:hover {
|
||||
color: var(--menu-color-text-hover);
|
||||
}
|
||||
.sub-menu-link-active {
|
||||
color: var(--menu-color-text-hover);
|
||||
}
|
||||
.stats-pie {
|
||||
height: 50vh;
|
||||
width: 50vw;
|
||||
@ -137,8 +157,8 @@ a {
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.live-table thead tr {
|
||||
background-color: var(--table-color-bg);
|
||||
color: #ffffff;
|
||||
background-color: var(--table-color-header-bg);
|
||||
color: var(--table-color-header-text);
|
||||
text-align: left;
|
||||
}
|
||||
.live-table th,
|
||||
@ -146,17 +166,17 @@ a {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
.live-table tbody tr {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-bottom: 1px solid var(--table-row-odd);
|
||||
}
|
||||
.live-table tbody tr:nth-of-type(even) {
|
||||
background-color: #f3f3f3;
|
||||
background-color: var(--table-row-even);
|
||||
}
|
||||
.live-table tbody tr:last-of-type {
|
||||
border-bottom: 2px solid var(--table-color-bg);
|
||||
}
|
||||
.live-table tbody tr.active-row {
|
||||
font-weight: bold;
|
||||
color: #009879;
|
||||
color: var(--table-color-bg);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { randUserName, randPastDate, randIp, randPassword, randUuid, randNumber } from '@ngneat/falso';
|
||||
import { randUserName, randRecentDate, randIp, randPassword, randUuid, randNumber } from '@ngneat/falso';
|
||||
import { r } from 'react-router/dist/development/fog-of-war-Cm1iXIp7';
|
||||
|
||||
export interface LoginAttempt {
|
||||
readonly date: string;
|
||||
@ -23,16 +24,18 @@ export interface StatsResult {
|
||||
count: number;
|
||||
}
|
||||
|
||||
export type StatsType = 'password' | 'username' | 'ip' | 'country' | 'attempts';
|
||||
|
||||
export interface ApiaryAPI {
|
||||
live(fn: (a: LoginAttempt) => void): void;
|
||||
stats(statsType: string, limit: number): Promise<StatsResult[]>;
|
||||
stats(statsType: StatsType, limit: number): Promise<StatsResult[]>;
|
||||
query(queryType: string, query: string): Promise<LoginAttempt[]>;
|
||||
totals(): Promise<TotalStats>;
|
||||
}
|
||||
|
||||
function fakeLoginAttempt(): LoginAttempt {
|
||||
return {
|
||||
date: randPastDate().toISOString(),
|
||||
date: randRecentDate({days: 2}).toISOString(),
|
||||
remoteIP: randIp().toString(),
|
||||
username: randUserName().toString(),
|
||||
password: randPassword().toString(),
|
||||
@ -51,8 +54,18 @@ export class DummyApiaryAPIClient implements ApiaryAPI {
|
||||
|
||||
return () => { clearInterval(interval) }
|
||||
}
|
||||
async stats(_type: string, limit: number): Promise<StatsResult[]> {
|
||||
async stats(_type: StatsType, limit: number): Promise<StatsResult[]> {
|
||||
const stats = Array.from({ length: limit }, () => {
|
||||
switch (_type) {
|
||||
case 'password':
|
||||
return { name: randPassword().toString(), count: randNumber().valueOf() }
|
||||
case 'username':
|
||||
return { name: randUserName().toString(), count: randNumber().valueOf() }
|
||||
case 'ip':
|
||||
return { name: randIp().toString(), count: randNumber().valueOf() }
|
||||
case 'country':
|
||||
return { name: 'NO', count: randNumber().valueOf() }
|
||||
}
|
||||
return { name: randUserName().toString(), count: randNumber().valueOf() }
|
||||
});
|
||||
return Promise.resolve(stats);
|
||||
@ -83,7 +96,7 @@ export class ApiaryAPIClient implements ApiaryAPI {
|
||||
es.close();
|
||||
}
|
||||
}
|
||||
async stats(statsType: string, limit: number): Promise<StatsResult[]> {
|
||||
async stats(statsType: StatsType, limit: number): Promise<StatsResult[]> {
|
||||
const resp = await fetch(`/api/stats?type=${statsType}&limit=${limit}`)
|
||||
if (!resp.ok) {
|
||||
throw new Error('Failed to fetch query')
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ApiaryAPI, LoginAttempt, DummyApiaryAPIClient, ApiaryAPIClient, TotalStats, StatsResult } from "./api";
|
||||
import { ApiaryAPI, LoginAttempt, DummyApiaryAPIClient, ApiaryAPIClient, TotalStats, StatsResult, StatsType } from "./api";
|
||||
import { BrowserRouter, NavLink, Routes, Route } from "react-router";
|
||||
import { Chart as ChartJS, Tooltip, ArcElement, Legend } from "chart.js";
|
||||
import { Pie } from "react-chartjs-2";
|
||||
import humanizeDuration from "humanize-duration";
|
||||
|
||||
ChartJS.register(Tooltip, ArcElement, Legend);
|
||||
const logo = new URL("../assets/apiary.svg", import.meta.url)
|
||||
|
||||
interface AppProps {
|
||||
api: ApiaryAPI
|
||||
@ -36,57 +38,88 @@ let chartColors = [
|
||||
]
|
||||
|
||||
export function App({ api }: AppProps) {
|
||||
const [mode, setMode] = useState("light");
|
||||
const headerProps: HeaderMenuProps = {
|
||||
title: "apiary.home.2rjus.net",
|
||||
logo: logo,
|
||||
items: [
|
||||
{
|
||||
name: "Totals",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
name: "Passwords",
|
||||
path: "/stats/password",
|
||||
},
|
||||
{
|
||||
name: "Usernames",
|
||||
path: "/stats/username",
|
||||
},
|
||||
{
|
||||
name: "IPs",
|
||||
path: "/stats/ip",
|
||||
},
|
||||
{
|
||||
name: "Live",
|
||||
path: "/live",
|
||||
},
|
||||
{
|
||||
name: "Query",
|
||||
path: "/query",
|
||||
}
|
||||
]
|
||||
}
|
||||
const onSelectMode = (mode: string) => {
|
||||
setMode(mode);
|
||||
|
||||
if (mode === "dark") {
|
||||
document.body.classList.add("dark-mode");
|
||||
} else {
|
||||
document.body.classList.remove("dark-mode");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => onSelectMode(e.matches ? "dark" : "light"));
|
||||
onSelectMode(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
||||
return () => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', (e) => onSelectMode(e.matches ? "dark" : "light"));
|
||||
}
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<Header />
|
||||
<div id="app">
|
||||
<HeaderMenu title={headerProps.title} logo={logo} items={headerProps.items} />
|
||||
<div className="content">
|
||||
<Routes>
|
||||
<Route path="/" element={<Home api={api} />} />
|
||||
<Route path="/stats" element={<Stats api={api} />} />
|
||||
<Route path="/stats/password" element={<Stats api={api} type="password" />} />
|
||||
<Route path="/stats/username" element={<Stats api={api} type="username" />} />
|
||||
<Route path="/stats/ip" element={<Stats api={api} type="ip" />} />
|
||||
<Route path="/live" element={<Live api={api} />} />
|
||||
<Route path="/query" element={<Query api={api} />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Stats({ api }: AppProps) {
|
||||
const [stats, setStats] = useState<StatsResult[]>([]);
|
||||
const [statsType, setStatsType] = useState<string>("password")
|
||||
export interface StatsProps {
|
||||
api: ApiaryAPI
|
||||
type: StatsType
|
||||
}
|
||||
|
||||
const activeMenu = (name: string): boolean => {
|
||||
if (statsType === name) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const subMenuItems: SubMenuProps = {
|
||||
items: [
|
||||
{
|
||||
name: "Passwords",
|
||||
active: () => { return activeMenu("password") },
|
||||
onClick: () => setStatsType("password")
|
||||
},
|
||||
{
|
||||
name: "Usernames",
|
||||
active: () => { return activeMenu("username") },
|
||||
onClick: () => setStatsType("username")
|
||||
},
|
||||
{
|
||||
name: "IPs",
|
||||
active: () => { return activeMenu("ip") },
|
||||
onClick: () => setStatsType("ip")
|
||||
},
|
||||
]
|
||||
}
|
||||
export function Stats({ api, type }: StatsProps) {
|
||||
const [stats, setStats] = useState<StatsResult[]|null>(null)
|
||||
const [currentType, setCurrentType] = useState(type)
|
||||
|
||||
useEffect(() => {
|
||||
async function getStats() {
|
||||
try {
|
||||
let newStats = await api.stats(statsType, 10);
|
||||
let newStats = await api.stats(type, 10);
|
||||
if (JSON.stringify(newStats) !== JSON.stringify(stats)) {
|
||||
setStats(newStats)
|
||||
}
|
||||
@ -95,7 +128,14 @@ export function Stats({ api }: AppProps) {
|
||||
}
|
||||
}
|
||||
|
||||
if (currentType !== type) {
|
||||
setCurrentType(type)
|
||||
getStats()
|
||||
}
|
||||
|
||||
if (stats === null) {
|
||||
getStats()
|
||||
}
|
||||
|
||||
const interval = setInterval(() => {
|
||||
getStats()
|
||||
@ -104,11 +144,11 @@ export function Stats({ api }: AppProps) {
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, [stats, statsType])
|
||||
}, [stats, type])
|
||||
|
||||
return (
|
||||
<>
|
||||
<SubMenu items={subMenuItems.items} />
|
||||
{stats.length > 0 ? <StatsPie data={stats} /> : <p>Loading...</p>}
|
||||
{(stats != null && stats.length > 0) ? <StatsPie data={stats} /> : <p>Loading...</p>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -193,7 +233,7 @@ export function Live({ api }: AppProps) {
|
||||
useEffect(() => {
|
||||
const cleanup = api.live((a) => {
|
||||
setLiveList((list) => {
|
||||
return [...list, a];
|
||||
return [a, ...list];
|
||||
});
|
||||
});
|
||||
|
||||
@ -212,28 +252,65 @@ export interface LiveListProps {
|
||||
list: LoginAttempt[]
|
||||
};
|
||||
|
||||
export interface DateTDProps {
|
||||
date: Date
|
||||
now: Date
|
||||
}
|
||||
|
||||
export function DateTD({ date, now}: DateTDProps) {
|
||||
const [displayDate, setDisplayDate] = useState(date.toLocaleString());
|
||||
|
||||
useEffect(() => {
|
||||
if (now.getTime() - date.getTime() < 14400000) {
|
||||
const newDate = humanizeDuration(now.getTime() - date.getTime(), { largest: 1, round: true }) + " ago";
|
||||
if (newDate !== displayDate) {
|
||||
setDisplayDate(newDate);
|
||||
}
|
||||
}
|
||||
}, [displayDate, now])
|
||||
|
||||
return (
|
||||
<td className="live-table-date">{displayDate}</td>
|
||||
)
|
||||
}
|
||||
|
||||
export function LiveList({ list }: LiveListProps) {
|
||||
const [now, setNow] = useState(new Date())
|
||||
|
||||
let items = list.map((a) => {
|
||||
const attemptDate = new Date(a.date);
|
||||
const key = `${a.username}-${a.password}-${a.remoteIP}-${a.date}`;
|
||||
return (
|
||||
<tr key={a.date}>
|
||||
<td>{a.date}</td>
|
||||
<td>{a.username}</td>
|
||||
<td>{a.password}</td>
|
||||
<td>{a.remoteIP}</td>
|
||||
<td>{a.country}</td>
|
||||
<DateTD date={attemptDate} now={now} />
|
||||
<td className="live-table-username">{a.username}</td>
|
||||
<td className="live-table-password">{a.password}</td>
|
||||
<td className="live-table-ip">{a.remoteIP}</td>
|
||||
<td className="live-table-country">{a.country}</td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setNow(new Date())
|
||||
}, 1000)
|
||||
|
||||
return () => {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, [now])
|
||||
|
||||
return (
|
||||
<>
|
||||
<table className="live-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
<th>IP</th>
|
||||
<th>Country</th>
|
||||
<th className="live-table-date">Date</th>
|
||||
<th className="live-table-username">Username</th>
|
||||
<th className="live-table-password">Password</th>
|
||||
<th className="live-table-ip">IP</th>
|
||||
<th className="live-table-country">Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -296,7 +373,7 @@ export function Header() {
|
||||
<nav className="nav-flex">
|
||||
<ul>
|
||||
<li><NavLink to="/" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Home</NavLink></li>
|
||||
<li><NavLink to="/stats" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Stats</NavLink></li>
|
||||
<li><NavLink to="/stats/password" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Stats</NavLink></li>
|
||||
<li><NavLink to="/live" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Live</NavLink></li>
|
||||
<li><NavLink to="/query" className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>Query</NavLink></li>
|
||||
</ul>
|
||||
@ -305,6 +382,38 @@ export function Header() {
|
||||
);
|
||||
}
|
||||
|
||||
interface HeaderItem {
|
||||
name: string
|
||||
path: string
|
||||
}
|
||||
|
||||
interface HeaderMenuProps {
|
||||
title: string
|
||||
logo: URL
|
||||
items: Array<HeaderItem>
|
||||
}
|
||||
|
||||
export function HeaderMenu({ title, logo, items }: HeaderMenuProps) {
|
||||
const menuItems = items.map((item) => {
|
||||
return (
|
||||
<li key={item.path}>
|
||||
<NavLink to={item.path} className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>{item.name}</NavLink>
|
||||
</li>
|
||||
)})
|
||||
|
||||
return (
|
||||
<div className="navbar">
|
||||
<img id="menu-logo" src={logo.href}></img>
|
||||
<h2 id="menu-title">{title}</h2>
|
||||
<nav className="nav-flex">
|
||||
<ul>
|
||||
{menuItems}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export interface SubMenuProps {
|
||||
items: Array<{ name: string, active: () => boolean, onClick: () => void }>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user