38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
// 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>
|
|
);
|
|
} |