Fool-Stack/Kanban-Front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Форматировние кода и изменение структуры css файлов

Browse Source
This commit is contained in:
Vladiysss
2026-02-04 17:52:36 +03:00
parent 4f58b675fb
commit c07e560362
15 changed files with 765 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

539
src/App.css
View File

@@ -1,539 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
@font-face {
font-family: "Roboto Regular";
src: url("./fonts/roboto-regular/roboto-regular.svg") format("svg");
src: url("./fonts/roboto-regular/roboto-regular.ttf") format("truetype");
src: url("./fonts/roboto-regular/roboto-regular.woff") format("woff");
src: url("./fonts/roboto-regular/roboto-regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.switch-link {
margin-top: 15px;
text-align: center;
}
.switch-link button {
background: none;
border: none;
color: #007bff;
cursor: pointer;
font-size: 14px;
text-decoration: underline;
}
body {
font-family: 'Roboto Regular';
margin: 0;
padding: 0;
background-color: #33404d;
}
body * { transition: all .4s ease; }
ul{
list-style-type: none;
padding: 0px;
}
.app {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* Страница входа */
.login-page {
background-color: #1f2430;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 50px auto;
max-width: 400px;
}
.profile-page {
background-color: #1f2430;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px auto;
max-width: 1200px;
}
h2 {
text-align: center;
color: #CAD1D8;
margin-bottom: 20px;
}
p {
text-align: center;
color: #CAD1D8;
margin-bottom: 0px;
}
.modal-content p {
text-align: left
}
.modal-content div {
margin-bottom: 20px
}
.text-block {
text-align: left;
color: #999999;
margin-bottom: 2em;
}
.com {
color: #999999;
text-align: left;
margin: 10px 0px 10px 0px;
margin-bottom: auto;
}
.com modal-content {
text-align: left;
color: #999999;
margin: 10px 0px 10px 0px;
margin-bottom: auto;
}
.modal-content input{
margin: 10px 0px;
}
.modal-content div{
margin: 10px 0px;
}
.user-info p {
text-align: left;
color: #CAD1D8;
margin: 15px 0;
font-size: 20px;
}
form div {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #CAD1D8;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.Important-button:hover {
background-color: #cb0101;
}
.Important-button {
width: 100%;
padding: 12px;
margin: 8px;
background-color: #e30000;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button {
width: 100%;
padding: 12px;
margin: 10px auto;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.frame {
background-color: #33404d;
margin: 10px 0px;
width: 30%;
padding: 6px;
border-radius: 6px;
font-size: 16px;
border: 2px solid #999999
}
.frame p {
font-size: 16px;
}
.frame:hover {
border-color: #CAD1D8;
}
button:hover {
background-color: #0056b3;
}
button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
/* Сообщения об ошибках */
.error {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
border-radius: 4px;
margin-bottom: 15px;
text-align: center;
}
/* Страница профиля */
.form-group {
margin-bottom: 10px;
}
.form-group label {
text-align: left;
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.modal-buttons {
display: flex;
gap: 10px;
margin-top: 20px;
}
.button-small {
width: 30%;
min-width: auto;
height: auto;
}
.user-info p {
text-align: left;
margin: 5px 0px 5px 0px;
font-size: 20px;
}
.buttonName {
display: flex;
}
.buttonName button{
background-color: #007bff;
margin: 10px 5px;
width: 5%;
padding: 6px;
border-radius: 6px;
font-size: 20px;
}
.buttonName button:hover {
background-color: #0056b3;
}
.com p {
color: #CAD1D8;
font-size: 18px;
}
.kan-ban-list-sort{
background-color: #2b3245;
padding: 10px;
border-radius: 6px;
margin-bottom: 20px;
}
h3 {
text-align: left;
color: #CAD1D8;
margin: 0px;
}
.nav-sort{
display: flex;
}
.nav-sort button+button{
margin-left: 10px
}
.kan-ban-list {
background-color: #2b3245;
padding: 10px;
border-radius: 6px;
}
.kan-ban-list .inf {
padding: 0px 0px;
display: flex;
justify-content: space-between;
align-items: center;
}
.kan-ban-list .inf button{
width: 200px;
margin: 0px;
}
.kan-ban-list ul {
margin: 0px
}
.kan-ban-list ul button{
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #3d4763;;
}
.kan-ban-list ul button:hover{
box-shadow: 0 0 10px 2px #08e8de78;
}
.kan-ban-list .sort-row{
display: flex;
justify-content: space-between;
}
.sort-row p, .sort-row h3{
margin: 4px 0px;
}
.sort-row+.sort-row p {
margin: 16px 0px 0px 0px;
}
/*header*/
.nav-avatar {
height: 32px;
height: 32px;
margin-left: 8px;
border-radius: 1000px
}
.header {
background-color: #1f2430;
padding: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 56px;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
height: 56px;
}
.logo h1 {
font-family: 'Roboto Regular';
margin: 0;
font-size: 24px;
color: #CAD1D8;
text-decoration: none;
}
h1:hover {
color: white;
}
.logo a {
text-decoration: none;
}
.nav-list {
opacity: 0;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-list.visible {
opacity: 1;
}
.nav-list li {
padding: 0 1rem;
height: 56px;
display: flex;
align-items: center;
}
.nav-list li:hover {
box-shadow: #08e8de 0px -2px inset;
background-color: rgba(0, 0, 0, 0.25) ;
}
.nav-list a {
text-decoration: none;
color: #CAD1D8;
display: flex;
align-items: center;
font-size: 18px;
height: 56px;
}
.nav-list a:hover {
color: white;
}
/* Стили для модального окна */
.confirm-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: #1f2430;
padding: 20px;
border-radius: 8px;
text-align: center;
min-width: 300px;
}
.modal-buttons {
display: flex;
justify-content: space-between;
margin-top: 20px 15px;
}
.modal-buttons button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 8px;
}
.modal-buttons button:first-child {
background: #e30000;
color: white;
}
.modal-buttons button:last-child {
background: #007bff;
color: white;
}
.modal-buttons button:hover {
background-color: #cb0101
}
.modal-buttons button:last-child:hover {
background-color: #0056b3
}

26
src/App.js
View File

@@ -1,6 +1,6 @@
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './css/App.css';
import React from 'react'; import './css/Modal.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; // Исправленный импорт import { BrowserRouter, Routes, Route } from 'react-router-dom'; // Исправленный импорт
import Login from './Login'; import Login from './Login';
import Profile from './Profile'; import Profile from './Profile';
@@ -13,17 +13,17 @@ import OtherProfile from './OtherProfile';
function App() { function App() {
return ( return (
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
<Route path="/profile" element={<Profile />} /> <Route path="/profile" element={<Profile />} />
<Route path="/registration" element={<Registration />} /> <Route path="/registration" element={<Registration />} />
<Route path="/main" element={<Mainpage />} /> <Route path="/main" element={<Mainpage />} />
<Route path="/kanban-boards-list" element={<KBBoardsList />} /> <Route path="/kanban-boards-list" element={<KBBoardsList />} />
<Route path="/kanban-board/:id" element={<KBBoard />} /> <Route path="/kanban-board/:id" element={<KBBoard />} />
<Route path="/profile/:id" element={<OtherProfile />} /> <Route path="/profile/:id" element={<OtherProfile />} />
{/* Корректный редирект на страницу входа */} {/* Корректный редирект на страницу входа */}
<Route path="*" element={<Mainpage />} /> <Route path="*" element={<Mainpage />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
); );
} }

59
src/Header.js
View File

@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';
import './css/Header.css';
const Header = () => { const Header = () => {
const [display_name, setDisplay_name] = useState(''); const [display_name, setDisplay_name] = useState('');
@@ -22,32 +23,36 @@ const Header = () => {
}, []); }, []);
return ( return (
<header className="header"> <header className="header">
<div className="header-container"> <div className="header-container">
<div className="logo"> <div className="logo">
<Link to="/main"> <Link to="/main">
<h1>Fool-stack</h1> <h1>Fool-stack</h1>
</Link> </Link>
</div> </div>
<nav className="nav"> <nav className="nav">
{!isLoading && ( {!isLoading && (
<ul className={`nav-list ${isAnimated ? 'visible' : ''}`}> <ul className={`nav-list ${isAnimated ? 'visible' : ''}`}>
{display_name ? ( {display_name ? (
<> <>
<li><Link to="/Kanban-Boards-List">Канбан-доски</Link></li> <li><Link to="/Kanban-Boards-List">Канбан-доски</Link></li>
<li><Link to="/profile">{display_name}<img className="nav-avatar" src={avatar}></img></Link></li> <li>
</> <Link to="/profile">
) : ( {display_name}<img className="nav-avatar" src={avatar} alt=''></img>
<> </Link>
<li><Link to="/registration">Регистрация</Link></li> </li>
<li><Link to="/login">Вход</Link></li> </>
</> ) : (
)} <>
</ul> <li><Link to="/registration">Регистрация</Link></li>
)} <li><Link to="/login">Вход</Link></li>
</nav> </>
</div> )}
</header> </ul>
)}
</nav>
</div>
</header>
); );
}; };

2
src/KBBoard.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';
import Header from './Header'; import Header from './Header';

83
src/Login.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import { useState } from 'react';
import axios from 'axios'; import axios from 'axios';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import Header from './Header'; import Header from './Header';
@@ -20,14 +20,7 @@ const Login = () => {
setLoading(true); setLoading(true);
try { try {
const newUser = { username, password }; const newUser = { username, password };
await axios.post('/api/users/login', newUser, await axios.post('/api/users/login', newUser, { withCredentials: true });
{
withCredentials: true
/*headers: {
'Content-Type': 'application/json'
}*/
}
);
setTimeout(() => { setTimeout(() => {
navigate('/profile'); navigate('/profile');
}, 500); }, 500);
@@ -38,43 +31,43 @@ const Login = () => {
} }
}; };
return ( return (
<> <>
<Header /> <Header />
<div className="login-page"> <div className="login-page">
<h2>Вход в систему</h2> <h2>Вход в систему</h2>
{ {
error && <div className="error">{error}</div> error && <div className="error">{error}</div>
} }
<form onSubmit={handleLogin}> <form onSubmit={handleLogin}>
<div> <div>
<label>Логин:</label> <label>Логин:</label>
<input <input
type="text" type="text"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
required required
/> />
</div>
<div>
<label>Пароль:</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Вход...' : 'Войти'}
</button>
</form>
<button onClick={handleRegisterClick}>
Зарегистрироваться
</button>
</div> </div>
<div> </>
<label>Пароль:</label> );
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Вход...' : 'Войти'}
</button>
</form>
<button onClick={handleRegisterClick}>
Зарегистрироваться
</button>
</div>
</>
);
}; };
export default Login; export default Login;

