Index: my-react-app/src/components/AuthForm.js
===================================================================
--- my-react-app/src/components/AuthForm.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/AuthForm.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -0,0 +1,204 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import classNames from 'classnames';
+import MembershipsEnum from './MembershipsEnum';
+
+const AuthForm = () => {
+    const navigate = useNavigate();
+    const [activeTab, setActiveTab] = useState('login');
+    const [credentials, setCredentials] = useState({
+        firstName: '',
+        lastName: '',
+        email: '',
+        password: '',
+        phone: '',
+        address: '',
+        membershipLevel: ''
+    });
+    const [error, setError] = useState('');
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setCredentials({ ...credentials, [name]: value });
+    };
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        try {
+            const response = await axios.post('http://localhost:8081/api/login', {
+                email: credentials.email,
+                password: credentials.password
+            });
+
+            const { token } = response.data;
+            localStorage.setItem('token', token);
+            navigate('/');
+        } catch (err) {
+            setError('Login failed. Please check your credentials.');
+        }
+    };
+
+    const handleRegister = async (e) => {
+        e.preventDefault();
+        try {
+            await axios.post('http://localhost:8081/api/register', {
+                firstName: credentials.firstName,
+                lastName: credentials.lastName,
+                email: credentials.email,
+                password: credentials.password,
+                phone: credentials.phone,
+                address: credentials.address,
+                membershipLevel: credentials.membershipLevel
+            });
+            setActiveTab('login');
+            alert('Registration successful. Please log in.');
+        } catch (err) {
+            setError('Registration failed. Please try again.');
+        }
+    };
+
+    return (
+        <div className="container mt-5">
+            <ul className="nav nav-pills nav-justified mb-3">
+                <li className="nav-item">
+                    <button
+                        className={classNames('nav-link', { active: activeTab === 'login' })}
+                        onClick={() => setActiveTab('login')}
+                    >
+                        Login
+                    </button>
+                </li>
+                <li className="nav-item">
+                    <button
+                        className={classNames('nav-link', { active: activeTab === 'register' })}
+                        onClick={() => setActiveTab('register')}
+                    >
+                        Register
+                    </button>
+                </li>
+            </ul>
+
+            {activeTab === 'login' && (
+                <form onSubmit={handleLogin}>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="email"
+                            name="email"
+                            className="form-control"
+                            placeholder="Email"
+                            value={credentials.email}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="password"
+                            name="password"
+                            className="form-control"
+                            placeholder="Password"
+                            value={credentials.password}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    {error && <div className="text-danger mb-3">{error}</div>}
+                    <button type="submit" className="btn btn-primary w-100">Login</button>
+                </form>
+            )}
+
+            {activeTab === 'register' && (
+                <form onSubmit={handleRegister}>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="text"
+                            name="firstName"
+                            className="form-control"
+                            placeholder="First Name"
+                            value={credentials.firstName}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="text"
+                            name="lastName"
+                            className="form-control"
+                            placeholder="Last Name"
+                            value={credentials.lastName}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="email"
+                            name="email"
+                            className="form-control"
+                            placeholder="Email"
+                            value={credentials.email}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="password"
+                            name="password"
+                            className="form-control"
+                            placeholder="Password"
+                            value={credentials.password}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="text"
+                            name="phone"
+                            className="form-control"
+                            placeholder="Phone"
+                            value={credentials.phone}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="text"
+                            name="address"
+                            className="form-control"
+                            placeholder="Address"
+                            value={credentials.address}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <select
+                            name="membershipLevel"
+                            className="form-control"
+                            value={credentials.membershipLevel}
+                            onChange={handleChange}
+                            required
+                        >
+                            <option value="">Select Membership Type</option>
+                            {MembershipsEnum().map((membership, index) => (
+                                <option key={index} value={membership}>
+                                    {membership}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    {error && <div className="text-danger mb-3">{error}</div>}
+                    <button type="submit" className="btn btn-success w-100">Register</button>
+                </form>
+            )}
+        </div>
+    );
+};
+
+export default AuthForm;
