Init

src/App.css

@@ -0,0 +1,539 @@
+
+
+.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("/home/container/client/src/fonts/roboto-regular/roboto-regular.svg") format("svg");
+		src: url("/home/container/client/src/fonts/roboto-regular/roboto-regular.ttf") format("truetype");
+		src: url("/home/container/client/src/fonts/roboto-regular/roboto-regular.woff") format("woff");
+		src: url("/home/container/client/src/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
+  
+}
+
+
+
+
+

src/App.js

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

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/Header.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect  } from 'react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+const Header = () => {
+    const [display_name, setDisplay_name] = useState('');
+    const [avatar, setAvatar] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [isAnimated, setIsAnimated] = useState(false);
+    
+    useEffect(() => {
+        const checkSession = async () => {
+            try {
+                const response = await axios.get('/api/users/me');
+                setDisplay_name(response.data.display_name);
+                setAvatar(response.data.avatar_url);
+            } catch {}  
+            setIsLoading(false);
+            setTimeout(() => setIsAnimated(true), 150);
+        };
+        checkSession();
+    }, []);
+    
+    return (
+    <header className="header">
+      <div className="header-container">
+        <div className="logo">
+          <Link to="/main">
+            <h1>Fool-stack</h1>
+          </Link>
+        </div>
+        <nav className="nav">
+          {!isLoading && (
+            <ul className={`nav-list ${isAnimated ? 'visible' : ''}`}>
+              {display_name ? (
+                <>
+                  <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="/registration">Регистрация</Link></li>
+                  <li><Link to="/login">Вход</Link></li>
+                </>
+              )}
+            </ul>
+          )}
+        </nav>
+      </div>
+    </header>
+    );
+};
+
+export default Header;

src/KBBoard.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+import Header from './Header';
+
+const KBBoard = () => {
+    const { id } = useParams();
+    const [user, setUser] = useState(null);
+    const [error, setError] = useState('');
+    
+    useEffect(() => {
+        const checkSession = async () => {
+            try {
+                const response = await axios.post('/api/boards/load', { id });
+            } catch {}  
+        };
+        checkSession();
+    }, [id]);
+    
+    return (
+        <>
+        	<Header />
+			<div className="">
+      			
+    		</div>
+        </>
+	);
+}
+
+export default KBBoard;

src/KBBoardsList.js

