79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
type Props = {
|
|
searchParams: Promise<{ error?: string }>;
|
|
};
|
|
|
|
export default async function LoginPage({ searchParams }: Props) {
|
|
const { error } = await searchParams;
|
|
const invalid = error === "1";
|
|
const locked = error === "locked";
|
|
|
|
return (
|
|
<div className="flex min-h-full flex-1 items-center justify-center bg-zinc-100 px-4 dark:bg-zinc-950">
|
|
<div className="w-full max-w-sm rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
|
|
<h1 className="text-center text-xl font-semibold text-zinc-900 dark:text-zinc-50">
|
|
Admin sign in
|
|
</h1>
|
|
<form
|
|
action="/api/auth/login"
|
|
method="post"
|
|
className="mt-8 space-y-4"
|
|
>
|
|
<div>
|
|
<label
|
|
htmlFor="username"
|
|
className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
|
>
|
|
Username
|
|
</label>
|
|
<input
|
|
id="username"
|
|
name="username"
|
|
autoComplete="username"
|
|
autoCapitalize="none"
|
|
autoCorrect="off"
|
|
spellCheck={false}
|
|
className="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-900 shadow-sm outline-none ring-zinc-400 focus:ring-2 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-50 dark:ring-zinc-500"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="password"
|
|
className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
|
>
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
autoCapitalize="none"
|
|
autoCorrect="off"
|
|
spellCheck={false}
|
|
className="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-900 shadow-sm outline-none ring-zinc-400 focus:ring-2 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-50 dark:ring-zinc-500"
|
|
required
|
|
/>
|
|
</div>
|
|
{locked ? (
|
|
<p className="text-sm text-red-600 dark:text-red-400" role="alert">
|
|
Too many failed attempts. Wait about 15 minutes, then try again.
|
|
</p>
|
|
) : null}
|
|
{invalid ? (
|
|
<p className="text-sm text-red-600 dark:text-red-400" role="alert">
|
|
Invalid username or password.
|
|
</p>
|
|
) : null}
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded-lg bg-zinc-900 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
|
|
>
|
|
Sign in
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|