12
src/Mainpage.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import Header from './Header'; import Header from './Header';
@@ -7,10 +7,12 @@ const Mainpage = () => {
const [error, setError] = useState(''); const [error, setError] = useState('');
return ( return (
<><Header /> <>
<div className=""> <Header />
<div className="">
</div></>
</div>
</>
); );
} }

2
src/OtherProfile.js
View File

@@ -1,4 +1,4 @@
import React, {useState, useEffect} from 'react'; import {useState, useEffect} from 'react';
import './css/OtherProfile.css'; import './css/OtherProfile.css';
import {useParams, useNavigate} from 'react-router-dom'; import {useParams, useNavigate} from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';

334
src/Profile.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import Header from './Header'; import Header from './Header';
@@ -29,18 +29,18 @@ const Profile = () => {
// Если нет сессии - редирект на логин // Если нет сессии - редирект на логин
setError('Вы не авторизованы'); setError('Вы не авторизованы');
setTimeout(() => { setTimeout(() => {
window.location.href = '/login'; navigate('/login');
}, 1500); }, 1500);
} }
}; };
checkSession(); checkSession();
}, []); }, [navigate]);
const handleLogout = async () => { const handleLogout = async () => {
try { try {
await axios.post('/api/users/logout'); await axios.post('/api/users/logout');
setUser(null); setUser(null);
window.location.href = '/login'; // Редирект после выхода navigate('/login'); // Редирект после выхода
} catch (err) { } catch (err) {
setError('Ошибка'); setError('Ошибка');
} }
@@ -100,28 +100,21 @@ const Profile = () => {
} }
}; };
const changePassword = async (e) => { const changePassword = async (e) => {
e.preventDefault(); e.preventDefault();
setPasswordError(''); setPasswordError('');
try { try {
const NewPassword = {old_password, new_password, new_password_confirm} const NewPassword = {old_password, new_password, new_password_confirm}
await axios.put('/api/users/change_password', await axios.put('/api/users/change_password', NewPassword, { withCredentials: true });
NewPassword alert('Пароль успешно изменён!');
, { setShowChangePassword(false);
withCredentials: true setold_password('');
}); setnew_password('');
setnew_password_confirm('');
alert('Пароль успешно изменён!'); } catch (err) {
setShowChangePassword(false); setPasswordError( err.response?.data?.detail || 'Ошибка при смене пароля' );
setold_password(''); }
setnew_password('');
setnew_password_confirm('');
} catch (err) {
setPasswordError(
err.response?.data?.detail || 'Ошибка при смене пароля'
);
}
}; };
@@ -151,11 +144,9 @@ const Profile = () => {
const deleteAccount = async () => { const deleteAccount = async () => {
try { try {
await axios.delete('/api/users/me', { await axios.delete('/api/users/me', { withCredentials: true });
withCredentials: true
});
setUser(null); setUser(null);
window.location.href = '/login'; navigate('/login');
setShowConfirm(false); // Закрываем окно после удаления setShowConfirm(false); // Закрываем окно после удаления
} catch (err) { } catch (err) {
setError('Ошибка удаления'); setError('Ошибка удаления');
@@ -163,152 +154,151 @@ const Profile = () => {
} }
}; };
return ( return (
<><Header /> <>
<div className="profile-page"> <Header />
<div className="profile-page">
{
error && <div className="error">{error}</div>
}
{user && (
<div className="user-info">
<p><strong>Привет, {user}! Добро пожаловать в личный кабинет.</strong></p>
<div className="text-block">Здесь ты сможешь управлять данными своей учётной записи.</div>
<p>Информация об учётной записи</p>
<div className="com">Отображаемое имя</div>
<div className="buttonName">
<div className="frame"><p>{user}</p></div>
<button onClick={OpenWindowName}>✎</button>
</div>
<div className="com">Логин</div>
<div className="buttonName">
<div className="frame"><p>{userName}</p></div>
<button onClick={OpenWindowUserName}>✎</button>
</div>
<p>Изменить пароль</p>
<div className="com">В целях безопасности мы рекомендуем выбрать пароль, который ещё не использовался вами в других учётных записях.</div>
<button onClick={() => setShowChangePassword(true)}className="button-small">Изменить пароль</button>
<button onClick={handleLogout}>Выйти из аккаунта</button>
<button onClick={OpenWindowDelete}>Удалить аккаунт</button>
</div>
)}
{ShowConfirmUserName && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Обновите логин</h3></div>
<div><p>Текущий логин: {userName}</p></div>
<div className="com">Новый логин</div>
<form onSubmit={NewUserName}>
<div>
<input
type="text"
value={new_username}
onChange={(e) => setnew_username(e.target.value)}
required
/>
</div>
<button type="submit">Подтвердить</button>
</form>
<button onClick={closeWindowUserName}>Отменить</button>
</div>
</div>
)}
{ShowConfirmName && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Обновите отображаемое имя</h3></div>
<div><p>Текущее отображаемое имя: {user}</p></div>
<div className="com">Новое отображаемое имя</div>
<form onSubmit={NewDisplayName}>
<div>
<input
type="text"
value={new_display_name}
onChange={(e) => setnew_display_name(e.target.value)}
required
/>
</div>
<button type="submit">Подтвердить</button>
</form>
<button onClick={closeWindowName}>Отменить</button>
</div>
</div>
)}
{showChangePassword && (
<div className="confirm-modal">
<div className="modal-content">
<h3>Изменить пароль</h3>
{passwordError && (
<div className="error" style={{ color: 'red' }}>
{passwordError}
</div>
)}
{ <form onSubmit={changePassword}>
error && <div className="error">{error}</div> <div className="form-group">
} <label>Текущий пароль:</label>
<input
type="password"
value={old_password}
onChange={(e) => setold_password(e.target.value)}
required
/>
</div>
{user && ( <div className="form-group">
<div className="user-info"> <label>Новый пароль:</label>
<p><strong>Привет, {user}! Добро пожаловать в личный кабинет.</strong></p> <input
<div className="text-block">Здесь ты сможешь управлять данными своей учётной записи.</div> type="password"
<p>Информация об учётной записи</p> value={new_password}
<div className="com">Отображаемое имя</div> onChange={(e) => setnew_password(e.target.value)}
<div className="buttonName"> required
<div className="frame"><p>{user}</p></div> />
<button onClick={OpenWindowName}>✎</button> </div>
</div>
<div className="com">Логин</div> <div className="form-group">
<div className="buttonName"> <label>Повторите новый пароль:</label>
<div className="frame"><p>{userName}</p></div> <input
<button onClick={OpenWindowUserName}>✎</button> type="password"
</div> value={new_password_confirm}
<p>Изменить пароль</p> onChange={(e) => setnew_password_confirm(e.target.value)}
<div className="com">В целях безопасности мы рекомендуем выбрать пароль, который ещё не использовался вами в других учётных записях.</div> required
<button onClick={() => setShowChangePassword(true)} />
className="button-small">Изменить пароль</button> </div>
<button onClick={handleLogout}>Выйти из аккаунта</button>
<button onClick={OpenWindowDelete}>Удалить аккаунт</button> <div className="modal-buttons">
</div> <button type="submit">Изменить пароль</button>
)} <button
type="button"
{ShowConfirmUserName && ( onClick={() => setShowChangePassword(false)}
<div className="confirm-modal"> >
<div className="modal-content"> Отменить
<div><h3>Обновите логин</h3></div> </button>
<div><p>Текущий логин: {userName}</p></div> </div>
<div className="com">Новый логин</div> </form>
<form onSubmit={NewUserName}> </div>
<div> </div>
<input )}
type="text"
value={new_username} {/* Всплывающее окно подтверждения */}
onChange={(e) => setnew_username(e.target.value)} {showConfirm && (
required <div className="confirm-modal">
/> <div className="modal-content">
<p><strong>Вы действительно хотите удалить аккаунта?</strong></p>
<div className="modal-buttons">
<button onClick={deleteAccount}>Подтвердить</button>
<button onClick={closeWindowDelete}>Отменить</button>
</div>
</div>
</div>
)}
</div> </div>
<button type="submit">Подтвердить</button> </>
</form> );
<button onClick={closeWindowUserName}>Отменить</button>
</div>
</div>
)}
{ShowConfirmName && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Обновите отображаемое имя</h3></div>
<div><p>Текущее отображаемое имя: {user}</p></div>
<div className="com">Новое отображаемое имя</div>
<form onSubmit={NewDisplayName}>
<div>
<input
type="text"
value={new_display_name}
onChange={(e) => setnew_display_name(e.target.value)}
required
/>
</div>
<button type="submit">Подтвердить</button>
</form>
<button onClick={closeWindowName}>Отменить</button>
</div>
</div>
)}
{showChangePassword && (
<div className="confirm-modal">
<div className="modal-content">
<h3>Изменить пароль</h3>
{passwordError && (
<div className="error" style={{ color: 'red' }}>
{passwordError}
</div>
)}
<form onSubmit={changePassword}>
<div className="form-group">
<label>Текущий пароль:</label>
<input
type="password"
value={old_password}
onChange={(e) => setold_password(e.target.value)}
required
/>
</div>
<div className="form-group">
<label>Новый пароль:</label>
<input
type="password"
value={new_password}
onChange={(e) => setnew_password(e.target.value)}
required
/>
</div>
<div className="form-group">
<label>Повторите новый пароль:</label>
<input
type="password"
value={new_password_confirm}
onChange={(e) => setnew_password_confirm(e.target.value)}
required
/>
</div>
<div className="modal-buttons">
<button type="submit">Изменить пароль</button>
<button
type="button"
onClick={() => setShowChangePassword(false)}
>
Отменить
</button>
</div>
</form>
</div>
</div>
)}
{/* Всплывающее окно подтверждения */}
{showConfirm && (
<div className="confirm-modal">
<div className="modal-content">
<p><strong>Вы действительно хотите удалить аккаунта?</strong></p>
<div className="modal-buttons">
<button onClick={deleteAccount}>Подтвердить</button>
<button onClick={closeWindowDelete}>Отменить</button>
</div>
</div>
</div>
)}
</div></>
);
}; };
export default Profile; export default Profile;

