first commit of refactor

frontend/src/pages/Login.jsx

@@ -0,0 +1,143 @@
+/**
+ * Login Page
+ * 
+ * Allows existing users to sign in with email and password
+ */
+
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+
+    // Validation
+    if (!email || !password) {
+      setError('Please fill in all fields');
+      return;
+    }
+
+    try {
+      setError('');
+      setLoading(true);
+      await login(email, password);
+      navigate('/addresses'); // Redirect to main app
+    } catch (err) {
+      setError('Failed to log in: ' + err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div style={{ 
+      maxWidth: '400px', 
+      margin: '4rem auto', 
+      padding: '2rem',
+      border: '1px solid #333',
+      borderRadius: '8px'
+    }}>
+      <h1 style={{ marginBottom: '2rem', textAlign: 'center' }}>
+        Koin Ping - Login
+      </h1>
+
+      {error && (
+        <div style={{ 
+          padding: '0.75rem', 
+          marginBottom: '1rem', 
+          backgroundColor: '#ff000020',
+          border: '1px solid #ff0000',
+          borderRadius: '4px',
+          color: '#ff6666'
+        }}>
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <div style={{ marginBottom: '1rem' }}>
+          <label style={{ display: 'block', marginBottom: '0.5rem' }}>
+            Email
+          </label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={loading}
+            style={{
+              width: '100%',
+              padding: '0.5rem',
+              fontSize: '1rem',
+              backgroundColor: '#1a1a1a',
+              border: '1px solid #444',
+              borderRadius: '4px',
+              color: 'white'
+            }}
+            required
+          />
+        </div>
+
+        <div style={{ marginBottom: '1.5rem' }}>
+          <label style={{ display: 'block', marginBottom: '0.5rem' }}>
+            Password
+          </label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            disabled={loading}
+            style={{
+              width: '100%',
+              padding: '0.5rem',
+              fontSize: '1rem',
+              backgroundColor: '#1a1a1a',
+              border: '1px solid #444',
+              borderRadius: '4px',
+              color: 'white'
+            }}
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          style={{
+            width: '100%',
+            padding: '0.75rem',
+            fontSize: '1rem',
+            backgroundColor: loading ? '#333' : '#0066cc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: loading ? 'not-allowed' : 'pointer'
+          }}
+        >
+          {loading ? 'Logging in...' : 'Log In'}
+        </button>
+      </form>
+
+      <div style={{ marginTop: '1.5rem', textAlign: 'center' }}>
+        <p style={{ color: '#999' }}>
+          Don't have an account?{' '}
+          <Link 
+            to="/signup" 
+            style={{ color: '#0066cc', textDecoration: 'none' }}
+          >
+            Sign up here
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+