более менее сделан фронтенд, ЛК не работает и система оплаты тоже
This commit is contained in:
Georgiy Syralev
2
ospabhost/frontend/.env
Normal file
2
ospabhost/frontend/.env
Normal file
@@ -0,0 +1,2 @@
|
||||
VITE_CARD_NUMBER="2200700526174551"
|
||||
VITE_SBP_QR_URL="https://www.tinkoff.ru/rm/r_EuYdiibJtU.jfgPfrHOCE/hTZjH20709"
|
||||
219
ospabhost/frontend/package-lock.json
generated
219
ospabhost/frontend/package-lock.json
generated
@@ -11,7 +11,8 @@
|
||||
"axios": "^1.12.2",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-icons": "^5.5.0"
|
||||
"react-icons": "^5.5.0",
|
||||
"react-qr-code": "^2.0.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.33.0",
|
||||
@@ -1874,9 +1875,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.14",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
|
||||
"integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
|
||||
"version": "10.4.21",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
|
||||
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -1886,15 +1887,19 @@
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"browserslist": "^4.21.5",
|
||||
"caniuse-lite": "^1.0.30001464",
|
||||
"fraction.js": "^4.2.0",
|
||||
"browserslist": "^4.24.4",
|
||||
"caniuse-lite": "^1.0.30001702",
|
||||
"fraction.js": "^4.3.7",
|
||||
"normalize-range": "^0.1.2",
|
||||
"picocolors": "^1.0.0",
|
||||
"picocolors": "^1.1.1",
|
||||
"postcss-value-parser": "^4.2.0"
|
||||
},
|
||||
"bin": {
|
||||
@@ -3137,7 +3142,6 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
@@ -3225,13 +3229,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
|
||||
"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||
"integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antonk52"
|
||||
}
|
||||
},
|
||||
"node_modules/lines-and-columns": {
|
||||
@@ -3264,6 +3271,18 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
@@ -3427,7 +3446,6 @@
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
@@ -3605,9 +3623,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.21",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
|
||||
"integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
|
||||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
||||
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -3617,13 +3635,17 @@
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.4",
|
||||
"picocolors": "^1.0.0",
|
||||
"source-map-js": "^1.0.2"
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
@@ -3648,10 +3670,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-js": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
|
||||
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
|
||||
"integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"camelcase-css": "^2.0.1"
|
||||
@@ -3659,10 +3691,6 @@
|
||||
"engines": {
|
||||
"node": "^12 || ^14 || >= 16"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.4.21"
|
||||
}
|
||||
@@ -3703,19 +3731,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-load-config/node_modules/lilconfig": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||
"integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antonk52"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-nested": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
|
||||
@@ -3773,6 +3788,17 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
@@ -3789,6 +3815,12 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/qr.js": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
|
||||
"integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
@@ -3840,6 +3872,25 @@
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-qr-code": {
|
||||
"version": "2.0.18",
|
||||
"resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.18.tgz",
|
||||
"integrity": "sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1",
|
||||
"qr.js": "0.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
|
||||
@@ -4256,34 +4307,34 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
|
||||
"integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
|
||||
"version": "3.4.17",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
|
||||
"integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@alloc/quick-lru": "^5.2.0",
|
||||
"arg": "^5.0.2",
|
||||
"chokidar": "^3.5.3",
|
||||
"chokidar": "^3.6.0",
|
||||
"didyoumean": "^1.2.2",
|
||||
"dlv": "^1.1.3",
|
||||
"fast-glob": "^3.2.12",
|
||||
"fast-glob": "^3.3.2",
|
||||
"glob-parent": "^6.0.2",
|
||||
"is-glob": "^4.0.3",
|
||||
"jiti": "^1.18.2",
|
||||
"lilconfig": "^2.1.0",
|
||||
"micromatch": "^4.0.5",
|
||||
"jiti": "^1.21.6",
|
||||
"lilconfig": "^3.1.3",
|
||||
"micromatch": "^4.0.8",
|
||||
"normalize-path": "^3.0.0",
|
||||
"object-hash": "^3.0.0",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss": "^8.4.23",
|
||||
"picocolors": "^1.1.1",
|
||||
"postcss": "^8.4.47",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-js": "^4.0.1",
|
||||
"postcss-load-config": "^4.0.1",
|
||||
"postcss-nested": "^6.0.1",
|
||||
"postcss-selector-parser": "^6.0.11",
|
||||
"resolve": "^1.22.2",
|
||||
"sucrase": "^3.32.0"
|
||||
"postcss-load-config": "^4.0.2",
|
||||
"postcss-nested": "^6.2.0",
|
||||
"postcss-selector-parser": "^6.1.2",
|
||||
"resolve": "^1.22.8",
|
||||
"sucrase": "^3.35.0"
|
||||
},
|
||||
"bin": {
|
||||
"tailwind": "lib/cli.js",
|
||||
@@ -4293,35 +4344,6 @@
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss/node_modules/postcss": {
|
||||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
||||
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/thenify": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
|
||||
@@ -4631,35 +4653,6 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/vite/node_modules/postcss": {
|
||||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
||||
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
"axios": "^1.12.2",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-icons": "^5.5.0"
|
||||
"react-icons": "^5.5.0",
|
||||
"react-qr-code": "^2.0.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.33.0",
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
// src/app.tsx
|
||||
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
|
||||
import PageTmpl from './components/pagetempl';
|
||||
import HomePage from './pages/index';
|
||||
import MainPage from './pages/dashboard/mainpage';
|
||||
import LogoutPage from './pages/dashboard/logout';
|
||||
import LoginPage from './pages/login';
|
||||
import RegisterPage from './pages/register';
|
||||
import TariffsPage from './pages/tariffs';
|
||||
import AboutPage from './pages/about';
|
||||
import PrivateRoute from './components/privateroute';
|
||||
import Pagetempl from './components/pagetempl';
|
||||
import Homepage from './pages/index';
|
||||
import Dashboard from './pages/dashboard/mainpage';
|
||||
import Loginpage from './pages/login';
|
||||
import Registerpage from './pages/register';
|
||||
import Tariffspage from './pages/tariffs';
|
||||
import Aboutpage from './pages/about';
|
||||
import Privateroute from './components/privateroute';
|
||||
import { AuthProvider } from './context/authcontext'; // Import AuthProvider
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<PageTmpl><HomePage /></PageTmpl>} />
|
||||
<Route path="/tariffs" element={<PageTmpl><TariffsPage /></PageTmpl>} />
|
||||
<Route path="/about" element={<PageTmpl><AboutPage /></PageTmpl>} />
|
||||
<Route path="/dashboard" element={<PageTmpl><PrivateRoute><MainPage /></PrivateRoute></PageTmpl>} />
|
||||
<Route path="/login" element={<PageTmpl><LoginPage /></PageTmpl>} />
|
||||
<Route path="/register" element={<PageTmpl><RegisterPage /></PageTmpl>} />
|
||||
<Route path="/logout" element={<PageTmpl><LogoutPage /></PageTmpl>} />
|
||||
</Routes>
|
||||
<AuthProvider> {/* Wrap the entire application with AuthProvider */}
|
||||
<Routes>
|
||||
<Route path="/" element={<Pagetempl><Homepage /></Pagetempl>} />
|
||||
<Route path="/tariffs" element={<Pagetempl><Tariffspage /></Pagetempl>} />
|
||||
<Route path="/about" element={<Pagetempl><Aboutpage /></Pagetempl>} />
|
||||
<Route path="/dashboard/*" element={<Pagetempl><Privateroute><Dashboard /></Privateroute></Pagetempl>} />
|
||||
<Route path="/login" element={<Pagetempl><Loginpage /></Pagetempl>} />
|
||||
<Route path="/register" element={<Pagetempl><Registerpage /></Pagetempl>} />
|
||||
</Routes>
|
||||
</AuthProvider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,57 +1,46 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useState, useEffect } from 'react';
|
||||
import useAuth from '../context/useAuth';
|
||||
|
||||
const Header = () => {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const { isLoggedIn, logout } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
const checkLoginStatus = () => {
|
||||
setIsLoggedIn(localStorage.getItem('isLoggedIn') === 'true');
|
||||
};
|
||||
|
||||
checkLoginStatus();
|
||||
window.addEventListener('storage', checkLoginStatus);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', checkLoginStatus);
|
||||
};
|
||||
}, []);
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="bg-white shadow-lg fixed w-full z-10 top-0">
|
||||
<div className="container mx-auto px-6 py-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-xl font-bold text-gray-800">
|
||||
<Link to="/" className="font-mono text-2xl">ospab.host</Link>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link to="/tariffs" className="text-gray-600 hover:text-ospab-primary transition-colors">Тарифы</Link>
|
||||
<Link to="/about" className="text-gray-600 hover:text-ospab-primary transition-colors">О нас</Link>
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<Link to="/dashboard" className="text-gray-600 hover:text-ospab-primary transition-colors">Личный кабинет</Link>
|
||||
<Link
|
||||
to="/logout"
|
||||
className="px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-gray-500 hover:bg-red-500"
|
||||
>
|
||||
Выйти
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/login" className="text-gray-600 hover:text-ospab-primary transition-colors">Войти</Link>
|
||||
<Link
|
||||
to="/register"
|
||||
className="px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
|
||||
>
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div className="text-xl font-bold text-gray-800">
|
||||
<Link to="/" className="font-mono text-2xl">ospab.host</Link>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link to="/tariffs" className="text-gray-600 hover:text-ospab-primary transition-colors">Тарифы</Link>
|
||||
<Link to="/about" className="text-gray-600 hover:text-ospab-primary transition-colors">О нас</Link>
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<Link to="/dashboard" className="text-gray-600 hover:text-ospab-primary transition-colors">Личный кабинет</Link>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-gray-500 hover:bg-red-500"
|
||||
>
|
||||
Выйти
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/login" className="text-gray-600 hover:text-ospab-primary transition-colors">Войти</Link>
|
||||
<Link
|
||||
to="/register"
|
||||
className="px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
|
||||
>
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import useAuth from '../context/useAuth';
|
||||
|
||||
interface PrivateRouteProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
|
||||
const isAuthenticated = localStorage.getItem('isLoggedIn') === 'true';
|
||||
return isAuthenticated ? children : <Navigate to="/login" replace />;
|
||||
const { isLoggedIn } = useAuth();
|
||||
return isLoggedIn ? children : <Navigate to="/login" replace />;
|
||||
};
|
||||
|
||||
export default PrivateRoute;
|
||||
49
ospabhost/frontend/src/context/authcontext.tsx
Normal file
49
ospabhost/frontend/src/context/authcontext.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
// /src/context/authcontext.tsx
|
||||
import React, { createContext, useState, useEffect } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
interface AuthContextType {
|
||||
isLoggedIn: boolean;
|
||||
login: (token: string) => void;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
// Создаем контекст с начальными значениями
|
||||
const AuthContext = createContext<AuthContextType>({
|
||||
isLoggedIn: false,
|
||||
login: () => {},
|
||||
logout: () => {},
|
||||
});
|
||||
|
||||
interface AuthProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
// Создаем провайдер, который будет управлять состоянием
|
||||
export const AuthProvider = ({ children }: AuthProviderProps) => {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
|
||||
// Проверяем статус входа при загрузке приложения
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('access_token');
|
||||
setIsLoggedIn(!!token);
|
||||
}, []);
|
||||
|
||||
const login = (token: string) => {
|
||||
localStorage.setItem('access_token', token);
|
||||
setIsLoggedIn(true);
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
localStorage.removeItem('access_token');
|
||||
setIsLoggedIn(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isLoggedIn, login, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthContext;
|
||||
6
ospabhost/frontend/src/context/useAuth.ts
Normal file
6
ospabhost/frontend/src/context/useAuth.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { useContext } from 'react';
|
||||
import AuthContext from './authcontext';
|
||||
|
||||
const useAuth = () => useContext(AuthContext);
|
||||
|
||||
export default useAuth;
|
||||
@@ -1,7 +1,7 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import App from './app.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
|
||||
101
ospabhost/frontend/src/pages/dashboard/billing.tsx
Normal file
101
ospabhost/frontend/src/pages/dashboard/billing.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import QRCode from 'react-qr-code';
|
||||
|
||||
const Billing = () => {
|
||||
const [amount, setAmount] = useState(0);
|
||||
const [isPaymentGenerated, setIsPaymentGenerated] = useState(false);
|
||||
const [copyStatus, setCopyStatus] = useState('');
|
||||
|
||||
const cardNumber = process.env.REACT_APP_CARD_NUMBER || '';
|
||||
const sbpUrl = process.env.REACT_APP_SBP_QR_URL || '';
|
||||
|
||||
const handleGeneratePayment = () => {
|
||||
if (amount <= 0) {
|
||||
alert('Пожалуйста, введите сумму больше нуля.');
|
||||
return;
|
||||
}
|
||||
if (!cardNumber || !sbpUrl) {
|
||||
alert('Данные для оплаты не настроены. Пожалуйста, обратитесь к администратору.');
|
||||
return;
|
||||
}
|
||||
setIsPaymentGenerated(true);
|
||||
};
|
||||
|
||||
const handleCopyCard = () => {
|
||||
if (cardNumber) {
|
||||
navigator.clipboard.writeText(cardNumber);
|
||||
setCopyStatus('Номер карты скопирован!');
|
||||
setTimeout(() => setCopyStatus(''), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8 bg-white rounded-3xl shadow-xl">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Пополнение баланса</h2>
|
||||
|
||||
{!isPaymentGenerated ? (
|
||||
<div>
|
||||
<p className="text-lg text-gray-500 mb-4">
|
||||
Пополните свой баланс, чтобы оплачивать услуги. Минимальная сумма пополнения: 1 руб.
|
||||
</p>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="amount" className="block text-gray-700 font-medium mb-2">Сумма (₽)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(Number(e.target.value))}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-ospab-primary"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleGeneratePayment}
|
||||
className="w-full px-5 py-3 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
|
||||
>
|
||||
Сгенерировать платеж
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<p className="text-lg text-gray-700 mb-4">Для пополнения баланса, пожалуйста, переведите сумму **₽{amount}**.</p>
|
||||
<p className="text-sm text-gray-500 mb-6">
|
||||
Ваш заказ будет обработан вручную после проверки чека.
|
||||
</p>
|
||||
|
||||
<div className="bg-gray-100 p-6 rounded-2xl inline-block mb-6">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2">Оплата по СБП</h3>
|
||||
<div className="flex justify-center p-4 bg-white rounded-lg">
|
||||
<QRCode value={sbpUrl} size={256} />
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-gray-600">Отсканируйте QR-код через мобильное приложение вашего банка.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-100 p-6 rounded-2xl mb-6">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2">Оплата по номеру карты</h3>
|
||||
<p className="text-2xl font-bold text-gray-800 select-all">{cardNumber}</p>
|
||||
<button
|
||||
onClick={handleCopyCard}
|
||||
className="mt-4 px-4 py-2 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-gray-500 hover:bg-gray-700"
|
||||
>
|
||||
Скопировать номер карты
|
||||
</button>
|
||||
{copyStatus && <p className="mt-2 text-sm text-green-500">{copyStatus}</p>}
|
||||
</div>
|
||||
|
||||
<div className="bg-red-50 p-6 rounded-2xl border-l-4 border-red-500 text-left mb-6">
|
||||
<p className="font-bold text-red-800">Важно:</p>
|
||||
<p className="text-sm text-red-700">После оплаты сделайте скриншот или сохраните чек и отправьте его нам в тикет поддержки, чтобы мы могли подтвердить платёж.</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-gray-600">
|
||||
После подтверждения ваш баланс будет пополнен. Вы можете перейти в раздел <Link to="/dashboard/tickets" className="text-ospab-primary font-bold hover:underline">Тикеты</Link>, чтобы отправить нам чек.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Billing;
|
||||
10
ospabhost/frontend/src/pages/dashboard/checkverification.tsx
Normal file
10
ospabhost/frontend/src/pages/dashboard/checkverification.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
const CheckVerification = () => {
|
||||
return (
|
||||
<div className="p-8 bg-white rounded-3xl shadow-xl">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Проверка чеков</h2>
|
||||
<p className="text-lg text-gray-500">Здесь будут отображаться чеки для проверки.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckVerification;
|
||||
@@ -6,9 +6,8 @@ const LogoutPage = () => {
|
||||
|
||||
useEffect(() => {
|
||||
// Удаляем все токены и флаг входа из localStorage
|
||||
localStorage.removeItem('access_token');
|
||||
localStorage.removeItem('refresh_token');
|
||||
localStorage.removeItem('isLoggedIn');
|
||||
localStorage.removeItem('access_token');
|
||||
localStorage.removeItem('refresh_token');
|
||||
console.log('Выполняется выход из системы...');
|
||||
// После выхода перенаправляем пользователя на главную страницу
|
||||
navigate('/');
|
||||
|
||||
@@ -1,26 +1,112 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Routes, Route, Link, useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import AuthContext from '../../context/authcontext';
|
||||
import { useContext } from 'react';
|
||||
|
||||
// Импортируем компоненты для вкладок
|
||||
import Summary from './summary';
|
||||
import Servers from './servers';
|
||||
import Tickets from './tickets';
|
||||
import Billing from './billing';
|
||||
import Settings from './settings';
|
||||
import CheckVerification from './checkverification.tsx';
|
||||
import TicketResponse from './ticketresponse.tsx';
|
||||
|
||||
const Dashboard = () => {
|
||||
const [activeTab, setActiveTab] = useState('summary');
|
||||
const [userData, setUserData] = useState<import('./types').UserData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
const { logout } = useContext(AuthContext);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('access_token');
|
||||
if (!token) {
|
||||
logout();
|
||||
navigate('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
const userRes = await axios.get('http://localhost:5000/api/auth/me', { headers });
|
||||
|
||||
// Моделируем остальные данные
|
||||
const serversRes = { data: { servers: [] } };
|
||||
const ticketsRes = { data: { tickets: [] } };
|
||||
|
||||
setUserData({
|
||||
user: userRes.data.user,
|
||||
balance: 1500, // Пример
|
||||
servers: serversRes.data.servers,
|
||||
tickets: ticketsRes.data.tickets,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Ошибка загрузки данных:', err);
|
||||
logout();
|
||||
navigate('/login');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [logout, navigate]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center pt-20">
|
||||
<h1 className="text-2xl text-gray-800">Загрузка...</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!userData || !userData.user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isOperator = userData.user.operator === 1;
|
||||
|
||||
const MainPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
|
||||
<div className="bg-white p-10 rounded-3xl shadow-2xl text-center max-w-2xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight">
|
||||
Добро пожаловать в личный кабинет!
|
||||
</h1>
|
||||
<p className="mt-4 text-lg text-gray-600">
|
||||
Здесь будет информация о твоих проектах и статистика.
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<Link
|
||||
to="/logout"
|
||||
className="px-6 py-3 rounded-full text-white font-bold transition-colors transform hover:scale-105 bg-ospab-primary hover:bg-ospab-accent"
|
||||
>
|
||||
Выйти
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex min-h-screen bg-gray-50 pt-20">
|
||||
<div className="w-64 bg-white shadow-xl p-6 rounded-r-3xl h-full fixed">
|
||||
<nav className="mt-8">
|
||||
<Link to="/dashboard" onClick={() => setActiveTab('summary')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 ${activeTab === 'summary' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Сводка</Link>
|
||||
<Link to="/dashboard/servers" onClick={() => setActiveTab('servers')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'servers' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Серверы</Link>
|
||||
<Link to="/dashboard/tickets" onClick={() => setActiveTab('tickets')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'tickets' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Тикеты</Link>
|
||||
<Link to="/dashboard/billing" onClick={() => setActiveTab('billing')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'billing' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Баланс</Link>
|
||||
<Link to="/dashboard/settings" onClick={() => setActiveTab('settings')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'settings' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Настройки</Link>
|
||||
|
||||
{isOperator && (
|
||||
<>
|
||||
<div className="border-t border-gray-200 my-4"></div>
|
||||
<Link to="/dashboard/checkverification" onClick={() => setActiveTab('checkverification')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'checkverification' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Проверка чеков</Link>
|
||||
<Link to="/dashboard/ticketresponse" onClick={() => setActiveTab('ticketresponse')} className={`block py-3 px-4 rounded-xl font-semibold transition-colors duration-200 mt-2 ${activeTab === 'ticketresponse' ? 'bg-ospab-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}>Ответы на тикеты</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 ml-64 p-8">
|
||||
<Routes>
|
||||
<Route path="/" element={<Summary userData={userData} />} />
|
||||
<Route path="servers" element={<Servers servers={userData.servers} />} />
|
||||
<Route path="tickets" element={<Tickets tickets={userData.tickets} />} />
|
||||
<Route path="billing" element={<Billing />} />
|
||||
<Route path="settings" element={<Settings />} />
|
||||
|
||||
{isOperator && (
|
||||
<>
|
||||
<Route path="checkverification" element={<CheckVerification />} />
|
||||
<Route path="ticketresponse" element={<TicketResponse />} />
|
||||
</>
|
||||
)}
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainPage;
|
||||
export default Dashboard;
|
||||
20
ospabhost/frontend/src/pages/dashboard/servers.tsx
Normal file
20
ospabhost/frontend/src/pages/dashboard/servers.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ServersProps {
|
||||
servers: unknown[];
|
||||
}
|
||||
|
||||
const Servers: React.FC<ServersProps> = ({ servers }) => {
|
||||
return (
|
||||
<div className="p-8 bg-white rounded-3xl shadow-xl">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Серверы</h2>
|
||||
{servers.length === 0 ? (
|
||||
<p className="text-lg text-gray-500">У вас пока нет активных серверов.</p>
|
||||
) : (
|
||||
<p className="text-lg text-gray-500">Список ваших серверов будет здесь...</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Servers;
|
||||
12
ospabhost/frontend/src/pages/dashboard/settings.tsx
Normal file
12
ospabhost/frontend/src/pages/dashboard/settings.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
const Settings = () => {
|
||||
return (
|
||||
<div className="p-8 bg-white rounded-3xl shadow-xl">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Настройки аккаунта</h2>
|
||||
<p className="text-lg text-gray-500">
|
||||
Здесь вы сможете изменить свои личные данные, email и пароль.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
37
ospabhost/frontend/src/pages/dashboard/summary.tsx
Normal file
37
ospabhost/frontend/src/pages/dashboard/summary.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import type { UserData } from './types';
|
||||
|
||||
interface SummaryProps {
|
||||
userData: UserData;
|
||||
}
|
||||
|
||||
const Summary = ({ userData }: SummaryProps) => {
|
||||
return (
|
||||
<div className="p-8 bg-white rounded-3xl shadow-xl">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Сводка по аккаунту</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-gray-100 p-6 rounded-2xl flex flex-col items-start">
|
||||
<p className="text-xl font-medium text-gray-700">Баланс:</p>
|
||||
<p className="text-4xl font-extrabold text-ospab-primary mt-2">₽ {userData.balance.toFixed(2)}</p>
|
||||
<Link to="/dashboard/billing" className="text-sm text-gray-500 hover:underline mt-2">Пополнить баланс →</Link>
|
||||
</div>
|
||||
<div className="bg-gray-100 p-6 rounded-2xl flex flex-col items-start">
|
||||
<p className="text-xl font-medium text-gray-700">Активные серверы:</p>
|
||||
<p className="text-4xl font-extrabold text-gray-800 mt-2">{userData.servers.length}</p>
|
||||
<Link to="/dashboard/servers" className="text-sm text-gray-500 hover:underline mt-2">Управлять →</Link>
|
||||
</div>
|
||||
<div className="bg-gray-100 p-6 rounded-2xl flex flex-col items-start">
|
||||
<p className="text-xl font-medium text-gray-700">Открытые тикеты:</p>
|
||||
<p className="text-4xl font-extrabold text-gray-800 mt-2">{userData.tickets.length}</p>
|
||||
<Link to="/dashboard/tickets" className="text-sm text-gray-500 hover:underline mt-2">Служба поддержки →</Link>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-lg text-gray-500">
|
||||
Добро пожаловать в ваш личный кабинет, {userData.user?.username || 'пользователь'}! Здесь вы можете быстро получить доступ к основным разделам.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Summary;
|
||||
10
ospabhost/frontend/src/pages/dashboard/ticketresponse.tsx
Normal file
10
ospabhost/frontend/src/pages/dashboard/ticketresponse.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
const TicketResponse = () => {
|
||||
return (
|
||||
<div className="p-8 bg-white rounded-3xl shadow-xl">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Ответы на тикеты</h2>
|
||||
<p className="text-lg text-gray-500">Здесь будут отображаться тикеты для ответов.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketResponse;
|
||||
20
ospabhost/frontend/src/pages/dashboard/tickets.tsx
Normal file
20
ospabhost/frontend/src/pages/dashboard/tickets.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
interface TicketsProps {
|
||||
tickets: unknown[];
|
||||
}
|
||||
|
||||
const Tickets: React.FC<TicketsProps> = ({ tickets }) => {
|
||||
return (
|
||||
<div className="p-8 bg-white rounded-3xl shadow-xl">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Тикеты поддержки</h2>
|
||||
{tickets.length === 0 ? (
|
||||
<p className="text-lg text-gray-500">У вас пока нет открытых тикетов.</p>
|
||||
) : (
|
||||
<p className="text-lg text-gray-500">Список ваших тикетов будет здесь...</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tickets;
|
||||
11
ospabhost/frontend/src/pages/dashboard/types.ts
Normal file
11
ospabhost/frontend/src/pages/dashboard/types.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export interface User {
|
||||
username: string;
|
||||
operator: number;
|
||||
}
|
||||
|
||||
export interface UserData {
|
||||
user: User;
|
||||
balance: number;
|
||||
servers: unknown[];
|
||||
tickets: unknown[];
|
||||
}
|
||||
@@ -1,33 +1,34 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import useAuth from '../context/useAuth';
|
||||
|
||||
const LoginPage = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const navigate = useNavigate();
|
||||
const { login } = useAuth();
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const response = await axios.post('http://localhost:5000/api/auth/login', {
|
||||
email: email,
|
||||
password: password,
|
||||
});
|
||||
// Сохраняем токен в localStorage
|
||||
localStorage.setItem('access_token', response.data.token);
|
||||
localStorage.setItem('isLoggedIn', 'true');
|
||||
console.log('Успешный вход:', response.data);
|
||||
navigate('/dashboard'); // Перенаправляем на личный кабинет
|
||||
} catch (error) {
|
||||
let errMsg = 'Ошибка входа. Проверьте правильность email и пароля.';
|
||||
if (axios.isAxiosError(error)) {
|
||||
errMsg = error.response?.data?.message || errMsg;
|
||||
console.error('Ошибка входа:', error.response?.data || error.message);
|
||||
|
||||
login(response.data.token);
|
||||
navigate('/dashboard/mainpage');
|
||||
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err) && err.response) {
|
||||
setError(err.response.data.message || 'Неизвестная ошибка входа.');
|
||||
} else {
|
||||
console.error('Ошибка входа:', error);
|
||||
setError('Произошла ошибка сети. Пожалуйста, попробуйте позже.');
|
||||
}
|
||||
alert(errMsg);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -57,6 +58,9 @@ const LoginPage = () => {
|
||||
Войти
|
||||
</button>
|
||||
</form>
|
||||
{error && (
|
||||
<p className="mt-4 text-sm text-red-500">{error}</p>
|
||||
)}
|
||||
<p className="mt-6 text-gray-600">
|
||||
Нет аккаунта?{' '}
|
||||
<Link to="/register" className="text-ospab-primary font-bold hover:underline">
|
||||
|
||||
@@ -6,27 +6,30 @@ const RegisterPage = () => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleRegister = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(''); // Очищаем предыдущие ошибки
|
||||
|
||||
try {
|
||||
const response = await axios.post('http://localhost:5000/api/auth/register', {
|
||||
await axios.post('http://localhost:5000/api/auth/register', {
|
||||
username: username,
|
||||
email: email,
|
||||
password: password
|
||||
});
|
||||
console.log('Успешная регистрация:', response.data);
|
||||
navigate('/login'); // Перенаправляем пользователя на страницу входа
|
||||
} catch (error) {
|
||||
let errMsg = 'Ошибка регистрации. Пожалуйста, попробуйте снова.';
|
||||
if (axios.isAxiosError(error)) {
|
||||
errMsg = error.response?.data?.message || errMsg;
|
||||
console.error('Ошибка регистрации:', error.response?.data || error.message);
|
||||
|
||||
alert('Регистрация прошла успешно! Теперь вы можете войти.');
|
||||
navigate('/login');
|
||||
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err) && err.response) {
|
||||
const errorMsg = err.response.data.message || 'Неизвестная ошибка регистрации.';
|
||||
setError(errorMsg);
|
||||
} else {
|
||||
console.error('Ошибка регистрации:', error);
|
||||
setError('Произошла ошибка сети. Пожалуйста, попробуйте позже.');
|
||||
}
|
||||
alert(errMsg);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -63,6 +66,9 @@ const RegisterPage = () => {
|
||||
Зарегистрироваться
|
||||
</button>
|
||||
</form>
|
||||
{error && (
|
||||
<p className="mt-4 text-sm text-red-500">{error}</p>
|
||||
)}
|
||||
<p className="mt-6 text-gray-600">
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link to="/login" className="text-ospab-primary font-bold hover:underline">
|
||||
|
||||
Reference in New Issue
Block a user