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,7 +1,7 @@
 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 }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -42,7 +42,10 @@ function Header({ onLogin}) {
       <LoginRegister
         isOpen={isModalOpen}
         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,6 +14,12 @@ const LoginRegister = ({ isOpen, onClose, onLogin }) => {
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
 
+  // Для логина
+  const [loginPhone, setLoginPhone] = useState('');
+  const [loginPassword, setLoginPassword] = useState('');
+  const [loginError, setLoginError] = useState('');
+
+
 const handleRegistration = () => {
   if (!name || !surname || !phone || !password || !confirmPassword) {
     setError('Пожалуйста, заполните все поля');
@@ -29,19 +37,16 @@ const LoginRegister = ({ isOpen, onClose, onLogin }) => {
   const newUser = { name, surname, phone, password };
   addUser(newUser);
   setError('');
-    // Автоматически входим после регистрации
+  setLoggedInUser(newUser); // <--- сохраняем пользователя в localStorage
   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);
   if (user) {
     setLoginError('');
+    setLoggedInUser(user); // <--- сохраняем пользователя в localStorage
     onLogin(user);
     onClose();
   } else {

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');
+};