diff --git a/src/App.js b/src/App.js
index 13307db..a3949ea 100644
--- a/src/App.js
+++ b/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 (
-
{/* Pass handleLogin to Header */}
+
{currentUser && (
Привет, {currentUser.name}
)}
+
setIsLoginOpen(false)}
+ onLogin={(user) => {
+ handleLogin(user);
+ setIsLoginOpen(false);
+ }}
+ />
- {/* Parent Route */}
} />
-
- {/* Nested Routes */}
} />
} />
diff --git a/src/components/Header.js b/src/components/Header.js
index cf24748..f4c85c0 100644
--- a/src/components/Header.js
+++ b/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
- {
+ onLogin(user);
+ setIsModalOpen(false); // Закрыть модалку после логина/регистрации
+ }}
/>
);
diff --git a/src/components/LoginRegister.js b/src/components/LoginRegister.js
index 9542170..8124c6b 100644
--- a/src/components/LoginRegister.js
+++ b/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);
- if (user) {
- setLoginError('');
- onLogin(user);
- onClose();
- } else {
- setLoginError('Неверный номер телефона или пароль');
- }
- };
+
+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('');
+ 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 (
{
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;
};
diff --git a/src/utils/auth.js b/src/utils/auth.js
new file mode 100644
index 0000000..8bdd05d
--- /dev/null
+++ b/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');
+};