First Commit. Duplicate bunext-sqlite preset

src/pages/auth/sso/(functions)/submit-sso-form.ts

@@ -0,0 +1,32 @@
+import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
+import type useFormInit from "@/src/hooks/use-form-init";
+import type { ApiReqParams, SSOFormObject } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+
+export default async function submitSSOForm({
+    setLoading,
+    setStatus,
+    form,
+}: ReturnType<typeof useFormInit<SSOFormObject>>) {
+    setLoading(true);
+
+    const res = await fetchApi<ApiReqParams, APIResponseObject>(
+        `/api/auth/login`,
+        {
+            method: "POST",
+            body: {
+                sso_code: form.code?.trim(),
+            },
+        },
+    );
+
+    if (res.success) {
+        window.location.pathname = `/admin`;
+    } else {
+        setStatus({
+            error: true,
+            msg: res.msg || "Couldn't log you in. Please try again.",
+        });
+        setLoading(false);
+    }
+}

src/pages/auth/sso/(partials)/sso-form/index.tsx

@@ -0,0 +1,36 @@
+import Form from "@moduletrace/twui/form/Form";
+import LoadingOverlay from "@moduletrace/twui/elements/LoadingOverlay";
+import Button from "@moduletrace/twui/layout/Button";
+import useFormInit from "@/src/hooks/use-form-init";
+import { type SSOFormObject } from "@/src/types";
+import LoginShell from "@/src/components/general/login-shell";
+import LoginCodeInput from "@/src/components/general/login-code-input";
+import ResendCodeButton from "@/src/components/general/resend-code-button";
+import submitSSOForm from "../../(functions)/submit-sso-form";
+
+export default function SSOForm() {
+    const init = useFormInit<SSOFormObject>();
+    const { loading, status, setForm } = init;
+
+    return (
+        <LoginShell status={status}>
+            <Form
+                className="w-full flex items-center justify-center relative gap-4"
+                onSubmit={() => {
+                    submitSSOForm(init);
+                }}
+            >
+                {loading && <LoadingOverlay />}
+                <LoginCodeInput
+                    onCodeChange={(code) => {
+                        setForm((prev) => ({ ...prev, code }));
+                    }}
+                />
+                <Button title="Log in" type="submit" className="w-full">
+                    Log in
+                </Button>
+            </Form>
+            <ResendCodeButton {...init} />
+        </LoginShell>
+    );
+}

src/pages/auth/sso/(sections)/sso-form-section.tsx

@@ -0,0 +1,37 @@
+import Section from "@moduletrace/twui/layout/Section";
+import Container from "@moduletrace/twui/layout/Container";
+import Stack from "@moduletrace/twui/layout/Stack";
+import AuthHero from "@/src/components/general/auth-hero";
+import AuthFooterLink from "@/src/components/general/auth-footer-link";
+import SSOForm from "../(partials)/sso-form";
+import useSSOPendingLogin from "@/src/hooks/use-sso-pending-login";
+import ssoHeroDescription from "../(utils)/sso-hero-description";
+
+export default function SSOFormSection() {
+    const pending = useSSOPendingLogin();
+    const is_two_step = pending?.method == "password";
+
+    return (
+        <Section>
+            <Container>
+                <Stack className="w-full items-center max-w-md mx-auto gap-8">
+                    <AuthHero
+                        eyebrow={
+                            is_two_step ? "Two-step verification" : "Check your email"
+                        }
+                        title={
+                            is_two_step ? "Verify it's you" : "Enter your login code"
+                        }
+                        description={ssoHeroDescription({ pending })}
+                    />
+                    <SSOForm />
+                    <AuthFooterLink
+                        prompt="Wrong account?"
+                        title="Start over"
+                        url="/auth/login"
+                    />
+                </Stack>
+            </Container>
+        </Section>
+    );
+}

src/pages/auth/sso/(utils)/sso-hero-description.ts

@@ -0,0 +1,25 @@
+import { AppData } from "@/src/data/app-data";
+import type { SSOPendingLogin } from "@/src/types";
+
+type Params = {
+    pending?: SSOPendingLogin;
+};
+
+/**
+ * The code-only wording reads the same whether or not the account exists,
+ * matching the no-enumeration response of `get-login-code`. A password
+ * login only gets here once the password was correct.
+ */
+export default function ssoHeroDescription({ pending }: Params) {
+    const expiry = `It expires in ${AppData["SSOCodeExpiryMinutes"]} minutes.`;
+
+    if (pending?.method == "password") {
+        return `We've emailed a 6-digit code to the address on your account. ${expiry}`;
+    }
+
+    if (pending?.identifier) {
+        return `If ${pending.identifier} matches an account, we've emailed it a 6-digit login code. ${expiry}`;
+    }
+
+    return `Enter the 6-digit code we emailed you. ${expiry}`;
+}

src/pages/auth/sso/index.tsx

@@ -0,0 +1,12 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import SSOFormSection from "./(sections)/sso-form-section";
+import { SiteData } from "@/src/data/site-data";
+
+export default function SSOPage() {
+    return <SSOFormSection />;
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Enter Login Code | ${SiteData["SiteName"]}`,
+    description: `Enter your one-time login code to log in to ${SiteData["SiteName"]}.`,
+};