@@ -0,0 +1,233 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import Header from './Header';
+
+function ListItem({ item }) {
+    const navigate = useNavigate();
+    if (!item) return null;
+    
+    const openBoard = () => { navigate('/kanban-board/' + item.id); };
+    
+    return (
+    	<li>
+        	<button onClick={openBoard}>
+        		<div className="sort-row">
+                	<h3>{item.title}</h3>
+					<p><strong>Владелец:</strong> {item.owner_display_name}</p>
+                </div>
+				<div className="sort-row">
+                    <p><strong>Описание:</strong> {item.description}</p>
+                    <p><strong>Обновлено:</strong> {new Date(item.updated_at).toLocaleString()}</p>
+                </div>
+        	</button>
+    	</li>
+	);
+};
+
+const KBBoardsList = () => {
+    const [error, setError] = useState('');
+    const [sort_method, setSortMethod] = useState('title');
+    const [reverse, setReverse] = useState(false);
+    const [search_text, setSearchText] = useState('');
+    const [title, setTitle] = useState('');
+    const [description, setDescription] = useState('');
+    const [items, setItems] = useState([]);
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filteredItems, setFilteredItems] = useState([]);
+    const [page, setPage] = useState(1);
+    const [list, setList] = useState(20);
+	const debounceRef = useRef(null);
+    
+    useEffect(() => { 
+        const loadBoardList = async () => {
+            try {
+                var newList = { sort_method, reverse, search_text, page, list };
+                const response = await axios.post('/api/boards/list', newList);
+                if (Array.isArray(response.data)) {
+                    setItems(response.data);
+                } else {
+                    // Если данных нет или они не массив — ставим пустой массив
+                    setItems([]);
+                    if (response.data?.detail === 'Доски отсутствуют.') {
+                        console.log('Доски отсутствуют');
+                    }
+                }
+            } catch (err) {
+                if (err.response.data.message === 'Token Error' || err.response.data.message === 'Invalid Token') {
+                    setError('Вы не авторизованы');
+                    setTimeout(() => {
+                        window.location.href = '/login';
+                    }, 1500);
+                } else {
+                    setError('Ошибка загрузки досок');
+                    console.log(err);
+                    setItems([]); // Гарантируем, что items — массив
+                }
+            }
+        };
+        loadBoardList() 
+    }, []);
+    
+    useEffect(() => {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            setFilteredItems(
+                items.filter(item =>
+                	item.title.toLowerCase().includes(searchQuery.toLowerCase())
+                )
+            );
+        }, 300); // 300 мс задержка
+    }, [searchQuery, items]);
+    
+    const sortList = async (method = sort_method, isReverse = reverse) => {
+        try {
+            const newList = { sort_method: method, reverse: isReverse, search_text };
+            const response = await axios.post('/api/boards/list', newList);
+
+            if (Array.isArray(response.data)) {
+                setItems(response.data);
+            } else {
+                setItems([]);
+                if (response.data?.detail === 'Доски отсутствуют.') {
+                    console.log('Доски отсутствуют');
+                }
+            }
+        } catch (err) {
+            if (err.response?.data?.message === 'Token Error' || err.response?.data?.message === 'Invalid Token') {
+                setError('Вы не авторизованы');
+                setTimeout(() => {
+                    window.location.href = '/login';
+                }, 1500);
+            } else {
+                setError('Ошибка загрузки досок');
+                console.log(err);
+                setItems([]);
+            }
+        }
+    };
+
+    const setFilterTitle = async () => {
+        const newMethod = 'title';
+        const newReverse = sort_method === 'title' ? !reverse : false;
+
+        setSortMethod(newMethod);
+        setReverse(newReverse);
+
+        await sortList(newMethod, newReverse);
+    };
+
+    const setFilterOwner = async () => {
+        const newMethod = 'owner';
+        const newReverse = sort_method === 'owner' ? !reverse : false;
+
+        setSortMethod(newMethod);
+        setReverse(newReverse);
+
+        await sortList(newMethod, newReverse);
+    };
+
+    const setFilterUptime = async () => {
+        const newMethod = 'update_time';
+        const newReverse = sort_method === 'update_time' ? !reverse : false;
+
+        setSortMethod(newMethod);
+        setReverse(newReverse);
+
+        await sortList(newMethod, newReverse);
+    };
+    
+    const createBoard = async () => {
+        try {
+            const newBoard = { title, description };
+            await axios.post('/api/boards/create', newBoard);
+			setShowCreateModal(false)
+        } catch (err) {
+            setError('Ошибка');
+        }
+    };
+	
+    const openCreateModal = () => { setShowCreateModal(true) };
+    const closeCreateModal = () => { setShowCreateModal(false); setDescription(''); setTitle('') };
+    
+    return (
+        <>
+        	<Header />
+			<div className="profile-page">
+        		{
+                    error && <div className="error">{error}</div>
+            	}
+      			
+				<div className="kan-ban-list-sort">
+      				<h3>Сортировка по:</h3>
+                    <div className="nav-sort">
+                    	<button onClick={setFilterTitle}>
+							Названию
+                        </button>
+						<button onClick={setFilterOwner}>
+							Создателю
+                        </button>
+						<button onClick={setFilterUptime}>
+							Дате обновления
+                        </button>
+                    </div>
+					<input
+						type="text"
+						placeholder="Поиск по названию..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                    />
+   	 			</div>
+				<div className="kan-ban-list">
+                    <div className="inf">
+      					<h3>Доступные канбан доски:</h3> 
+						<button onClick={openCreateModal}>Создать канбан-доску</button>
+					</div>
+                    {filteredItems.length > 0 ? (
+                      	<ul>
+                        	{filteredItems.map((item) => (
+                          		<ListItem key={item.id} item={item} />
+                        	))}
+                      	</ul>
+                    ) : (
+                      	<p>Нет данных</p>
+                    )}
+   	 			</div>
+    		</div>
+			{showCreateModal && (
+        		<div className="confirm-modal">
+          			<div className="modal-content">
+            			<p><strong>Придумайте название и описание канбан доски</strong></p>
+                		<form onSubmit={createBoard}>
+                            <div>
+                              	<label>Название:</label>
+                              	<input
+                                    type="text"
+                                    value={title}
+                                    onChange={(e) => setTitle(e.target.value)}
+                                    required
+                              	/>
+                            </div>
+                            <div>
+                              	<label>Описание:</label>
+                              	<input
+                                    type="text"
+                                    value={description}
+                                    onChange={(e) => setDescription(e.target.value)}
+                              	/>
+                            </div>
+							<div className="modal-buttons">
+          	  					<button type="submit" disabled={loading}>{loading ? 'Создание...' : 'Создать'}</button>
+              					<button onClick={closeCreateModal}>Отменить</button>
+            				</div>
+                        </form>
+          			</div>
+        		</div>
+            )}
+        </>
+	);
+}
+
+export default KBBoardsList;

