Almost done

2026-03-05 17:35:27 +01:00
parent 278471e53b
commit e44fceaf32
30 changed files with 1077 additions and 572 deletions
@@ -0,0 +1,38 @@
+// app/login/LoginForm.tsx
+
+'use client';
+
+import { useActionState } from 'react';
+import { loginAction } from './actions';
+
+export default function LoginForm() {
+    const [state, formAction, isPending] = useActionState(loginAction, null);
+
+    return (
+        <form action={formAction} className="bg-white p-8 rounded-lg shadow-xl w-full max-w-sm transition-all duration-300">
+            <h1 className="text-2xl font-bold mb-6 text-center text-[#406185]">Admin Login</h1>
+
+            {state?.error && (
+                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded mb-4 text-center text-sm font-bold animate-shake">
+                    {state.error}
+                </div>
+            )}
+
+            <input
+                type="password"
+                name="password"
+                placeholder="Lösenord"
+                className="w-full border p-3 rounded mb-4 focus:ring-2 focus:ring-[#406185] outline-none transition-all"
+                required
+            />
+
+            <button
+                type="submit"
+                disabled={isPending}
+                className="w-full bg-[#406185] text-white p-3 rounded font-bold hover:bg-black disabled:bg-gray-400 transition-all active:scale-95"
+            >
+                {isPending ? 'Loggar in...' : 'Logga in'}
+            </button>
+        </form>
+    );
+}