Initial commit

web/src/components/LoginPage.tsx

@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { useAuth } from '../hooks/useAuth';
+
+const styles = {
+  container: {
+    minHeight: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'linear-gradient(135deg, #0f0f14 0%, #1a1a24 50%, #0f0f14 100%)',
+    padding: '20px',
+  },
+  card: {
+    width: '100%',
+    maxWidth: '400px',
+    background: '#1a1a24',
+    borderRadius: '24px',
+    border: '1px solid rgba(255,255,255,0.08)',
+    padding: '48px 40px',
+    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
+  },
+  logo: {
+    textAlign: 'center' as const,
+    marginBottom: '40px',
+  },
+  logoText: {
+    fontFamily: "'Clash Display', sans-serif",
+    fontSize: '42px',
+    fontWeight: 700,
+    background: 'linear-gradient(135deg, #c41e3a 0%, #e91e63 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    letterSpacing: '-1px',
+  },
+  subtitle: {
+    color: '#6b7280',
+    fontSize: '14px',
+    marginTop: '8px',
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '20px',
+  },
+  inputGroup: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '8px',
+  },
+  label: {
+    fontSize: '12px',
+    fontWeight: 600,
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.1em',
+    color: '#6b7280',
+  },
+  input: {
+    padding: '16px 18px',
+    background: '#24242f',
+    border: '1px solid rgba(255,255,255,0.1)',
+    borderRadius: '12px',
+    color: '#ffffff',
+    fontSize: '16px',
+    outline: 'none',
+    transition: 'border-color 0.2s, box-shadow 0.2s',
+  },
+  button: {
+    padding: '16px 24px',
+    background: 'linear-gradient(135deg, #c41e3a 0%, #e91e63 100%)',
+    border: 'none',
+    borderRadius: '12px',
+    color: '#ffffff',
+    fontSize: '16px',
+    fontWeight: 600,
+    cursor: 'pointer',
+    transition: 'opacity 0.2s, transform 0.2s',
+    marginTop: '8px',
+  },
+  error: {
+    padding: '12px 16px',
+    background: 'rgba(239, 68, 68, 0.15)',
+    border: '1px solid rgba(239, 68, 68, 0.3)',
+    borderRadius: '10px',
+    color: '#ef4444',
+    fontSize: '14px',
+    textAlign: 'center' as const,
+  },
+};
+
+export function LoginPage() {
+  const { login } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    const success = await login(username, password);
+
+    if (!success) {
+      setError('Invalid username or password');
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <div style={styles.logo}>
+          <div style={styles.logoText}>Feeld</div>
+          <p style={styles.subtitle}>Web Client</p>
+        </div>
+
+        <form style={styles.form} onSubmit={handleSubmit}>
+          <div style={styles.inputGroup}>
+            <label style={styles.label}>Username</label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              style={styles.input}
+              placeholder="Enter username"
+              autoComplete="username"
+              autoFocus
+            />
+          </div>
+
+          <div style={styles.inputGroup}>
+            <label style={styles.label}>Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              style={styles.input}
+              placeholder="Enter password"
+              autoComplete="current-password"
+            />
+          </div>
+
+          {error && <div style={styles.error}>{error}</div>}
+
+          <button
+            type="submit"
+            style={{
+              ...styles.button,
+              opacity: loading ? 0.7 : 1,
+              cursor: loading ? 'wait' : 'pointer',
+            }}
+            disabled={loading}
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}