change auth form design

src/components/Auth/FlipCard.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import './auth.css';
+import Login from './Login';
+import Register from './Register';
+
+const FlipCard = () => {
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  const handleFlip = () => {
+    setIsFlipped(!isFlipped);
+  };
+
+  return (
+    <div className="flip-card-container">
+      <div className={`flip-card ${isFlipped ? 'flipped' : ''}`}>
+        <div className="flip-card-front">
+          <h2>Login</h2>
+          <Login />
+          <p className="toggle-link" onClick={handleFlip}>
+            Don't have an account? Register here
+          </p>
+        </div>
+        <div className="flip-card-back">
+          <h2>Register</h2>
+          <Register />
+          <p className="toggle-link" onClick={handleFlip}>
+            Already have an account? Login here
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FlipCard;

src/components/Auth/Login.js

@@ -1,44 +1,46 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { useAuth } from './AuthContext';
 
-const Login = ({ onClose }) => {
+const Login = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
-  const { login } = useAuth();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
       const response = await axios.post('/auth/login', { username, password });
       localStorage.setItem('token', response.data.token);
-      login({ username });
-      onClose();
+      // handle login success
     } catch (error) {
       console.error('Login Error:', error.response ? error.response.data : error.message);
     }
   };
 
-  return (<div>
-    <form onSubmit={handleSubmit}>
-      <input
-        type="text"
-        placeholder="Username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-        required
-      />
-      <input
-        type="password"
-        placeholder="Password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        required
-      />
-      <button type="submit">Login</button>
+  return (
+    <form className="auth-form" onSubmit={handleSubmit} >
+      <div className="input-container">
+        <input
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+          className="input-field"
+        />
+        <label className="form-label">Username</label>
+      </div>
+      <div className="input-container">
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          className="input-field"
+        />
+        <label className="form-label">Password</label>
+      </div>
+      <button type="submit" className="submit-button">Login</button>
     </form>
-    </div>
   );
 };
 
-export default Login;
+export default Login;

src/components/Auth/LoginModal.js

@@ -1,8 +1,7 @@
-// LoginModal.js
 import React, { useEffect } from 'react';
-import Login from './Login';
+import FlipCard from './FlipCard';
 
-const LoginModal = ({ isOpen, onClose, title }) => {
+const LoginModal = ({ isOpen, onClose }) => {
   const handleOutsideClick = (e) => {
     if (e.target.className === 'modal-overlay') {
       onClose();
@@ -24,9 +23,7 @@ const LoginModal = ({ isOpen, onClose, title }) => {
 
   return (
     <div className="modal-overlay">
-      <div className="modal-content">
-        <Login onClose={onClose} />
-      </div>
+        <FlipCard onClose={onClose} />
     </div>
   );
 };

src/components/Auth/Register.js

@@ -1,51 +1,54 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 
-const Register = ({ onClose }) => {
+const Register = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [email, setEmail] = useState('');
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      const response = await axios.post('/auth/register', { username, password, email });
-      onClose();
+      await axios.post('/auth/register', { username, password, email });
+      // handle registration success
     } catch (error) {
       console.error('Registration Error:', error.response ? error.response.data : error.message);
     }
   };
 
   return (
-    <form className="register-form" onSubmit={handleSubmit}>
-      <input
-        type="text"
-        className="form-input"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-        required
-      />
-      <label className="form-label">Username</label>
-
-      <input
-        type="email"
-        className="form-input"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        required
-      />
-      <label className="form-label">Email</label>
-
-      <input
-        type="password"
-        className="form-input"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        required
-      />
-      <label className="form-label">Password</label>
-
-      <button type="submit">Register</button>
+    <form className="auth-form" onSubmit={handleSubmit}>
+      <div className="input-container">
+        <input
+          type="text"
+          className="input-field"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+        />
+        <label className="form-label">Username</label>
+      </div>
+      <div className="input-container">
+        <input
+          type="email"
+          className="input-field"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <label className="form-label">Email</label>
+      </div>
+      <div className="input-container">
+        <input
+          type="password"
+          className="input-field"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+        <label className="form-label">Password</label>
+      </div>
+      <button type="submit" className="submit-button">Register</button>
     </form>
   );
 };