From 53418cf41c90f198ab57a6a528b2dae13a3613fb Mon Sep 17 00:00:00 2001
From: minhtrannhat <minh@minhtrannhat.com>
Date: Wed, 8 Jan 2025 12:00:00 -0500
Subject: [PATCH] feat(web): add login page

---
 web/app/login/page.tsx | 62 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 web/app/login/page.tsx

diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx
new file mode 100644
index 0000000..a951269
--- /dev/null
+++ b/web/app/login/page.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import { api } from '@/lib/api';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await api.login(email, password);
+      localStorage.setItem('accessToken', response.accessToken);
+      localStorage.setItem('refreshToken', response.refreshToken);
+      localStorage.setItem('activeOrg', JSON.stringify(response.activeOrg));
+      api.setAccessToken(response.accessToken);
+      router.push('/dashboard');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container" style={{ maxWidth: '400px', marginTop: '4rem' }}>
+      <h1 style={{ marginBottom: '2rem', textAlign: 'center' }}>IncidentOps</h1>
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <h2>Login</h2>
+        {error && <p style={{ color: 'var(--error)' }}>{error}</p>}
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+        <button type="submit" disabled={loading}>
+          {loading ? 'Logging in...' : 'Login'}
+        </button>
+        <p style={{ textAlign: 'center' }}>
+          Don't have an account? <a href="/register">Register</a>
+        </p>
+      </form>
+    </div>
+  );
+}