Good Morning

'use client';

import { useState } from 'react';

import { useRouter } from 'next/navigation';

1. export default function Login() {

  const router = useRouter();

  const [f, setF] = useState({ username: '', password: '' });

  const [err, setErr] = useState('');

  const [busy, setBusy] = useState(false);

  async function submit(e) {

    e.preventDefault(); setBusy(true); setErr('');

    const r = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(f) });

    if (r.ok) { router.push('/admin'); router.refresh(); return; }

    setErr((await r.json().catch(() => ({}))).error || 'Login failed'); setBusy(false);

  }

  return (

    <div className="flex min-h-screen items-center justify-center bg-ink p-4">

      <form onSubmit={submit} className="w-full max-w-sm space-y-4 rounded-lg bg-white p-6 shadow-xl">

        <div><h1 className="text-2xl font-extrabold">Newsroom login</h1><p className="text-sm text-slate-500">Sign in to manage stories and site settings.</p></div>

        <div><label className="label">Username</label><input className="input" autoComplete="username" value={f.username} onChange={(e) => setF({ ...f, username: e.target.value })} required /></div>

        <div><label className="label">Password</label><input className="input" type="password" autoComplete="current-password" value={f.password} onChange={(e) => setF({ ...f, password: e.target.value })} required /></div>

        {err && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{err}</p>}

        <button className="btn btn-primary w-full" disabled={busy}>{busy ? 'Signing in…' : 'Sign in'}</button>

      </form>

    </div>

  );

}