main page

src/pages/LoginPage.jsx

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  
+  const { login } = useAuth()
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    const result = await login(email, password)
+    
+    if (result.success) {
+      navigate('/tickets')
+    } else {
+      setError(result.error || 'Login failed')
+    }
+    
+    setLoading(false)
+  }
+
+  return (
+    <div style={{ 
+      minHeight: '100vh', 
+      display: 'flex', 
+      alignItems: 'center', 
+      justifyContent: 'center',
+      background: '#f1f1f1'
+    }}>
+      <div className="card" style={{ width: '400px' }}>
+        <div className="card-header text-center">
+          <h2>NetWEB Systems WOMS 2.0</h2>
+        </div>
+        <div className="card-body">
+          <form onSubmit={handleSubmit}>
+            {error && (
+              <div className="bg-red text-white p-1 mb-2" style={{ borderRadius: '4px' }}>
+                {error}
+              </div>
+            )}
+            
+            <div className="form-group">
+              <label className="form-label">Email</label>
+              <input
+                type="email"
+                className="form-control"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">Password</label>
+              <input
+                type="password"
+                className="form-control"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+
+            <button 
+              type="submit" 
+              className="btn btn-green"
+              style={{ width: '100%' }}
+              disabled={loading}
+            >
+              {loading ? 'Logging in...' : 'Login'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}