Merge pull request 'логин ебучий доделан глист вырос теперь он большой' (#4) from big_glist into main

Reviewed-on: https://maktraher.ru/enemy01/jopa/pulls/4
This commit is contained in:
enemy01 2024-09-27 21:48:56 +07:00
commit 8a87c45fc3
3 changed files with 75 additions and 45 deletions

View File

@ -6,36 +6,55 @@ import Dashboard from './pages/Dashboard';
import UserAccount from './pages/UserAccount'; // Импортируем компонент UserAccount import UserAccount from './pages/UserAccount'; // Импортируем компонент UserAccount
import Login from './pages/Login'; // Импортируем страницу логина import Login from './pages/Login'; // Импортируем страницу логина
import Connections from './pages/Connections'; // Импортируем страницу подключений import Connections from './pages/Connections'; // Импортируем страницу подключений
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
const App = () => { const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false); // Статус авторизации
const [activeTab, setActiveTab] = useState('map'); // По умолчанию активная вкладка "Карта" const [activeTab, setActiveTab] = useState('map'); // По умолчанию активная вкладка "Карта"
const [isAuthenticated, setIsAuthenticated] = useState(false); // Статус авторизации
// Функция для выхода из системы
const handleLogout = () => {
setIsLoggedIn(false);
};
const handleLogin = () => { const handleLogin = () => {
setIsAuthenticated(true); // Устанавливаем авторизацию setIsLoggedIn(true); // Устанавливаем авторизацию
}; };
const handleLogout = () => {
setIsAuthenticated(false); // Сбрасываем авторизацию
};
if (!isAuthenticated) {
return <Login onLogin={handleLogin} />; // Показываем страницу логина
}
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}> <Router>
<div style={{ display: 'flex', flex: 1 }}> <Routes>
<Sidebar onSelectTab={setActiveTab} activeTab={activeTab} onLogout={handleLogout} /> {/* Передаем onLogout */} <Route
<div style={{ padding: '20px', flex: 1 }}> path="/login"
{activeTab === 'map' && <Dashboard />} {/* Подключаем компонент Dashboard */} element={isLoggedIn ? <Navigate to="/app" /> : <Login onLogin={handleLogin} />}
{activeTab === 'connection' && <Connections />} {/* Страница подключений */} />
{activeTab === 'account' && <UserAccount />} {/* Подключаем компонент UserAccount */} <Route
{activeTab === 'groups' && <DeviceGroups />} {/* Группы устройств */} path="/app"
{activeTab === 'devices' && <Devices />} {/* Устройства */} element={isLoggedIn ? (
</div> <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
</div> <div style={{ display: 'flex', flex: 1 }}>
</div> <Sidebar
onSelectTab={setActiveTab}
activeTab={activeTab}
onLogout={handleLogout} // Передаем функцию handleLogout через пропс onLogout
/>
<div style={{ padding: '20px', flex: 1 }}>
{activeTab === 'map' && <Dashboard />} {/* Подключаем компонент Dashboard */}
{activeTab === 'connection' && <Connections />} {/* Страница подключений */}
{activeTab === 'account' && <UserAccount />} {/* Подключаем компонент UserAccount */}
{activeTab === 'groups' && <DeviceGroups />} {/* Группы устройств */}
{activeTab === 'devices' && <Devices />} {/* Устройства */}
</div>
</div>
</div>
) : (
<Navigate to="/login" />
)}
/>
{/* Перенаправляем на /login по умолчанию */}
<Route path="*" element={<Navigate to="/login" />} />
</Routes>
</Router>
); );
}; };

View File

@ -17,21 +17,6 @@
padding: 0; padding: 0;
} }
.sidebar li {
margin: 15px 0;
cursor: pointer;
}
.sidebar li:hover {
background-color: #34495e;
padding: 10px;
border-radius: 5px;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li { .sidebar li {
margin: 15px 0; margin: 15px 0;
cursor: pointer; cursor: pointer;
@ -48,3 +33,26 @@
background-color: #2980b9; background-color: #2980b9;
color: white; color: white;
} }
/* Стили для кнопки "Выйти" */
.logout-button {
display: block;
margin-top: 20px;
padding: 10px;
width: 100%;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 5px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
}
.logout-button:hover {
background-color: #c0392b;
}
.logout-button:focus {
outline: none;
}

View File

@ -1,12 +1,15 @@
import React, { useState } from 'react'; // Ensure useState is imported import React, { useState } from 'react';
import './Sidebar.css'; // Change this to Sidebar.scss if using SCSS import './Sidebar.css';
const Sidebar = ({ onSelectTab, activeTab, onLogout }) => { const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
const [isSubMenuOpen, setIsSubMenuOpen] = useState(false); // For managing dropdown items const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
const toggleSubMenu = () => { const toggleSubMenu = () => {
setIsSubMenuOpen(!isSubMenuOpen); setIsSubMenuOpen(!isSubMenuOpen);
onSelectTab('account'); // Keep the logic to display the account when clicking on "Аккаунт пользователя" // Переключение на вкладку "Аккаунт пользователя"
if (!isSubMenuOpen) {
onSelectTab('account');
}
}; };
return ( return (
@ -22,7 +25,7 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
<li className={activeTab === 'account' ? 'active' : ''} onClick={toggleSubMenu}> <li className={activeTab === 'account' ? 'active' : ''} onClick={toggleSubMenu}>
Аккаунт пользователя Аккаунт пользователя
</li> </li>
{isSubMenuOpen && ( // Dropdown menu {isSubMenuOpen && (
<> <>
<li className={activeTab === 'groups' ? 'active' : ''} onClick={() => onSelectTab('groups')}> <li className={activeTab === 'groups' ? 'active' : ''} onClick={() => onSelectTab('groups')}>
Группы устройств Группы устройств
@ -32,10 +35,10 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
</li> </li>
</> </>
)} )}
<li className="logout" onClick={onLogout}>
Выйти
</li>
</ul> </ul>
<button className="logout-button" onClick={onLogout}>
Выйти
</button>
</div> </div>
); );
}; };