implement user authentication login page with form validation and session storage

app/login/page.tsx

@@ -1,23 +1,91 @@
 "use client";
 import Link from 'next/link';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 export default function LoginPage() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const [loading, setLoading] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [msg, setMsg] = useState<string | null>(null);
+
+  const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setErr(null);
+    setMsg(null);
+
+    if (!email || !password) {
+      setErr('Please enter username/email and password.');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await fetch('http://localhost:3050/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const contentType = res.headers.get('content-type') || '';
+      const data = contentType.includes('application/json') ? await res.json() : await res.text();
+
+      if (!res.ok) {
+        throw new Error((typeof data === 'object' && (data?.message || data?.error)) || `Login failed (${res.status})`);
+      }
+
+      try {
+        sessionStorage.setItem('USERID', data.userid);
+        localStorage.setItem('vgproducts_uid', data.userid);
+        localStorage.setItem('d4a_email', data.email);
+      } catch {
+        console.log('Error setting storage');
+      }
+
+      setMsg('Login successful!');
+      setTimeout(() => router.push('/'), 500); // Redirect to homepage or dashboard after login
+    } catch (e: any) {
+      setErr(e?.message || 'Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <div className="auth-page">
       <div className="auth-card">
         <h1 className="auth-title"><span>Login</span></h1>
         <p className="auth-sub">Access your pricing and order history.</p>
-        
-        <form className="auth-form" onSubmit={(e) => e.preventDefault()}>
+
+        {err && <div style={{ color: 'red', marginBottom: '10px', fontSize: '14px', background: 'rgba(255,0,0,0.1)', padding: '8px', borderRadius: '4px' }}>{err}</div>}
+        {msg && <div style={{ color: 'green', marginBottom: '10px', fontSize: '14px', background: 'rgba(0,255,0,0.1)', padding: '8px', borderRadius: '4px' }}>{msg}</div>}
+
+        <form className="auth-form" onSubmit={submitForm}>
           <div className="form-group">
-            <label className="form-label">Username</label>
-            <input className="form-input" type="text" placeholder="contractor_name" />
+            <label className="form-label">Username / Email</label>
+            <input
+              className="form-input"
+              type="text"
+              placeholder="Enter Customer Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
           </div>
           <div className="form-group">
             <label className="form-label">Password</label>
-            <input className="form-input" type="password" placeholder="••••••••" />
+            <input
+              className="form-input"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
           </div>
-          
+
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
               <input type="checkbox" id="remember" />
@@ -25,10 +93,12 @@ export default function LoginPage() {
             </div>
             <a href="#" style={{ fontSize: '12px', color: 'var(--orange)', textDecoration: 'none' }}>Forgot Password?</a>
           </div>
-          
-          <button type="submit" className="form-submit" style={{ width: '100%' }}>Login to Portal →</button>
+
+          <button type="submit" className="form-submit" style={{ width: '100%' }} disabled={loading}>
+            {loading ? 'Logging in...' : 'Login to Portal →'}
+          </button>
         </form>
-        
+
         {/* <div style={{ marginTop: '32px', textAlign: 'center', fontSize: '13px', color: 'rgba(255,255,255,0.5)' }}>
           Don't have a contractor account? <br />
           <Link href="/#quote" style={{ color: 'var(--orange)', fontWeight: 600, textDecoration: 'none' }}>Apply for contractor pricing</Link>