feat(login): implement LoginForm component with improved error handling and styling

frontend/app/login/page.tsx

@@ -1,14 +1,103 @@
 'use client';
 
-import { useState, FormEvent } from 'react';
+import { useState, FormEvent, Suspense } from 'react';
 import { signIn } from 'next-auth/react';
 import { useRouter, useSearchParams } from 'next/navigation';
 
-export default function LoginPage() {
+function LoginForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const callbackUrl = searchParams?.get('callbackUrl') ?? '/';
 
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    const result = await signIn('credentials', {
+      username,
+      password,
+      redirect: false,
+    });
+    setLoading(false);
+    if (result?.error) {
+      setError('Felaktigt användarnamn eller lösenord');
+    } else {
+      router.push(callbackUrl);
+      router.refresh();
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <div>
+        <label htmlFor="username" style={{ display: 'block', marginBottom: 4 }}>
+          Användarnamn
+        </label>
+        <input
+          id="username"
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+          autoComplete="username"
+          style={{ width: '100%', padding: '8px 12px', borderRadius: 6, border: '1px solid #ccc', fontSize: '1rem' }}
+        />
+      </div>
+      <div>
+        <label htmlFor="password" style={{ display: 'block', marginBottom: 4 }}>
+          Lösenord
+        </label>
+        <input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          autoComplete="current-password"
+          style={{ width: '100%', padding: '8px 12px', borderRadius: 6, border: '1px solid #ccc', fontSize: '1rem' }}
+        />
+      </div>
+      {error && <p style={{ color: 'red', margin: 0 }}>{error}</p>}
+      <button
+        type="submit"
+        disabled={loading}
+        style={{
+          padding: '10px',
+          background: '#2563eb',
+          color: 'white',
+          border: 'none',
+          borderRadius: 6,
+          fontSize: '1rem',
+          cursor: loading ? 'not-allowed' : 'pointer',
+          opacity: loading ? 0.7 : 1,
+        }}
+      >
+        {loading ? 'Loggar in...' : 'Logga in'}
+      </button>
+      <p style={{ textAlign: 'center', fontSize: '0.9rem' }}>
+        Inget konto? <a href="/register">Skapa konto</a>
+      </p>
+    </form>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <main style={{ maxWidth: 400, margin: '80px auto', padding: '0 1rem' }}>
+      <h1 style={{ marginBottom: '1.5rem' }}>Logga in</h1>
+      <Suspense fallback={null}>
+        <LoginForm />
+      </Suspense>
+    </main>
+  );
+}
+
+
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');