пятое сохранение

2025-04-29 00:40:35 +03:00
parent a84ea3be76
commit b03b0997e2
22 changed files with 813 additions and 353 deletions
--- a/keynest/src/components/AuthModal.js
+++ b/keynest/src/components/AuthModal.js
@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import Modal from 'react-modal';
+import { useAuth } from './AuthContext';
+
+Modal.setAppElement('#root');
+
+const AuthModal = ({ isOpen, onRequestClose }) => {
+  const [isLogin, setIsLogin] = useState(true);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const { login, register } = useAuth();
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      if (isLogin) {
+        await login({ username, password });
+      } else {
+        await register({ username, password });
+      }
+      onRequestClose();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const toggleAuthMode = () => {
+    setIsLogin(!isLogin);
+    setUsername('');
+    setPassword('');
+    setError('');
+  };
+
+  const modalStyles = {
+    overlay: {
+      backgroundColor: 'rgba(0, 0, 0, 0.5)'
+    },
+    content: {
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      transform: 'translate(-50%, -50%)',
+      padding: '20px',
+      width: '300px',
+      borderRadius: '8px',
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+      border: 'none'
+    }
+  };
+
+  const formStyles = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '15px'
+  };
+
+  const inputStyles = {
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid #ccc',
+    fontSize: '16px'
+  };
+
+  const buttonStyles = {
+    padding: '12px',
+    borderRadius: '4px',
+    border: 'none',
+    backgroundColor: '#242323',
+    color: 'white',
+    fontSize: '16px',
+    cursor: 'pointer',
+    ':hover': {
+      backgroundColor: '#0056b3'
+    }
+  };
+
+  const toggleButtonStyles = {
+    background: 'none',
+    border: 'none',
+    color: '#007bff',
+    cursor: 'pointer',
+    fontSize: '14px',
+    textDecoration: 'underline'
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={modalStyles}
+    >
+      <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>{isLogin ? 'Login' : 'Register'}</h2>
+      {error && <p style={{ color: 'red', textAlign: 'center' }}>{error}</p>}
+      <form onSubmit={handleSubmit} style={formStyles}>
+        <div>
+          <label htmlFor="username" style={{ marginBottom: '5px', display: 'block' }}>Username:</label>
+          <input
+            type="text"
+            id="username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            style={inputStyles}
+          />
+        </div>
+        <div>
+          <label htmlFor="password" style={{ marginBottom: '5px', display: 'block' }}>Password:</label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            style={inputStyles}
+          />
+        </div>
+        <button type="submit" style={buttonStyles}>{isLogin ? 'Log In' : 'Register'}</button>
+      </form>
+      <button onClick={toggleAuthMode} style={toggleButtonStyles}>
+        {isLogin ? 'Need an account? Register' : 'Already have an account? Login'}
+      </button>
+    </Modal>
+  );
+};
+
+export default AuthModal;