registr update

src/App.css

@@ -1,38 +1,14 @@
-.App {
+/* src/App.module.css */
-  text-align: center;
-}
 
-.App-logo {
+.app {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  min-height: 100vh; /* Минимальная высота страницы равна высоте экрана */
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
+.main {
-  color: #61dafb;
+  flex: 1; /* Основной контент занимает все доступное пространство */
-}
+  padding: 16px;
-
+  background-color: #282828; /* Средний темный фон */
-@keyframes App-logo-spin {
+  color: #ffffff; /* Белый текст */
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }

src/App.js

@@ -1,24 +1,34 @@
 // src/App.js
 
-import React from 'react';
+import React, { useState } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Register from './components/Register';
-import Login from './components/Login'; // Предполагаем, что у вас будет компонент Login
+import Login from './components/Login';
+import Profile from './components/Profile';
 import styles from './App.module.css';
 
-/*sadsad;lkjasd;lksaj*/
-
 const App = () => {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+    const handleLogin = () => {
+        setIsAuthenticated(true);
+    };
+
+    const handleLogout = () => {
+        setIsAuthenticated(false);
+    };
+
     return (
         <Router>
             <div className={styles.app}>
-                <Header />
+                <Header isAuthenticated={isAuthenticated} onLogout={handleLogout} />
                 <main className={styles.main}>
                     <Routes>
                         <Route path="/register" element={<Register />} />
-                        <Route path="/login" element={<Login />} /> {/* Предполагаем, что у вас будет компонент Login */}
+                        <Route path="/login" element={!isAuthenticated ? <Login onLogin={handleLogin} /> : <Navigate to="/profile" />} />
+                        <Route path="/profile" element={isAuthenticated ? <Profile /> : <Navigate to="/login" />} />
                         <Route path="/" element={<Home />} /> {/* Главная страница */}
                     </Routes>
                 </main>

src/components/Header.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import styles from './Header.module.css';
 
-const Header = () => {
+const Header = ({ isAuthenticated, onLogout }) => {
     return (
         <header className={styles.header}>
             <div className={styles.logo}>
@@ -13,8 +13,10 @@ const Header = () => {
             <div className={styles.profile}>
                 <img src="/profile-icon.png" alt="Profile" />
             </div>
-            <Link to="/register" className={styles.registerLink}>Зарегистрироваться</Link>
+            {!isAuthenticated && <Link to="/register" className={styles.registerLink}>Зарегистрироваться</Link>}
-            <button className={styles.logoutButton}>Выйти</button>
+            {isAuthenticated && (
+                <button className={styles.logoutButton} onClick={onLogout}>Выйти</button>
+            )}
         </header>
     );
 };

src/components/Header.module.css

@@ -37,6 +37,7 @@
     padding: 8px 16px;
     cursor: pointer;
     border-radius: 4px;
+    margin-left: 16px; /* Отступ слева для кнопки "Выход" */
 }
 
 .logoutButton:hover {

src/components/Login.js

@@ -1,20 +1,46 @@
 // src/components/Login.js
 
-import React from 'react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styles from './Login.module.css';
 
-const Login = () => {
+const Login = ({ onLogin }) => {
+    const [formData, setFormData] = useState({
+        login: '',
+        password: ''
+    });
+
+    const navigate = useNavigate();
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...formData,
+            [name]: value
+        });
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Здесь можно обработать отправку данных, но сейчас они просто уходят "в никуда"
+        console.log('Login data:', formData);
+        // Вызываем функцию для входа
+        onLogin();
+        // Переходим на страницу профиля после входа
+        navigate('/profile');
+    };
+
     return (
         <div className={styles.loginContainer}>
-            <form className={styles.loginForm}>
+            <form className={styles.loginForm} onSubmit={handleSubmit}>
                 <h2>Вход</h2>
                 <div className={styles.formGroup}>
                     <label htmlFor="login">Логин:</label>
-                    <input type="text" id="login" name="login" required />
+                    <input type="text" id="login" name="login" value={formData.login} onChange={handleChange} required />
                 </div>
                 <div className={styles.formGroup}>
                     <label htmlFor="password">Пароль:</label>
-                    <input type="password" id="password" name="password" required />
+                    <input type="password" id="password" name="password" value={formData.password} onChange={handleChange} required />
                 </div>
                 <button type="submit">Войти</button>
             </form>

src/components/Login.module.css

@@ -6,6 +6,7 @@
     align-items: center;
     height: 100vh;
     background-color: #1a1a1a; /* Темный фон */
+    padding: 16px; /* Добавляем отступы */
 }
 
 .loginForm {

src/components/Profile.js

@@ -0,0 +1,15 @@
+// src/components/Profile.js
+
+import React from 'react';
+import styles from './Profile.module.css';
+
+const Profile = () => {
+    return (
+        <div className={styles.profileContainer}>
+            <h2>Профиль</h2>
+            <p>Добро пожаловать в ваш профиль!</p>
+        </div>
+    );
+};
+
+export default Profile;

src/components/Profile.module.css

@@ -0,0 +1,20 @@
+/* src/components/Profile.module.css */
+
+.profileContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #1a1a1a; /* Темный фон */
+    color: #ffffff; /* Белый текст */
+    padding: 16px; /* Добавляем отступы */
+}
+
+.profileContainer h2 {
+    margin-bottom: 16px;
+}
+
+.profileContainer p {
+    font-size: 18px;
+}

src/components/Register.js

@@ -25,8 +25,8 @@ const Register = () => {
         e.preventDefault();
         // Здесь можно обработать отправку данных, но сейчас они просто уходят "в никуда"
         console.log('Registration data:', formData);
-        // Переходим на страницу входа после регистрации
+        // Переходим на страницу профиля после регистрации
-        navigate('/login');
+        navigate('/profile');
     };
 
     return (

src/components/Register.module.css

@@ -6,6 +6,7 @@
     align-items: center;
     height: 100vh;
     background-color: #1a1a1a; /* Темный фон */
+    padding: 16px; /* Добавляем отступы */
 }
 
 .registerForm {