Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 d3m0k1d
|
c3c0e63fd5 | ||
 NikitaTorbenko
|
6367cdae56 | ||
|
NikitaTorbenko
|
e481c8b3a0 | ||
|
NikitaTorbenko
|
51c708bf47 | ||
|
d3m0k1d
|
2a108e1b5a | ||
|
d3m0k1d
|
fb6bf6e1bf | ||
|
d3m0k1d
|
0f73ca72d7 | ||
|
d3m0k1d
|
ca6b5f40c3 | ||
|
NikitaTorbenko
|
d348e0c347 | ||
|
NikitaTorbenko
|
444bc05f9d | ||
|
NikitaTorbenko
|
b824795389 | ||
 nikita
|
d421dc8f2c | ||
|
nikita
|
8005ba7111 | ||
|
nikita
|
df52c0e8b8 | ||
|
nikita
|
da9da0971f |
@@ -0,0 +1,25 @@
|
|||||||
|
name: CI
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches-ignore:
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: "25"
|
||||||
|
|
||||||
|
- name: Install deps
|
||||||
|
run: npm install
|
||||||
|
|
||||||
|
- name: Lint
|
||||||
|
run: npm run lint
|
||||||
|
|
||||||
|
- name: Build
|
||||||
|
run: npm run build
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
name: Deploy
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [master]
|
||||||
|
|
||||||
|
env:
|
||||||
|
REGISTRY: gitea.d3m0k1d.ru
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Setup SSH
|
||||||
|
run: |
|
||||||
|
mkdir -p ~/.ssh
|
||||||
|
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
|
||||||
|
chmod 600 ~/.ssh/id_rsa
|
||||||
|
|
||||||
|
- name: Install Ansible
|
||||||
|
run: |
|
||||||
|
apt update && apt install -y ansible
|
||||||
|
ansible-galaxy install -r infra/ansible/requirements.yml
|
||||||
|
|
||||||
|
- name: Login to registry
|
||||||
|
run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login $REGISTRY -u "${{ secrets.REGISTRY_USER }}" --password-stdin
|
||||||
|
|
||||||
|
- name: Build and push
|
||||||
|
run: |
|
||||||
|
IMAGE=$REGISTRY/hellreign/frontend
|
||||||
|
docker build -f dockerfile -t $IMAGE:dev -t $IMAGE:latest .
|
||||||
|
docker push $IMAGE:dev
|
||||||
|
docker push $IMAGE:latest
|
||||||
|
|
||||||
|
- name: Deploy
|
||||||
|
run: |
|
||||||
|
echo "${{ secrets.ANSIBLE_VAULT_PASSWORD }}" > .vault_pass
|
||||||
|
ansible-playbook -i infra/ansible/inventory/hosts.yml infra/ansible/playbook.yml --vault-password-file .vault_pass
|
||||||
|
rm .vault_pass
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
services:
|
||||||
|
app:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: dockerfile
|
||||||
|
ports:
|
||||||
|
- "80:80"
|
||||||
+16
@@ -0,0 +1,16 @@
|
|||||||
|
FROM node:25-alpine3.23 AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package.json yarn.lock ./
|
||||||
|
|
||||||
|
RUN yarn install --frozen-lockfile
|
||||||
|
COPY . .
|
||||||
|
RUN yarn build
|
||||||
|
FROM nginx:alpine
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
[defaults]
|
||||||
|
inventory = inventory/hosts.yml
|
||||||
|
host_key_checking = False
|
||||||
|
remote_user = root
|
||||||
|
private_key_file = ~/.ssh/id_rsa
|
||||||
|
interpreter_python = /usr/bin/python3
|
||||||
|
stdout_callback = yaml
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
$ANSIBLE_VAULT;1.1;AES256
|
||||||
|
63663666653739363337653532643363626133303030323462363762316364633838623636626636
|
||||||
|
3163343137366530326139353638316466663037663935340a386362666236633237313939366639
|
||||||
|
34626337346365663033386631366362366261366163646438646461376662666665363635396333
|
||||||
|
3533626234383564390a663966376163366530643965306563363565326438313465383866343138
|
||||||
|
66633432663430373339326365303033323133383365656231373736323234386435626431383639
|
||||||
|
63396366333433343039343165633436633839666330646261633338666435353035656230313932
|
||||||
|
33333630343535646338303539356532306632373433643536393537383463396330366634393962
|
||||||
|
36356139616432336664613139623038373434643562353565353866303130323938383439396131
|
||||||
|
30316139333733356462366464653964313264646632336566616536643438326433623363643465
|
||||||
|
63343430373666356634323761363433666463366431343537613635363239636131643837353935
|
||||||
|
64316633663334663536656137666330393034666661383165376365666633303764643439366461
|
||||||
|
33386433643034643466
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
---
|
||||||
|
- name: Deploy Frontend
|
||||||
|
hosts: prod
|
||||||
|
|
||||||
|
pre_tasks:
|
||||||
|
- name: Install docker
|
||||||
|
ansible.builtin.include_role:
|
||||||
|
name: geerlingguy.docker
|
||||||
|
|
||||||
|
- name: Configure ufw
|
||||||
|
community.general.ufw:
|
||||||
|
rule: allow
|
||||||
|
port: "{{ item }}"
|
||||||
|
loop:
|
||||||
|
- "80"
|
||||||
|
- "443"
|
||||||
|
- "2222"
|
||||||
|
|
||||||
|
- name: Enable ufw
|
||||||
|
community.general.ufw:
|
||||||
|
state: enabled
|
||||||
|
tasks:
|
||||||
|
- name: Ensure directory
|
||||||
|
ansible.builtin.file:
|
||||||
|
path: /opt/aegisfront
|
||||||
|
state: directory
|
||||||
|
|
||||||
|
- name: Copy compose
|
||||||
|
ansible.builtin.copy:
|
||||||
|
src: "{{ playbook_dir }}/../docker-compose.yml"
|
||||||
|
dest: /opt/aegisfront/docker-compose.yml
|
||||||
|
|
||||||
|
- name: Pull image
|
||||||
|
ansible.builtin.shell:
|
||||||
|
cmd: docker compose pull
|
||||||
|
chdir: /opt/aegisfront
|
||||||
|
environment:
|
||||||
|
REGISTRY: gitea.d3m0k1d.ru
|
||||||
|
TAG: latest
|
||||||
|
|
||||||
|
- name: Start
|
||||||
|
ansible.builtin.shell:
|
||||||
|
cmd: docker compose up -d --remove-orphans
|
||||||
|
chdir: /opt/aegisfront
|
||||||
|
environment:
|
||||||
|
REGISTRY: gitea.d3m0k1d.ru
|
||||||
|
TAG: latest
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
roles:
|
||||||
|
- geerlingguy.docker
|
||||||
|
|
||||||
|
collections:
|
||||||
|
- community.general
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
services:
|
||||||
|
app:
|
||||||
|
image: ${REGISTRY}/hellreign/frontend:${TAG}
|
||||||
|
ports:
|
||||||
|
- "80:80"
|
||||||
+31
@@ -0,0 +1,31 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
location /api/ {
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
# Gzip сжатие
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||||
|
}
|
||||||
Generated
+730
-82
File diff suppressed because it is too large
Load Diff
+8
-2
@@ -5,13 +5,19 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc -b && vite build",
|
"build": "vite build",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.3.0",
|
||||||
|
"axios": "^1.17.0",
|
||||||
|
"lucide-react": "^1.18.0",
|
||||||
"react": "^19.2.6",
|
"react": "^19.2.6",
|
||||||
"react-dom": "^19.2.6"
|
"react-dom": "^19.2.6",
|
||||||
|
"react-icons": "^5.6.0",
|
||||||
|
"react-router-dom": "^7.17.0",
|
||||||
|
"tailwindcss": "^4.3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10.0.1",
|
"@eslint/js": "^10.0.1",
|
||||||
|
|||||||
-184
@@ -1,184 +0,0 @@
|
|||||||
.counter {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: var(--accent);
|
|
||||||
background: var(--accent-bg);
|
|
||||||
border: 2px solid transparent;
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--accent-border);
|
|
||||||
}
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 2px solid var(--accent);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.base,
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
inset-inline: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base {
|
|
||||||
width: 170px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework {
|
|
||||||
z-index: 1;
|
|
||||||
top: 34px;
|
|
||||||
height: 28px;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
|
||||||
scale(1.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vite {
|
|
||||||
z-index: 0;
|
|
||||||
top: 107px;
|
|
||||||
height: 26px;
|
|
||||||
width: auto;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
|
||||||
scale(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
place-content: center;
|
|
||||||
place-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 32px 20px 24px;
|
|
||||||
gap: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps {
|
|
||||||
display: flex;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
flex: 1 1 0;
|
|
||||||
padding: 32px;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 24px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#docs {
|
|
||||||
border-right: 1px solid var(--border);
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 32px 0 0;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--text-h);
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--social-bg);
|
|
||||||
display: flex;
|
|
||||||
padding: 6px 12px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: box-shadow 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
.button-icon {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
margin-top: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
li {
|
|
||||||
flex: 1 1 calc(50% - 8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#spacer {
|
|
||||||
height: 88px;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticks {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -4.5px;
|
|
||||||
border: 5px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
left: 0;
|
|
||||||
border-left-color: var(--border);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
right: 0;
|
|
||||||
border-right-color: var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
-122
@@ -1,122 +0,0 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import reactLogo from './assets/react.svg'
|
|
||||||
import viteLogo from './assets/vite.svg'
|
|
||||||
import heroImg from './assets/hero.png'
|
|
||||||
import './App.css'
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section id="center">
|
|
||||||
<div className="hero">
|
|
||||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
|
||||||
<img src={reactLogo} className="framework" alt="React logo" />
|
|
||||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1>Get started</h1>
|
|
||||||
<p>
|
|
||||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="counter"
|
|
||||||
onClick={() => setCount((count) => count + 1)}
|
|
||||||
>
|
|
||||||
Count is {count}
|
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
|
|
||||||
<section id="next-steps">
|
|
||||||
<div id="docs">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#documentation-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Documentation</h2>
|
|
||||||
<p>Your questions, answered</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vite.dev/" target="_blank">
|
|
||||||
<img className="logo" src={viteLogo} alt="" />
|
|
||||||
Explore Vite
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://react.dev/" target="_blank">
|
|
||||||
<img className="button-icon" src={reactLogo} alt="" />
|
|
||||||
Learn more
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="social">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#social-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Connect with us</h2>
|
|
||||||
<p>Join the Vite community</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#github-icon"></use>
|
|
||||||
</svg>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vite.dev/" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#discord-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Discord
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://x.com/vite_js" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#x-icon"></use>
|
|
||||||
</svg>
|
|
||||||
X.com
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#bluesky-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Bluesky
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
<section id="spacer"></section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { Routing } from "./providers/routing";
|
||||||
|
import "@/shared/styles/index.css";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Routing />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { Navigate } from "react-router-dom";
|
||||||
|
import { authService } from "@/modules/auth/api/auth.service";
|
||||||
|
|
||||||
|
interface ProtectedRouteProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
fallbackPath?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
|
||||||
|
children,
|
||||||
|
fallbackPath = "/auth",
|
||||||
|
}) => {
|
||||||
|
const isAuthenticated = authService.isAuthenticated();
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return <Navigate to={fallbackPath} replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import { Suspense } from "react";
|
||||||
|
import { Routes as ReactRoutes, Route } from "react-router-dom";
|
||||||
|
import { HomePage } from "@/pages/home.page";
|
||||||
|
import { SecondaryPage } from "@/pages/secondary.page";
|
||||||
|
import { AuthPage } from "@/pages/AuthPage";
|
||||||
|
import { CreateOrganizationPage } from "@/pages/CreateOrganizationPage";
|
||||||
|
import { OrganizationPage } from "@/pages/OrganizationPage";
|
||||||
|
import { ProtectedRoute } from "./helper/protected.route";
|
||||||
|
|
||||||
|
export const Routing = () => {
|
||||||
|
return (
|
||||||
|
<Suspense
|
||||||
|
fallback={
|
||||||
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
|
Загрузка...
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ReactRoutes>
|
||||||
|
<Route path="/" element={<HomePage />} />
|
||||||
|
<Route path="/auth" element={<AuthPage />} />
|
||||||
|
<Route
|
||||||
|
path="/create-organization"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<CreateOrganizationPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/organization"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<OrganizationPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/secondary"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<SecondaryPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</ReactRoutes>
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
};
|
||||||
-111
@@ -1,111 +0,0 @@
|
|||||||
:root {
|
|
||||||
--text: #6b6375;
|
|
||||||
--text-h: #08060d;
|
|
||||||
--bg: #fff;
|
|
||||||
--border: #e5e4e7;
|
|
||||||
--code-bg: #f4f3ec;
|
|
||||||
--accent: #aa3bff;
|
|
||||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
|
||||||
--accent-border: rgba(170, 59, 255, 0.5);
|
|
||||||
--social-bg: rgba(244, 243, 236, 0.5);
|
|
||||||
--shadow:
|
|
||||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
|
||||||
|
|
||||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
--mono: ui-monospace, Consolas, monospace;
|
|
||||||
|
|
||||||
font: 18px/145% var(--sans);
|
|
||||||
letter-spacing: 0.18px;
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: var(--text);
|
|
||||||
background: var(--bg);
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--text: #9ca3af;
|
|
||||||
--text-h: #f3f4f6;
|
|
||||||
--bg: #16171d;
|
|
||||||
--border: #2e303a;
|
|
||||||
--code-bg: #1f2028;
|
|
||||||
--accent: #c084fc;
|
|
||||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
|
||||||
--accent-border: rgba(192, 132, 252, 0.5);
|
|
||||||
--social-bg: rgba(47, 48, 58, 0.5);
|
|
||||||
--shadow:
|
|
||||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#social .button-icon {
|
|
||||||
filter: invert(1) brightness(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#root {
|
|
||||||
width: 1126px;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
border-inline: 1px solid var(--border);
|
|
||||||
min-height: 100svh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
font-family: var(--heading);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-h);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 56px;
|
|
||||||
letter-spacing: -1.68px;
|
|
||||||
margin: 32px 0;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
font-size: 36px;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 118%;
|
|
||||||
letter-spacing: -0.24px;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code,
|
|
||||||
.counter {
|
|
||||||
font-family: var(--mono);
|
|
||||||
display: inline-flex;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--text-h);
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 135%;
|
|
||||||
padding: 4px 8px;
|
|
||||||
background: var(--code-bg);
|
|
||||||
}
|
|
||||||
+11
-9
@@ -1,10 +1,12 @@
|
|||||||
import { StrictMode } from 'react'
|
import { createRoot } from "react-dom/client";
|
||||||
import { createRoot } from 'react-dom/client'
|
import { BrowserRouter } from "react-router-dom";
|
||||||
import './index.css'
|
import App from "./app/App.tsx";
|
||||||
import App from './App.tsx'
|
import { ThemeInitialProvider } from "@/modules/theme-changer";
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
createRoot(document.getElementById("root")!).render(
|
||||||
<StrictMode>
|
<BrowserRouter>
|
||||||
<App />
|
<ThemeInitialProvider>
|
||||||
</StrictMode>,
|
<App />
|
||||||
)
|
</ThemeInitialProvider>
|
||||||
|
</BrowserRouter>,
|
||||||
|
);
|
||||||
|
|||||||
@@ -0,0 +1,394 @@
|
|||||||
|
import type {
|
||||||
|
LoginCredentials,
|
||||||
|
RegisterData,
|
||||||
|
AuthResponse,
|
||||||
|
OrganizationCreateData,
|
||||||
|
OrganizationResponse,
|
||||||
|
OrganizationMember,
|
||||||
|
} from "../types/auth.types";
|
||||||
|
|
||||||
|
// Заглушка для хранения данных в localStorage
|
||||||
|
const MOCK_USERS_KEY = "mock_users";
|
||||||
|
const MOCK_ORGS_KEY = "mock_organizations";
|
||||||
|
const MOCK_MEMBERS_KEY = "mock_members";
|
||||||
|
|
||||||
|
const getMockUsers = () => {
|
||||||
|
const users = localStorage.getItem(MOCK_USERS_KEY);
|
||||||
|
if (!users) {
|
||||||
|
const defaultUsers = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
username: "admin",
|
||||||
|
email: "admin@example.com",
|
||||||
|
password: "admin123",
|
||||||
|
first_name: "Admin",
|
||||||
|
last_name: "User",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
localStorage.setItem(MOCK_USERS_KEY, JSON.stringify(defaultUsers));
|
||||||
|
return defaultUsers;
|
||||||
|
}
|
||||||
|
return JSON.parse(users);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMockOrganizations = () => {
|
||||||
|
const orgs = localStorage.getItem(MOCK_ORGS_KEY);
|
||||||
|
if (!orgs) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return JSON.parse(orgs);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMockMembers = () => {
|
||||||
|
const members = localStorage.getItem(MOCK_MEMBERS_KEY);
|
||||||
|
if (!members) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return JSON.parse(members);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const authService = {
|
||||||
|
async login(credentials: LoginCredentials): Promise<AuthResponse> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const users = getMockUsers();
|
||||||
|
const user = users.find(
|
||||||
|
(u: any) =>
|
||||||
|
u.username === credentials.username &&
|
||||||
|
u.password === credentials.password,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
resolve({
|
||||||
|
access_token: `mock_token_${user.id}_${Date.now()}`,
|
||||||
|
token_type: "bearer",
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
email: user.email,
|
||||||
|
first_name: user.first_name,
|
||||||
|
last_name: user.last_name,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
reject({
|
||||||
|
response: {
|
||||||
|
data: { message: "Неверное имя пользователя или пароль" },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async register(
|
||||||
|
data: Omit<RegisterData, "confirmPassword">,
|
||||||
|
): Promise<AuthResponse> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const users = getMockUsers();
|
||||||
|
const existingUser = users.find(
|
||||||
|
(u: any) => u.username === data.username,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (existingUser) {
|
||||||
|
reject({
|
||||||
|
response: {
|
||||||
|
data: { message: "Пользователь с таким именем уже существует" },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingEmail = users.find((u: any) => u.email === data.email);
|
||||||
|
if (existingEmail) {
|
||||||
|
reject({
|
||||||
|
response: {
|
||||||
|
data: { message: "Пользователь с таким email уже существует" },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newUser = {
|
||||||
|
id: users.length + 1,
|
||||||
|
username: data.username,
|
||||||
|
email: data.email,
|
||||||
|
password: data.password,
|
||||||
|
first_name: data.first_name,
|
||||||
|
last_name: data.last_name,
|
||||||
|
};
|
||||||
|
|
||||||
|
users.push(newUser);
|
||||||
|
localStorage.setItem(MOCK_USERS_KEY, JSON.stringify(users));
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
access_token: `mock_token_${newUser.id}_${Date.now()}`,
|
||||||
|
token_type: "bearer",
|
||||||
|
user: {
|
||||||
|
id: newUser.id,
|
||||||
|
username: newUser.username,
|
||||||
|
email: newUser.email,
|
||||||
|
first_name: newUser.first_name,
|
||||||
|
last_name: newUser.last_name,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async createOrganization(
|
||||||
|
data: OrganizationCreateData,
|
||||||
|
): Promise<OrganizationResponse> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const orgs = getMockOrganizations();
|
||||||
|
const token = this.getToken();
|
||||||
|
const userId = token ? parseInt(token.split("_")[1]) : 1;
|
||||||
|
|
||||||
|
const newOrg = {
|
||||||
|
id: orgs.length + 1,
|
||||||
|
name: data.name,
|
||||||
|
logo_url: data.logo ? URL.createObjectURL(data.logo) : undefined,
|
||||||
|
created_at: new Date().toISOString(),
|
||||||
|
owner_id: userId,
|
||||||
|
};
|
||||||
|
|
||||||
|
orgs.push(newOrg);
|
||||||
|
localStorage.setItem(MOCK_ORGS_KEY, JSON.stringify(orgs));
|
||||||
|
|
||||||
|
// Добавляем владельца в члены организации
|
||||||
|
const members = getMockMembers();
|
||||||
|
const newMember = {
|
||||||
|
id: members.length + 1,
|
||||||
|
organization_id: newOrg.id,
|
||||||
|
user_id: userId,
|
||||||
|
username: "temp_username",
|
||||||
|
email: "temp_email",
|
||||||
|
first_name: "temp_first",
|
||||||
|
last_name: "temp_last",
|
||||||
|
role: "owner",
|
||||||
|
joined_at: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Получаем данные пользователя
|
||||||
|
const users = getMockUsers();
|
||||||
|
const user = users.find((u: any) => u.id === userId);
|
||||||
|
if (user) {
|
||||||
|
newMember.username = user.username;
|
||||||
|
newMember.email = user.email;
|
||||||
|
newMember.first_name = user.first_name;
|
||||||
|
newMember.last_name = user.last_name;
|
||||||
|
}
|
||||||
|
|
||||||
|
members.push(newMember);
|
||||||
|
localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
|
||||||
|
|
||||||
|
resolve(newOrg);
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async getOrganizations(): Promise<OrganizationResponse[]> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const orgs = getMockOrganizations();
|
||||||
|
resolve(orgs);
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async getOrganizationMembers(
|
||||||
|
organizationId: number,
|
||||||
|
): Promise<OrganizationMember[]> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const members = getMockMembers();
|
||||||
|
const orgMembers = members.filter(
|
||||||
|
(m: any) => m.organization_id === organizationId,
|
||||||
|
);
|
||||||
|
resolve(orgMembers);
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateMemberRole(
|
||||||
|
organizationId: number,
|
||||||
|
userId: number,
|
||||||
|
newRole: string,
|
||||||
|
): Promise<void> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const members = getMockMembers();
|
||||||
|
const memberIndex = members.findIndex(
|
||||||
|
(m: any) =>
|
||||||
|
m.organization_id === organizationId && m.user_id === userId,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (memberIndex !== -1) {
|
||||||
|
members[memberIndex].role = newRole;
|
||||||
|
localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
|
||||||
|
resolve();
|
||||||
|
} else {
|
||||||
|
reject({ response: { data: { message: "Участник не найден" } } });
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async removeMember(organizationId: number, userId: number): Promise<void> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const members = getMockMembers();
|
||||||
|
const filteredMembers = members.filter(
|
||||||
|
(m: any) =>
|
||||||
|
!(m.organization_id === organizationId && m.user_id === userId),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (filteredMembers.length !== members.length) {
|
||||||
|
localStorage.setItem(
|
||||||
|
MOCK_MEMBERS_KEY,
|
||||||
|
JSON.stringify(filteredMembers),
|
||||||
|
);
|
||||||
|
resolve();
|
||||||
|
} else {
|
||||||
|
reject({ response: { data: { message: "Участник не найден" } } });
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async addMember(
|
||||||
|
organizationId: number,
|
||||||
|
email: string,
|
||||||
|
role: string,
|
||||||
|
): Promise<OrganizationMember> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const users = getMockUsers();
|
||||||
|
const user = users.find((u: any) => u.email === email);
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
reject({
|
||||||
|
response: {
|
||||||
|
data: { message: "Пользователь с таким email не найден" },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const members = getMockMembers();
|
||||||
|
const existingMember = members.find(
|
||||||
|
(m: any) =>
|
||||||
|
m.organization_id === organizationId && m.user_id === user.id,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (existingMember) {
|
||||||
|
reject({
|
||||||
|
response: {
|
||||||
|
data: {
|
||||||
|
message: "Пользователь уже является участником организации",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newMember = {
|
||||||
|
id: members.length + 1,
|
||||||
|
organization_id: organizationId,
|
||||||
|
user_id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
email: user.email,
|
||||||
|
first_name: user.first_name,
|
||||||
|
last_name: user.last_name,
|
||||||
|
role: role,
|
||||||
|
joined_at: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
members.push(newMember);
|
||||||
|
localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
|
||||||
|
|
||||||
|
resolve(newMember);
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCurrentUser(): Promise<AuthResponse["user"]> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const token = this.getToken();
|
||||||
|
if (!token) {
|
||||||
|
reject({ response: { data: { message: "Не авторизован" } } });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const userId = parseInt(token.split("_")[1]);
|
||||||
|
const users = getMockUsers();
|
||||||
|
const user = users.find((u: any) => u.id === userId);
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
resolve({
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
email: user.email,
|
||||||
|
first_name: user.first_name,
|
||||||
|
last_name: user.last_name,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
reject({ response: { data: { message: "Пользователь не найден" } } });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
logout(): void {
|
||||||
|
localStorage.removeItem("auth-storage");
|
||||||
|
localStorage.removeItem("organization-storage");
|
||||||
|
},
|
||||||
|
|
||||||
|
saveAuthData(token: string, user: AuthResponse["user"]): void {
|
||||||
|
const authStorage = {
|
||||||
|
state: {
|
||||||
|
token,
|
||||||
|
user,
|
||||||
|
},
|
||||||
|
version: 0,
|
||||||
|
};
|
||||||
|
localStorage.setItem("auth-storage", JSON.stringify(authStorage));
|
||||||
|
},
|
||||||
|
|
||||||
|
saveOrganization(organization: OrganizationResponse): void {
|
||||||
|
localStorage.setItem("organization-storage", JSON.stringify(organization));
|
||||||
|
},
|
||||||
|
|
||||||
|
getToken(): string | null {
|
||||||
|
const authStorage = localStorage.getItem("auth-storage");
|
||||||
|
if (!authStorage) return null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(authStorage);
|
||||||
|
return parsed.state?.token || null;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getCurrentOrganization(): OrganizationResponse | null {
|
||||||
|
const orgStorage = localStorage.getItem("organization-storage");
|
||||||
|
if (!orgStorage) return null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
return JSON.parse(orgStorage);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
isAuthenticated(): boolean {
|
||||||
|
const token = this.getToken();
|
||||||
|
return !!token;
|
||||||
|
},
|
||||||
|
|
||||||
|
hasOrganization(): boolean {
|
||||||
|
return !!this.getCurrentOrganization();
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,138 @@
|
|||||||
|
import React, { useState, useRef } from "react";
|
||||||
|
import { useAuth } from "../hooks/useAuth";
|
||||||
|
|
||||||
|
export const CreateOrganizationForm = () => {
|
||||||
|
const [organizationName, setOrganizationName] = useState("");
|
||||||
|
const [logo, setLogo] = useState<File | null>(null);
|
||||||
|
const [logoPreview, setLogoPreview] = useState<string>("");
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const { createOrganization, isLoading, error } = useAuth();
|
||||||
|
|
||||||
|
const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
setLogo(file);
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = () => {
|
||||||
|
setLogoPreview(reader.result as string);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (organizationName.trim()) {
|
||||||
|
await createOrganization({
|
||||||
|
name: organizationName,
|
||||||
|
logo: logo || undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="w-32 h-32 rounded-full border-2 border-dashed flex items-center justify-center cursor-pointer overflow-hidden transition-all hover:border-accent"
|
||||||
|
style={{
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
}}
|
||||||
|
onClick={() => fileInputRef.current?.click()}
|
||||||
|
>
|
||||||
|
{logoPreview ? (
|
||||||
|
<img
|
||||||
|
src={logoPreview}
|
||||||
|
alt="Organization logo"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="text-center">
|
||||||
|
<svg
|
||||||
|
className="w-10 h-10 mx-auto mb-1"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
>
|
||||||
|
Загрузить лого
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handleLogoChange}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="organizationName"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Название организации
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="organizationName"
|
||||||
|
type="text"
|
||||||
|
value={organizationName}
|
||||||
|
onChange={(e) => setOrganizationName(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="Введите название организации"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div
|
||||||
|
className="p-3 rounded-lg text-sm"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--error-bg)",
|
||||||
|
borderColor: "var(--error-border)",
|
||||||
|
color: "var(--error-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--button-primary)",
|
||||||
|
color: "var(--button-primary-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isLoading ? "Создание..." : "Создать организацию"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { useAuth } from "../hooks/useAuth";
|
||||||
|
|
||||||
|
interface LoginFormProps {
|
||||||
|
onSwitchToRegister: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LoginForm: React.FC<LoginFormProps> = ({ onSwitchToRegister }) => {
|
||||||
|
const [username, setUsername] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const { login, isLoading, error } = useAuth();
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
await login({ username, password });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="username"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Имя пользователя
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
type="text"
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="Введите имя пользователя"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="password"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Пароль
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="Введите пароль"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div
|
||||||
|
className="p-3 rounded-lg text-sm"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--error-bg)",
|
||||||
|
borderColor: "var(--error-border)",
|
||||||
|
color: "var(--error-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--button-primary)",
|
||||||
|
color: "var(--button-primary-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isLoading ? "Вход..." : "Войти"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onSwitchToRegister}
|
||||||
|
className="text-sm transition-colors hover:underline"
|
||||||
|
style={{ color: "var(--link)" }}
|
||||||
|
>
|
||||||
|
Нет аккаунта? Зарегистрироваться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,231 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { useAuth } from "../hooks/useAuth";
|
||||||
|
|
||||||
|
interface RegisterFormProps {
|
||||||
|
onSwitchToLogin: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RegisterForm: React.FC<RegisterFormProps> = ({
|
||||||
|
onSwitchToLogin,
|
||||||
|
}) => {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
first_name: "",
|
||||||
|
last_name: "",
|
||||||
|
username: "",
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
confirmPassword: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const { register, isLoading, error } = useAuth();
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
[e.target.id]: e.target.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
await register(formData);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="first_name"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Имя
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="first_name"
|
||||||
|
type="text"
|
||||||
|
value={formData.first_name}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="Имя"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="last_name"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Фамилия
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="last_name"
|
||||||
|
type="text"
|
||||||
|
value={formData.last_name}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="Фамилия"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="username"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Имя пользователя
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
type="text"
|
||||||
|
value={formData.username}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="username"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="email"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="example@mail.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="password"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Пароль
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={formData.password}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="Введите пароль"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="confirmPassword"
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Подтверждение пароля
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="confirmPassword"
|
||||||
|
type="password"
|
||||||
|
value={formData.confirmPassword}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="Повторите пароль"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div
|
||||||
|
className="p-3 rounded-lg text-sm"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--error-bg)",
|
||||||
|
borderColor: "var(--error-border)",
|
||||||
|
color: "var(--error-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--button-primary)",
|
||||||
|
color: "var(--button-primary-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isLoading ? "Регистрация..." : "Зарегистрироваться"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onSwitchToLogin}
|
||||||
|
className="text-sm transition-colors hover:underline"
|
||||||
|
style={{ color: "var(--link)" }}
|
||||||
|
>
|
||||||
|
Уже есть аккаунт? Войти
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { authService } from "../api/auth.service";
|
||||||
|
import { useApi } from "@/shared/api/hooks/use.api";
|
||||||
|
import type {
|
||||||
|
LoginCredentials,
|
||||||
|
RegisterData,
|
||||||
|
OrganizationCreateData,
|
||||||
|
} from "../types/auth.types";
|
||||||
|
|
||||||
|
export const useAuth = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { isLoading, error, request } = useApi();
|
||||||
|
const [authError, setAuthError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const login = async (credentials: LoginCredentials) => {
|
||||||
|
setAuthError(null);
|
||||||
|
const result = await request(() => authService.login(credentials));
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
authService.saveAuthData(result.access_token, result.user);
|
||||||
|
|
||||||
|
const orgs = await request(() => authService.getOrganizations());
|
||||||
|
if (orgs && orgs.length > 0) {
|
||||||
|
authService.saveOrganization(orgs[0]);
|
||||||
|
navigate("/");
|
||||||
|
} else {
|
||||||
|
navigate("/create-organization");
|
||||||
|
}
|
||||||
|
} else if (error) {
|
||||||
|
setAuthError(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const register = async (data: RegisterData) => {
|
||||||
|
setAuthError(null);
|
||||||
|
|
||||||
|
if (data.password !== data.confirmPassword) {
|
||||||
|
setAuthError("Пароли не совпадают");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { confirmPassword, ...registerData } = data;
|
||||||
|
const result = await request(() => authService.register(registerData));
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
authService.saveAuthData(result.access_token, result.user);
|
||||||
|
navigate("/create-organization");
|
||||||
|
} else if (error) {
|
||||||
|
setAuthError(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const createOrganization = async (data: OrganizationCreateData) => {
|
||||||
|
setAuthError(null);
|
||||||
|
const result = await request(() => authService.createOrganization(data));
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
authService.saveOrganization(result);
|
||||||
|
navigate("/");
|
||||||
|
} else if (error) {
|
||||||
|
setAuthError(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
authService.logout();
|
||||||
|
navigate("/");
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
login,
|
||||||
|
register,
|
||||||
|
createOrganization,
|
||||||
|
logout,
|
||||||
|
isLoading,
|
||||||
|
error: authError,
|
||||||
|
isAuthenticated: authService.isAuthenticated(),
|
||||||
|
hasOrganization: authService.hasOrganization(),
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
export interface LoginCredentials {
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RegisterData {
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
confirmPassword: string;
|
||||||
|
first_name: string;
|
||||||
|
last_name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AuthResponse {
|
||||||
|
access_token: string;
|
||||||
|
token_type: string;
|
||||||
|
user: {
|
||||||
|
id: number;
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
first_name: string;
|
||||||
|
last_name: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OrganizationCreateData {
|
||||||
|
name: string;
|
||||||
|
logo?: File;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OrganizationResponse {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
logo_url?: string;
|
||||||
|
created_at: string;
|
||||||
|
owner_id: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OrganizationMember {
|
||||||
|
id: number;
|
||||||
|
user_id: number;
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
first_name: string;
|
||||||
|
last_name: string;
|
||||||
|
role: "owner" | "admin" | "member";
|
||||||
|
joined_at: string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,307 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { useOrganization } from "../hooks/useOrganization";
|
||||||
|
|
||||||
|
export const OrganizationMembers = () => {
|
||||||
|
const { members, isLoading, updateMemberRole, removeMember, addMember } =
|
||||||
|
useOrganization();
|
||||||
|
const [showAddModal, setShowAddModal] = useState(false);
|
||||||
|
const [newMemberEmail, setNewMemberEmail] = useState("");
|
||||||
|
const [newMemberRole, setNewMemberRole] = useState<"admin" | "member">(
|
||||||
|
"member",
|
||||||
|
);
|
||||||
|
const [actionLoading, setActionLoading] = useState<number | null>(null);
|
||||||
|
|
||||||
|
const handleRoleChange = async (userId: number, newRole: string) => {
|
||||||
|
setActionLoading(userId);
|
||||||
|
await updateMemberRole(userId, newRole);
|
||||||
|
setActionLoading(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveMember = async (userId: number, memberName: string) => {
|
||||||
|
if (
|
||||||
|
confirm(
|
||||||
|
`Вы уверены, что хотите удалить пользователя "${memberName}" из организации?`,
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
setActionLoading(userId);
|
||||||
|
await removeMember(userId);
|
||||||
|
setActionLoading(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddMember = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const success = await addMember(newMemberEmail, newMemberRole);
|
||||||
|
if (success) {
|
||||||
|
setShowAddModal(false);
|
||||||
|
setNewMemberEmail("");
|
||||||
|
setNewMemberRole("member");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRoleLabel = (role: string) => {
|
||||||
|
switch (role) {
|
||||||
|
case "owner":
|
||||||
|
return "Владелец";
|
||||||
|
case "admin":
|
||||||
|
return "Администратор";
|
||||||
|
case "member":
|
||||||
|
return "Участник";
|
||||||
|
default:
|
||||||
|
return role;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRoleColor = (role: string) => {
|
||||||
|
switch (role) {
|
||||||
|
case "owner":
|
||||||
|
return "text-yellow-600 dark:text-yellow-400";
|
||||||
|
case "admin":
|
||||||
|
return "text-blue-600 dark:text-blue-400";
|
||||||
|
case "member":
|
||||||
|
return "text-green-600 dark:text-green-400";
|
||||||
|
default:
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading && members.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center py-12">
|
||||||
|
<div style={{ color: "var(--text-secondary)" }}>
|
||||||
|
Загрузка участников...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h2
|
||||||
|
className="text-2xl font-bold"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
Участники организации
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAddModal(true)}
|
||||||
|
className="px-4 py-2 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--accent)",
|
||||||
|
color: "var(--button-primary-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+ Добавить участника
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b" style={{ borderColor: "var(--border)" }}>
|
||||||
|
<th
|
||||||
|
className="text-left py-3 px-4"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Имя
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
className="text-left py-3 px-4"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
className="text-left py-3 px-4"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Роль
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
className="text-left py-3 px-4"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Действия
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{members.map((member) => (
|
||||||
|
<tr
|
||||||
|
key={member.id}
|
||||||
|
className="border-b"
|
||||||
|
style={{ borderColor: "var(--border)" }}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
className="py-3 px-4"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{member.first_name} {member.last_name}
|
||||||
|
<div
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
>
|
||||||
|
@{member.username}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
className="py-3 px-4"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{member.email}
|
||||||
|
</td>
|
||||||
|
<td className="py-3 px-4">
|
||||||
|
{member.role === "owner" ? (
|
||||||
|
<span
|
||||||
|
className={`font-medium ${getRoleColor(member.role)}`}
|
||||||
|
>
|
||||||
|
{getRoleLabel(member.role)}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<select
|
||||||
|
value={member.role}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleRoleChange(member.user_id, e.target.value)
|
||||||
|
}
|
||||||
|
disabled={actionLoading === member.user_id}
|
||||||
|
className="px-2 py-1 rounded border focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="admin">{getRoleLabel("admin")}</option>
|
||||||
|
<option value="member">{getRoleLabel("member")}</option>
|
||||||
|
</select>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="py-3 px-4">
|
||||||
|
{member.role !== "owner" && (
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
handleRemoveMember(
|
||||||
|
member.user_id,
|
||||||
|
`${member.first_name} ${member.last_name}`,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={actionLoading === member.user_id}
|
||||||
|
className="px-3 py-1 rounded text-sm transition-all hover:scale-105 disabled:opacity-50"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--button-danger)",
|
||||||
|
color: "var(--button-danger-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{actionLoading === member.user_id ? "..." : "Удалить"}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{members.length === 0 && !isLoading && (
|
||||||
|
<div
|
||||||
|
className="text-center py-12"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
В организации пока нет участников
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showAddModal && (
|
||||||
|
<div className="fixed inset-0 bg-[#00000055] bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div
|
||||||
|
className="rounded-2xl p-6 max-w-md w-full mx-4"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 20px 25px -5px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className="text-xl font-bold mb-4"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
Добавить участника
|
||||||
|
</h3>
|
||||||
|
<form onSubmit={handleAddMember}>
|
||||||
|
<div className="mb-4">
|
||||||
|
<label
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Email пользователя
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={newMemberEmail}
|
||||||
|
onChange={(e) => setNewMemberEmail(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
placeholder="user@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<label
|
||||||
|
className="block text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Роль
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={newMemberRole}
|
||||||
|
onChange={(e) =>
|
||||||
|
setNewMemberRole(e.target.value as "admin" | "member")
|
||||||
|
}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--input-bg)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
"--tw-ring-color": "var(--accent)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="admin">Администратор</option>
|
||||||
|
<option value="member">Участник</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowAddModal(false)}
|
||||||
|
className="flex-1 py-2 px-4 rounded-lg font-medium transition-all"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
color: "var(--text-secondary)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Отмена
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1 py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--accent)",
|
||||||
|
color: "var(--button-primary-text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { authService } from "@/modules/auth/api/auth.service";
|
||||||
|
import { useApi } from "@/shared/api/hooks/use.api";
|
||||||
|
import type { OrganizationMember } from "@/modules/auth/types/auth.types";
|
||||||
|
|
||||||
|
export const useOrganization = () => {
|
||||||
|
const { isLoading, error, request } = useApi();
|
||||||
|
const [members, setMembers] = useState<OrganizationMember[]>([]);
|
||||||
|
const [organization, setOrganization] = useState(
|
||||||
|
authService.getCurrentOrganization(),
|
||||||
|
);
|
||||||
|
|
||||||
|
const loadMembers = async () => {
|
||||||
|
if (organization) {
|
||||||
|
const result = await request(() =>
|
||||||
|
authService.getOrganizationMembers(organization.id),
|
||||||
|
);
|
||||||
|
if (result) {
|
||||||
|
setMembers(result);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadMembers();
|
||||||
|
}, [organization]);
|
||||||
|
|
||||||
|
const updateMemberRole = async (userId: number, newRole: string) => {
|
||||||
|
if (organization) {
|
||||||
|
const result = await request(() =>
|
||||||
|
authService.updateMemberRole(organization.id, userId, newRole),
|
||||||
|
);
|
||||||
|
if (result !== undefined) {
|
||||||
|
await loadMembers();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeMember = async (userId: number) => {
|
||||||
|
if (organization) {
|
||||||
|
const result = await request(() =>
|
||||||
|
authService.removeMember(organization.id, userId),
|
||||||
|
);
|
||||||
|
if (result !== undefined) {
|
||||||
|
await loadMembers();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const addMember = async (email: string, role: string) => {
|
||||||
|
if (organization) {
|
||||||
|
const result = await request(() =>
|
||||||
|
authService.addMember(organization.id, email, role),
|
||||||
|
);
|
||||||
|
if (result) {
|
||||||
|
await loadMembers();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshOrganization = () => {
|
||||||
|
setOrganization(authService.getCurrentOrganization());
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
members,
|
||||||
|
organization,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
updateMemberRole,
|
||||||
|
removeMember,
|
||||||
|
addMember,
|
||||||
|
refreshOrganization,
|
||||||
|
loadMembers,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
export const themes = [
|
||||||
|
{
|
||||||
|
id: "light",
|
||||||
|
name: "Светлая",
|
||||||
|
description: "Чистая светлая тема",
|
||||||
|
type: "light",
|
||||||
|
colors: {
|
||||||
|
primary: "#4f46e5",
|
||||||
|
background: "#ffffff",
|
||||||
|
surface: "#f8fafc",
|
||||||
|
text: "#1f2937",
|
||||||
|
border: "#e5e7eb",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "dark",
|
||||||
|
name: "Темная",
|
||||||
|
description: "Элегантная темная тема",
|
||||||
|
type: "dark",
|
||||||
|
colors: {
|
||||||
|
primary: "#6366f1",
|
||||||
|
background: "#0f172a",
|
||||||
|
surface: "#1e293b",
|
||||||
|
text: "#f1f5f9",
|
||||||
|
border: "#334155",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "nightowl",
|
||||||
|
name: "Night Owl",
|
||||||
|
description: "Тема вдохновленная редактором кода",
|
||||||
|
type: "dark",
|
||||||
|
colors: {
|
||||||
|
primary: "#7dd3fc",
|
||||||
|
background: "#011627",
|
||||||
|
surface: "#011e3c",
|
||||||
|
text: "#d6deeb",
|
||||||
|
border: "#1d3b53",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "sunset",
|
||||||
|
name: "Закат",
|
||||||
|
description: "Теплые оранжевые тона",
|
||||||
|
type: "dark",
|
||||||
|
colors: {
|
||||||
|
primary: "#f97316",
|
||||||
|
background: "#1c1917",
|
||||||
|
surface: "#292524",
|
||||||
|
text: "#fafaf9",
|
||||||
|
border: "#57534e",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "forest",
|
||||||
|
name: "Лес",
|
||||||
|
description: "Успокаивающая зеленая тема",
|
||||||
|
type: "dark",
|
||||||
|
colors: {
|
||||||
|
primary: "#22c55e",
|
||||||
|
background: "#052e16",
|
||||||
|
surface: "#14532d",
|
||||||
|
text: "#f0fdf4",
|
||||||
|
border: "#166534",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ocean",
|
||||||
|
name: "Океан",
|
||||||
|
description: "Глубокие синие тона",
|
||||||
|
type: "dark",
|
||||||
|
colors: {
|
||||||
|
primary: "#06b6d4",
|
||||||
|
background: "#164e63",
|
||||||
|
surface: "#0e7490",
|
||||||
|
text: "#f0fdfd",
|
||||||
|
border: "#0891b2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "lavender",
|
||||||
|
name: "Лаванда",
|
||||||
|
description: "Нежная фиолетовая тема",
|
||||||
|
type: "light",
|
||||||
|
colors: {
|
||||||
|
primary: "#a855f7",
|
||||||
|
background: "#faf5ff",
|
||||||
|
surface: "#f3e8ff",
|
||||||
|
text: "#581c87",
|
||||||
|
border: "#e9d5ff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "coffee",
|
||||||
|
name: "Кофе",
|
||||||
|
description: "Уютная коричневая тема",
|
||||||
|
type: "dark",
|
||||||
|
colors: {
|
||||||
|
primary: "#d97706",
|
||||||
|
background: "#292524",
|
||||||
|
surface: "#44403c",
|
||||||
|
text: "#f5f5f4",
|
||||||
|
border: "#57534e",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export { ThemeInitialProvider } from "./provider/theme.initial.provider";
|
||||||
|
export { ThemeToggle } from "./ui/Theme.toggle";
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { useLayoutEffect } from "react";
|
||||||
|
import { applyTheme, initializeTheme } from "../utils/apply.theme";
|
||||||
|
|
||||||
|
export const ThemeInitialProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||||
|
children,
|
||||||
|
}) => {
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
const theme = initializeTheme();
|
||||||
|
applyTheme(theme);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return children;
|
||||||
|
};
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
export interface ITheme {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
type: string;
|
||||||
|
colors: {
|
||||||
|
primary: string;
|
||||||
|
background: string;
|
||||||
|
surface: string;
|
||||||
|
text: string;
|
||||||
|
border: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { FiSun, FiMoon } from "react-icons/fi";
|
||||||
|
import {
|
||||||
|
getCurrentTheme,
|
||||||
|
toggleDarkLight,
|
||||||
|
getSavedTheme,
|
||||||
|
} from "../../theme-changer/utils/apply.theme";
|
||||||
|
import { themes } from "../../theme-changer/config/theme.config";
|
||||||
|
|
||||||
|
export const ThemeToggle: React.FC = () => {
|
||||||
|
const [currentTheme, setCurrentTheme] = useState<string>(() =>
|
||||||
|
getSavedTheme(),
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentThemeData = themes.find((t) => t.id === currentTheme);
|
||||||
|
const isDark = currentThemeData?.type === "dark";
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
const newTheme = toggleDarkLight();
|
||||||
|
setCurrentTheme(newTheme);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Инициализация при монтировании
|
||||||
|
useEffect(() => {
|
||||||
|
const saved = getSavedTheme();
|
||||||
|
const current = getCurrentTheme() || saved;
|
||||||
|
setCurrentTheme(current);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Слушаем изменения темы из других компонентов
|
||||||
|
useEffect(() => {
|
||||||
|
const handleThemeChange = (e: Event) => {
|
||||||
|
const event = e as CustomEvent;
|
||||||
|
setCurrentTheme(event.detail.theme);
|
||||||
|
};
|
||||||
|
window.addEventListener("themechange", handleThemeChange);
|
||||||
|
return () => window.removeEventListener("themechange", handleThemeChange);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={handleClick}
|
||||||
|
className="p-2 rounded-lg transition-colors duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.backgroundColor = "var(--bg-tertiary)";
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
|
||||||
|
}}
|
||||||
|
aria-label="Переключить тему"
|
||||||
|
title={
|
||||||
|
isDark ? "Переключить на светлую тему" : "Переключить на тёмную тему"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{isDark ? (
|
||||||
|
<FiSun className="w-5 h-5" style={{ color: "var(--accent)" }} />
|
||||||
|
) : (
|
||||||
|
<FiMoon
|
||||||
|
className="w-5 h-5"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
import { themes } from "../config/theme.config";
|
||||||
|
|
||||||
|
export const applyTheme = (themeId: string) => {
|
||||||
|
const theme = themes.find((t) => t.id === themeId);
|
||||||
|
const root = document.documentElement;
|
||||||
|
|
||||||
|
if (theme) {
|
||||||
|
try {
|
||||||
|
root.setAttribute("data-theme", themeId);
|
||||||
|
localStorage.setItem("theme", themeId);
|
||||||
|
localStorage.setItem("theme-type", theme.type);
|
||||||
|
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent("themechange", {
|
||||||
|
detail: { theme: themeId, type: theme.type },
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("❌ Error applying theme:", error);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.warn(`⚠️ Theme not found: ${themeId}, falling back to light theme`);
|
||||||
|
applyTheme("light");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getSavedTheme = () => {
|
||||||
|
try {
|
||||||
|
return localStorage.getItem("theme") || "light";
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error reading theme from localStorage:", error);
|
||||||
|
return "light";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const initializeTheme = () => {
|
||||||
|
const savedTheme = getSavedTheme();
|
||||||
|
|
||||||
|
const themeExists = themes.some((t) => t.id === savedTheme);
|
||||||
|
const themeToApply = themeExists ? savedTheme : "light";
|
||||||
|
|
||||||
|
applyTheme(themeToApply);
|
||||||
|
return themeToApply;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getCurrentTheme = () => {
|
||||||
|
return document.documentElement.getAttribute("data-theme") || "light";
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getCurrentThemeType = () => {
|
||||||
|
const currentTheme = getCurrentTheme();
|
||||||
|
const theme = themes.find((t) => t.id === currentTheme);
|
||||||
|
return theme ? theme.type : "light";
|
||||||
|
};
|
||||||
|
|
||||||
|
export const toggleDarkLight = () => {
|
||||||
|
const currentTheme = getCurrentTheme();
|
||||||
|
const currentThemeData = themes.find((t) => t.id === currentTheme);
|
||||||
|
|
||||||
|
if (currentThemeData) {
|
||||||
|
const oppositeThemes = themes.filter(
|
||||||
|
(t) => t.type !== currentThemeData.type,
|
||||||
|
);
|
||||||
|
if (oppositeThemes.length > 0) {
|
||||||
|
applyTheme(oppositeThemes[0].id);
|
||||||
|
return oppositeThemes[0].id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const newTheme = currentTheme === "light" ? "dark" : "light";
|
||||||
|
applyTheme(newTheme);
|
||||||
|
return newTheme;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getNextTheme = () => {
|
||||||
|
const currentTheme = getCurrentTheme();
|
||||||
|
const currentIndex = themes.findIndex((t) => t.id === currentTheme);
|
||||||
|
const nextIndex = (currentIndex + 1) % themes.length;
|
||||||
|
return themes[nextIndex].id;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const applySystemTheme = () => {
|
||||||
|
if (
|
||||||
|
window.matchMedia &&
|
||||||
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
) {
|
||||||
|
applyTheme("dark");
|
||||||
|
} else {
|
||||||
|
applyTheme("light");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const watchSystemTheme = () => {
|
||||||
|
if (window.matchMedia) {
|
||||||
|
window
|
||||||
|
.matchMedia("(prefers-color-scheme: dark)")
|
||||||
|
.addEventListener("change", (e) => {
|
||||||
|
if (e.matches) {
|
||||||
|
applyTheme("dark");
|
||||||
|
} else {
|
||||||
|
applyTheme("light");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
|
||||||
|
import { LoginForm } from "@/modules/auth/components/LoginForm";
|
||||||
|
import { RegisterForm } from "@/modules/auth/components/RegisterForm";
|
||||||
|
|
||||||
|
export const AuthPage = () => {
|
||||||
|
const [isLogin, setIsLogin] = useState(true);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="min-h-screen flex items-center justify-center p-4 transition-theme"
|
||||||
|
style={{ backgroundColor: "var(--bg-primary)" }}
|
||||||
|
>
|
||||||
|
<div className="absolute top-4 right-4 flex gap-4">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/")}
|
||||||
|
className="px-4 py-2 rounded-lg font-medium transition-all hover:scale-105"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
border: `1px solid var(--border)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
На главную
|
||||||
|
</button>
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="w-full max-w-md rounded-2xl shadow-xl p-8 transition-theme"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h1
|
||||||
|
className="text-3xl font-bold mb-2 transition-theme"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
IPS Manager
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-sm transition-theme"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
{isLogin
|
||||||
|
? "Войдите в систему для управления IPS агентами"
|
||||||
|
: "Создайте аккаунт для начала работы"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isLogin ? (
|
||||||
|
<LoginForm onSwitchToRegister={() => setIsLogin(false)} />
|
||||||
|
) : (
|
||||||
|
<RegisterForm onSwitchToLogin={() => setIsLogin(true)} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
|
||||||
|
import { CreateOrganizationForm } from "@/modules/auth/components/CreateOrganizationForm";
|
||||||
|
import { useAuth } from "@/modules/auth/hooks/useAuth";
|
||||||
|
import { Navigate } from "react-router-dom";
|
||||||
|
|
||||||
|
export const CreateOrganizationPage = () => {
|
||||||
|
const { isAuthenticated, hasOrganization } = useAuth();
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return <Navigate to="/" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasOrganization) {
|
||||||
|
return <Navigate to="/home" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="min-h-screen flex items-center justify-center p-4 transition-theme"
|
||||||
|
style={{ backgroundColor: "var(--bg-primary)" }}
|
||||||
|
>
|
||||||
|
<div className="absolute top-4 right-4">
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="w-full max-w-md rounded-2xl shadow-xl p-8 transition-theme"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h1
|
||||||
|
className="text-2xl font-bold mb-2 transition-theme"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
Создание организации
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-sm transition-theme"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Создайте организацию для начала работы с IPS платформой
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CreateOrganizationForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
|
||||||
|
import { OrganizationMembers } from "@/modules/organization/components/OrganizationMembers";
|
||||||
|
import { useAuth } from "@/modules/auth/hooks/useAuth";
|
||||||
|
import { Navigate, useNavigate } from "react-router-dom";
|
||||||
|
import { authService } from "@/modules/auth/api/auth.service";
|
||||||
|
|
||||||
|
export const OrganizationPage = () => {
|
||||||
|
const { isAuthenticated, hasOrganization } = useAuth();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const organization = authService.getCurrentOrganization();
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return <Navigate to="/" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasOrganization) {
|
||||||
|
return <Navigate to="/create-organization" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="min-h-screen transition-theme"
|
||||||
|
style={{ backgroundColor: "var(--bg-primary)" }}
|
||||||
|
>
|
||||||
|
<div className="absolute top-4 right-4">
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="mb-8">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/home")}
|
||||||
|
className="mb-4 inline-flex items-center gap-2 text-sm transition-colors hover:underline"
|
||||||
|
style={{ color: "var(--link)" }}
|
||||||
|
>
|
||||||
|
← Назад
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{organization?.logo_url && (
|
||||||
|
<img
|
||||||
|
src={organization.logo_url}
|
||||||
|
alt={organization.name}
|
||||||
|
className="w-16 h-16 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
className="text-3xl font-bold"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{organization?.name}
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||||
|
Управление участниками организации
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="rounded-2xl p-6"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<OrganizationMembers />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,723 @@
|
|||||||
|
import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useAuth } from "@/modules/auth/hooks/useAuth";
|
||||||
|
import { authService } from "@/modules/auth/api/auth.service";
|
||||||
|
import {
|
||||||
|
Shield,
|
||||||
|
Users,
|
||||||
|
Bot,
|
||||||
|
Activity,
|
||||||
|
LogOut,
|
||||||
|
ChevronRight,
|
||||||
|
Zap,
|
||||||
|
Lock,
|
||||||
|
Cloud,
|
||||||
|
TrendingUp,
|
||||||
|
Bell,
|
||||||
|
Server,
|
||||||
|
Sparkles,
|
||||||
|
AlertCircle,
|
||||||
|
CheckCircle,
|
||||||
|
Clock,
|
||||||
|
LogIn,
|
||||||
|
UserPlus,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
export const HomePage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { logout } = useAuth();
|
||||||
|
const isAuthenticated = authService.isAuthenticated();
|
||||||
|
const organization = authService.getCurrentOrganization();
|
||||||
|
const authStorage = localStorage.getItem("auth-storage");
|
||||||
|
const user = authStorage ? JSON.parse(authStorage).state?.user : null;
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ label: "Активные агенты", value: "12", change: "+2", icon: Server },
|
||||||
|
{ label: "Заблокировано IP", value: "1,284", change: "+128", icon: Shield },
|
||||||
|
{ label: "Активных правил", value: "47", change: "+5", icon: Lock },
|
||||||
|
{
|
||||||
|
label: "Атак предотвращено",
|
||||||
|
value: "3,721",
|
||||||
|
change: "+342",
|
||||||
|
icon: TrendingUp,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const recentActivities = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
type: "attack",
|
||||||
|
message: "Обнаружена brute-force атака с IP 192.168.1.45",
|
||||||
|
time: "2 минуты назад",
|
||||||
|
severity: "high",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
type: "rule",
|
||||||
|
message: "Новое правило фильтрации добавлено администратором",
|
||||||
|
time: "15 минут назад",
|
||||||
|
severity: "info",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
type: "agent",
|
||||||
|
message: "Агент на сервере web-01 успешно обновлен",
|
||||||
|
time: "1 час назад",
|
||||||
|
severity: "success",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
type: "ai",
|
||||||
|
message: "AI предложил новые правила для обнаружения ботов",
|
||||||
|
time: "3 часа назад",
|
||||||
|
severity: "info",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
title: "Централизованное управление",
|
||||||
|
description: "Управляйте всеми IPS агентами из единого интерфейса",
|
||||||
|
icon: Server,
|
||||||
|
color: "#6366f1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "AI Аналитика",
|
||||||
|
description: "Искусственный интеллект помогает находить сложные атаки",
|
||||||
|
icon: Bot,
|
||||||
|
color: "#8b5cf6",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Мгновенная блокировка",
|
||||||
|
description: "Автоматическая блокировка IP при обнаружении угроз",
|
||||||
|
icon: Zap,
|
||||||
|
color: "#f59e0b",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Безопасность данных",
|
||||||
|
description: "LLM не получает доступ к чувствительным логам",
|
||||||
|
icon: Lock,
|
||||||
|
color: "#22c55e",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const quickActions = isAuthenticated
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
name: "IPS Агенты",
|
||||||
|
icon: Server,
|
||||||
|
path: "/agents",
|
||||||
|
description: "Управление агентами",
|
||||||
|
color: "#6366f1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Правила",
|
||||||
|
icon: Shield,
|
||||||
|
path: "/rules",
|
||||||
|
description: "Правила фильтрации",
|
||||||
|
color: "#22c55e",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "AI Аналитика",
|
||||||
|
icon: Bot,
|
||||||
|
path: "/ai-analytics",
|
||||||
|
description: "Анализ логов",
|
||||||
|
color: "#8b5cf6",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Команда",
|
||||||
|
icon: Users,
|
||||||
|
path: "/organization",
|
||||||
|
description: "Управление доступом",
|
||||||
|
color: "#f59e0b",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const getSeverityStyles = (severity: string) => {
|
||||||
|
switch (severity) {
|
||||||
|
case "high":
|
||||||
|
return {
|
||||||
|
bg: "#ef444410",
|
||||||
|
border: "#ef4444",
|
||||||
|
icon: AlertCircle,
|
||||||
|
text: "#ef4444",
|
||||||
|
};
|
||||||
|
case "success":
|
||||||
|
return {
|
||||||
|
bg: "#22c55e10",
|
||||||
|
border: "#22c55e",
|
||||||
|
icon: CheckCircle,
|
||||||
|
text: "#22c55e",
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
bg: "#6366f110",
|
||||||
|
border: "#6366f1",
|
||||||
|
icon: Sparkles,
|
||||||
|
text: "#6366f1",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{ backgroundColor: "var(--bg-primary)" }}
|
||||||
|
className="min-h-screen transition-theme"
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<header
|
||||||
|
className="sticky top-0 z-50 border-b transition-theme backdrop-blur-sm"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-primary)",
|
||||||
|
borderColor: "var(--border)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-6 py-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||||
|
style={{ backgroundColor: "var(--accent)" }}
|
||||||
|
>
|
||||||
|
<Shield className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
className="text-xl font-bold"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
IPS Manager
|
||||||
|
</h1>
|
||||||
|
{organization && (
|
||||||
|
<p className="text-xs" style={{ color: "var(--text-muted)" }}>
|
||||||
|
{organization.name}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right section */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{isAuthenticated ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
className="relative p-2 rounded-lg transition-all hover:scale-105"
|
||||||
|
style={{ backgroundColor: "var(--bg-secondary)" }}
|
||||||
|
>
|
||||||
|
<Bell
|
||||||
|
className="w-5 h-5"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className="absolute top-1 right-1 w-2 h-2 rounded-full"
|
||||||
|
style={{ backgroundColor: "#ef4444" }}
|
||||||
|
></span>
|
||||||
|
</button>
|
||||||
|
<ThemeToggle />
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-full flex items-center justify-center font-semibold text-white"
|
||||||
|
style={{ backgroundColor: "var(--accent)" }}
|
||||||
|
>
|
||||||
|
{user?.first_name?.[0]}
|
||||||
|
{user?.last_name?.[0]}
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<p
|
||||||
|
className="text-sm font-medium"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{user?.first_name} {user?.last_name}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
>
|
||||||
|
Администратор
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={logout}
|
||||||
|
className="p-2 rounded-lg transition-all hover:scale-105"
|
||||||
|
style={{ backgroundColor: "#ef4444" }}
|
||||||
|
>
|
||||||
|
<LogOut className="w-5 h-5 text-white" />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<ThemeToggle />
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/auth")}
|
||||||
|
className="px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 hover:scale-105"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
border: `1px solid var(--border)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<LogIn className="w-4 h-4" />
|
||||||
|
Войти
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/auth")}
|
||||||
|
className="px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 hover:scale-105"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--accent)",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<UserPlus className="w-4 h-4" />
|
||||||
|
Регистрация
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="container mx-auto px-6 py-8">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div
|
||||||
|
className="rounded-2xl p-8 mb-8 text-white relative overflow-hidden"
|
||||||
|
style={{
|
||||||
|
background: "linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold mb-2">
|
||||||
|
{isAuthenticated
|
||||||
|
? `Добро пожаловать, ${user?.first_name || "Администратор"}!`
|
||||||
|
: "Добро пожаловать в IPS Manager"}
|
||||||
|
</h2>
|
||||||
|
<p className="text-white/80 text-lg">
|
||||||
|
{isAuthenticated
|
||||||
|
? "Система IPS мониторинга и защиты"
|
||||||
|
: "Современная платформа для централизованного управления IPS агентами"}
|
||||||
|
</p>
|
||||||
|
{!isAuthenticated && (
|
||||||
|
<div className="flex gap-4 mt-6">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/auth")}
|
||||||
|
className="px-6 py-2 rounded-lg font-medium bg-white text-indigo-600 transition-all hover:scale-105 hover:shadow-lg"
|
||||||
|
>
|
||||||
|
Начать работу
|
||||||
|
</button>
|
||||||
|
<button className="px-6 py-2 rounded-lg font-medium border border-white/30 transition-all hover:bg-white/10">
|
||||||
|
Узнать больше
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isAuthenticated && (
|
||||||
|
<div className="flex items-center gap-2 mt-4">
|
||||||
|
<Zap className="w-5 h-5" />
|
||||||
|
<span className="text-white/90">
|
||||||
|
Все системы работают стабильно
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="hidden lg:block opacity-20">
|
||||||
|
<Cloud className="w-32 h-32" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Grid - только для авторизованных */}
|
||||||
|
{isAuthenticated && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="rounded-2xl p-6 transition-all hover:scale-105 hover:shadow-xl"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-start mb-4">
|
||||||
|
<div
|
||||||
|
className="w-12 h-12 rounded-xl flex items-center justify-center bg-opacity-20"
|
||||||
|
style={{
|
||||||
|
backgroundColor: `${index === 0 ? "#6366f1" : index === 1 ? "#ef4444" : index === 2 ? "#22c55e" : "#f59e0b"}20`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
className="w-6 h-6"
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
index === 0
|
||||||
|
? "#6366f1"
|
||||||
|
: index === 1
|
||||||
|
? "#ef4444"
|
||||||
|
: index === 2
|
||||||
|
? "#22c55e"
|
||||||
|
: "#f59e0b",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="text-sm font-medium"
|
||||||
|
style={{ color: "#22c55e" }}
|
||||||
|
>
|
||||||
|
{stat.change}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
className="text-2xl font-bold mb-1"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{stat.value}
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className="text-sm"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
{stat.label}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Features Section - для всех */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2
|
||||||
|
className="text-2xl font-bold mb-2"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
Ключевые возможности
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||||
|
Всё необходимое для защиты вашей инфраструктуры
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{features.map((feature, index) => {
|
||||||
|
const Icon = feature.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="rounded-2xl p-6 transition-all hover:scale-105 hover:shadow-xl text-center"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-14 h-14 rounded-xl flex items-center justify-center mx-auto mb-4"
|
||||||
|
style={{ backgroundColor: `${feature.color}20` }}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
className="w-7 h-7"
|
||||||
|
style={{ color: feature.color }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
className="font-bold mb-2"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className="text-sm"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isAuthenticated ? (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div
|
||||||
|
className="rounded-2xl p-6"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className="text-xl font-bold mb-6"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
Быстрый доступ
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
{quickActions.map((action, index) => {
|
||||||
|
const Icon = action.icon;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => navigate(action.path)}
|
||||||
|
className="group p-4 rounded-xl text-left transition-all hover:scale-[1.02]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
border: `1px solid var(--border)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-lg flex items-center justify-center mb-3 transition-all group-hover:scale-110"
|
||||||
|
style={{ backgroundColor: `${action.color}20` }}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
className="w-5 h-5"
|
||||||
|
style={{ color: action.color }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ChevronRight
|
||||||
|
className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-all"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h4
|
||||||
|
className="font-semibold mb-1"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{action.name}
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
className="text-sm"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
{action.description}
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Activity */}
|
||||||
|
<div
|
||||||
|
className="rounded-2xl p-6"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h3
|
||||||
|
className="text-xl font-bold"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
Последние события
|
||||||
|
</h3>
|
||||||
|
<Activity
|
||||||
|
className="w-5 h-5"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{recentActivities.map((activity) => {
|
||||||
|
const severityStyles = getSeverityStyles(activity.severity);
|
||||||
|
const Icon = severityStyles.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={activity.id}
|
||||||
|
className="p-3 rounded-lg transition-all hover:scale-[1.01]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<Icon
|
||||||
|
className="w-4 h-4 mt-0.5"
|
||||||
|
style={{ color: severityStyles.text }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p
|
||||||
|
className="text-sm mb-1"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
{activity.message}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock
|
||||||
|
className="w-3 h-3"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-muted)" }}
|
||||||
|
>
|
||||||
|
{activity.time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="w-full mt-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-[1.02]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--bg-secondary)",
|
||||||
|
color: "var(--text-secondary)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Показать всю историю
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* AI Insights */}
|
||||||
|
<div
|
||||||
|
className="rounded-2xl p-6 mt-8 transition-all hover:shadow-xl"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
border: `1px solid var(--border)`,
|
||||||
|
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||||
|
style={{ backgroundColor: "#8b5cf620" }}
|
||||||
|
>
|
||||||
|
<Bot className="w-5 h-5" style={{ color: "#8b5cf6" }} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3
|
||||||
|
className="text-xl font-bold"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
AI Аналитика
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className="text-sm"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Новые предложения на основе анализа логов
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 hover:scale-[1.02] self-start"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "#8b5cf6",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Подробнее
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div
|
||||||
|
className="p-4 rounded-xl transition-all hover:scale-[1.02]"
|
||||||
|
style={{ backgroundColor: "var(--bg-secondary)" }}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
🔍 Обнаружена аномалия
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Повышенная активность с IP-адресов из диапазона
|
||||||
|
185.xxx.xx.xx
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="p-4 rounded-xl transition-all hover:scale-[1.02]"
|
||||||
|
style={{ backgroundColor: "var(--bg-secondary)" }}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
💡 Предложено правил
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
AI предлагает 3 новых правила для блокировки бот-сканеров
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="p-4 rounded-xl transition-all hover:scale-[1.02]"
|
||||||
|
style={{ backgroundColor: "var(--bg-secondary)" }}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="text-sm font-medium mb-2"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
⚡ Оптимизация
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-xs"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Рекомендуется обновить 5 существующих правил для повышения
|
||||||
|
эффективности
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
/* CTA Section для неавторизованных */
|
||||||
|
<div
|
||||||
|
className="rounded-2xl p-8 text-center"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
boxShadow: `0 4px 6px -1px var(--shadow-color)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className="text-2xl font-bold mb-2"
|
||||||
|
style={{ color: "var(--text-primary)" }}
|
||||||
|
>
|
||||||
|
Готовы начать?
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className="text-sm mb-6"
|
||||||
|
style={{ color: "var(--text-secondary)" }}
|
||||||
|
>
|
||||||
|
Присоединяйтесь к IPS Manager и получите полный контроль над
|
||||||
|
безопасностью
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/auth")}
|
||||||
|
className="px-6 py-2 rounded-lg font-medium transition-all hover:scale-105"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--accent)",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Начать работу
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export const SecondaryPage = () => {
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
Вторичная
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { apiClient } from "./axios.instance";
|
||||||
|
import type { AxiosResponse } from "axios";
|
||||||
|
|
||||||
|
export interface ApiResponse<T = any> {
|
||||||
|
data: T;
|
||||||
|
message: string;
|
||||||
|
success: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
class ApiService {
|
||||||
|
async get<T>(url: string, config?: any): Promise<T> {
|
||||||
|
const response: AxiosResponse<T> = await apiClient.get(url, config);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async post<T, D = any>(url: string, data?: D, config?: any): Promise<T> {
|
||||||
|
const response: AxiosResponse<T> = await apiClient.post(url, data, config);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async put<T, D = any>(url: string, data?: D, config?: any): Promise<T> {
|
||||||
|
const response: AxiosResponse<T> = await apiClient.put(url, data, config);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async patch<T, D = any>(url: string, data?: D, config?: any): Promise<T> {
|
||||||
|
const response: AxiosResponse<T> = await apiClient.patch(url, data, config);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async delete<T>(url: string, config?: any): Promise<T> {
|
||||||
|
const response: AxiosResponse<T> = await apiClient.delete(url, config);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const apiService = new ApiService();
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
import axios, {
|
||||||
|
type AxiosInstance,
|
||||||
|
type AxiosResponse,
|
||||||
|
type AxiosError,
|
||||||
|
type InternalAxiosRequestConfig,
|
||||||
|
} from "axios";
|
||||||
|
|
||||||
|
export interface ApiResponse<T = any> {
|
||||||
|
data: T;
|
||||||
|
message?: string;
|
||||||
|
status: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
class ApiClient {
|
||||||
|
private axiosInstance: AxiosInstance;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.axiosInstance = axios.create({
|
||||||
|
baseURL: "http://213.165.213.170:8080/api/v1",
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
validateStatus: (status) => {
|
||||||
|
return status >= 200 && status < 400;
|
||||||
|
},
|
||||||
|
// Добавляем кастомный сериализатор параметров
|
||||||
|
paramsSerializer: {
|
||||||
|
serialize: (params) => {
|
||||||
|
const parts: string[] = [];
|
||||||
|
|
||||||
|
Object.entries(params).forEach(([key, value]) => {
|
||||||
|
if (value === undefined || value === null) return;
|
||||||
|
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
// Преобразуем массив в множественные параметры: level=info&level=warning
|
||||||
|
value.forEach((item) => {
|
||||||
|
if (item !== undefined && item !== null) {
|
||||||
|
parts.push(
|
||||||
|
`${encodeURIComponent(key)}=${encodeURIComponent(item)}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
parts.push(
|
||||||
|
`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return parts.join("&");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setupInterceptors();
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupInterceptors(): void {
|
||||||
|
this.axiosInstance.interceptors.request.use(
|
||||||
|
(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
|
||||||
|
// Получаем токен из localStorage
|
||||||
|
const authStorage = localStorage.getItem("auth-storage");
|
||||||
|
if (authStorage) {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(authStorage);
|
||||||
|
const token = parsed.state?.token;
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("[Auth] Failed to parse auth storage:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error: AxiosError): Promise<AxiosError> => {
|
||||||
|
console.error("[Request Error]", error);
|
||||||
|
return Promise.reject(error);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
this.axiosInstance.interceptors.response.use(
|
||||||
|
(response: AxiosResponse): AxiosResponse => {
|
||||||
|
console.log(`[Response] ${response.status} ${response.config.url}`);
|
||||||
|
return response;
|
||||||
|
},
|
||||||
|
async (error: AxiosError): Promise<any> => {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
window.location.href = "/auth";
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject(error);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public getInstance(): AxiosInstance {
|
||||||
|
return this.axiosInstance;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const apiClient = new ApiClient().getInstance();
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { useState, useCallback } from "react";
|
||||||
|
|
||||||
|
export function useApi() {
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const request = useCallback(
|
||||||
|
async <T>(apiCall: () => Promise<T>): Promise<T | undefined> => {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await apiCall();
|
||||||
|
return result;
|
||||||
|
} catch (err: any) {
|
||||||
|
const errorMessage =
|
||||||
|
err.response?.data?.message || err.message || "Произошла ошибка";
|
||||||
|
setError(errorMessage);
|
||||||
|
return undefined;
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
request,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export { apiClient } from "./axios.instance";
|
||||||
|
export { useApi } from "./hooks/use.api";
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@import "./normalize.css";
|
||||||
|
@import "./root.css";
|
||||||
|
@import "./themes.css";
|
||||||
|
|
||||||
|
/* Hide scrollbar but keep functionality */
|
||||||
|
.scrollbar-hide {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-hide::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome, Safari and Opera */
|
||||||
|
}
|
||||||
Vendored
+365
@@ -0,0 +1,365 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15;
|
||||||
|
/* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box;
|
||||||
|
/* 1 */
|
||||||
|
height: 0;
|
||||||
|
/* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
/* 1 */
|
||||||
|
font-size: 1em;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* a {
|
||||||
|
background-color: transparent;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none;
|
||||||
|
/* 1 */
|
||||||
|
text-decoration: underline;
|
||||||
|
/* 2 */
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
/* 1 */
|
||||||
|
font-size: 1em;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
/* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
/* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* 1 */
|
||||||
|
color: inherit;
|
||||||
|
/* 2 */
|
||||||
|
display: table;
|
||||||
|
/* 1 */
|
||||||
|
max-width: 100%;
|
||||||
|
/* 1 */
|
||||||
|
padding: 0;
|
||||||
|
/* 3 */
|
||||||
|
white-space: normal;
|
||||||
|
/* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* 1 */
|
||||||
|
padding: 0;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
/* 1 */
|
||||||
|
outline-offset: -2px;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
/* 1 */
|
||||||
|
font: inherit;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@@ -0,0 +1,307 @@
|
|||||||
|
/* Дополнительные стили для PrimeReact с вашей темой */
|
||||||
|
.p-tabmenu .p-tabmenuitem .p-menuitem-link {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tabmenu .p-tabmenuitem .p-menuitem-link:not(.p-disabled):hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tabmenu .p-tabmenuitem.p-highlight .p-menuitem-link {
|
||||||
|
color: var(--accent-primary);
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menubar {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menubar .p-menuitem-link {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menubar .p-menuitem-link:hover {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button.p-button-text {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button.p-button-text:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== Стили для скроллов ==================== */
|
||||||
|
|
||||||
|
/* WebKit браузеры (Chrome, Safari, Edge, Opera) */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-secondary);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox */
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--border-secondary) var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Для элементов с прокруткой (кастомные классы) */
|
||||||
|
.custom-scrollbar {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--border-secondary) var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-secondary);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Для горизонтальных скроллов */
|
||||||
|
.horizontal-scrollbar {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-scrollbar::-webkit-scrollbar {
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Для очень тонких скроллов (например, в таблицах) */
|
||||||
|
.thin-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-secondary);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Для темных тем - дополнительная стилизация */
|
||||||
|
[data-theme="dark"] ::-webkit-scrollbar-track,
|
||||||
|
[data-theme="nightowl"] ::-webkit-scrollbar-track,
|
||||||
|
[data-theme="sunset"] ::-webkit-scrollbar-track,
|
||||||
|
[data-theme="forest"] ::-webkit-scrollbar-track,
|
||||||
|
[data-theme="ocean"] ::-webkit-scrollbar-track,
|
||||||
|
[data-theme="coffee"] ::-webkit-scrollbar-track,
|
||||||
|
[data-theme="midnight"] ::-webkit-scrollbar-track {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] ::-webkit-scrollbar-thumb,
|
||||||
|
[data-theme="nightowl"] ::-webkit-scrollbar-thumb,
|
||||||
|
[data-theme="sunset"] ::-webkit-scrollbar-thumb,
|
||||||
|
[data-theme="forest"] ::-webkit-scrollbar-thumb,
|
||||||
|
[data-theme="ocean"] ::-webkit-scrollbar-thumb,
|
||||||
|
[data-theme="coffee"] ::-webkit-scrollbar-thumb,
|
||||||
|
[data-theme="midnight"] ::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
|
||||||
|
[data-theme="nightowl"] ::-webkit-scrollbar-thumb:hover,
|
||||||
|
[data-theme="sunset"] ::-webkit-scrollbar-thumb:hover,
|
||||||
|
[data-theme="forest"] ::-webkit-scrollbar-thumb:hover,
|
||||||
|
[data-theme="ocean"] ::-webkit-scrollbar-thumb:hover,
|
||||||
|
[data-theme="coffee"] ::-webkit-scrollbar-thumb:hover,
|
||||||
|
[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Для светлых тем - более контрастные скроллы */
|
||||||
|
[data-theme="light"] ::-webkit-scrollbar-track {
|
||||||
|
background: #f1f5f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] ::-webkit-scrollbar-thumb {
|
||||||
|
background: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Для лавандовой темы */
|
||||||
|
[data-theme="lavender"] ::-webkit-scrollbar-track {
|
||||||
|
background: #e9d5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="lavender"] ::-webkit-scrollbar-thumb {
|
||||||
|
background: #c084fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="lavender"] ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Для розовой темы */
|
||||||
|
[data-theme="rose"] ::-webkit-scrollbar-track {
|
||||||
|
background: #fecdd3;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="rose"] ::-webkit-scrollbar-thumb {
|
||||||
|
background: #fb7185;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="rose"] ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Стили для скролла в текстовых полях и textarea */
|
||||||
|
textarea::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-secondary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Стили для скролла в выпадающих списках PrimeReact */
|
||||||
|
.p-dropdown-panel .p-dropdown-items-wrapper::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-panel .p-dropdown-items-wrapper::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-panel .p-dropdown-items-wrapper::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-secondary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-panel .p-dropdown-items-wrapper::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Стили для скролла в таблицах */
|
||||||
|
.p-datatable-wrapper::-webkit-scrollbar {
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-wrapper::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-wrapper::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-secondary);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-wrapper::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Стили для скролла в модальных окнах */
|
||||||
|
.p-dialog .p-dialog-content::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dialog .p-dialog-content::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dialog .p-dialog-content::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-secondary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dialog .p-dialog-content::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Стили для скролла в меню */
|
||||||
|
.p-menu .p-menu-list::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menu .p-menu-list::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menu .p-menu-list::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-secondary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menu .p-menu-list::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-pulse {
|
||||||
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
}
|
||||||
@@ -0,0 +1,267 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
/* Tailwind dark mode через data-theme атрибут */
|
||||||
|
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
||||||
|
|
||||||
|
/* Кастомные утилиты */
|
||||||
|
@layer utilities {
|
||||||
|
.transition-theme {
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 200ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
БАЗОВЫЕ ТЕМЫ (Light/Dark)
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
/* Светлая тема (по умолчанию) */
|
||||||
|
:root,
|
||||||
|
[data-theme="light"] {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f8fafc;
|
||||||
|
--bg-tertiary: #f1f5f9;
|
||||||
|
--text-primary: #0f172a;
|
||||||
|
--text-secondary: #475569;
|
||||||
|
--text-muted: #94a3b8;
|
||||||
|
--border: #e2e8f0;
|
||||||
|
--border-focus: #94a3b8;
|
||||||
|
--card-bg: #ffffff;
|
||||||
|
--input-bg: #ffffff;
|
||||||
|
--header-bg: #ffffff;
|
||||||
|
--button-primary: #0f172a;
|
||||||
|
--button-primary-text: #ffffff;
|
||||||
|
--button-primary-hover: #1e293b;
|
||||||
|
--button-danger: #ef4444;
|
||||||
|
--button-danger-text: #ffffff;
|
||||||
|
--button-danger-hover: #dc2626;
|
||||||
|
--error-bg: #fef2f2;
|
||||||
|
--error-border: #fecaca;
|
||||||
|
--error-text: #dc2626;
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.1);
|
||||||
|
--accent: #6366f1;
|
||||||
|
--accent-hover: #4f46e5;
|
||||||
|
--link: #0f172a;
|
||||||
|
--link-hover: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Темная тема */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-primary: #0f172a;
|
||||||
|
--bg-secondary: #1e293b;
|
||||||
|
--bg-tertiary: #334155;
|
||||||
|
--text-primary: #f8fafc;
|
||||||
|
--text-secondary: #cbd5e1;
|
||||||
|
--text-muted: #64748b;
|
||||||
|
--border: #334155;
|
||||||
|
--border-focus: #64748b;
|
||||||
|
--card-bg: #1e293b;
|
||||||
|
--input-bg: #1e293b;
|
||||||
|
--header-bg: #0f172a;
|
||||||
|
--button-primary: #f8fafc;
|
||||||
|
--button-primary-text: #0f172a;
|
||||||
|
--button-primary-hover: #e2e8f0;
|
||||||
|
--button-danger: #ef4444;
|
||||||
|
--button-danger-text: #ffffff;
|
||||||
|
--button-danger-hover: #f87171;
|
||||||
|
--error-bg: rgba(239, 68, 68, 0.1);
|
||||||
|
--error-border: rgba(239, 68, 68, 0.3);
|
||||||
|
--error-text: #fca5a5;
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||||
|
--accent: #818cf8;
|
||||||
|
--accent-hover: #a5b4fc;
|
||||||
|
--link: #f8fafc;
|
||||||
|
--link-hover: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
ЦВЕТНЫЕ ТЕМЫ
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
/* Night Owl */
|
||||||
|
[data-theme="nightowl"] {
|
||||||
|
--bg-primary: #011627;
|
||||||
|
--bg-secondary: #011e3c;
|
||||||
|
--bg-tertiary: #0d2f4f;
|
||||||
|
--text-primary: #d6deeb;
|
||||||
|
--text-secondary: #8892b0;
|
||||||
|
--text-muted: #4a5568;
|
||||||
|
--border: #1d3b53;
|
||||||
|
--border-focus: #7dd3fc;
|
||||||
|
--card-bg: #011e3c;
|
||||||
|
--input-bg: #011e3c;
|
||||||
|
--header-bg: #011627;
|
||||||
|
--button-primary: #7dd3fc;
|
||||||
|
--button-primary-text: #011627;
|
||||||
|
--button-primary-hover: #bae6fd;
|
||||||
|
--button-danger: #f87171;
|
||||||
|
--button-danger-text: #ffffff;
|
||||||
|
--button-danger-hover: #fca5a5;
|
||||||
|
--error-bg: rgba(248, 113, 113, 0.1);
|
||||||
|
--error-border: rgba(248, 113, 113, 0.3);
|
||||||
|
--error-text: #fca5a5;
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||||
|
--accent: #7dd3fc;
|
||||||
|
--accent-hover: #bae6fd;
|
||||||
|
--link: #7dd3fc;
|
||||||
|
--link-hover: #bae6fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sunset */
|
||||||
|
[data-theme="sunset"] {
|
||||||
|
--bg-primary: #1c1917;
|
||||||
|
--bg-secondary: #292524;
|
||||||
|
--bg-tertiary: #44403c;
|
||||||
|
--text-primary: #fafaf9;
|
||||||
|
--text-secondary: #d6d3d1;
|
||||||
|
--text-muted: #78716c;
|
||||||
|
--border: #57534e;
|
||||||
|
--border-focus: #f97316;
|
||||||
|
--card-bg: #292524;
|
||||||
|
--input-bg: #292524;
|
||||||
|
--header-bg: #1c1917;
|
||||||
|
--button-primary: #f97316;
|
||||||
|
--button-primary-text: #1c1917;
|
||||||
|
--button-primary-hover: #fb923c;
|
||||||
|
--button-danger: #ef4444;
|
||||||
|
--button-danger-text: #ffffff;
|
||||||
|
--button-danger-hover: #f87171;
|
||||||
|
--error-bg: rgba(239, 68, 68, 0.1);
|
||||||
|
--error-border: rgba(239, 68, 68, 0.3);
|
||||||
|
--error-text: #fca5a5;
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||||
|
--accent: #f97316;
|
||||||
|
--accent-hover: #fb923c;
|
||||||
|
--link: #f97316;
|
||||||
|
--link-hover: #fb923c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forest */
|
||||||
|
[data-theme="forest"] {
|
||||||
|
--bg-primary: #052e16;
|
||||||
|
--bg-secondary: #14532d;
|
||||||
|
--bg-tertiary: #166534;
|
||||||
|
--text-primary: #f0fdf4;
|
||||||
|
--text-secondary: #bbf7d0;
|
||||||
|
--text-muted: #4ade80;
|
||||||
|
--border: #166534;
|
||||||
|
--border-focus: #22c55e;
|
||||||
|
--card-bg: #14532d;
|
||||||
|
--input-bg: #14532d;
|
||||||
|
--header-bg: #052e16;
|
||||||
|
--button-primary: #22c55e;
|
||||||
|
--button-primary-text: #052e16;
|
||||||
|
--button-primary-hover: #4ade80;
|
||||||
|
--button-danger: #ef4444;
|
||||||
|
--button-danger-text: #ffffff;
|
||||||
|
--button-danger-hover: #f87171;
|
||||||
|
--error-bg: rgba(239, 68, 68, 0.1);
|
||||||
|
--error-border: rgba(239, 68, 68, 0.3);
|
||||||
|
--error-text: #fca5a5;
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||||
|
--accent: #22c55e;
|
||||||
|
--accent-hover: #4ade80;
|
||||||
|
--link: #22c55e;
|
||||||
|
--link-hover: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ocean */
|
||||||
|
[data-theme="ocean"] {
|
||||||
|
--bg-primary: #164e63;
|
||||||
|
--bg-secondary: #0e7490;
|
||||||
|
--bg-tertiary: #0891b2;
|
||||||
|
--text-primary: #f0fdfd;
|
||||||
|
--text-secondary: #a5f3fc;
|
||||||
|
--text-muted: #22d3ee;
|
||||||
|
--border: #0891b2;
|
||||||
|
--border-focus: #06b6d4;
|
||||||
|
--card-bg: #0e7490;
|
||||||
|
--input-bg: #0e7490;
|
||||||
|
--header-bg: #164e63;
|
||||||
|
--button-primary: #06b6d4;
|
||||||
|
--button-primary-text: #164e63;
|
||||||
|
--button-primary-hover: #22d3ee;
|
||||||
|
--button-danger: #ef4444;
|
||||||
|
--button-danger-text: #ffffff;
|
||||||
|
--button-danger-hover: #f87171;
|
||||||
|
--error-bg: rgba(239, 68, 68, 0.1);
|
||||||
|
--error-border: rgba(239, 68, 68, 0.3);
|
||||||
|
--error-text: #fca5a5;
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||||
|
--accent: #06b6d4;
|
||||||
|
--accent-hover: #22d3ee;
|
||||||
|
--link: #06b6d4;
|
||||||
|
--link-hover: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lavender */
|
||||||
|
[data-theme="lavender"] {
|
||||||
|
--bg-primary: #faf5ff;
|
||||||
|
--bg-secondary: #f3e8ff;
|
||||||
|
--bg-tertiary: #e9d5ff;
|
||||||
|
--text-primary: #581c87;
|
||||||
|
--text-secondary: #7e22ce;
|
||||||
|
--text-muted: #a855f7;
|
||||||
|
--border: #e9d5ff;
|
||||||
|
--border-focus: #a855f7;
|
||||||
|
--card-bg: #f3e8ff;
|
||||||
|
--input-bg: #f3e8ff;
|
||||||
|
--header-bg: #faf5ff;
|
||||||
|
--button-primary: #a855f7;
|
||||||
|
--button-primary-text: #faf5ff;
|
||||||
|
--button-primary-hover: #c084fc;
|
||||||
|
--button-danger: #ef4444;
|
||||||
|
--button-danger-text: #ffffff;
|
||||||
|
--button-danger-hover: #f87171;
|
||||||
|
--error-bg: rgba(239, 68, 68, 0.1);
|
||||||
|
--error-border: rgba(239, 68, 68, 0.3);
|
||||||
|
--error-text: #dc2626;
|
||||||
|
--shadow-color: rgba(88, 28, 135, 0.1);
|
||||||
|
--accent: #a855f7;
|
||||||
|
--accent-hover: #c084fc;
|
||||||
|
--link: #7e22ce;
|
||||||
|
--link-hover: #a855f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Coffee */
|
||||||
|
[data-theme="coffee"] {
|
||||||
|
--bg-primary: #292524;
|
||||||
|
--bg-secondary: #44403c;
|
||||||
|
--bg-tertiary: #57534e;
|
||||||
|
--text-primary: #f5f5f4;
|
||||||
|
--text-secondary: #d6d3d1;
|
||||||
|
--text-muted: #a8a29e;
|
||||||
|
--border: #57534e;
|
||||||
|
--border-focus: #d97706;
|
||||||
|
--card-bg: #44403c;
|
||||||
|
--input-bg: #44403c;
|
||||||
|
--header-bg: #292524;
|
||||||
|
--button-primary: #d97706;
|
||||||
|
--button-primary-text: #292524;
|
||||||
|
--button-primary-hover: #fbbf24;
|
||||||
|
--button-danger: #ef4444;
|
||||||
|
--button-danger-text: #ffffff;
|
||||||
|
--button-danger-hover: #f87171;
|
||||||
|
--error-bg: rgba(239, 68, 68, 0.1);
|
||||||
|
--error-border: rgba(239, 68, 68, 0.3);
|
||||||
|
--error-text: #fca5a5;
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||||
|
--accent: #d97706;
|
||||||
|
--accent-hover: #fbbf24;
|
||||||
|
--link: #d97706;
|
||||||
|
--link-hover: #fbbf24;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===========================
|
||||||
|
БАЗОВЫЕ СТИЛИ
|
||||||
|
=========================== */
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition:
|
||||||
|
background-color 0.3s ease,
|
||||||
|
color 0.3s ease,
|
||||||
|
border-color 0.3s ease;
|
||||||
|
}
|
||||||
@@ -7,6 +7,11 @@
|
|||||||
"types": ["vite/client"],
|
"types": ["vite/client"],
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
},
|
||||||
|
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
|
|||||||
+11
-4
@@ -1,7 +1,14 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from "vite";
|
||||||
import react from '@vitejs/plugin-react'
|
import path from "path";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react(), tailwindcss()],
|
||||||
})
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user