latest changes

src/components/auth/home-login-form.tsx

@@ -0,0 +1,106 @@
+"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>
+  );
+}