3
src/Registration.js
View File

@@ -26,7 +26,6 @@ const Registration = () => {
setPassword(''); setPassword('');
setPassword_confirm(''); setPassword_confirm('');
} catch (err) { } catch (err) {
// Обрабатываем ошибки от сервера (например, дубликат password)
setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)'); setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
} finally { } finally {
setLoading(false); setLoading(false);
@@ -81,7 +80,7 @@ const Registration = () => {
/> />
</div> </div>
<button type="submit" disabled={loading}> <button type="submit" disabled={loading}>
{loading ? 'Регистрация...' : 'Зарегистрироваться'} {loading ? 'Регистрация...' : 'Зарегистрироваться'}
</button> </button>
</form> </form>
<button onClick={handleLoginClick}> <button onClick={handleLoginClick}>

12
src/_Shablon.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import Header from './Header'; import Header from './Header';
@@ -7,10 +7,12 @@ const Name = () => {
const [error, setError] = useState(''); const [error, setError] = useState('');
return ( return (
<><Header /> <>
<div className=""> <Header />
<div className="">
</div></>
</div>
</>
); );
} }

306
src/css/App.css Normal file
View File

@@ -0,0 +1,306 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
@font-face {
font-family: "Roboto Regular";
src: url("./../fonts/roboto-regular/roboto-regular.svg") format("svg");
src: url("./../fonts/roboto-regular/roboto-regular.ttf") format("truetype");
src: url("./../fonts/roboto-regular/roboto-regular.woff") format("woff");
src: url("./../fonts/roboto-regular/roboto-regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.switch-link {
margin-top: 15px;
text-align: center;
}
.switch-link button {
background: none;
border: none;
color: #007bff;
cursor: pointer;
font-size: 14px;
text-decoration: underline;
}
body {
font-family: 'Roboto Regular';
margin: 0;
padding: 0;
background-color: #33404d;
}
body * { transition: all .4s ease; }
ul{
list-style-type: none;
padding: 0px;
}
.app {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* Страница входа */
.login-page {
background-color: #1f2430;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 50px auto;
max-width: 400px;
}
.profile-page {
background-color: #1f2430;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px auto;
max-width: 1200px;
}
h2 {
text-align: center;
color: #CAD1D8;
margin-bottom: 20px;
}
p {
text-align: center;
color: #CAD1D8;
margin-bottom: 0px;
}
.modal-content p {
text-align: left
}
.modal-content div {
margin-bottom: 20px
}
.text-block {
text-align: left;
color: #999999;
margin-bottom: 2em;
}
.com {
color: #999999;
text-align: left;
margin: 10px 0px 10px 0px;
margin-bottom: auto;
}
.com modal-content {
text-align: left;
color: #999999;
margin: 10px 0px 10px 0px;
margin-bottom: auto;
}
.modal-content input{
margin: 10px 0px;
}
.modal-content div{
margin: 10px 0px;
}
.user-info p {
text-align: left;
color: #CAD1D8;
margin: 15px 0;
font-size: 20px;
}
form div {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #CAD1D8;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.Important-button:hover {
background-color: #cb0101;
}
.Important-button {
width: 100%;
padding: 12px;
margin: 8px;
background-color: #e30000;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button {
width: 100%;
padding: 12px;
margin: 10px auto;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.frame {
background-color: #33404d;
margin: 10px 0px;
width: 30%;
padding: 6px;
border-radius: 6px;
font-size: 16px;
border: 2px solid #999999
}
.frame p {
font-size: 16px;
}
.frame:hover {
border-color: #CAD1D8;
}
button:hover {
background-color: #0056b3;
}
button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
/* Сообщения об ошибках */
.error {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
border-radius: 4px;
margin-bottom: 15px;
text-align: center;
}
/* Страница профиля */
.form-group {
margin-bottom: 10px;
}
.form-group label {
text-align: left;
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.modal-buttons {
display: flex;
gap: 10px;
margin-top: 20px;
}
.button-small {
width: 30%;
min-width: auto;
height: auto;
}
.user-info p {
text-align: left;
margin: 5px 0px 5px 0px;
font-size: 20px;
}
.buttonName {
display: flex;
}
.buttonName button{
background-color: #007bff;
margin: 10px 5px;
width: 5%;
padding: 6px;
border-radius: 6px;
font-size: 20px;
}
.buttonName button:hover {
background-color: #0056b3;
}
.com p {
color: #CAD1D8;
font-size: 18px;
}
h3 {
text-align: left;
color: #CAD1D8;
margin: 0px;
}

63
src/css/BoardList.css Normal file
View File

@@ -0,0 +1,63 @@
.kan-ban-list-sort{
background-color: #2b3245;
padding: 10px;
border-radius: 6px;
margin-bottom: 20px;
}
.nav-sort{
display: flex;
}
.nav-sort button+button{
margin-left: 10px
}
.kan-ban-list {
background-color: #2b3245;
padding: 10px;
border-radius: 6px;
}
.kan-ban-list .inf {
padding: 0px 0px;
display: flex;
justify-content: space-between;
align-items: center;
}
.kan-ban-list .inf button{
width: 200px;
margin: 0px;
}
.kan-ban-list ul {
margin: 0px
}
.kan-ban-list ul button{
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #3d4763;;
}
.kan-ban-list ul button:hover{
box-shadow: 0 0 10px 2px #08e8de78;
}
.kan-ban-list .sort-row{
display: flex;
justify-content: space-between;
}
.sort-row p, .sort-row h3{
margin: 4px 0px;
}
.sort-row+.sort-row p {
margin: 16px 0px 0px 0px;
}

79
src/css/Header.css Normal file
View File

@@ -0,0 +1,79 @@
/*header*/
.nav-avatar {
height: 32px;
height: 32px;
margin-left: 8px;
border-radius: 1000px
}
.header {
background-color: #1f2430;
padding: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 56px;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
height: 56px;
}
.logo h1 {
font-family: 'Roboto Regular';
margin: 0;
font-size: 24px;
color: #CAD1D8;
text-decoration: none;
}
h1:hover {
color: white;
}
.logo a {
text-decoration: none;
}
.nav-list {
opacity: 0;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-list.visible {
opacity: 1;
}
.nav-list li {
padding: 0 1rem;
height: 56px;
display: flex;
align-items: center;
}
.nav-list li:hover {
box-shadow: #08e8de 0px -2px inset;
background-color: rgba(0, 0, 0, 0.25) ;
}
.nav-list a {
text-decoration: none;
color: #CAD1D8;
display: flex;
align-items: center;
font-size: 18px;
height: 56px;
}
.nav-list a:hover {
color: white;
}

52
src/css/Modal.css Normal file
View File

@@ -0,0 +1,52 @@
/* Стили для модального окна */
.confirm-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: #1f2430;
padding: 20px;
border-radius: 8px;
text-align: center;
min-width: 300px;
}
.modal-buttons {
display: flex;
justify-content: space-between;
margin-top: 20px 15px;
}
.modal-buttons button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 8px;
}
.modal-buttons button:first-child {
background: #e30000;
color: white;
}
.modal-buttons button:last-child {
background: #007bff;
color: white;
}
.modal-buttons button:hover {
background-color: #cb0101
}
.modal-buttons button:last-child:hover {
background-color: #0056b3
}

6
src/index.js
View File

@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function