Basic frontend

frontend/src/pages/Login.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { authService, LoginData } from '../services/membershipService';
+
+const Login: React.FC = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState<LoginData>({
+    email: '',
+    password: ''
+  });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      await authService.login(formData);
+      navigate('/dashboard');
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Login failed. Please check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      <div className="auth-card">
+        <h2>Welcome Back</h2>
+        <p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
+          Log in to your membership account
+        </p>
+
+        {error && <div className="alert alert-error">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="email">Email Address</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              required
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={loading}
+            style={{ width: '100%', marginTop: '16px' }}
+          >
+            {loading ? 'Logging in...' : 'Log In'}
+          </button>
+        </form>
+
+        <div className="form-footer">
+          <div style={{ marginBottom: '16px' }}>
+            <Link to="/forgot-password" style={{ color: '#0066cc', textDecoration: 'none' }}>
+              Forgot your password?
+            </Link>
+          </div>
+          <button
+            type="button"
+            className="btn btn-secondary"
+            onClick={() => navigate('/register')}
+            style={{ width: '100%' }}
+          >
+            Join as New User
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;