creating a database importing it into registration and logging in

src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
@@ -10,6 +10,9 @@ import SecureCheckout from './components/SecureCheckout';
 import ShippingDetails from './components/ShippingDetails';
 import DeliveryForm from './components/DeliveryForm';
 import OrderTracking from './components/OrderTracking';
+import { users, addUser } from './mockData';
+import LoginRegister from './components/LoginRegister'; // Import LoginRegister
+
 import './App.css';
 
 function Home() {
@@ -21,15 +24,31 @@ function Home() {
       <SecureCheckout />
       <DeliveryOptions />
       <ShippingDetails />
-      <Footer/>
+      <Footer />
     </>
   );
 }
 
 function App() {
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const handleLogin = (user) => {
+    setCurrentUser(user);
+  };
+
+  const handleLogout = () => {
+    setCurrentUser(null);
+  };
+
   return (
     <div className="App">
-      <Header />
+      <Header onLogin={handleLogin} /> {/* Pass handleLogin to Header */}
+      {currentUser && (
+        <div>
+          <h2>Привет, {currentUser.name}</h2>
+          <button onClick={handleLogout}>Выйти</button>
+        </div>
+      )}
       <Routes>
         {/* Parent Route */}
         <Route path="/" element={<Home />} />
@@ -37,8 +56,8 @@ function App() {
         {/* Nested Routes */}
         <Route path="/delivery-form" element={<DeliveryForm />} />
         <Route path="/order-tracking" element={<OrderTracking />} />
-        
       </Routes>
+      <Footer />
     </div>
   );
 }

src/components/Header.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import './Header.css';
-import ModalRegistration from './LoginRegister';
+import LoginRegister from './LoginRegister'; // Убедитесь, что импорт есть
 
-function Header() {
+function Header({ onLogin}) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const navigate = useNavigate();
 
@@ -39,7 +39,11 @@ function Header() {
           Order
         </button>
       </div>
-      <ModalRegistration isOpen={isModalOpen} onClose={handleCloseModal} />
+      <LoginRegister 
+        isOpen={isModalOpen} 
+        onClose={handleCloseModal} 
+        onLogin={onLogin} 
+      />
     </header>
   );
 }

src/components/LoginModal.js

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import Modal from 'react-modal';
+import { users, addUser } from '../mockData';
+
+const LoginModal = ({ isOpen, onClose, onLogin }) => {
+  const [phone, setPhone] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleLogin = () => {
+    const user = users.find(u => u.phone === phone && u.password === password);
+    if (user) {
+      setError('');
+      onLogin(user);
+      onClose();
+    } else {
+      setError('Неверный номер телефона или пароль');
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      style={{
+        overlay: { backgroundColor: 'rgba(0, 0, 0, 0.75)' },
+        content: {
+          top: '50%',
+          left: '50%',
+          right: 'auto',
+          bottom: 'auto',
+          marginRight: '-50%',
+          transform: 'translate(-50%, -50%)',
+          padding: '20px',
+          border: 'none',
+          borderRadius: '10px',
+          boxShadow: '0px 0px 10px rgba(0,0,0,0.5)',
+          backgroundColor: '#f8f8f8',
+          fontFamily: 'Arial, sans-serif',
+        },
+      }}
+    >
+      <h2 style={{ color: '#333', textAlign: 'center' }}>Вход</h2>
+      {error && <p style={{ color: 'red', textAlign: 'center' }}>{error}</p>}
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Номер телефона:</label>
+        <input
+          type="tel"
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '8px',
+            borderRadius: '5px',
+            border: '1px solid #ddd',
+            boxSizing: 'border-box',
+          }}
+        />
+      </div>
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Пароль:</label>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <input
+            type={showPassword ? 'text' : 'password'}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '8px',
+              borderRadius: '5px',
+              border: '1px solid #ddd',
+              boxSizing: 'border-box',
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            style={{
+              marginLeft: '10px',
+              padding: '8px 12px',
+              border: 'none',
+              borderRadius: '5px',
+              backgroundColor: '#f0f0f0',
+              cursor: 'pointer',
+            }}
+          >
+            {showPassword ? 'Скрыть' : 'Показать'}
+          </button>
+        </div>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <button
+          onClick={handleLogin}
+          style={{
+            backgroundColor: '#5cb85c',
+            color: 'white',
+            padding: '10px 15px',
+            border: 'none',
+            borderRadius: '5px',
+            cursor: 'pointer',
+          }}
+        >
+          Войти
+        </button>
+        <button
+          onClick={onClose}
+          style={{
+            backgroundColor: '#d9534f',
+            color: 'white',
+            padding: '10px 15px',
+            border: 'none',
+            borderRadius: '5px',
+            cursor: 'pointer',
+          }}
+        >
+          Отмена
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default LoginModal;

src/components/LoginRegister.js

@@ -1,28 +1,60 @@
 import React, { useState } from 'react';
 import Modal from 'react-modal';
+import { users, addUser } from '../mockData';
 
-const RegistrationModal = ({ isOpen, onClose }) => {
+const LoginRegister = ({ isOpen, onClose, onLogin }) => {
+  const [isRegistering, setIsRegistering] = useState(false);
   const [name, setName] = useState('');
   const [surname, setSurname] = useState('');
   const [phone, setPhone] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState('');
 
   const handleRegistration = () => {
-    // Здесь будет логика регистрации
-    console.log('Регистрация:', name, surname, phone, password);
+    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('Неверный номер телефона или пароль');
+    }
+  };
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onClose}
       style={{
-        overlay: {
-          backgroundColor: 'rgba(0, 0, 0, 0.75)',
-        },
+        overlay: { backgroundColor: 'rgba(0, 0, 0, 0.75)' },
         content: {
           top: '50%',
           left: '50%',
@@ -34,12 +66,15 @@ const RegistrationModal = ({ isOpen, onClose }) => {
           border: 'none',
           borderRadius: '10px',
           boxShadow: '0px 0px 10px rgba(0,0,0,0.5)',
-          backgroundColor: '#f8f8f8', // Светлый фон
+          backgroundColor: '#f8f8f8',
           fontFamily: 'Arial, sans-serif',
         },
       }}
     >
+      {isRegistering ? (
+        <>
           <h2 style={{ color: '#333', textAlign: 'center' }}>Регистрация</h2>
+          {error && <p style={{ color: 'red', textAlign: 'center' }}>{error}</p>}
           <div style={{ marginBottom: '15px' }}>
             <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Имя:</label>
             <input
@@ -146,7 +181,7 @@ const RegistrationModal = ({ isOpen, onClose }) => {
               Зарегистрироваться
             </button>
             <button
-          onClick={onClose}
+              onClick={() => setIsRegistering(false)}
               style={{
                 backgroundColor: '#d9534f',
                 color: 'white',
@@ -159,8 +194,102 @@ const RegistrationModal = ({ isOpen, onClose }) => {
               Назад
             </button>
           </div>
+        </>
+      ) : (
+        <>
+          <h2 style={{ color: '#333', textAlign: 'center' }}>Вход</h2>
+          {loginError && <p style={{ color: 'red', textAlign: 'center' }}>{loginError}</p>}
+          <div style={{ marginBottom: '15px' }}>
+            <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Номер телефона:</label>
+            <input
+              type="tel"
+              value={loginPhone}
+              onChange={(e) => setLoginPhone(e.target.value)}
+              style={{
+                width: '100%',
+                padding: '8px',
+                borderRadius: '5px',
+                border: '1px solid #ddd',
+                boxSizing: 'border-box',
+              }}
+            />
+          </div>
+          <div style={{ marginBottom: '15px' }}>
+            <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Пароль:</label>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <input
+                type={showPassword ? 'text' : 'password'}
+                value={loginPassword}
+                onChange={(e) => setLoginPassword(e.target.value)}
+                style={{
+                  width: '100%',
+                  padding: '8px',
+                  borderRadius: '5px',
+                  border: '1px solid #ddd',
+                  boxSizing: 'border-box',
+                }}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                style={{
+                  marginLeft: '10px',
+                  padding: '8px 12px',
+                  border: 'none',
+                  borderRadius: '5px',
+                  backgroundColor: '#f0f0f0',
+                  cursor: 'pointer',
+                }}
+              >
+                {showPassword ? 'Скрыть' : 'Показать'}
+              </button>
+            </div>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <button
+              onClick={handleLogin}
+              style={{
+                backgroundColor: '#5cb85c',
+                color: 'white',
+                padding: '10px 15px',
+                border: 'none',
+                borderRadius: '5px',
+                cursor: 'pointer',
+              }}
+            >
+              Войти
+            </button>
+            <button
+              onClick={() => setIsRegistering(true)}
+              style={{
+                backgroundColor: '#007bff',
+                color: 'white',
+                padding: '10px 15px',
+                border: 'none',
+                borderRadius: '5px',
+                cursor: 'pointer',
+              }}
+            >
+              Регистрация
+            </button>
+            <button
+              onClick={onClose}
+              style={{
+                backgroundColor: '#d9534f',
+                color: 'white',
+                padding: '10px 15px',
+                border: 'none',
+                borderRadius: '5px',
+                cursor: 'pointer',
+              }}
+            >
+              Отмена
+            </button>
+          </div>
+        </>
+      )}
     </Modal>
   );
 };
 
-export default RegistrationModal;
+export default LoginRegister;

src/mockData.js

@@ -0,0 +1,14 @@
+// mockData.js
+export let users = [{
+    id: 1,
+    name: 'Иван',
+    surname: 'Иванов',
+    phone: '1234567890',
+    password: 'password123',
+}, ];
+
+// Функция для добавления пользователя (имитация записи в БД)
+export const addUser = (user) => {
+    user.id = users.length + 1;
+    users.push(user);
+};