108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { signIn } from "next-auth/react";
|
|
import { type FormEvent, useState } from "react";
|
|
import { precheckLogin } from "@/actions/auth-precheck";
|
|
|
|
export function HomeLoginForm() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [code, setCode] = useState("");
|
|
const [needs2fa, setNeeds2fa] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [pending, setPending] = useState(false);
|
|
|
|
async function onSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setPending(true);
|
|
try {
|
|
if (!needs2fa) {
|
|
const pre = await precheckLogin(username, password);
|
|
if (pre === "invalid") {
|
|
setError("Invalid username or password");
|
|
return;
|
|
}
|
|
if (pre === "twofactor") {
|
|
setNeeds2fa(true);
|
|
return;
|
|
}
|
|
}
|
|
const res = await signIn("credentials", {
|
|
username,
|
|
password,
|
|
code,
|
|
redirect: false,
|
|
});
|
|
if (!res || res.error) {
|
|
setError(needs2fa ? "Invalid 2FA code" : "Invalid username or password");
|
|
return;
|
|
}
|
|
window.location.href = "/";
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onSubmit={onSubmit}
|
|
className="relative flex flex-col gap-6 rounded-lg bg-gray-100 p-3 dark:bg-gray-800"
|
|
>
|
|
<fieldset className="flex w-full flex-col gap-1">
|
|
<label className="block font-semibold text-gray-700 dark:text-gray-200">Username</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder=""
|
|
className="focus:ring-0 relative z-10 w-full rounded border-4 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
|
style={{ borderColor: "#e5e7eb", borderWidth: "4px" }}
|
|
required
|
|
disabled={needs2fa}
|
|
/>
|
|
</fieldset>
|
|
<fieldset className="flex w-full flex-col gap-1">
|
|
<label className="block font-semibold text-gray-700 dark:text-gray-200">Password</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder=""
|
|
className="focus:ring-0 relative z-10 w-full rounded border-4 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
|
style={{ borderColor: "#e5e7eb", borderWidth: "4px" }}
|
|
required
|
|
disabled={needs2fa}
|
|
/>
|
|
</fieldset>
|
|
{needs2fa ? (
|
|
<fieldset className="flex w-full flex-col gap-1">
|
|
<label className="block font-semibold text-gray-700 dark:text-gray-200">2FA Code</label>
|
|
<input
|
|
type="text"
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value)}
|
|
placeholder="Enter your 2FA code"
|
|
inputMode="numeric"
|
|
className="focus:ring-0 relative z-10 w-full rounded border-4 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
|
style={{ borderColor: "#e5e7eb", borderWidth: "4px" }}
|
|
autoFocus
|
|
/>
|
|
</fieldset>
|
|
) : null}
|
|
{error ? <p className="m-0 text-center text-sm text-red-600 dark:text-red-400">{error}</p> : null}
|
|
<button
|
|
type="submit"
|
|
disabled={pending}
|
|
className="w-full cursor-pointer rounded-md border-2 p-2 text-base font-semibold text-white transition-colors disabled:opacity-50"
|
|
style={{
|
|
backgroundColor: "#27a44d",
|
|
borderColor: "#34d399",
|
|
}}
|
|
>
|
|
{pending ? "Please wait..." : needs2fa ? "Verify" : "Login"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|