src/Login.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Login = () => {
+    const navigate = useNavigate();
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    
+    const handleRegisterClick = () => {
+        navigate('/registration'); // Переход к регистрации
+    };
+    
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+        try {
+            const newUser = { username, password };
+            await axios.post('/api/users/login', newUser,
+                { 
+                    withCredentials: true 
+                    /*headers: { 
+                        'Content-Type': 'application/json' 
+                    }*/
+                }
+            );
+            setTimeout(() => {
+                navigate('/profile');
+            }, 500);
+        } catch (err) {
+            setError(err.response.data.detail || 'Ошибка входа');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+  	return (
+    <>
+        <Header />
+        <div className="login-page">
+          <h2>Вход в систему</h2>
+          {
+            error && <div className="error">{error}</div>
+          }
+          <form onSubmit={handleLogin}>
+            <div>
+              <label>Логин:</label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                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>
+	  </>
+  );
+};
+
+export default Login;

src/Mainpage.js

@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import Header from './Header';
+
+const Mainpage = () => {
+    const [user, setUser] = useState(null);
+    const [error, setError] = useState('');
+    
+    return (
+        <><Header />
+		<div className="">
+      		
+    	</div></>
+	);
+}
+
+export default Mainpage;

src/OtherProfile.js

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+import Header from './Header';
+
+const OtherProfile = () => {
+    const { id } = useParams();
+    const [user, setUser] = useState(null);
+    const [error, setError] = useState('');
+    
+    return (
+        <><Header />
+		<div className="">
+      		
+    	</div></>
+	);
+}
+
+export default OtherProfile;

src/Profile.js

@@ -0,0 +1,314 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Profile = () => {
+    const [user, setUser] = useState(null);
+    const [userName, setUserName] = useState(null);
+    const [error, setError] = useState('');
+	const [showConfirm, setShowConfirm] = useState(false); // Состояние для поп-апа
+    const [ShowConfirmUserName, setShowConfirmUserName] = useState(false);
+    const [new_username, setnew_username] = useState('');
+	const [ShowConfirmName, setShowConfirmName] = useState(false);
+    //const [display_name, setdisplay_name] = useState('');
+    const [new_display_name, setnew_display_name] = useState('');
+    const navigate = useNavigate();
+	const [showChangePassword, setShowChangePassword] = useState(false);
+	const [old_password, setold_password] = useState('');
+	const [new_password, setnew_password] = useState('');
+	const [new_password_confirm, setnew_password_confirm] = useState('');
+	const [passwordError, setPasswordError] = useState('');
+    useEffect(() => {
+        const checkSession = async () => {
+            try {
+                const response = await axios.get('/api/users/me');
+                setUser(response.data.display_name);
+                setUserName(response.data.username)
+            } catch (err) {
+                // Если нет сессии - редирект на логин
+                setError('Вы не авторизованы');
+                setTimeout(() => {
+                    window.location.href = '/login';
+                }, 1500);
+            }
+        };
+        checkSession();
+    }, []);
+
+    const handleLogout = async () => {
+        try {
+            await axios.post('/api/users/logout');
+            setUser(null);
+            window.location.href = '/login'; // Редирект после выхода
+        } catch (err) {
+            setError('Ошибка');
+        }
+    };
+    const NewDisplayName = async (e) => {
+        e.preventDefault();
+        setError('');
+        try {
+            await axios.put('api/users/change_display_name', {new_display_name},
+                { 
+                    withCredentials: true 
+                    /*headers: { 
+                        'Content-Type': 'application/json' 
+                    }*/
+                }
+            );
+            setShowConfirmName(false);
+            try {
+                const response = await axios.get('/api/users/me');
+                setUser(response.data.display_name);
+                setUserName(response.data.username);
+            } catch (err) {
+                // Если нет сессии - редирект на логин
+                setError('Вы не авторизованы');
+                setTimeout(() => {
+                    window.location.href = '/login';
+                }, 1500);
+            }
+        } catch (err) {
+            setError(err.response.data.detail || 'Ошибка входа');
+        } 
+    };
+    
+    const NewUserName = async (e) => {
+        e.preventDefault();
+        setError('');
+        try {
+            await axios.put('api/users/change_username', {new_username},
+                { 
+                    withCredentials: true 
+                    /*headers: { 
+                        'Content-Type': 'application/json' 
+                    }*/
+                }
+            );
+            setShowConfirmUserName(false);
+            try {
+                const response = await axios.get('/api/users/me');
+                setUserName(response.data.username);
+                setUser(response.data.display_name);
+            } catch (err) {
+                // Если нет сессии - редирект на логин
+                setError('Вы не авторизованы');
+            }
+        } catch (err) {
+            setError(err.response.data.detail || 'Ошибка входа');
+        } 
+    };
+    
+   const changePassword = async (e) => {
+ 	 e.preventDefault();
+	  setPasswordError('');
+
+ 	 try {
+       const NewPassword = {old_password, new_password, new_password_confirm}
+  	  await axios.put('/api/users/change_password',
+    	  NewPassword
+   	 , {
+   	   withCredentials: true
+    	});
+    
+  	  alert('Пароль успешно изменён!');
+ 	   setShowChangePassword(false);
+ 	   setold_password('');
+ 	   setnew_password('');
+       setnew_password_confirm('');
+  	} catch (err) {
+   	 setPasswordError(
+    	  err.response?.data?.detail || 'Ошибка при смене пароля'
+  	    );
+	  }
+	};
+
+    
+    const OpenWindowDelete = () => {
+    	setShowConfirm(true); // Показываем окно подтверждения
+    };
+    
+    const closeWindowDelete = () => {
+    	setShowConfirm(false);
+    };
+    
+    const OpenWindowName = () => {
+    	setShowConfirmName(true); // Показываем окно подтверждения
+    };
+
+    const closeWindowName = () => {
+    	setShowConfirmName(false);
+    };
+    
+     const OpenWindowUserName = () => {
+    	setShowConfirmUserName(true); // Показываем окно подтверждения
+    };
+    
+    const closeWindowUserName = () => {
+    	setShowConfirmUserName(false); // Показываем окно подтверждения
+    };
+    
+	const deleteAccount = async () => {
+        try {
+            await axios.delete('/api/users/me', {
+                withCredentials: true
+            });
+            setUser(null);
+            window.location.href = '/login';
+            setShowConfirm(false); // Закрываем окно после удаления
+        } catch (err) {
+            setError('Ошибка удаления');
+            setShowConfirm(false); // Закрываем окно при ошибке
+        }
+    };
+  
+  return (
+    <><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}>
+        <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;

src/Registration.js

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Registration = () => {
+    const navigate = useNavigate();
+    const [username, setuserName] = useState('');
+    const [display_name, setdisplayName] = useState('');
+    const [password, setPassword] = useState('');
+    const [password_confirm, setPassword_confirm] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    
+    // Добавление пользователя
+    const addUser = async (e) => {
+        e.preventDefault();   
+        setLoading(true);
+        setError(null);
+        try {
+            const newUser = { username, display_name, password, password_confirm};
+            await axios.post('/api/users/register', newUser);
+            alert('Регистрация успешна! Перейдите на страницу входа.');
+            navigate('/login');
+            setuserName('');
+            setPassword('');
+            setPassword_confirm('');
+        } catch (err) {
+            // Обрабатываем ошибки от сервера (например, дубликат password)
+            setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
+        } finally {
+            setLoading(false);
+        }
+    };     
+	
+    const handleLoginClick = () => {
+        navigate('/login'); // Переход к входу
+    };
+    
+    return (
+        <><Header />
+		<div className="login-page">
+      		<h2>Регистрация</h2>
+			{
+                error && <div className="error">{error}</div>
+            }
+      		<form onSubmit={addUser}>
+        		<div>
+                  	<label>Логин:</label>
+                  	<input
+                        type="text"
+                        value={username}
+                        onChange={(e) => setuserName(e.target.value)}
+                        required
+          			/>
+        		</div>
+				<div>
+                  	<label>Никнейм:</label>
+                  	<input
+                        type="text"
+                        value={display_name}
+                        onChange={(e) => setdisplayName(e.target.value)}
+          			/>
+        		</div>
+        		<div>
+          			<label>Пароль:</label>
+					<input
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                    />
+        		</div>
+				<div>
+          			<label>Подтверждение пароля:</label>
+					<input
+                        type="password"
+                        value={password_confirm}
+                        onChange={(e) => setPassword_confirm(e.target.value)}
+                        required
+                    />
+        		</div>
+        		<button type="submit" disabled={loading}>
+                  {loading ? 'Регистрация...' : 'Зарегистрироваться'}
+                </button>
+      		</form>
+			<button onClick={handleLoginClick}>
+                Уже есть аккаунт? Войти
+			</button>
+    	</div></>
+	);
+}
+
+export default Registration;

src/_Shablon.js

@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import Header from './Header';
+
+const Name = () => {
+    const [user, setUser] = useState(null);
+    const [error, setError] = useState('');
+    
+    return (
+        <><Header />
+		<div className="">
+      		
+    	</div></>
+	);
+}
+
+export default Name;

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupProxy.js

@@ -0,0 +1,19 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+    app.use(
+        '/api',
+        createProxyMiddleware({
+            target: 'https://back.fool-stack.ru',
+            changeOrigin: true,
+            pathRewrite: { '^/api': '/api' },
+        })
+    );
+    app.use(
+        '/static/avatars',
+        createProxyMiddleware({
+            target: 'http://back.fool-stack.ru',
+            changeOrigin: true,
+        })
+    );
+};

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';