Compare commits
6 Commits
69140e6da1
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
3a848b3f56 | ||
|
|
d9eb92300a | ||
|
|
bf40b235f0 | ||
|
|
fcd477e876 | ||
|
|
924f9626a6 | ||
|
|
f29d82f311 |
11
index.html
11
index.html
@@ -1,13 +1,16 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title style="font-family: Fira Code;">mpaste</title>
|
<title style="font-family: Fira Code;">mpaste</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
<body>
|
||||||
<div id="root" class="p-0 m-0"></div>
|
<div id="root" class="p-0 m-0"></div>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
137
package-lock.json
generated
137
package-lock.json
generated
@@ -15,6 +15,7 @@
|
|||||||
"@fortawesome/free-solid-svg-icons": "^7.0.0",
|
"@fortawesome/free-solid-svg-icons": "^7.0.0",
|
||||||
"@fortawesome/react-fontawesome": "^0.2.3",
|
"@fortawesome/react-fontawesome": "^0.2.3",
|
||||||
"@monaco-editor/react": "^4.7.0",
|
"@monaco-editor/react": "^4.7.0",
|
||||||
|
"@stomp/stompjs": "^7.3.0",
|
||||||
"axios": "^1.11.0",
|
"axios": "^1.11.0",
|
||||||
"bootstrap": "^5.3.7",
|
"bootstrap": "^5.3.7",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
@@ -25,7 +26,8 @@
|
|||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
"react-router-dom": "^7.7.1",
|
"react-router-dom": "^7.7.1",
|
||||||
"react-slick": "^0.30.3",
|
"react-slick": "^0.30.3",
|
||||||
"slick-carousel": "^1.8.1"
|
"slick-carousel": "^1.8.1",
|
||||||
|
"sockjs-client": "^1.6.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.30.1",
|
"@eslint/js": "^9.30.1",
|
||||||
@@ -1606,6 +1608,12 @@
|
|||||||
"url": "https://github.com/sindresorhus/is?sponsor=1"
|
"url": "https://github.com/sindresorhus/is?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@stomp/stompjs": {
|
||||||
|
"version": "7.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.3.0.tgz",
|
||||||
|
"integrity": "sha512-nKMLoFfJhrQAqkvvKd1vLq/cVBGCMwPRCD0LqW7UT1fecRx9C3GoKEIR2CYwVuErGeZu8w0kFkl2rlhPlqHVgQ==",
|
||||||
|
"license": "Apache-2.0"
|
||||||
|
},
|
||||||
"node_modules/@swc/helpers": {
|
"node_modules/@swc/helpers": {
|
||||||
"version": "0.5.19",
|
"version": "0.5.19",
|
||||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz",
|
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz",
|
||||||
@@ -2696,6 +2704,15 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/eventsource": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/extract-zip": {
|
"node_modules/extract-zip": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
|
||||||
@@ -2738,6 +2755,18 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/faye-websocket": {
|
||||||
|
"version": "0.11.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
|
||||||
|
"integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"websocket-driver": ">=0.5.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fd-slicer": {
|
"node_modules/fd-slicer": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
|
||||||
@@ -3174,6 +3203,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "BSD-2-Clause"
|
"license": "BSD-2-Clause"
|
||||||
},
|
},
|
||||||
|
"node_modules/http-parser-js": {
|
||||||
|
"version": "0.5.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
|
||||||
|
"integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/http2-wrapper": {
|
"node_modules/http2-wrapper": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
|
||||||
@@ -3225,6 +3260,12 @@
|
|||||||
"node": ">=0.8.19"
|
"node": ">=0.8.19"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/inherits": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||||
|
"license": "ISC"
|
||||||
|
},
|
||||||
"node_modules/invariant": {
|
"node_modules/invariant": {
|
||||||
"version": "2.2.4",
|
"version": "2.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||||
@@ -3544,7 +3585,6 @@
|
|||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
@@ -3843,6 +3883,12 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/querystringify": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/quick-lru": {
|
"node_modules/quick-lru": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
|
||||||
@@ -4001,6 +4047,12 @@
|
|||||||
"react-dom": ">=16.6.0"
|
"react-dom": ">=16.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/requires-port": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/resize-observer-polyfill": {
|
"node_modules/resize-observer-polyfill": {
|
||||||
"version": "1.5.1",
|
"version": "1.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||||
@@ -4101,6 +4153,26 @@
|
|||||||
"fsevents": "~2.3.2"
|
"fsevents": "~2.3.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/safe-buffer": {
|
||||||
|
"version": "5.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||||
|
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/feross"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "patreon",
|
||||||
|
"url": "https://www.patreon.com/feross"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "consulting",
|
||||||
|
"url": "https://feross.org/support"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/scheduler": {
|
"node_modules/scheduler": {
|
||||||
"version": "0.27.0",
|
"version": "0.27.0",
|
||||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||||
@@ -4180,6 +4252,34 @@
|
|||||||
"jquery": ">=1.8.0"
|
"jquery": ">=1.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/sockjs-client": {
|
||||||
|
"version": "1.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
|
||||||
|
"integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"debug": "^3.2.7",
|
||||||
|
"eventsource": "^2.0.2",
|
||||||
|
"faye-websocket": "^0.11.4",
|
||||||
|
"inherits": "^2.0.4",
|
||||||
|
"url-parse": "^1.5.10"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://tidelift.com/funding/github/npm/sockjs-client"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sockjs-client/node_modules/debug": {
|
||||||
|
"version": "3.2.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
|
||||||
|
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"ms": "^2.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/source-map-js": {
|
"node_modules/source-map-js": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||||
@@ -4372,6 +4472,16 @@
|
|||||||
"punycode": "^2.1.0"
|
"punycode": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/url-parse": {
|
||||||
|
"version": "1.5.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
|
||||||
|
"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"querystringify": "^2.1.1",
|
||||||
|
"requires-port": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "7.3.1",
|
"version": "7.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
||||||
@@ -4456,6 +4566,29 @@
|
|||||||
"loose-envify": "^1.0.0"
|
"loose-envify": "^1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/websocket-driver": {
|
||||||
|
"version": "0.7.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
|
||||||
|
"integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"http-parser-js": ">=0.5.1",
|
||||||
|
"safe-buffer": ">=5.1.0",
|
||||||
|
"websocket-extensions": ">=0.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/websocket-extensions": {
|
||||||
|
"version": "0.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
|
||||||
|
"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/which": {
|
"node_modules/which": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||||
|
|||||||
@@ -16,6 +16,7 @@
|
|||||||
"@fortawesome/free-solid-svg-icons": "^7.0.0",
|
"@fortawesome/free-solid-svg-icons": "^7.0.0",
|
||||||
"@fortawesome/react-fontawesome": "^0.2.3",
|
"@fortawesome/react-fontawesome": "^0.2.3",
|
||||||
"@monaco-editor/react": "^4.7.0",
|
"@monaco-editor/react": "^4.7.0",
|
||||||
|
"@stomp/stompjs": "^7.3.0",
|
||||||
"axios": "^1.11.0",
|
"axios": "^1.11.0",
|
||||||
"bootstrap": "^5.3.7",
|
"bootstrap": "^5.3.7",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
@@ -26,7 +27,8 @@
|
|||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
"react-router-dom": "^7.7.1",
|
"react-router-dom": "^7.7.1",
|
||||||
"react-slick": "^0.30.3",
|
"react-slick": "^0.30.3",
|
||||||
"slick-carousel": "^1.8.1"
|
"slick-carousel": "^1.8.1",
|
||||||
|
"sockjs-client": "^1.6.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.30.1",
|
"@eslint/js": "^9.30.1",
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
"endpoints": {
|
"endpoints": {
|
||||||
"pastes": {
|
"pastes": {
|
||||||
"all": "/pastes",
|
"all": "/pastes",
|
||||||
"byId": "/:pasteId",
|
"byId": "/by-id/:pasteId",
|
||||||
"byKey": "/:pasteKey"
|
"byKey": "/s/:pasteKey"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
"endpoints": {
|
"endpoints": {
|
||||||
"pastes": {
|
"pastes": {
|
||||||
"all": "/pastes",
|
"all": "/pastes",
|
||||||
"byId": "/:pasteId",
|
"byId": "/by-id/:pasteId",
|
||||||
"byKey": "/:pasteKey"
|
"byKey": "/s/:pasteKey"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
43
src/App.jsx
43
src/App.jsx
@@ -1,17 +1,54 @@
|
|||||||
import NavBar from '@/components/NavBar.jsx';
|
import NavBar from '@/components/NavBar.jsx';
|
||||||
import { Route, Routes, useLocation } from 'react-router-dom'
|
import { Route, Routes, useLocation } from 'react-router-dom'
|
||||||
import Home from '@/pages/Home.jsx'
|
import Home from '@/pages/Home.jsx'
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import NotificationModal from './components/NotificationModal';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
const [connected, setConnected] = useState(false);
|
||||||
|
const [showExperimentalModal, setShowExperimentalModal] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const hasSeenWarning = localStorage.getItem('experimental_rt_warned');
|
||||||
|
|
||||||
|
if (!hasSeenWarning) {
|
||||||
|
setShowExperimentalModal(true);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCloseWarning = () => {
|
||||||
|
localStorage.setItem('experimental_rt_warned', 'true');
|
||||||
|
setShowExperimentalModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NavBar />
|
<NavBar connected={connected} />
|
||||||
<div className="fill d-flex flex-column">
|
<div className="fill d-flex flex-column">
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home mode="create" onConnectChange={setConnected} />} />
|
||||||
<Route path="/:pasteKey" element={<Home />} />
|
<Route path="/s/:pasteKey" element={<Home mode="static" onConnectChange={setConnected} />} />
|
||||||
|
<Route path="/:rtKey" element={<Home mode="rt" onConnectChange={setConnected} />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</div>
|
</div>
|
||||||
|
<NotificationModal
|
||||||
|
show={showExperimentalModal}
|
||||||
|
onClose={handleCloseWarning}
|
||||||
|
title="Modo Experimental"
|
||||||
|
message={
|
||||||
|
<span>
|
||||||
|
He añadido un modo tiempo real pero de momento es <strong>EXPERIMENTAL</strong>. Cualquier fallo por favor mandadlo a jose [arroba] miarma.net.
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
variant="warning"
|
||||||
|
buttons={[
|
||||||
|
{
|
||||||
|
label: "Vale",
|
||||||
|
variant: "warning",
|
||||||
|
onClick: handleCloseWarning
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,92 +0,0 @@
|
|||||||
import { useState, useRef, useEffect, cloneElement } from 'react';
|
|
||||||
import { Button } from 'react-bootstrap';
|
|
||||||
import { AnimatePresence, motion as _motion } from 'framer-motion';
|
|
||||||
import '../css/AnimatedDropdown.css';
|
|
||||||
|
|
||||||
const AnimatedDropdown = ({
|
|
||||||
trigger,
|
|
||||||
icon,
|
|
||||||
variant = "secondary",
|
|
||||||
className = "",
|
|
||||||
buttonStyle = "",
|
|
||||||
show,
|
|
||||||
onToggle,
|
|
||||||
onMouseEnter,
|
|
||||||
onMouseLeave,
|
|
||||||
children
|
|
||||||
}) => {
|
|
||||||
const isControlled = show !== undefined;
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const triggerRef = useRef(null);
|
|
||||||
const dropdownRef = useRef(null);
|
|
||||||
|
|
||||||
const actualOpen = isControlled ? show : open;
|
|
||||||
|
|
||||||
const toggle = () => {
|
|
||||||
const newState = !actualOpen;
|
|
||||||
if (!isControlled) setOpen(newState);
|
|
||||||
onToggle?.(newState);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClickOutside = (e) => {
|
|
||||||
if (
|
|
||||||
dropdownRef.current &&
|
|
||||||
!dropdownRef.current.contains(e.target) &&
|
|
||||||
!triggerRef.current?.contains(e.target)
|
|
||||||
) {
|
|
||||||
if (!isControlled) setOpen(false);
|
|
||||||
onToggle?.(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener("mousedown", handleClickOutside);
|
|
||||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
||||||
}, [isControlled, onToggle]);
|
|
||||||
|
|
||||||
const triggerElement = trigger
|
|
||||||
? (typeof trigger === "function"
|
|
||||||
? trigger({ onClick: toggle, ref: triggerRef })
|
|
||||||
: cloneElement(trigger, { onClick: toggle, ref: triggerRef }))
|
|
||||||
: (
|
|
||||||
<Button
|
|
||||||
ref={triggerRef}
|
|
||||||
variant={variant}
|
|
||||||
className={`circle-btn ${buttonStyle}`}
|
|
||||||
onClick={toggle}
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
|
|
||||||
const dropdownClasses = `dropdown-menu show shadow rounded-4 px-2 py-2 ${className}`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`position-relative d-inline-block`}
|
|
||||||
onClick={toggle}
|
|
||||||
onMouseEnter={onMouseEnter}
|
|
||||||
onMouseLeave={onMouseLeave}
|
|
||||||
ref={triggerRef}
|
|
||||||
>
|
|
||||||
{triggerElement}
|
|
||||||
|
|
||||||
<AnimatePresence>
|
|
||||||
{actualOpen && (
|
|
||||||
<_motion.div
|
|
||||||
ref={dropdownRef}
|
|
||||||
initial={{ opacity: 0, scale: 0.98 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
exit={{ opacity: 0, scale: 0.98 }}
|
|
||||||
transition={{ duration: 0.15 }}
|
|
||||||
className={dropdownClasses}
|
|
||||||
>
|
|
||||||
{typeof children === "function" ? children({ closeDropdown: () => toggle(false) }) : children}
|
|
||||||
</_motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnimatedDropdown;
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
import { useState, useRef, useEffect, cloneElement } from 'react';
|
|
||||||
import { Button } from 'react-bootstrap';
|
|
||||||
import { AnimatePresence, motion as _motion } from 'framer-motion';
|
|
||||||
import '@/css/AnimatedDropdown.css';
|
|
||||||
|
|
||||||
const AnimatedDropend = ({
|
|
||||||
trigger,
|
|
||||||
icon,
|
|
||||||
variant = "secondary",
|
|
||||||
className = "",
|
|
||||||
buttonStyle = "",
|
|
||||||
show,
|
|
||||||
onToggle,
|
|
||||||
onMouseEnter,
|
|
||||||
onMouseLeave,
|
|
||||||
children
|
|
||||||
}) => {
|
|
||||||
const isControlled = show !== undefined;
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const triggerRef = useRef(null);
|
|
||||||
const dropdownRef = useRef(null);
|
|
||||||
|
|
||||||
const actualOpen = isControlled ? show : open;
|
|
||||||
|
|
||||||
const toggle = (forceValue) => {
|
|
||||||
const newState = typeof forceValue === "boolean" ? forceValue : !actualOpen;
|
|
||||||
if (!isControlled) setOpen(newState);
|
|
||||||
onToggle?.(newState);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClickOutside = (e) => {
|
|
||||||
if (
|
|
||||||
dropdownRef.current &&
|
|
||||||
!dropdownRef.current.contains(e.target) &&
|
|
||||||
!triggerRef.current?.contains(e.target)
|
|
||||||
) {
|
|
||||||
if (!isControlled) setOpen(false);
|
|
||||||
onToggle?.(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener("mousedown", handleClickOutside);
|
|
||||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
||||||
}, [isControlled, onToggle]);
|
|
||||||
|
|
||||||
const handleMouseEnter = () => {
|
|
||||||
if (!isControlled) setOpen(true);
|
|
||||||
onToggle?.(true);
|
|
||||||
onMouseEnter?.();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseLeave = () => {
|
|
||||||
if (!isControlled) setOpen(false);
|
|
||||||
onToggle?.(false);
|
|
||||||
onMouseLeave?.();
|
|
||||||
};
|
|
||||||
|
|
||||||
const triggerElement = trigger
|
|
||||||
? (typeof trigger === "function"
|
|
||||||
? trigger({
|
|
||||||
onClick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
toggle();
|
|
||||||
},
|
|
||||||
ref: triggerRef
|
|
||||||
})
|
|
||||||
: cloneElement(trigger, {
|
|
||||||
onClick: e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
toggle();
|
|
||||||
},
|
|
||||||
ref: triggerRef
|
|
||||||
}))
|
|
||||||
: (
|
|
||||||
<Button
|
|
||||||
ref={triggerRef}
|
|
||||||
variant={variant}
|
|
||||||
className={`circle-btn ${buttonStyle}`}
|
|
||||||
onClick={toggle}
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
|
|
||||||
const dropdownClasses = `dropdown-menu show shadow rounded-4 px-2 py-2 ${className}`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="position-relative d-inline-block dropend"
|
|
||||||
onMouseEnter={handleMouseEnter}
|
|
||||||
onMouseLeave={handleMouseLeave}
|
|
||||||
ref={triggerRef}
|
|
||||||
>
|
|
||||||
{triggerElement}
|
|
||||||
|
|
||||||
<AnimatePresence>
|
|
||||||
{actualOpen && (
|
|
||||||
<_motion.div
|
|
||||||
ref={dropdownRef}
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
exit={{ opacity: 0, x: -10 }}
|
|
||||||
transition={{ duration: 0.15 }}
|
|
||||||
className={dropdownClasses}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '0',
|
|
||||||
left: '100%',
|
|
||||||
zIndex: 1000,
|
|
||||||
whiteSpace: 'nowrap'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{typeof children === "function" ? children({ closeDropdown: () => toggle(false) }) : children}
|
|
||||||
</_motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnimatedDropend;
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { useAuth } from "@/hooks/useAuth.js";
|
|
||||||
|
|
||||||
const IfAuthenticated = ({ children }) => {
|
|
||||||
const { authStatus } = useAuth();
|
|
||||||
return authStatus === "authenticated" ? children : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default IfAuthenticated;
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { useAuth } from "@/hooks/useAuth.js";
|
|
||||||
|
|
||||||
const IfNotAuthenticated = ({ children }) => {
|
|
||||||
const { authStatus } = useAuth();
|
|
||||||
return authStatus === "unauthenticated" ? children : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default IfNotAuthenticated;
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { useAuth } from "@/hooks/useAuth.js";
|
|
||||||
|
|
||||||
const IfRole = ({ roles, children }) => {
|
|
||||||
const { user, authStatus } = useAuth();
|
|
||||||
|
|
||||||
if (authStatus !== "authenticated") return null;
|
|
||||||
|
|
||||||
const userRole = user?.role;
|
|
||||||
|
|
||||||
return roles.includes(userRole) ? children : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default IfRole;
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
||||||
import { faUser } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import { Form, Button, Alert, FloatingLabel, Row, Col } from 'react-bootstrap';
|
|
||||||
import PasswordInput from '@/components/Auth/PasswordInput.jsx';
|
|
||||||
|
|
||||||
import { useContext, useState } from "react";
|
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
|
||||||
import { AuthContext } from "@/context/AuthContext.jsx";
|
|
||||||
|
|
||||||
import CustomContainer from '@/components/CustomContainer.jsx';
|
|
||||||
import ContentWrapper from '@/components/ContentWrapper.jsx';
|
|
||||||
|
|
||||||
import '@/css/LoginForm.css';
|
|
||||||
|
|
||||||
const LoginForm = () => {
|
|
||||||
const { login, error } = useContext(AuthContext);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [formState, setFormState] = useState({
|
|
||||||
emailOrUserName: "",
|
|
||||||
password: "",
|
|
||||||
keepLoggedIn: false
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleChange = (e) => {
|
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormState((prev) => ({ ...prev, [name]: value }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formState.emailOrUserName);
|
|
||||||
|
|
||||||
const loginBody = {
|
|
||||||
password: formState.password,
|
|
||||||
keepLoggedIn: Boolean(formState.keepLoggedIn),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isEmail) {
|
|
||||||
loginBody.email = formState.emailOrUserName;
|
|
||||||
} else {
|
|
||||||
loginBody.userName = formState.emailOrUserName;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await login(loginBody);
|
|
||||||
navigate("/");
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Error de login:", err.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CustomContainer>
|
|
||||||
<ContentWrapper>
|
|
||||||
<div className="login-card card shadow p-5 rounded-5 mx-auto col-12 col-md-8 col-lg-6 col-xl-5 d-flex flex-column gap-4">
|
|
||||||
<h1 className="text-center">Inicio de sesión</h1>
|
|
||||||
<Form className="d-flex flex-column gap-5" onSubmit={handleSubmit}>
|
|
||||||
<div className="d-flex flex-column gap-3">
|
|
||||||
<FloatingLabel
|
|
||||||
controlId="floatingUsuario"
|
|
||||||
label={
|
|
||||||
<>
|
|
||||||
<FontAwesomeIcon icon={faUser} className="me-2" />
|
|
||||||
Usuario o Email
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Form.Control
|
|
||||||
type="text"
|
|
||||||
placeholder=""
|
|
||||||
name="emailOrUserName"
|
|
||||||
value={formState.emailOrUserName}
|
|
||||||
onChange={handleChange}
|
|
||||||
className="rounded-4"
|
|
||||||
/>
|
|
||||||
</FloatingLabel>
|
|
||||||
|
|
||||||
<PasswordInput
|
|
||||||
value={formState.password}
|
|
||||||
onChange={handleChange}
|
|
||||||
name="password"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2">
|
|
||||||
<Form.Check
|
|
||||||
type="checkbox"
|
|
||||||
name="keepLoggedIn"
|
|
||||||
label="Mantener sesión iniciada"
|
|
||||||
className="text-secondary"
|
|
||||||
value={formState.keepLoggedIn}
|
|
||||||
onChange={(e) => { formState.keepLoggedIn = e.target.checked; setFormState({ ...formState }) }}
|
|
||||||
/>
|
|
||||||
{/*<Link disabled to="#" className="muted">
|
|
||||||
Olvidé mi contraseña
|
|
||||||
</Link>*/}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert variant="danger" className="text-center py-2 mb-0">
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="text-center">
|
|
||||||
<Button type="submit" className="w-75 padding-4 rounded-4 border-0 shadow-sm login-button">
|
|
||||||
Iniciar sesión
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</ContentWrapper>
|
|
||||||
</CustomContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export default LoginForm;
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { Navigate } from "react-router-dom";
|
|
||||||
import { useAuth } from "@/hooks/useAuth.js";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { faSpinner } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
|
|
||||||
const ProtectedRoute = ({ minimumRoles, children }) => {
|
|
||||||
const { authStatus } = useAuth();
|
|
||||||
|
|
||||||
if (authStatus === "checking") return <FontAwesomeIcon icon={faSpinner} />; // o un loader si quieres
|
|
||||||
if (authStatus === "unauthenticated") return <Navigate to="/login" replace />;
|
|
||||||
if (authStatus === "authenticated" && minimumRoles) {
|
|
||||||
const userRole = JSON.parse(localStorage.getItem("user"))?.role;
|
|
||||||
if (!minimumRoles.includes(userRole)) return <Navigate to="/" replace />;
|
|
||||||
}
|
|
||||||
return children;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProtectedRoute;
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
const ContentWrapper = ({ children }) => {
|
|
||||||
return (
|
|
||||||
<div className="container-xl">
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
ContentWrapper.propTypes = {
|
|
||||||
children: PropTypes.node.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ContentWrapper;
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
import Slider from 'react-slick';
|
|
||||||
import '@/css/CustomCarousel.css';
|
|
||||||
|
|
||||||
const CustomCarousel = ({ images }) => {
|
|
||||||
const settings = {
|
|
||||||
dots: false,
|
|
||||||
infinite: true,
|
|
||||||
speed: 500,
|
|
||||||
slidesToShow: 2,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
arrows: false,
|
|
||||||
autoplay: true,
|
|
||||||
autoplaySpeed: 3000,
|
|
||||||
responsive: [
|
|
||||||
{
|
|
||||||
breakpoint: 768, // móviles
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 1,
|
|
||||||
arrows: false,
|
|
||||||
autoplay: true,
|
|
||||||
autoplaySpeed: 3000,
|
|
||||||
dots: false,
|
|
||||||
infinite: true,
|
|
||||||
speed: 500
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="my-4">
|
|
||||||
<Slider {...settings}>
|
|
||||||
{images.map((src, index) => (
|
|
||||||
<div key={index} className='carousel-img-wrapper'>
|
|
||||||
<img
|
|
||||||
src={src}
|
|
||||||
alt={`slide-${index}`}
|
|
||||||
className="carousel-img"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</Slider>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CustomCarousel;
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
const CustomContainer = ({ children }) => {
|
|
||||||
return (
|
|
||||||
<main className="px-4 py-5">
|
|
||||||
{children}
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
CustomContainer.propTypes = {
|
|
||||||
children: PropTypes.node.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CustomContainer;
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import { faXmark } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { Modal, Button } from "react-bootstrap";
|
|
||||||
|
|
||||||
const CustomModal = ({ show, onClose, title, children }) => {
|
|
||||||
return (
|
|
||||||
<Modal show={show} onHide={onClose} size="xl" centered>
|
|
||||||
<Modal.Header className='justify-content-between rounded-top-4'>
|
|
||||||
<Modal.Title>{title}</Modal.Title>
|
|
||||||
<Button variant='transparent' onClick={onClose}>
|
|
||||||
<FontAwesomeIcon icon={faXmark} className='close-button fa-xl' />
|
|
||||||
</Button>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body className="rounded-bottom-4 p-0"
|
|
||||||
style={{
|
|
||||||
maxHeight: '80vh',
|
|
||||||
overflowY: 'auto',
|
|
||||||
padding: '1rem',
|
|
||||||
}}>
|
|
||||||
{children}
|
|
||||||
</Modal.Body>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CustomModal;
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
||||||
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import '@/css/Footer.css';
|
|
||||||
import { faGithub } from '@fortawesome/free-brands-svg-icons';
|
|
||||||
|
|
||||||
const Footer = () => {
|
|
||||||
const [heart, setHeart] = useState('💜');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const hearts = ["❤️", "💛", "🧡", "💚", "💙", "💜"];
|
|
||||||
const randomHeart = () => hearts[Math.floor(Math.random() * hearts.length)];
|
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setHeart(randomHeart());
|
|
||||||
}, 3000);
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<footer className="footer d-flex flex-column align-items-center gap-5 pt-5 px-4">
|
|
||||||
<div className="footer-columns w-100" style={{ maxWidth: '900px' }}>
|
|
||||||
<div className="footer-column">
|
|
||||||
<h4 className="footer-title">Contacto</h4>
|
|
||||||
<div className="contact-info p-4">
|
|
||||||
<a
|
|
||||||
href="https://github.com/Gallardo7761"
|
|
||||||
target="_blank"
|
|
||||||
className='text-break d-block'
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faGithub} className="fa-icon me-2 " />
|
|
||||||
Gallardo7761
|
|
||||||
</a>
|
|
||||||
<a href="mailto:jose@miarma.net" className="text-break d-block">
|
|
||||||
<FontAwesomeIcon icon={faEnvelope} className="fa-icon me-2" />
|
|
||||||
jose@miarma.net
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="footer-bottom w-100 py-5 text-center">
|
|
||||||
<h6 id="devd" className='m-0'>
|
|
||||||
Hecho con <span className="heart-anim">{heart}</span> por{' '}
|
|
||||||
<a href="https://gallardo.dev" target="_blank" rel="noopener noreferrer">
|
|
||||||
Gallardo7761
|
|
||||||
</a>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Footer;
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import '@/css/Header.css';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
const Header = () => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header className={`text-center bg-img`}>
|
|
||||||
<div className="m-0 p-5 mask">
|
|
||||||
<div className="d-flex flex-column justify-content-center align-items-center h-100">
|
|
||||||
<Link to='/' className='text-decoration-none'>
|
|
||||||
<h1 className='header-title m-0 text-white shadowed'>Tu página web</h1>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@@ -6,8 +6,10 @@ import { Navbar, Nav, Container } from 'react-bootstrap';
|
|||||||
import SearchToolbar from './SearchToolbar';
|
import SearchToolbar from './SearchToolbar';
|
||||||
import { useSearch } from "@/context/SearchContext";
|
import { useSearch } from "@/context/SearchContext";
|
||||||
import NotificationModal from './NotificationModal';
|
import NotificationModal from './NotificationModal';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import { faCircle } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
const NavBar = () => {
|
const NavBar = ({ connected }) => {
|
||||||
const [expanded, setExpanded] = useState(false);
|
const [expanded, setExpanded] = useState(false);
|
||||||
const [isLg, setIsLg] = useState(window.innerWidth >= 992);
|
const [isLg, setIsLg] = useState(window.innerWidth >= 992);
|
||||||
const [isXs, setIsXs] = useState(window.innerWidth < 576);
|
const [isXs, setIsXs] = useState(window.innerWidth < 576);
|
||||||
@@ -47,7 +49,6 @@ const NavBar = () => {
|
|||||||
className='shadow-none custom-border-bottom'
|
className='shadow-none custom-border-bottom'
|
||||||
>
|
>
|
||||||
<Container fluid>
|
<Container fluid>
|
||||||
{/* brand */}
|
|
||||||
<Nav.Item
|
<Nav.Item
|
||||||
title="mpaste"
|
title="mpaste"
|
||||||
className={`navbar-brand`}
|
className={`navbar-brand`}
|
||||||
@@ -58,12 +59,10 @@ const NavBar = () => {
|
|||||||
</div>
|
</div>
|
||||||
</Nav.Item>
|
</Nav.Item>
|
||||||
|
|
||||||
{/* ThemeButton SIEMPRE fijo */}
|
|
||||||
<div className="order-lg-2 ms-auto me-2">
|
<div className="order-lg-2 ms-auto me-2">
|
||||||
<ThemeButton onlyIcon={isXs} />
|
<ThemeButton onlyIcon={isXs} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* burger */}
|
|
||||||
<Navbar.Toggle
|
<Navbar.Toggle
|
||||||
aria-controls="main-navbar"
|
aria-controls="main-navbar"
|
||||||
className="custom-toggler border-0 order-lg-3"
|
className="custom-toggler border-0 order-lg-3"
|
||||||
@@ -79,7 +78,6 @@ const NavBar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</Navbar.Toggle>
|
</Navbar.Toggle>
|
||||||
|
|
||||||
{/* links y search que colapsan */}
|
|
||||||
<Navbar.Collapse id="main-navbar" className="order-lg-1">
|
<Navbar.Collapse id="main-navbar" className="order-lg-1">
|
||||||
<Nav
|
<Nav
|
||||||
className={`me-auto gap-3 w-100 ${expanded ? "flex-column align-items-start mt-3 mb-2" : "d-flex align-items-center"}`}
|
className={`me-auto gap-3 w-100 ${expanded ? "flex-column align-items-start mt-3 mb-2" : "d-flex align-items-center"}`}
|
||||||
@@ -92,11 +90,24 @@ const NavBar = () => {
|
|||||||
onSearchChange={setSearchTerm}
|
onSearchChange={setSearchTerm}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="d-flex align-items-center gap-2 ms-2 px-2 py-1 " style={{ fontSize: '0.85rem' }}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faCircle}
|
||||||
|
className={connected ? "pulse-animation" : ""}
|
||||||
|
style={{
|
||||||
|
color: connected ? '#28a745' : '#dc3545',
|
||||||
|
fontSize: '10px',
|
||||||
|
filter: connected ? 'drop-shadow(0 0 4px #28a745)' : 'none'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span className="text-secondary fw-medium">
|
||||||
|
{connected ? 'conectado' : 'desconectado'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</Nav>
|
</Nav>
|
||||||
</Navbar.Collapse>
|
</Navbar.Collapse>
|
||||||
</Container>
|
</Container>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
{/* Contact Modal */}
|
|
||||||
<NotificationModal
|
<NotificationModal
|
||||||
show={showContactModal}
|
show={showContactModal}
|
||||||
onClose={() => setShowContactModal(false)}
|
onClose={() => setShowContactModal(false)}
|
||||||
|
|||||||
@@ -34,13 +34,13 @@ const CodeEditor = ({ className = "", syntax, readOnly, onChange, value, editorE
|
|||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
onMount={onMount}
|
onMount={onMount}
|
||||||
options={{
|
options={{
|
||||||
minimap: { enabled: false },
|
minimap: { enabled: true },
|
||||||
automaticLayout: true,
|
automaticLayout: true,
|
||||||
fontFamily: 'Fira Code',
|
fontFamily: 'Fira Code',
|
||||||
fontLigatures: true,
|
fontLigatures: true,
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
lineHeight: 1.5,
|
lineHeight: 1.5,
|
||||||
scrollbar: { verticalScrollbarSize: 0 },
|
scrollbar: { verticalScrollbarSize: 10 },
|
||||||
wordWrap: "on",
|
wordWrap: "on",
|
||||||
formatOnPaste: true,
|
formatOnPaste: true,
|
||||||
readOnly: readOnly || false,
|
readOnly: readOnly || false,
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import '@/css/PasswordInput.css';
|
|||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { faEye, faEyeSlash, faKey } from '@fortawesome/free-solid-svg-icons';
|
import { faEye, faEyeSlash, faKey } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
const PasswordInput = ({ value, onChange, name = "password" }) => {
|
const PasswordInput = ({ disabled, value, onChange, name = "password" }) => {
|
||||||
const [show, setShow] = useState(false);
|
const [show, setShow] = useState(false);
|
||||||
|
|
||||||
const toggleShow = () => setShow(prev => !prev);
|
const toggleShow = () => setShow(prev => !prev);
|
||||||
@@ -28,6 +28,7 @@ const PasswordInput = ({ value, onChange, name = "password" }) => {
|
|||||||
placeholder=""
|
placeholder=""
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
className="rounded-4 pe-5"
|
className="rounded-4 pe-5"
|
||||||
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
</FloatingLabel>
|
</FloatingLabel>
|
||||||
|
|
||||||
@@ -3,8 +3,7 @@ import { Modal, Button, Form } from 'react-bootstrap';
|
|||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { faLock } from '@fortawesome/free-solid-svg-icons';
|
import { faLock } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import PasswordInput from '@/components/Auth/PasswordInput';
|
import PasswordInput from '@/components/Pastes/PasswordInput';
|
||||||
import { renderErrorAlert } from '@/util/alertHelpers';
|
|
||||||
import '@/css/PasswordModal.css';
|
import '@/css/PasswordModal.css';
|
||||||
|
|
||||||
const PasswordModal = ({
|
const PasswordModal = ({
|
||||||
@@ -37,8 +36,6 @@ const PasswordModal = ({
|
|||||||
Esta paste está protegida con contraseña. Introduce la clave para continuar.
|
Esta paste está protegida con contraseña. Introduce la clave para continuar.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{renderErrorAlert(error)}
|
|
||||||
|
|
||||||
<PasswordInput
|
<PasswordInput
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
@@ -1,41 +1,185 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import { Form, Button, Row, Col, FloatingLabel, Alert } from "react-bootstrap";
|
import { Form, Button, Row, Col, FloatingLabel } from "react-bootstrap";
|
||||||
import '@/css/PastePanel.css';
|
import '@/css/PastePanel.css';
|
||||||
import PasswordInput from "@/components/Auth/PasswordInput";
|
import PasswordInput from "@/components/Pastes/PasswordInput";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faCode, faHeader } from "@fortawesome/free-solid-svg-icons";
|
import { faCircle, faCode, faHeader } from "@fortawesome/free-solid-svg-icons";
|
||||||
import CodeEditor from "./CodeEditor";
|
import CodeEditor from "./CodeEditor";
|
||||||
import PublicPasteItem from "./PublicPasteItem";
|
import PublicPasteItem from "./PublicPasteItem";
|
||||||
import { useParams, useNavigate } from "react-router-dom";
|
import { useParams, useNavigate } from "react-router-dom";
|
||||||
import { useDataContext } from "@/hooks/useDataContext";
|
import { useDataContext } from "@/hooks/useDataContext";
|
||||||
import PasswordModal from "@/components/Auth/PasswordModal.jsx";
|
import { useError } from '@/context/ErrorContext';
|
||||||
|
import PasswordModal from "@/components/Pastes/PasswordModal.jsx";
|
||||||
|
import { Client } from "@stomp/stompjs";
|
||||||
|
import SockJS from 'sockjs-client';
|
||||||
|
|
||||||
const PastePanel = ({ onSubmit, publicPastes }) => {
|
const INITIAL_FORM_DATA = {
|
||||||
const { pasteKey } = useParams();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { getData } = useDataContext();
|
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
title: "",
|
title: "",
|
||||||
content: "",
|
content: "",
|
||||||
syntax: "",
|
syntax: "",
|
||||||
burnAfter: false,
|
burnAfter: false,
|
||||||
isPrivate: false,
|
isPrivate: false,
|
||||||
|
isRt: false,
|
||||||
password: ""
|
password: ""
|
||||||
});
|
};
|
||||||
|
|
||||||
|
const PastePanel = ({ onSubmit, publicPastes, mode, pasteKey: propKey, onConnectChange }) => {
|
||||||
|
const { pasteKey: urlPasteKey, rtKey } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { getData } = useDataContext();
|
||||||
|
const { showError } = useError();
|
||||||
|
|
||||||
|
const activeKey = propKey || urlPasteKey || rtKey;
|
||||||
|
|
||||||
const [selectedPaste, setSelectedPaste] = useState(null);
|
const [selectedPaste, setSelectedPaste] = useState(null);
|
||||||
const [editorErrors, setEditorErrors] = useState([]);
|
const [editorErrors, setEditorErrors] = useState([]);
|
||||||
const [fieldErrors, setFieldErrors] = useState({});
|
const [fieldErrors, setFieldErrors] = useState({});
|
||||||
const [showPasswordModal, setShowPasswordModal] = useState(false);
|
const [showPasswordModal, setShowPasswordModal] = useState(false);
|
||||||
|
const [stompClient, setStompClient] = useState(null);
|
||||||
|
const [connected, setConnected] = useState(null);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
const [formData, setFormData] = useState({ ...INITIAL_FORM_DATA });
|
||||||
|
|
||||||
|
const lastSavedContent = useRef(formData.content);
|
||||||
|
|
||||||
|
const isStaticView = mode === 'static' && !!activeKey;
|
||||||
|
const isReadOnly = isStaticView || mode === 'rt';
|
||||||
|
const isEditorReadOnly = isStaticView;
|
||||||
|
const titleValue = mode === 'rt'
|
||||||
|
? `Sesión: ${activeKey}`
|
||||||
|
: (selectedPaste?.title ?? formData.title ?? "");
|
||||||
|
const isRemoteChange = useRef(false);
|
||||||
|
|
||||||
|
// Sincroniza el panel cuando cambia el modo o la clave activa:
|
||||||
|
// - modo static: intenta cargar la paste seleccionada
|
||||||
|
// - modo create: reinicia todo el formulario y errores
|
||||||
|
useEffect(() => {
|
||||||
|
if (mode === 'static' && activeKey) {
|
||||||
|
fetchPaste(activeKey);
|
||||||
|
} else if (mode === 'create') {
|
||||||
|
setSelectedPaste(null);
|
||||||
|
setFormData({ ...INITIAL_FORM_DATA });
|
||||||
|
setFieldErrors({});
|
||||||
|
setEditorErrors([]);
|
||||||
|
}
|
||||||
|
}, [activeKey, mode]);
|
||||||
|
|
||||||
|
// Gestiona el ciclo de vida del WebSocket en tiempo real:
|
||||||
|
// conecta al entrar en modo rt y limpia la conexión al salir.
|
||||||
|
// Los cambios remotos marcan `isRemoteChange` para no disparar autosave en bucle.
|
||||||
|
useEffect(() => {
|
||||||
|
if (mode === 'rt' && activeKey) {
|
||||||
|
const socketUrl = import.meta.env.MODE === 'production'
|
||||||
|
? `https://api.miarma.net/v2/mpaste/ws`
|
||||||
|
: `http://localhost:8081/v2/mpaste/ws`;
|
||||||
|
|
||||||
|
const socket = new SockJS(socketUrl);
|
||||||
|
const client = new Client({
|
||||||
|
webSocketFactory: () => socket,
|
||||||
|
onConnect: () => {
|
||||||
|
setConnected(true);
|
||||||
|
onConnectChange(true);
|
||||||
|
client.subscribe(`/topic/session/${activeKey}`, (message) => {
|
||||||
|
try {
|
||||||
|
const remoteState = JSON.parse(message.body);
|
||||||
|
|
||||||
|
setFormData(prev => {
|
||||||
|
if (prev.content === remoteState.content && prev.syntax === remoteState.syntax) {
|
||||||
|
return prev;
|
||||||
|
}
|
||||||
|
isRemoteChange.current = true;
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
...remoteState
|
||||||
|
};
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error parseando el mensaje del socket", e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
client.publish({ destination: `/app/join/${activeKey}` });
|
||||||
|
},
|
||||||
|
onDisconnect: () => {
|
||||||
|
setConnected(false);
|
||||||
|
onConnectChange(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
client.activate();
|
||||||
|
setStompClient(client);
|
||||||
|
return () => client.deactivate();
|
||||||
|
} else {
|
||||||
|
setConnected(false);
|
||||||
|
}
|
||||||
|
}, [mode, activeKey]);
|
||||||
|
|
||||||
|
// Autosave con debounce en sesiones RT:
|
||||||
|
// solo guarda cuando el contenido local cambia y evita guardar cambios que vienen del socket.
|
||||||
|
useEffect(() => {
|
||||||
|
if (mode === 'rt' && connected && formData.content) {
|
||||||
|
|
||||||
|
if (isRemoteChange.current) {
|
||||||
|
lastSavedContent.current = formData.content;
|
||||||
|
isRemoteChange.current = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.content !== lastSavedContent.current) {
|
||||||
|
const timer = setTimeout(async () => {
|
||||||
|
setIsSaving(true);
|
||||||
|
try {
|
||||||
|
const dataToSave = {
|
||||||
|
...formData,
|
||||||
|
pasteKey: activeKey,
|
||||||
|
isRt: true,
|
||||||
|
title: mode === 'rt' ? `Sesión: ${activeKey}` : formData.title
|
||||||
|
};
|
||||||
|
await onSubmit(dataToSave, true);
|
||||||
|
lastSavedContent.current = formData.content;
|
||||||
|
console.log("Autosave");
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error autosaving:", err);
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [formData.content, mode, connected, activeKey]);
|
||||||
|
|
||||||
|
// Actualiza estado local y, si hay sesión RT activa, propaga el cambio al resto de clientes.
|
||||||
|
const handleChange = (key, value) => {
|
||||||
|
if (isReadOnly && mode !== 'rt') return;
|
||||||
|
|
||||||
|
const updatedData = { ...formData, [key]: value, isRt: mode === 'rt' };
|
||||||
|
|
||||||
|
setFormData(updatedData);
|
||||||
|
|
||||||
|
if (connected && stompClient && activeKey) {
|
||||||
|
stompClient.publish({
|
||||||
|
destination: `/app/edit/${activeKey}`,
|
||||||
|
body: JSON.stringify(updatedData)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setFieldErrors({});
|
setFieldErrors({});
|
||||||
setEditorErrors([]);
|
setEditorErrors([]);
|
||||||
|
|
||||||
|
const normalizedTitle = (formData.title ?? "").trim();
|
||||||
|
const payload = {
|
||||||
|
...formData,
|
||||||
|
title: formData.isPrivate
|
||||||
|
? (normalizedTitle || "Sin título")
|
||||||
|
: formData.title
|
||||||
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (onSubmit) await onSubmit(formData);
|
if (onSubmit) await onSubmit(payload);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error.status === 422 && error.errors) {
|
if (error.status === 422 && error.errors) {
|
||||||
const newFieldErrors = {};
|
const newFieldErrors = {};
|
||||||
@@ -53,32 +197,51 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSelectPaste = async (key) => navigate(`/${key}`);
|
const handleSelectPaste = (key) => navigate(`/s/${key}`);
|
||||||
|
|
||||||
|
// Lookup de paste estática:
|
||||||
|
// - 403: pide contraseña
|
||||||
|
// - 404: redirige al inicio
|
||||||
|
// Se hace en modo silencioso para que no abra el modal global en errores esperados.
|
||||||
const fetchPaste = async (key, pwd = "") => {
|
const fetchPaste = async (key, pwd = "") => {
|
||||||
const url = import.meta.env.MODE === 'production'
|
const url = import.meta.env.MODE === 'production'
|
||||||
? `https://api.miarma.net/v2/mpaste/pastes/${key}`
|
? `https://api.miarma.net/v2/mpaste/pastes/s/${key}`
|
||||||
: `http://localhost:8081/v2/mpaste/pastes/${key}`;
|
: `http://localhost:8081/v2/mpaste/pastes/s/${key}`;
|
||||||
|
|
||||||
const data = await getData(url, { password: pwd }, false);
|
const headers = pwd ? { "X-Paste-Password": pwd } : {};
|
||||||
|
|
||||||
if (!data) return;
|
try {
|
||||||
|
const response = await getData(url, {
|
||||||
setSelectedPaste(data);
|
params: null,
|
||||||
setFormData({
|
refresh: false,
|
||||||
title: data.title ?? "",
|
headers,
|
||||||
content: data.content ?? "",
|
silent: true,
|
||||||
syntax: data.syntax || "plaintext",
|
|
||||||
burnAfter: data.burnAfter || false,
|
|
||||||
isPrivate: data.isPrivate || false,
|
|
||||||
password: ""
|
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => { if (pasteKey) fetchPaste(pasteKey); }, [pasteKey]);
|
if (response) {
|
||||||
|
setSelectedPaste(response);
|
||||||
|
setShowPasswordModal(false);
|
||||||
|
setFormData({
|
||||||
|
...INITIAL_FORM_DATA,
|
||||||
|
title: (response.title ?? "").trim() || "Sin título",
|
||||||
|
content: response.content ?? "",
|
||||||
|
syntax: response.syntax || "plaintext",
|
||||||
|
burnAfter: response.burnAfter || false,
|
||||||
|
isPrivate: response.isPrivate || false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
const status = error?.status ?? error?.response?.status;
|
||||||
|
if (status === 403) {
|
||||||
|
setShowPasswordModal(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const handleChange = (key, value) => {
|
if (status === 404) {
|
||||||
setFormData(prev => ({ ...prev, [key]: value }));
|
setShowPasswordModal(false);
|
||||||
|
navigate("/", { replace: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -110,7 +273,7 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
className="flex-fill custom-border rounded-4 overflow-hidden pt-4 pe-4"
|
className="flex-fill custom-border rounded-4 overflow-hidden pt-4 pe-4"
|
||||||
syntax={formData.syntax}
|
syntax={formData.syntax}
|
||||||
readOnly={!!selectedPaste}
|
readOnly={isEditorReadOnly}
|
||||||
onChange={(val) => handleChange("content", val)}
|
onChange={(val) => handleChange("content", val)}
|
||||||
value={formData.content ?? ""}
|
value={formData.content ?? ""}
|
||||||
editorErrors={editorErrors}
|
editorErrors={editorErrors}
|
||||||
@@ -118,20 +281,20 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
<Col xs={12} lg={3} className="d-flex flex-column flex-fill min-h-0 overflow-hidden">
|
<Col xs={12} lg={3} className="d-flex flex-column flex-fill min-h-0 overflow-hidden">
|
||||||
<div className="d-flex flex-column flex-fill gap-3 overflow-auto">
|
<div className="d-flex flex-column flex-fill gap-3 overflow-auto p-1">
|
||||||
<FloatingLabel
|
<FloatingLabel
|
||||||
controlId="titleInput"
|
controlId="titleInput"
|
||||||
label={
|
label={
|
||||||
<span className={selectedPaste ? "text-white" : ""}>
|
<span className={isReadOnly ? "text-white" : ""}>
|
||||||
<FontAwesomeIcon icon={faHeader} className="me-2" />
|
<FontAwesomeIcon icon={faHeader} className="me-2" />
|
||||||
Título
|
Título
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Form.Control
|
<Form.Control
|
||||||
disabled={!!selectedPaste}
|
disabled={isReadOnly}
|
||||||
type="text"
|
type="text"
|
||||||
value={formData.title}
|
value={titleValue}
|
||||||
onChange={(e) => handleChange("title", e.target.value)}
|
onChange={(e) => handleChange("title", e.target.value)}
|
||||||
isInvalid={!!fieldErrors.title}
|
isInvalid={!!fieldErrors.title}
|
||||||
/>
|
/>
|
||||||
@@ -148,7 +311,7 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Form.Select
|
<Form.Select
|
||||||
disabled={!!selectedPaste}
|
disabled={isReadOnly}
|
||||||
value={formData.syntax}
|
value={formData.syntax}
|
||||||
onChange={(e) => handleChange("syntax", e.target.value)}
|
onChange={(e) => handleChange("syntax", e.target.value)}
|
||||||
>
|
>
|
||||||
@@ -184,35 +347,48 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
|
|||||||
</Form.Select>
|
</Form.Select>
|
||||||
</FloatingLabel>
|
</FloatingLabel>
|
||||||
|
|
||||||
|
<div className="d-flex align-items-center ms-1">
|
||||||
|
{connected && (isSaving ? (
|
||||||
|
<span className="text-muted" style={{ fontSize: '0.8rem' }}>
|
||||||
|
<FontAwesomeIcon icon={faCircle} className="pulse-animation me-2" style={{ color: '#ffc107', fontSize: '8px' }} />
|
||||||
|
Guardando cambios...
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-success" style={{ fontSize: '0.8rem' }}>
|
||||||
|
Cambios guardados
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
<Form.Check
|
<Form.Check
|
||||||
type="switch"
|
type="switch"
|
||||||
disabled={!!selectedPaste}
|
disabled={isReadOnly}
|
||||||
id="burnAfter"
|
id="burnAfter"
|
||||||
label="volátil"
|
label="volátil"
|
||||||
checked={formData.burnAfter}
|
checked={formData.burnAfter && !isReadOnly}
|
||||||
onChange={(e) => handleChange("burnAfter", e.target.checked)}
|
onChange={(e) => handleChange("burnAfter", e.target.checked)}
|
||||||
className="ms-1 d-flex gap-2 align-items-center"
|
className="ms-1 d-flex gap-2 align-items-center"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Form.Check
|
<Form.Check
|
||||||
type="switch"
|
type="switch"
|
||||||
disabled={!!selectedPaste}
|
disabled={isReadOnly}
|
||||||
id="isPrivate"
|
id="isPrivate"
|
||||||
label="privado"
|
label="privado"
|
||||||
checked={formData.isPrivate}
|
checked={formData.isPrivate && !isReadOnly}
|
||||||
onChange={(e) => handleChange("isPrivate", e.target.checked)}
|
onChange={(e) => handleChange("isPrivate", e.target.checked)}
|
||||||
className="ms-1 d-flex gap-2 align-items-center"
|
className="ms-1 d-flex gap-2 align-items-center"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{formData.isPrivate && (
|
{formData.isPrivate && !isReadOnly && (
|
||||||
<PasswordInput onChange={(e) => handleChange("password", e.target.value)} />
|
<PasswordInput disabled={isReadOnly} onChange={(e) => handleChange("password", e.target.value)} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="d-flex justify-content-end">
|
<div className="d-flex justify-content-end">
|
||||||
<Button
|
<Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!!selectedPaste}
|
disabled={isReadOnly}
|
||||||
>
|
>
|
||||||
Crear paste
|
Crear paste
|
||||||
</Button>
|
</Button>
|
||||||
@@ -227,7 +403,7 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
|
|||||||
onClose={() => setShowPasswordModal(false)}
|
onClose={() => setShowPasswordModal(false)}
|
||||||
onSubmit={(pwd) => {
|
onSubmit={(pwd) => {
|
||||||
setShowPasswordModal(false);
|
setShowPasswordModal(false);
|
||||||
fetchPaste(pasteKey, pwd);
|
fetchPaste(activeKey, pwd);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const trimContent = (text, maxLength = 80) => {
|
|||||||
const PublicPasteItem = ({ paste, onSelect }) => {
|
const PublicPasteItem = ({ paste, onSelect }) => {
|
||||||
return (
|
return (
|
||||||
<div className="public-paste-item p-2 mb-2 rounded custom-border" style={{ cursor: "pointer" }} onClick={() => onSelect(paste.pasteKey)}>
|
<div className="public-paste-item p-2 mb-2 rounded custom-border" style={{ cursor: "pointer" }} onClick={() => onSelect(paste.pasteKey)}>
|
||||||
<h5 className="m-0">{paste.title}</h5>
|
<h5 className="m-0">{(paste.title ?? "").trim() || "Sin título"}</h5>
|
||||||
<p className="m-0 text-truncate">{trimContent(paste.content, 100)}</p>
|
<p className="m-0 text-truncate">{trimContent(paste.content, 100)}</p>
|
||||||
<small className="custom-text-muted">
|
<small className="custom-text-muted">
|
||||||
{new Date(paste.createdAt).toLocaleString()}
|
{new Date(paste.createdAt).toLocaleString()}
|
||||||
|
|||||||
@@ -9,22 +9,36 @@ export const ConfigProvider = ({ children }) => {
|
|||||||
const [configError, setError] = useState(null);
|
const [configError, setError] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
|
||||||
const fetchConfig = async () => {
|
const fetchConfig = async () => {
|
||||||
try {
|
try {
|
||||||
const response = import.meta.env.MODE === 'production'
|
const settingsPath = import.meta.env.MODE === 'production'
|
||||||
? await fetch("/config/settings.prod.json")
|
? "/config/settings.prod.json"
|
||||||
: await fetch("/config/settings.dev.json");
|
: "/config/settings.dev.json";
|
||||||
|
|
||||||
|
const response = await fetch(settingsPath);
|
||||||
if (!response.ok) throw new Error("Error al cargar settings.*.json");
|
if (!response.ok) throw new Error("Error al cargar settings.*.json");
|
||||||
const json = await response.json();
|
const json = await response.json();
|
||||||
|
if (isMounted) {
|
||||||
setConfig(json);
|
setConfig(json);
|
||||||
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err.message);
|
if (isMounted) {
|
||||||
|
setError(err.message || "Error al cargar configuración");
|
||||||
|
}
|
||||||
} finally {
|
} finally {
|
||||||
|
if (isMounted) {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
fetchConfig();
|
fetchConfig();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isMounted = false;
|
||||||
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,14 +1,18 @@
|
|||||||
import { createContext } from "react";
|
import { createContext } from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import { useData } from "../hooks/useData";
|
import { useData } from "../hooks/useData";
|
||||||
|
import { useError } from "./ErrorContext";
|
||||||
|
|
||||||
export const DataContext = createContext();
|
export const DataContext = createContext();
|
||||||
|
|
||||||
export const DataProvider = ({ config, onError, children }) => {
|
export const DataProvider = ({ config, children }) => {
|
||||||
const data = useData(config, onError);
|
const { showError } = useError();
|
||||||
|
// Centraliza errores HTTP para que cualquier consumidor de DataContext
|
||||||
|
// tenga comportamiento homogéneo sin repetir wiring en cada página.
|
||||||
|
const dataApi = useData(config, showError);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataContext.Provider value={data}>
|
<DataContext.Provider value={dataApi}>
|
||||||
{children}
|
{children}
|
||||||
</DataContext.Provider>
|
</DataContext.Provider>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { createContext, useState, useContext } from 'react';
|
import { createContext, useState, useContext, useCallback } from 'react';
|
||||||
import NotificationModal from '../components/NotificationModal';
|
import NotificationModal from '../components/NotificationModal';
|
||||||
|
|
||||||
const ErrorContext = createContext();
|
const ErrorContext = createContext();
|
||||||
@@ -6,29 +6,28 @@ const ErrorContext = createContext();
|
|||||||
export const ErrorProvider = ({ children }) => {
|
export const ErrorProvider = ({ children }) => {
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
const showError = (err) => {
|
const showError = useCallback((err) => {
|
||||||
|
if (err.status === 422) return;
|
||||||
|
|
||||||
setError({
|
setError({
|
||||||
title: err.status ? `Error ${err.status}` : "Error",
|
title: err.status ? `Error ${err.status}` : "Ups!",
|
||||||
message: err.message,
|
message: err.message || "Algo ha salido mal miarma",
|
||||||
variant: 'danger'
|
|
||||||
});
|
});
|
||||||
};
|
}, []);
|
||||||
|
|
||||||
const closeError = () => setError(null);
|
const closeError = () => setError(null);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ErrorContext.Provider value={{ showError }}>
|
<ErrorContext.Provider value={{ showError }}>
|
||||||
{children}
|
{children}
|
||||||
{error && (
|
|
||||||
<NotificationModal
|
<NotificationModal
|
||||||
show={true}
|
show={error !== null}
|
||||||
onClose={closeError}
|
onClose={closeError}
|
||||||
title={error.title}
|
title={error?.title || "Error"}
|
||||||
message={error.message}
|
message={error?.message || ""}
|
||||||
variant='danger'
|
variant='danger'
|
||||||
buttons={[{ label: "Aceptar", variant: "danger", onClick: closeError }]}
|
buttons={[{ label: "Entendido", variant: "danger", onClick: closeError }]}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
</ErrorContext.Provider>
|
</ErrorContext.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,28 +0,0 @@
|
|||||||
.dropdown-menu .dropdown-divider {
|
|
||||||
border-top: 1px solid var(--divider-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
background-color: var(--bg-color) !important;
|
|
||||||
color: var(--text-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu.show {
|
|
||||||
background-color: var(--navbar-bg) !important;
|
|
||||||
box-shadow: 0 5px 10px var(--shadow-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item {
|
|
||||||
background-color: var(--navbar-bg) !important;
|
|
||||||
color: var(--navbar-dropdown-item-color);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item:hover {
|
|
||||||
background-color: var(--navbar-bg) !important;
|
|
||||||
color: var(--secondary-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled.text-muted {
|
|
||||||
color: var(--muted-color) !important;
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
.carousel-img-wrapper {
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 1rem;
|
|
||||||
max-height: 60vh;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
@@ -1,136 +0,0 @@
|
|||||||
.footer {
|
|
||||||
background-color: var(--navbar-bg);
|
|
||||||
color: var(--fg-color);
|
|
||||||
border-top: 2px solid var(--border-color);
|
|
||||||
font-size: 1rem;
|
|
||||||
box-shadow: 0 -2px 8px var(--shadow-color);
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-title,
|
|
||||||
.footer h6#devd {
|
|
||||||
font-family: "Product Sans";
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-columns {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
background-color: var(--bg-hover-color);
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.footer-columns {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-column {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-column h5 {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--fg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-column ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-column ul li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-column ul li a {
|
|
||||||
color: var(--fg-color);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-column ul li a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-shadow: 0 0 4px currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
opacity: 0.85;
|
|
||||||
text-align: center;
|
|
||||||
border-top: 1px solid var(--divider-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom a {
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--fg-color);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom a:hover {
|
|
||||||
text-shadow: 0 0 5px currentColor;
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
background-color: var(--contact-info-bg);
|
|
||||||
color: var(--primary-color);
|
|
||||||
box-shadow: 0 4px 10px var(--shadow-color);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info a {
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--primary-color);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info a:hover {
|
|
||||||
transform: translateX(8px);
|
|
||||||
color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info .fa-icon {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.heart-anim {
|
|
||||||
display: inline-block;
|
|
||||||
animation: heartbeat 1.5s infinite ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes heartbeat {
|
|
||||||
0%, 100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
/* ================================
|
|
||||||
HEADER - ESTILO BASE
|
|
||||||
================================== */
|
|
||||||
|
|
||||||
.bg-img {
|
|
||||||
background-image: url('/images/bg.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.mask {
|
|
||||||
background-color: var(--header-mask-color);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
-webkit-backdrop-filter: blur(4px);
|
|
||||||
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.header-title {
|
|
||||||
font-family: 'Product Sans';
|
|
||||||
font-size: 3em;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: var(--text-color);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadowed {
|
|
||||||
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
RESPONSIVE HEADER TITLE
|
|
||||||
================================== */
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.header-title {
|
|
||||||
font-size: 2em;
|
|
||||||
padding: 0 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
/* ================================
|
|
||||||
LOGIN - CARD CONTAINER (VISUAL)
|
|
||||||
================================== */
|
|
||||||
|
|
||||||
.login-card {
|
|
||||||
background-color: var(--login-bg) !important;
|
|
||||||
color: var(--text-color);
|
|
||||||
box-shadow: 0 0 10px var(--shadow-color);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
INPUTS VISUALES
|
|
||||||
================================== */
|
|
||||||
|
|
||||||
input.form-control {
|
|
||||||
background-color: var(--input-bg);
|
|
||||||
color: var(--input-text);
|
|
||||||
border: 1px solid var(--input-border);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
LABELS PERSONALIZADAS
|
|
||||||
================================== */
|
|
||||||
|
|
||||||
.form-floating>label {
|
|
||||||
font-family: 'Product Sans';
|
|
||||||
font-size: 1.1em;
|
|
||||||
color: var(--label-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-floating>label::after {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
BOTÓN VISUAL
|
|
||||||
================================== */
|
|
||||||
|
|
||||||
.login-button {
|
|
||||||
font-family: 'Product Sans' !important;
|
|
||||||
font-size: 1.3em !important;
|
|
||||||
font-weight: bold !important;
|
|
||||||
background-color: var(--login-btn-bg) !important;
|
|
||||||
color: var(--login-btn-text) !important;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-button:hover {
|
|
||||||
background-color: var(--login-btn-hover) !important;
|
|
||||||
color: var(--login-btn-text-hover) !important;
|
|
||||||
}
|
|
||||||
@@ -63,3 +63,21 @@ hr {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-green {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
filter: drop-shadow(0 0 0px rgba(40, 167, 69, 0.7));
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: scale(1);
|
||||||
|
filter: drop-shadow(0 0 6px rgba(40, 167, 69, 0.4));
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
filter: drop-shadow(0 0 0px rgba(40, 167, 69, 0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse-animation {
|
||||||
|
animation: pulse-green 2s infinite;
|
||||||
|
}
|
||||||
@@ -221,11 +221,11 @@ html, body, #root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Tipografía global */
|
/* Tipografía global */
|
||||||
div,
|
div:not(.monaco-editor *),
|
||||||
|
span:not(.monaco-editor *),
|
||||||
label,
|
label,
|
||||||
input,
|
input,
|
||||||
p,
|
p,
|
||||||
span,
|
|
||||||
a,
|
a,
|
||||||
button {
|
button {
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
|
|||||||
@@ -1,4 +1,12 @@
|
|||||||
import { useContext } from "react";
|
import { useContext } from "react";
|
||||||
import { AuthContext } from "@/context/AuthContext";
|
import { AuthContext } from "@/context/AuthContext";
|
||||||
|
|
||||||
export const useAuth = () => useContext(AuthContext);
|
export const useAuth = () => {
|
||||||
|
const authContext = useContext(AuthContext);
|
||||||
|
|
||||||
|
if (!authContext) {
|
||||||
|
throw new Error("useAuth debe usarse dentro de AuthProvider");
|
||||||
|
}
|
||||||
|
|
||||||
|
return authContext;
|
||||||
|
};
|
||||||
|
|||||||
@@ -1,4 +1,12 @@
|
|||||||
import { useContext } from "react";
|
import { useContext } from "react";
|
||||||
import { ConfigContext } from "@/context/ConfigContext.jsx";
|
import { ConfigContext } from "@/context/ConfigContext.jsx";
|
||||||
|
|
||||||
export const useConfig = () => useContext(ConfigContext);
|
export const useConfig = () => {
|
||||||
|
const configContext = useContext(ConfigContext);
|
||||||
|
|
||||||
|
if (!configContext) {
|
||||||
|
throw new Error("useConfig debe usarse dentro de ConfigProvider");
|
||||||
|
}
|
||||||
|
|
||||||
|
return configContext;
|
||||||
|
};
|
||||||
|
|||||||
@@ -1,140 +1,150 @@
|
|||||||
import { useState, useEffect, useCallback, useRef } from "react";
|
import { useState, useEffect, useCallback } from "react";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
export const useData = (config, onError) => {
|
export const useData = (config, onError) => {
|
||||||
const [data, setData] = useState(null);
|
const [data, setData] = useState(null);
|
||||||
const [dataLoading, setLoading] = useState(true);
|
const [dataLoading, setLoading] = useState(true);
|
||||||
const [dataError, setError] = useState(null);
|
const [dataError, setError] = useState(null);
|
||||||
const configRef = useRef();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (config?.baseUrl) {
|
|
||||||
configRef.current = config;
|
|
||||||
}
|
|
||||||
}, [config]);
|
|
||||||
|
|
||||||
const getAuthHeaders = (isFormData = false) => {
|
const getAuthHeaders = (isFormData = false) => {
|
||||||
const token = localStorage.getItem("token");
|
const token = localStorage.getItem("token");
|
||||||
|
|
||||||
const headers = {};
|
const headers = {};
|
||||||
if (token) headers.Authorization = `Bearer ${token}`;
|
if (token) headers.Authorization = `Bearer ${token}`;
|
||||||
|
if (!isFormData) headers["Content-Type"] = "application/json";
|
||||||
if (!isFormData) {
|
|
||||||
headers["Content-Type"] = "application/json";
|
|
||||||
}
|
|
||||||
|
|
||||||
return headers;
|
return headers;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAxiosError = (err) => {
|
const handleAxiosError = (err) => {
|
||||||
if (err.response && err.response.data) {
|
|
||||||
const data = err.response.data;
|
|
||||||
|
|
||||||
if (data.status === 422 && data.errors) {
|
|
||||||
return {
|
return {
|
||||||
status: 422,
|
status: err.response?.status || (err.request ? "Network Error" : "Client Error"),
|
||||||
errors: data.errors,
|
message: err.response?.data?.message || err.message || "Error desconocido",
|
||||||
path: data.path ?? null,
|
errors: err.response?.data?.errors || null
|
||||||
timestamp: data.timestamp ?? null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
status: data.status ?? err.response.status,
|
|
||||||
error: data.error ?? null,
|
|
||||||
message: data.message ?? err.response.statusText ?? "Error desconocido",
|
|
||||||
path: data.path ?? null,
|
|
||||||
timestamp: data.timestamp ?? null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (err.request) {
|
|
||||||
return {
|
|
||||||
status: null,
|
|
||||||
error: "Network Error",
|
|
||||||
message: "No se pudo conectar al servidor",
|
|
||||||
path: null,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
status: null,
|
|
||||||
error: "Client Error",
|
|
||||||
message: err.message || "Error desconocido",
|
|
||||||
path: null,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isExpectedPasteLookupError = (baseUrl, status) => {
|
||||||
|
const isPasteLookup = baseUrl?.includes("/pastes/");
|
||||||
|
return isPasteLookup && [403, 404, 500].includes(status);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Carga inicial ligada al `config` del contexto.
|
||||||
|
// En lookup de pastes, algunos estados son esperados y no deben disparar error global.
|
||||||
const fetchData = useCallback(async () => {
|
const fetchData = useCallback(async () => {
|
||||||
const current = configRef.current;
|
if (!config?.baseUrl) return;
|
||||||
if (!current?.baseUrl) return;
|
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(current.baseUrl, {
|
const response = await axios.get(config.baseUrl, {
|
||||||
headers: getAuthHeaders(),
|
headers: getAuthHeaders(),
|
||||||
params: current.params,
|
params: config.params,
|
||||||
});
|
});
|
||||||
setData(response.data);
|
setData(response.data);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const error = handleAxiosError(err);
|
const error = handleAxiosError(err);
|
||||||
|
if (!isExpectedPasteLookupError(config.baseUrl, error.status) && onError) onError(error);
|
||||||
setError(error);
|
setError(error);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}, []);
|
}, [config?.baseUrl, config?.params, onError]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (config?.baseUrl) fetchData();
|
fetchData();
|
||||||
}, [config, fetchData]);
|
}, [fetchData]);
|
||||||
|
|
||||||
const requestWrapper = async (method, endpoint, payload = null, refresh = false) => {
|
// Wrapper único para peticiones CRUD.
|
||||||
|
// Usa objeto de opciones para mantener llamadas claras y evitar errores por orden de argumentos.
|
||||||
|
const requestWrapper = async (method, endpoint, {
|
||||||
|
payload = null,
|
||||||
|
refresh = false,
|
||||||
|
extraHeaders = {},
|
||||||
|
silent = false,
|
||||||
|
} = {}) => {
|
||||||
try {
|
try {
|
||||||
const isFormData = payload instanceof FormData;
|
const isFormData = payload instanceof FormData;
|
||||||
const headers = getAuthHeaders(isFormData);
|
|
||||||
const cfg = { headers };
|
|
||||||
let response;
|
|
||||||
|
|
||||||
|
const combinedHeaders = {
|
||||||
|
...getAuthHeaders(isFormData),
|
||||||
|
...extraHeaders
|
||||||
|
};
|
||||||
|
|
||||||
|
const axiosConfig = {
|
||||||
|
headers: combinedHeaders
|
||||||
|
};
|
||||||
|
|
||||||
|
let response;
|
||||||
if (method === "get") {
|
if (method === "get") {
|
||||||
if (payload) cfg.params = payload;
|
response = await axios.get(endpoint, {
|
||||||
response = await axios.get(endpoint, cfg);
|
...axiosConfig,
|
||||||
|
params: payload
|
||||||
|
});
|
||||||
} else if (method === "delete") {
|
} else if (method === "delete") {
|
||||||
if (payload) cfg.data = payload;
|
response = await axios.delete(endpoint, {
|
||||||
response = await axios.delete(endpoint, cfg);
|
...axiosConfig,
|
||||||
|
data: payload
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
response = await axios[method](endpoint, payload, cfg);
|
response = await axios[method](endpoint, payload, axiosConfig);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (refresh) await fetchData();
|
if (refresh) await fetchData();
|
||||||
return response.data;
|
return response.data;
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const error = handleAxiosError(err);
|
const error = handleAxiosError(err);
|
||||||
|
if (!silent && error.status !== 422 && onError) {
|
||||||
if (error.status !== 422 && onError) {
|
|
||||||
onError(error);
|
onError(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
setError(error);
|
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const clearError = () => setError(null);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
data,
|
data, dataLoading, dataError,
|
||||||
dataLoading,
|
getData: (url, paramsOrOptions, refresh = true, h = {}, silent = false) => {
|
||||||
dataError,
|
const isOptionsObject =
|
||||||
clearError,
|
paramsOrOptions &&
|
||||||
getData: (url, params, refresh = true) => requestWrapper("get", url, params, refresh),
|
typeof paramsOrOptions === "object" &&
|
||||||
postData: (url, body, refresh = true) => requestWrapper("post", url, body, refresh),
|
!Array.isArray(paramsOrOptions) &&
|
||||||
putData: (url, body, refresh = true) => requestWrapper("put", url, body, refresh),
|
("params" in paramsOrOptions || "refresh" in paramsOrOptions || "headers" in paramsOrOptions || "silent" in paramsOrOptions);
|
||||||
deleteData: (url, refresh = true) => requestWrapper("delete", url, null, refresh),
|
|
||||||
deleteDataWithBody: (url, body, refresh = true) => requestWrapper("delete", url, body, refresh)
|
if (isOptionsObject) {
|
||||||
|
const {
|
||||||
|
params = null,
|
||||||
|
refresh: optionsRefresh = true,
|
||||||
|
headers = {},
|
||||||
|
silent: optionsSilent = false,
|
||||||
|
} = paramsOrOptions;
|
||||||
|
|
||||||
|
return requestWrapper("get", url, {
|
||||||
|
payload: params,
|
||||||
|
refresh: optionsRefresh,
|
||||||
|
extraHeaders: headers,
|
||||||
|
silent: optionsSilent,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return requestWrapper("get", url, {
|
||||||
|
payload: paramsOrOptions,
|
||||||
|
refresh,
|
||||||
|
extraHeaders: h,
|
||||||
|
silent,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
postData: (url, body, refresh = true, silent = false) => requestWrapper("post", url, {
|
||||||
|
payload: body,
|
||||||
|
refresh,
|
||||||
|
silent,
|
||||||
|
}),
|
||||||
|
putData: (url, body, refresh = true, silent = false) => requestWrapper("put", url, {
|
||||||
|
payload: body,
|
||||||
|
refresh,
|
||||||
|
silent,
|
||||||
|
}),
|
||||||
|
deleteData: (url, refresh = true, silent = false) => requestWrapper("delete", url, {
|
||||||
|
refresh,
|
||||||
|
silent,
|
||||||
|
}),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { parseJwt } from "../util/tokenUtils.js";
|
|
||||||
import NotificationModal from "../components/NotificationModal.jsx";
|
|
||||||
import axios from "axios";
|
|
||||||
import { useAuth } from "./useAuth.js";
|
|
||||||
import { useConfig } from "./useConfig.js";
|
|
||||||
|
|
||||||
const useSessionRenewal = () => {
|
|
||||||
const { logout } = useAuth();
|
|
||||||
const { config } = useConfig();
|
|
||||||
|
|
||||||
const [showModal, setShowModal] = useState(false);
|
|
||||||
const [alreadyWarned, setAlreadyWarned] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
const token = localStorage.getItem("token");
|
|
||||||
const decoded = parseJwt(token);
|
|
||||||
|
|
||||||
if (!token || !decoded?.exp) return;
|
|
||||||
|
|
||||||
const now = Date.now();
|
|
||||||
const expTime = decoded.exp * 1000;
|
|
||||||
const timeLeft = expTime - now;
|
|
||||||
|
|
||||||
if (timeLeft <= 60000 && timeLeft > 0 && !alreadyWarned) {
|
|
||||||
setShowModal(true);
|
|
||||||
setAlreadyWarned(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (timeLeft <= 0) {
|
|
||||||
clearInterval(interval);
|
|
||||||
logout();
|
|
||||||
}
|
|
||||||
}, 10000); // revisa cada 10 segundos
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [alreadyWarned, logout]);
|
|
||||||
|
|
||||||
const handleRenew = async () => {
|
|
||||||
const token = localStorage.getItem("token");
|
|
||||||
const decoded = parseJwt(token);
|
|
||||||
const now = Date.now();
|
|
||||||
const expTime = decoded?.exp * 1000;
|
|
||||||
|
|
||||||
if (!token || !decoded || now > expTime) {
|
|
||||||
logout();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await axios.get(
|
|
||||||
`${config.apiConfig.baseUrl}${config.apiConfig.endpoints.auth.refreshToken}`,
|
|
||||||
null,
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const newToken = response.data.data.token;
|
|
||||||
localStorage.setItem("token", newToken);
|
|
||||||
setShowModal(false);
|
|
||||||
setAlreadyWarned(false);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Error renovando sesión:", err);
|
|
||||||
logout();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const modal = showModal && (
|
|
||||||
<NotificationModal
|
|
||||||
show={true}
|
|
||||||
onClose={() => {
|
|
||||||
setShowModal(false);
|
|
||||||
logout();
|
|
||||||
}}
|
|
||||||
title="¿Quieres seguir conectado?"
|
|
||||||
message="Tu sesión está a punto de expirar. ¿Quieres renovarla 1 hora más?"
|
|
||||||
variant="info"
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
label: "Renovar sesión",
|
|
||||||
variant: "success",
|
|
||||||
onClick: handleRenew,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Cerrar sesión",
|
|
||||||
variant: "danger",
|
|
||||||
onClick: () => {
|
|
||||||
logout();
|
|
||||||
setShowModal(false);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return { modal };
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useSessionRenewal;
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import { useLocation } from 'react-router-dom';
|
|
||||||
import '@/css/Building.css';
|
|
||||||
|
|
||||||
export default function Building() {
|
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
if (location.pathname === '/') return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="building-container d-flex flex-column align-items-center justify-content-center text-center py-5 px-3">
|
|
||||||
<div className="building-icon">🚧</div>
|
|
||||||
<div className="building-title">Esta página está en construcción</div>
|
|
||||||
<div className="building-subtitle">Estamos trabajando para traértela pronto</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -3,74 +3,98 @@ import PastePanel from '@/components/Pastes/PastePanel';
|
|||||||
import { useConfig } from '@/hooks/useConfig';
|
import { useConfig } from '@/hooks/useConfig';
|
||||||
import LoadingIcon from '@/components/LoadingIcon';
|
import LoadingIcon from '@/components/LoadingIcon';
|
||||||
import { useDataContext } from '@/hooks/useDataContext';
|
import { useDataContext } from '@/hooks/useDataContext';
|
||||||
import { useState } from 'react';
|
import { useState, useMemo } from 'react';
|
||||||
import { DataProvider } from '@/context/DataContext';
|
import { DataProvider } from '@/context/DataContext';
|
||||||
import NotificationModal from '@/components/NotificationModal';
|
import NotificationModal from '@/components/NotificationModal';
|
||||||
import { useSearch } from "@/context/SearchContext";
|
import { useSearch } from "@/context/SearchContext";
|
||||||
import { useError } from '@/context/ErrorContext';
|
import { useLocation, useParams } from 'react-router-dom';
|
||||||
|
|
||||||
const Home = () => {
|
const Home = ({ mode, onConnectChange }) => {
|
||||||
|
const { pasteKey, rtKey } = useParams();
|
||||||
const { config, configLoading } = useConfig();
|
const { config, configLoading } = useConfig();
|
||||||
const { showError } = useError();
|
const location = useLocation();
|
||||||
|
const isStaticMode = mode === 'static';
|
||||||
|
|
||||||
if (configLoading) return <p><LoadingIcon /></p>;
|
const currentKey = isStaticMode ? pasteKey : rtKey;
|
||||||
|
|
||||||
const reqConfig = {
|
const requestConfig = useMemo(() => {
|
||||||
baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.pastes.all}`,
|
if (!config?.apiConfig?.baseUrl) return null;
|
||||||
|
|
||||||
|
const baseApi = `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.pastes.all}`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
baseUrl: baseApi,
|
||||||
params: {}
|
params: {}
|
||||||
};
|
};
|
||||||
|
}, [config]);
|
||||||
|
|
||||||
|
if (configLoading) return <p className="text-center mt-5"><LoadingIcon /></p>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataProvider config={reqConfig} onError={showError}>
|
<DataProvider key={location.key} config={requestConfig}>
|
||||||
<HomeContent reqConfig={reqConfig} />
|
<HomeContent requestConfig={requestConfig} mode={mode} pasteKey={currentKey} onConnectChange={onConnectChange} />
|
||||||
</DataProvider>
|
</DataProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const HomeContent = ({ reqConfig }) => {
|
const HomeContent = ({ requestConfig, mode, pasteKey, onConnectChange }) => {
|
||||||
const { data, dataLoading, dataError, postData } = useDataContext();
|
const { data, dataLoading, postData } = useDataContext();
|
||||||
const [error, setError] = useState(null);
|
const [createdKey, setCreatedKey] = useState(null);
|
||||||
const [key, setKey] = useState(null);
|
|
||||||
const { searchTerm } = useSearch();
|
const { searchTerm } = useSearch();
|
||||||
|
const isStaticMode = mode === 'static';
|
||||||
|
|
||||||
if (dataLoading) return <p><LoadingIcon /></p>;
|
const filteredPublicPastes = useMemo(() => {
|
||||||
if (dataError) return <p>Error loading data</p>;
|
if (!Array.isArray(data)) return [];
|
||||||
|
const normalizedSearchTerm = (searchTerm ?? "").toLowerCase();
|
||||||
|
return data.filter((paste) => (paste.title ?? "").toLowerCase().includes(normalizedSearchTerm));
|
||||||
|
}, [data, searchTerm]);
|
||||||
|
|
||||||
const filtered = data.filter(paste =>
|
if (isStaticMode && dataLoading) return <p className="text-center mt-5"><LoadingIcon /></p>;
|
||||||
paste.title.toLowerCase().includes((searchTerm ?? "").toLowerCase()) ||
|
|
||||||
paste.content.toLowerCase().includes((searchTerm ?? "").toLowerCase())
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSubmit = async (paste) => {
|
const handleSubmit = async (paste, isAutosave = false) => {
|
||||||
try {
|
try {
|
||||||
const createdPaste = await postData(reqConfig.baseUrl, paste);
|
const createdPaste = await postData(requestConfig.baseUrl, paste);
|
||||||
if (createdPaste && createdPaste.isPrivate) {
|
if (!isAutosave && createdPaste && !paste.pasteKey) {
|
||||||
setKey(createdPaste.pasteKey);
|
setCreatedKey(createdPaste.pasteKey);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setError(error);
|
console.error("Error:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PastePanel onSubmit={handleSubmit} publicPastes={filtered} />
|
<PastePanel
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
publicPastes={filteredPublicPastes}
|
||||||
|
mode={mode}
|
||||||
|
pasteKey={pasteKey}
|
||||||
|
onConnectChange={onConnectChange}
|
||||||
|
/>
|
||||||
|
|
||||||
<NotificationModal
|
<NotificationModal
|
||||||
show={key !== null}
|
show={createdKey !== null}
|
||||||
onClose={() => setKey(null)}
|
onClose={() => setCreatedKey(null)}
|
||||||
title="Link a tu paste privado"
|
title="¡Bomba! Paste creado"
|
||||||
message={
|
message={
|
||||||
<span>
|
<span>
|
||||||
Tu paste privado ha sido creado. Puedes acceder a él mediante el siguiente enlace:
|
Tu paste se ha guardado correctamente. Puedes compartirlo con este enlace:
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<a href={`https://paste.miarma.net/${key}`}>https://paste.miarma.net/${key}</a>
|
<a
|
||||||
|
href={`https://paste.miarma.net/s/${createdKey}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="text-primary font-weight-bold"
|
||||||
|
>
|
||||||
|
https://paste.miarma.net/s/{createdKey}
|
||||||
|
</a>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
Recuerda que este enlace es único y no se puede recuperar si se pierde.
|
{mode === 'rt' && "Nota: Al guardarlo, se ha creado una copia estática permanente."}
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
variant=""
|
variant="success"
|
||||||
buttons={[
|
buttons={[
|
||||||
{ label: "Cerrar", variant: "secondary", onClick: () => setKey(null) }
|
{ label: "Cerrar", variant: "secondary", onClick: () => setCreatedKey(null) }
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,15 +0,0 @@
|
|||||||
export const renderErrorAlert = (error, options = {}) => {
|
|
||||||
const { className = 'alert alert-danger alert-dismissible py-1 px-2 small', role = 'alert' } = options;
|
|
||||||
|
|
||||||
if (!error) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={className} role={role}>
|
|
||||||
{typeof error === 'string' ? error : 'An unexpected error occurred.'}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const resetErrorIfEditEnds = (editMode, setError) => {
|
|
||||||
if (!editMode) setError(null);
|
|
||||||
};
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
const CONSTANTS = {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
export { CONSTANTS };
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
const getNowAsLocalDatetime = () => {
|
|
||||||
const now = new Date();
|
|
||||||
const offset = now.getTimezoneOffset(); // en minutos
|
|
||||||
const local = new Date(now.getTime() - offset * 60000);
|
|
||||||
return local.toISOString().slice(0, 16);
|
|
||||||
};
|
|
||||||
|
|
||||||
export { getNowAsLocalDatetime }
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
export const DateParser = {
|
|
||||||
sqlToString: (sqlDate) => {
|
|
||||||
const [datePart] = sqlDate.split('T');
|
|
||||||
const [year, month, day] = datePart.split('-');
|
|
||||||
return `${day}/${month}/${year}`;
|
|
||||||
},
|
|
||||||
|
|
||||||
timestampToString: (timestamp) => {
|
|
||||||
const [datePart] = timestamp.split('T');
|
|
||||||
const [year, month, day] = datePart.split('-');
|
|
||||||
return `${day}/${month}/${year}`;
|
|
||||||
},
|
|
||||||
|
|
||||||
isoToStringWithTime: (isoString) => {
|
|
||||||
if (!isoString) return '—';
|
|
||||||
|
|
||||||
const date = new Date(isoString);
|
|
||||||
if (isNaN(date)) return '—'; // Para proteger aún más por si llega basura
|
|
||||||
|
|
||||||
return new Intl.DateTimeFormat('es-ES', {
|
|
||||||
day: '2-digit',
|
|
||||||
month: '2-digit',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
hour12: false,
|
|
||||||
timeZone: 'Europe/Madrid'
|
|
||||||
}).format(date);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
export const errorParser = (err) => {
|
|
||||||
const message = err.response?.data?.message;
|
|
||||||
try {
|
|
||||||
const parsed = JSON.parse(message);
|
|
||||||
return Object.values(parsed)[0];
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
} catch (e) {
|
|
||||||
return message || err.message || "Unknown error";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
export const generateSecurePassword = (length = 12) => {
|
|
||||||
const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
|
||||||
const lower = 'abcdefghijklmnopqrstuvwxyz';
|
|
||||||
const digits = '0123456789';
|
|
||||||
const symbols = '!@#$%^&*'; // <- compatibles con bcrypt
|
|
||||||
const all = upper + lower + digits + symbols;
|
|
||||||
|
|
||||||
if (length < 8) length = 8;
|
|
||||||
|
|
||||||
const getRand = (chars) => chars[Math.floor(Math.random() * chars.length)];
|
|
||||||
|
|
||||||
let password = [
|
|
||||||
getRand(upper),
|
|
||||||
getRand(lower),
|
|
||||||
getRand(digits),
|
|
||||||
getRand(symbols),
|
|
||||||
];
|
|
||||||
|
|
||||||
for (let i = password.length; i < length; i++) {
|
|
||||||
password.push(getRand(all));
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = password.length - 1; i > 0; i--) {
|
|
||||||
const j = Math.floor(Math.random() * (i + 1));
|
|
||||||
[password[i], password[j]] = [password[j], password[i]];
|
|
||||||
}
|
|
||||||
|
|
||||||
return password.join('');
|
|
||||||
};
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
export const parseJwt = (token) => {
|
|
||||||
try {
|
|
||||||
return JSON.parse(atob(token.split('.')[1]));
|
|
||||||
} catch (e) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -14,4 +14,22 @@ export default defineConfig({
|
|||||||
'@': path.resolve(__dirname, './src'),
|
'@': path.resolve(__dirname, './src'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
define: {
|
||||||
|
global: 'window'
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks(id) {
|
||||||
|
if (id.includes('node_modules')) {
|
||||||
|
if (id.includes('monaco-editor')) {
|
||||||
|
return 'monaco';
|
||||||
|
}
|
||||||
|
return 'vendor';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chunkSizeWarningLimit: 1500,
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user