319 lines
11 KiB
TypeScript
319 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { type FormEvent, useMemo, useState } from "react"
|
|
|
|
import { AdminLocaleSwitcher } from "@/components/admin-locale-switcher"
|
|
import { useAdminT } from "@/providers/admin-i18n-provider"
|
|
|
|
type LoginFormProps = {
|
|
mode: "signin" | "signup-owner" | "signup-user" | "signup-disabled"
|
|
}
|
|
|
|
type AuthResponse = {
|
|
user?: {
|
|
role?: string
|
|
}
|
|
message?: string
|
|
}
|
|
|
|
function persistRoleCookie(role: unknown) {
|
|
if (typeof role !== "string") {
|
|
return
|
|
}
|
|
|
|
// biome-ignore lint/suspicious/noDocumentCookie: Temporary fallback for middleware role resolution.
|
|
document.cookie = `cms_role=${encodeURIComponent(role)}; Path=/; SameSite=Lax`
|
|
}
|
|
|
|
export function LoginForm({ mode }: LoginFormProps) {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const t = useAdminT()
|
|
|
|
const nextPath = useMemo(() => searchParams.get("next") || "/", [searchParams])
|
|
|
|
const [name, setName] = useState("Admin User")
|
|
const [username, setUsername] = useState("")
|
|
const [email, setEmail] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [isBusy, setIsBusy] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [success, setSuccess] = useState<string | null>(null)
|
|
const canSubmitSignUp = mode === "signup-owner" || mode === "signup-user"
|
|
|
|
async function handleSignIn(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault()
|
|
setIsBusy(true)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
try {
|
|
const response = await fetch("/api/auth/sign-in/email", {
|
|
method: "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
identifier: email,
|
|
password,
|
|
callbackURL: nextPath,
|
|
}),
|
|
})
|
|
|
|
const payload = (await response.json().catch(() => null)) as AuthResponse | null
|
|
|
|
if (!response.ok) {
|
|
setError(payload?.message ?? t("auth.errors.signInFailed", "Sign in failed"))
|
|
return
|
|
}
|
|
|
|
persistRoleCookie(payload?.user?.role)
|
|
router.push(nextPath)
|
|
router.refresh()
|
|
} catch {
|
|
setError(t("auth.errors.networkSignIn", "Network error while signing in"))
|
|
} finally {
|
|
setIsBusy(false)
|
|
}
|
|
}
|
|
|
|
async function handleSignUp(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault()
|
|
|
|
if (!name.trim()) {
|
|
setError(t("auth.errors.nameRequired", "Name is required for account creation"))
|
|
return
|
|
}
|
|
|
|
setIsBusy(true)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
try {
|
|
const response = await fetch("/api/auth/sign-up/email", {
|
|
method: "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
name,
|
|
username,
|
|
email,
|
|
password,
|
|
callbackURL: nextPath,
|
|
}),
|
|
})
|
|
|
|
const payload = (await response.json().catch(() => null)) as AuthResponse | null
|
|
|
|
if (!response.ok) {
|
|
setError(payload?.message ?? t("auth.errors.signUpFailed", "Sign up failed"))
|
|
return
|
|
}
|
|
|
|
persistRoleCookie(payload?.user?.role)
|
|
setSuccess(
|
|
mode === "signup-owner"
|
|
? t("auth.messages.ownerCreated", "Owner account created. Registration is now disabled.")
|
|
: t("auth.messages.accountCreated", "Account created."),
|
|
)
|
|
router.push(nextPath)
|
|
router.refresh()
|
|
} catch {
|
|
setError(t("auth.errors.networkSignUp", "Network error while signing up"))
|
|
} finally {
|
|
setIsBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="mx-auto flex min-h-screen w-full max-w-md flex-col justify-center px-6 py-16">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="text-sm uppercase tracking-[0.2em] text-neutral-500">
|
|
{t("auth.badge", "Admin Auth")}
|
|
</p>
|
|
<AdminLocaleSwitcher />
|
|
</div>
|
|
<h1 className="text-3xl font-semibold tracking-tight">
|
|
{mode === "signin"
|
|
? t("auth.titles.signIn", "Sign in to CMS Admin")
|
|
: mode === "signup-owner"
|
|
? t("auth.titles.signUpOwner", "Welcome to CMS Admin")
|
|
: mode === "signup-user"
|
|
? t("auth.titles.signUpUser", "Create an admin account")
|
|
: t("auth.titles.signUpDisabled", "Registration is disabled")}
|
|
</h1>
|
|
<p className="text-sm text-neutral-600">
|
|
{mode === "signin"
|
|
? t("auth.descriptions.signIn", "Better Auth is active on this app via /api/auth.")
|
|
: mode === "signup-owner"
|
|
? t(
|
|
"auth.descriptions.signUpOwner",
|
|
"Create the first owner account to initialize this admin instance.",
|
|
)
|
|
: mode === "signup-user"
|
|
? t("auth.descriptions.signUpUser", "Self-registration is enabled for admin users.")
|
|
: t(
|
|
"auth.descriptions.signUpDisabled",
|
|
"Self-registration is currently turned off by an administrator.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
{mode === "signin" ? (
|
|
<form
|
|
onSubmit={handleSignIn}
|
|
className="mt-8 space-y-4 rounded-xl border border-neutral-200 p-6"
|
|
>
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium" htmlFor="email">
|
|
{t("auth.fields.emailOrUsername", "Email or username")}
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="text"
|
|
required
|
|
value={email}
|
|
onChange={(event) => setEmail(event.target.value)}
|
|
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium" htmlFor="password">
|
|
{t("auth.fields.password", "Password")}
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
minLength={8}
|
|
required
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isBusy}
|
|
className="w-full rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white disabled:opacity-60"
|
|
>
|
|
{isBusy
|
|
? t("auth.actions.signInBusy", "Signing in...")
|
|
: t("auth.actions.signInIdle", "Sign in")}
|
|
</button>
|
|
|
|
<p className="text-xs text-neutral-600">
|
|
{t("auth.links.needAccount", "Need an account?")}{" "}
|
|
<Link href={`/register?next=${encodeURIComponent(nextPath)}`} className="underline">
|
|
{t("auth.links.register", "Register")}
|
|
</Link>
|
|
</p>
|
|
|
|
{error ? <p className="text-sm text-red-600">{error}</p> : null}
|
|
</form>
|
|
) : canSubmitSignUp ? (
|
|
<form
|
|
onSubmit={handleSignUp}
|
|
className="mt-8 space-y-4 rounded-xl border border-neutral-200 p-6"
|
|
>
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium" htmlFor="name">
|
|
{t("auth.fields.name", "Name")}
|
|
</label>
|
|
<input
|
|
id="name"
|
|
type="text"
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium" htmlFor="email">
|
|
{t("auth.fields.email", "Email")}
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
required
|
|
value={email}
|
|
onChange={(event) => setEmail(event.target.value)}
|
|
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium" htmlFor="username">
|
|
{t("auth.fields.username", "Username (optional)")}
|
|
</label>
|
|
<input
|
|
id="username"
|
|
type="text"
|
|
value={username}
|
|
onChange={(event) => setUsername(event.target.value)}
|
|
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-sm font-medium" htmlFor="password">
|
|
{t("auth.fields.password", "Password")}
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
minLength={8}
|
|
required
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isBusy}
|
|
className="w-full rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white disabled:opacity-60"
|
|
>
|
|
{isBusy
|
|
? t("auth.actions.signUpBusy", "Creating account...")
|
|
: mode === "signup-owner"
|
|
? t("auth.actions.signUpOwnerIdle", "Create owner account")
|
|
: t("auth.actions.signUpUserIdle", "Create account")}
|
|
</button>
|
|
|
|
<p className="text-xs text-neutral-600">
|
|
{t("auth.links.alreadyHaveAccount", "Already have an account?")}{" "}
|
|
<Link href={`/login?next=${encodeURIComponent(nextPath)}`} className="underline">
|
|
{t("auth.links.goToSignIn", "Go to sign in")}
|
|
</Link>
|
|
</p>
|
|
|
|
{error ? <p className="text-sm text-red-600">{error}</p> : null}
|
|
{success ? <p className="text-sm text-green-700">{success}</p> : null}
|
|
</form>
|
|
) : (
|
|
<section className="mt-8 space-y-4 rounded-xl border border-neutral-200 p-6">
|
|
<p className="text-sm text-neutral-700">
|
|
{t(
|
|
"auth.messages.registrationDisabled",
|
|
"Registration is disabled for this admin instance. Ask an administrator to create an account or enable self-registration.",
|
|
)}
|
|
</p>
|
|
<p className="text-xs text-neutral-600">
|
|
<Link href={`/login?next=${encodeURIComponent(nextPath)}`} className="underline">
|
|
{t("auth.links.goToSignIn", "Go to sign in")}
|
|
</Link>
|
|
</p>
|
|
</section>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|