Login

src/App.js

@@ -12,7 +12,7 @@ import DeliveryForm from './components/DeliveryForm';
 import OrderTracking from './components/OrderTracking';
 import { users, addUser } from './mockData';
 import LoginRegister from './components/LoginRegister'; // Import LoginRegister
-
+import { getLoggedInUser, logoutUser } from './utils/auth';
 import './App.css';
 
 function Home() {
@@ -30,30 +30,40 @@ function Home() {
 }
 
 function App() {
-  const [currentUser, setCurrentUser] = useState(null);
+  
+  const [currentUser, setCurrentUser] = useState(getLoggedInUser());
 
   const handleLogin = (user) => {
     setCurrentUser(user);
   };
 
   const handleLogout = () => {
+    logoutUser();
     setCurrentUser(null);
   };
 
+  
+  const [isLoginOpen, setIsLoginOpen] = useState(false);
+
   return (
     <div className="App">
-      <Header onLogin={handleLogin} /> {/* Pass handleLogin to Header */}
+      <Header onLogin={handleLogin} />
       {currentUser && (
         <div>
           <h2>Привет, {currentUser.name}</h2>
           <button onClick={handleLogout}>Выйти</button>
         </div>
       )}
+      <LoginRegister
+        isOpen={isLoginOpen}
+        onClose={() => setIsLoginOpen(false)}
+        onLogin={(user) => {
+          handleLogin(user);
+          setIsLoginOpen(false);
+        }}
+      />
       <Routes>
-        {/* Parent Route */}
         <Route path="/" element={<Home />} />
-
-        {/* Nested Routes */}
         <Route path="/delivery-form" element={<DeliveryForm />} />
         <Route path="/order-tracking" element={<OrderTracking />} />
       </Routes>

src/components/Header.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import './Header.css';
-import LoginRegister from './LoginRegister'; // Убедитесь, что импорт есть
+import LoginRegister from './LoginRegister';
 
-function Header({ onLogin}) {
+function Header({ onLogin }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const navigate = useNavigate();
 
@@ -39,10 +39,13 @@ function Header({ onLogin}) {
           Order
         </button>
       </div>
-      <LoginRegister 
+      <LoginRegister
-        isOpen={isModalOpen} 
+        isOpen={isModalOpen}
-        onClose={handleCloseModal} 
+        onClose={handleCloseModal}
-        onLogin={onLogin} 
+        onLogin={(user) => {
+          onLogin(user);
+          setIsModalOpen(false); // Закрыть модалку после логина/регистрации
+        }}
       />
     </header>
   );

src/components/LoginRegister.js

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import Modal from 'react-modal';
 import { users, addUser } from '../mockData';
+import { setLoggedInUser } from '../utils/auth';
 
 const LoginRegister = ({ isOpen, onClose, onLogin }) => {
+  // Все useState - только в начале компонента!
   const [isRegistering, setIsRegistering] = useState(false);
   const [name, setName] = useState('');
   const [surname, setSurname] = useState('');
@@ -12,42 +14,45 @@ const LoginRegister = ({ isOpen, onClose, onLogin }) => {
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
 
-  const handleRegistration = () => {
+  // Для логина
-    if (!name || !surname || !phone || !password || !confirmPassword) {
-      setError('Пожалуйста, заполните все поля');
-      return;
-    }
-    if (password !== confirmPassword) {
-      setError('Пароли не совпадают');
-      return;
-    }
-    const userExists = users.some(u => u.phone === phone);
-    if (userExists) {
-      setError('Пользователь с таким номером телефона уже существует');
-      return;
-    }
-    const newUser = { name, surname, phone, password };
-    addUser(newUser);
-    setError('');
-    // Автоматически входим после регистрации
-    onLogin(newUser);
-    onClose();
-  };
-
   const [loginPhone, setLoginPhone] = useState('');
   const [loginPassword, setLoginPassword] = useState('');
   const [loginError, setLoginError] = useState('');
 
-  const handleLogin = () => {
+
-    const user = users.find(u => u.phone === loginPhone && u.password === loginPassword);
+const handleRegistration = () => {
-    if (user) {
+  if (!name || !surname || !phone || !password || !confirmPassword) {
-      setLoginError('');
+    setError('Пожалуйста, заполните все поля');
-      onLogin(user);
+    return;
-      onClose();
+  }
-    } else {
+  if (password !== confirmPassword) {
-      setLoginError('Неверный номер телефона или пароль');
+    setError('Пароли не совпадают');
-    }
+    return;
-  };
+  }
+  const userExists = users.some(u => u.phone === phone);
+  if (userExists) {
+    setError('Пользователь с таким номером телефона уже существует');
+    return;
+  }
+  const newUser = { name, surname, phone, password };
+  addUser(newUser);
+  setError('');
+  setLoggedInUser(newUser); // <--- сохраняем пользователя в localStorage
+  onLogin(newUser);
+  onClose();
+};
+
+const handleLogin = () => {
+  const user = users.find(u => u.phone === loginPhone && u.password === loginPassword);
+  if (user) {
+    setLoginError('');
+    setLoggedInUser(user); // <--- сохраняем пользователя в localStorage
+    onLogin(user);
+    onClose();
+  } else {
+    setLoginError('Неверный номер телефона или пароль');
+  }
+};
 
   return (
     <Modal

src/mockData.js

@@ -11,11 +11,11 @@ export const orders = [];
 export const addUser = (user) => {
   const id = users.length + 1;
   users.push({ id, ...user });
-  return id; // return id for confirmation
+  return id; 
 };
 
 export const addOrder = (order) => {
   const id = orders.length + 1;
   orders.push({ id, ...order });
-  return id; // return id for confirmation
+  return id; 
 };

src/utils/auth.js

@@ -0,0 +1,13 @@
+// src/utils/auth.js
+export const setLoggedInUser = (user) => {
+  localStorage.setItem('loggedInUser', JSON.stringify(user));
+};
+
+export const getLoggedInUser = () => {
+  const user = localStorage.getItem('loggedInUser');
+  return user ? JSON.parse(user) : null;
+};
+
+export const logoutUser = () => {
+  localStorage.removeItem('loggedInUser');
+};