5_7

Lab5/Bookfill/src/App.jsx

@@ -5,9 +5,11 @@ import { Outlet } from 'react-router-dom';
 import { CartProvider } from './components/cart/CartContext.jsx';
 import Footer from './components/footer/Footer.jsx';
 import Navigation from './components/navigation/Navigation.jsx';
+import { AuthProvider } from './components/logins/context/AuthContex.jsx';
 
 const App = ({ routes }) => {
   return (
+    <AuthProvider>
     <CartProvider>
       <Navigation routes={routes}></Navigation>
       <Container className='p-2' as='main' fluid>
@@ -16,6 +18,7 @@ const App = ({ routes }) => {
       <Footer />
       <Toaster position='top-center' reverseOrder={true} />
     </CartProvider>
+    </AuthProvider>
   );
 };
 

Lab5/Bookfill/src/components/api/AuthService.js

@@ -0,0 +1,14 @@
+import { ApiClient } from './ApiClient';
+
+class AuthService {
+  static async login(credentials) {
+    return ApiClient.post('/login', credentials);
+  }
+
+  // Если у вас есть метод регистрации, то он тоже здесь.
+  static async register(userInfo) {
+    return ApiClient.post('/register', userInfo);
+  }
+}
+
+export default AuthService;

Lab5/Bookfill/src/components/logins/context/AuthContex.jsx

@@ -0,0 +1,39 @@
+import { createContext, useReducer } from 'react';
+import PropTypes from 'prop-types';
+
+const initialState = {
+  user: null,
+};
+
+const AuthReducer = (state, action) => {
+  switch (action.type) {
+    case 'LOGIN':
+      return {
+        ...state,
+        user: action.payload, // Предполагается, что payload содержит данные пользователя.
+      };
+    case 'LOGOUT':
+      return {
+        ...state,
+        user: null,
+      };
+    default:
+      return state;
+  }
+};
+
+export const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(AuthReducer, initialState);
+
+  return (
+    <AuthContext.Provider value={{ state, dispatch }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+AuthProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};

Lab5/Bookfill/src/components/logins/form/LoginForm.jsx

@@ -0,0 +1,63 @@
+import { useContext, useState } from 'react';
+import { Form, Button } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import AuthService from '../../api/AuthService';
+import { AuthContext } from '../context/AuthContex.jsx';
+
+const LoginForm = () => {
+  const [credentials, setCredentials] = useState({ email: '', password: '' });
+  const { dispatch } = useContext(AuthContext);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target; // Важно использовать name, а не id.
+    setCredentials({ ...credentials, [name]: value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const user = await AuthService.login(credentials);
+      dispatch({ type: 'LOGIN', payload: user });
+    } catch (error) {
+      console.error('Login error', error);
+      // Обработать ошибки логина
+    }
+  };
+
+  return (
+    <Form className="col-md-6 mx-auto mt-3 pt-5" onSubmit={handleSubmit}>
+      <Form.Group controlId="email">
+        <Form.Control
+          name="email"
+          type="email"
+          placeholder="mail@example.com"
+          className="mb-3"
+          onChange={handleChange}
+          value={credentials.email}
+          required
+        />
+      </Form.Group>
+      <Form.Group controlId="password">
+        <Form.Control
+          name="password"
+          type="password"
+          placeholder="Password"
+          className="mb-3"
+          onChange={handleChange}
+          value={credentials.password}
+          required
+        />
+      </Form.Group>
+      <div className="text-center">
+        <Button variant="primary" type="submit" className="w-50">
+          Login
+        </Button>
+        <Button variant="primary" as={Link} to='/admin' className="w-50">
+          Admin
+        </Button>
+      </div>
+    </Form>
+  );
+};
+
+export default LoginForm;

Lab5/Bookfill/src/pages/Login.jsx

@@ -1,29 +1,8 @@
 import './pages.css';
-import { Form, Button } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import LoginForm from '../components/logins/form/LoginForm.jsx';
 
 const Login = () => {
-    return (
-        <Form className="col-md-6 mr-sm-10 mx-auto mt-3 pt-5" method="get">
-            <Form.Group controlId="firstname">
-                <Form.Control type="text" placeholder="name" className="mb-3" required/>
-            </Form.Group>
-            <Form.Group controlId="email">
-                <Form.Control type="email" placeholder="mail@example.ru" className="mb-3" required/>
-            </Form.Group>
-            <Form.Group controlId="password">
-                <Form.Control type="password" placeholder="password" className="mb-3" required/>
-            </Form.Group>
-            <div className="text-center">
-                <Button variant="primary" type="submit" className="w-50">
-                    <>Submit</>
-                </Button>
-                <Button variant="primary" type="submit" as={Link} to='/admin' className="w-50">
-                    <>Admin</>
-                </Button>
-            </div>
-        </Form>
-    );
+    return <LoginForm />;
 };
 
 export default Login;