- modal window into a separate component

-profiles

Author: bogutskii

.env

@@ -1,2 +1,2 @@
 REACT_APP_API_URL_LOCAL=http://localhost:8000
-REACT_APP_JWT_SECRET=cvhg^&T*Rd6878rVCGFHGHJVfytchj
+REACT_APP_JWT_SECRET=asd

package-lock.json

@@ -15,15 +15,16 @@
     "react": "17.0.2",
     "react-colorful": "^5.5.1",
     "react-dom": "17.0.2",
-    "react-redux": "^7.2.6",
+    "react-redux": "^7.2.9",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.0",
-    "redux": "^4.1.2",
+    "redux": "^4.2.1",
     "redux-devtools-extension": "^2.13.8",
-    "redux-thunk": "^2.4.1",
+    "redux-thunk": "^2.4.2",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "axios": "1.6.0",
+    "axios": "^1.6.0",
     "prettier": "2.5.1"
   },
   "scripts": {

package.json

@@ -1,14 +1,37 @@
+import React, { useEffect } from 'react';
 import './styles.css';
 import Field from './components/Field/Field.js';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { Header } from './components/Header';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Register from './components/Auth/Register';
+import Login from './components/Auth/Login';
+import Profile from './components/Profile/Profile';
+import { refreshToken } from './components/redux/actions';
 
 const App = (props) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      dispatch(refreshToken());
+    }, 30 * 60 * 1000); // Каждые 30 минут
+
+    return () => clearInterval(interval);
+  }, [dispatch]);
+
   return (
-    <div className="App">
-      <Header username={props.username} />
-      <Field />
-    </div>
+    <Router>
+      <div className="App">
+        <Header username={props.username} />
+        <Routes>
+          <Route path="/" element={<Field />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/profile" element={<Profile />} /> {/* Добавьте маршрут профиля */}
+        </Routes>
+      </div>
+    </Router>
   );
 };
 

src/App.js

@@ -1,22 +1,20 @@
 import React, { useState } from 'react';
-import axios from 'axios';
-import CryptoJS from 'crypto-js';
+import { useDispatch, useSelector } from 'react-redux';
+import { loginUser } from '../redux/actions';
+import { useNavigate } from 'react-router-dom';
 
 const Login = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [message, setMessage] = useState('');
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const authError = useSelector((state) => state.authError);
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
-    try {
-      const encryptedPassword = CryptoJS.AES.encrypt(password, process.env.REACT_APP_JWT_SECRET).toString();
-      const response = await axios.post(`${process.env.REACT_APP_API_URL_LOCAL}/users/login`, { username, password: encryptedPassword });
-      localStorage.setItem('token', response.data.token);
-      setMessage('Login successful');
-    } catch (error) {
-      setMessage(error.response ? error.response.data.error : error.message);
-    }
+    const userData = { username, password };
+    dispatch(loginUser(userData, () => navigate('/profile')));
   };
 
   return (
@@ -42,7 +40,8 @@ const Login = () => {
         <label className="form-label">Password</label>
       </div>
       <button type="submit" className="submit-button">Login</button>
-      {message && <p>{message}</p>}
+      {message && <p className="error-message">{message}</p>}
+      {authError && <p className="error-message">{authError}</p>}
     </form>
   );
 };

src/components/Auth/Login.js

@@ -1,30 +1,12 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import Modal from '../Modal/Modal';
 import FlipCard from './FlipCard';
 
 const LoginModal = ({ isOpen, onClose }) => {
-  const handleOutsideClick = (e) => {
-    if (e.target.className === 'modal-overlay') {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      document.addEventListener('mousedown', handleOutsideClick);
-    } else {
-      document.removeEventListener('mousedown', handleOutsideClick);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleOutsideClick);
-    };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
   return (
-    <div className="modal-overlay">
-        <FlipCard onClose={onClose} />
-    </div>
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <FlipCard onClose={onClose} />
+    </Modal>
   );
 };