First Commit. Duplicate bunext-sqlite preset

src/pages/auth/index.server.ts

@@ -0,0 +1,10 @@
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+export const server: BunextPageServerFn = async () => {
+    return {
+        redirect: {
+            destination: "/auth/login",
+            permanent: false,
+        },
+    };
+};

src/pages/auth/index.tsx

@@ -0,0 +1,14 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { SiteData } from "@/src/data/site-data";
+
+/**
+ * Never rendered: `index.server.ts` always redirects to `/auth/login`.
+ */
+export default function AuthPage() {
+    return null;
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Log In | ${SiteData["SiteName"]}`,
+    description: "Redirecting to login.",
+};

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

@@ -0,0 +1,46 @@
+import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
+import type useFormInit from "@/src/hooks/use-form-init";
+import type { ApiReqParams, LoginFormObject, LoginMethod } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import saveSSOPendingLogin from "@/src/functions/frontend/save-sso-pending-login";
+
+type Params = ReturnType<typeof useFormInit<LoginFormObject>> & {
+    method: LoginMethod;
+};
+
+export default async function submitLoginForm({
+    setLoading,
+    setStatus,
+    form,
+    method,
+}: Params) {
+    setLoading(true);
+
+    const identifier = form.username_or_email?.trim() || "";
+
+    const res = await fetchApi<ApiReqParams, APIResponseObject>(
+        method == "password"
+            ? `/api/auth/password-login`
+            : `/api/auth/get-login-code`,
+        {
+            method: "POST",
+            body: {
+                login: {
+                    email_or_username: identifier,
+                    password: method == "password" ? form.password : undefined,
+                },
+            },
+        },
+    );
+
+    if (res.success) {
+        saveSSOPendingLogin({ identifier, method });
+        window.location.pathname = `/auth/sso`;
+    } else {
+        setStatus({
+            error: true,
+            msg: res.msg || "Couldn't log you in. Please try again.",
+        });
+        setLoading(false);
+    }
+}

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

@@ -0,0 +1,49 @@
+import Form from "@moduletrace/twui/form/Form";
+import LoadingOverlay from "@moduletrace/twui/elements/LoadingOverlay";
+import useFormInit from "@/src/hooks/use-form-init";
+import useLoginMethod from "@/src/hooks/use-login-method";
+import type { LoginFormObject } from "@/src/types";
+import LoginShell from "@/src/components/general/login-shell";
+import AuthFooterLink from "@/src/components/general/auth-footer-link";
+import GoogleAuthSection from "@/src/components/general/google-auth-section";
+import LoginFormEmailUsername from "./login-form-email-username";
+import LoginFormPassword from "./login-form-password";
+import LoginFormAction from "./login-form-action";
+import submitLoginForm from "../../(functions)/submit-login-form";
+
+export default function LoginForm() {
+    const init = useFormInit<LoginFormObject>();
+    const { loading, status } = init;
+    const method = useLoginMethod();
+
+    return (
+        <LoginShell status={status}>
+            <GoogleAuthSection {...init} mode="login" />
+            <Form
+                className="w-full flex items-center justify-center relative gap-4"
+                onSubmit={() => {
+                    submitLoginForm({ ...init, method });
+                }}
+            >
+                {loading && <LoadingOverlay />}
+                <LoginFormEmailUsername {...init} />
+                {method == "password" ? <LoginFormPassword {...init} /> : null}
+                <LoginFormAction method={method} />
+            </Form>
+            {method == "password" ? (
+                <AuthFooterLink
+                    prompt="Forgot your password?"
+                    title="Reset it"
+                    url="/auth/reset-password"
+                    className="w-full text-sm"
+                />
+            ) : null}
+            <AuthFooterLink
+                prompt="Already have a code?"
+                title="Enter it"
+                url="/auth/sso"
+                className="w-full text-sm"
+            />
+        </LoginShell>
+    );
+}

src/pages/auth/login/(partials)/login-form/login-form-action.tsx

@@ -0,0 +1,16 @@
+import Button from "@moduletrace/twui/layout/Button";
+import type { LoginMethod } from "@/src/types";
+
+type Props = {
+    method: LoginMethod;
+};
+
+export default function LoginFormAction({ method }: Props) {
+    const label = method == "password" ? "Log in" : "Email me a login code";
+
+    return (
+        <Button title={label} type="submit" className="w-full">
+            {label}
+        </Button>
+    );
+}

src/pages/auth/login/(partials)/login-form/login-form-email-username.tsx

@@ -0,0 +1,28 @@
+import Input from "@moduletrace/twui/form/Input";
+import useFormInit from "@/src/hooks/use-form-init";
+import { type LoginFormObject } from "@/src/types";
+
+export default function LoginFormEmailUsername({
+    setForm,
+}: ReturnType<typeof useFormInit<LoginFormObject>>) {
+    return (
+        <Input
+            id="username_or_email"
+            name="username_or_email"
+            type="text"
+            label="Email or username"
+            placeholder="[email protected]"
+            autoComplete="username"
+            autoCapitalize="none"
+            spellCheck={false}
+            onChange={(e) => {
+                setForm((prev) => ({
+                    ...prev,
+                    username_or_email: e.target.value,
+                }));
+            }}
+            showLabel
+            required
+        />
+    );
+}

src/pages/auth/login/(partials)/login-form/login-form-password.tsx

@@ -0,0 +1,19 @@
+import useFormInit from "@/src/hooks/use-form-init";
+import { type LoginFormObject } from "@/src/types";
+import PasswordInput from "@/src/components/general/password-input";
+
+export default function LoginFormPassword({
+    setForm,
+}: ReturnType<typeof useFormInit<LoginFormObject>>) {
+    return (
+        <PasswordInput
+            id="password"
+            label="Password"
+            autoComplete="current-password"
+            onValueChange={(password) => {
+                setForm((prev) => ({ ...prev, password }));
+            }}
+            required
+        />
+    );
+}

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

@@ -0,0 +1,35 @@
+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 LoginForm from "../(partials)/login-form";
+import useLoginMethod from "@/src/hooks/use-login-method";
+
+export default function LoginFormSection() {
+    const method = useLoginMethod();
+
+    return (
+        <Section>
+            <Container>
+                <Stack className="w-full items-center max-w-md mx-auto gap-8">
+                    <AuthHero
+                        eyebrow="Welcome back"
+                        title="Log in to your account"
+                        description={
+                            method == "password"
+                                ? "Log in with your password, then confirm with a code we email you."
+                                : "Enter your email or username and we'll email you a one-time login code."
+                        }
+                    />
+                    <LoginForm />
+                    <AuthFooterLink
+                        prompt="Don't have an account?"
+                        title="Sign up"
+                        url="/auth/signup"
+                    />
+                </Stack>
+            </Container>
+        </Section>
+    );
+}

src/pages/auth/login/index.server.tsx

@@ -0,0 +1,5 @@
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+export const server: BunextPageServerFn = async () => {
+    return {};
+};

src/pages/auth/login/index.tsx

@@ -0,0 +1,12 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import LoginFormSection from "./(sections)/login-form-section";
+import { SiteData } from "@/src/data/site-data";
+
+export default function LoginPage() {
+    return <LoginFormSection />;
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Log In | ${SiteData["SiteName"]}`,
+    description: `Log in to your ${SiteData["SiteName"]} account.`,
+};

src/pages/auth/logout/index.server.ts

@@ -0,0 +1,43 @@
+import { AppData } from "@/src/data/app-data";
+import userAuth from "@/src/functions/backend/auth/user-auth";
+import logEvent, { grabRequestIP } from "@/src/functions/backend/logger";
+import { deleteCookies } from "@/src/utils/cookies";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+export const server: BunextPageServerFn = async ({ req }) => {
+    const { user } = await userAuth({ req });
+
+    if (user?.id) {
+        await logEvent({
+            title: "User logged out",
+            category: "auth",
+            user_id: user.id,
+            plain_text: `User #${user.id} [${user.first_name} ${user.last_name}] logged out.`,
+            metadata: {
+                user_id: user.id,
+            },
+            ip_address: grabRequestIP(req),
+        });
+    }
+
+    return {
+        res_transform(res) {
+            const new_res = res.clone();
+            deleteCookies(new_res, [
+                {
+                    name: AppData["AuthKeyCookieName"],
+                    httpOnly: true,
+                },
+                {
+                    name: AppData["AuthCSRFCookieName"],
+                    httpOnly: true,
+                },
+                {
+                    name: AppData["SSOAuthCookieName"],
+                    httpOnly: true,
+                },
+            ]);
+            return new_res;
+        },
+    };
+};

src/pages/auth/logout/index.tsx

@@ -0,0 +1,47 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import Section from "@moduletrace/twui/layout/Section";
+import Loading from "@moduletrace/twui/elements/Loading";
+import Row from "@moduletrace/twui/layout/Row";
+import Span from "@moduletrace/twui/layout/Span";
+import { useEffect } from "react";
+import { twMerge } from "tailwind-merge";
+import Logo from "@/src/components/general/logo";
+import Paper from "@moduletrace/twui/elements/Paper";
+import Container from "@moduletrace/twui/layout/Container";
+import Center from "@moduletrace/twui/layout/Center";
+import { SiteData } from "@/src/data/site-data";
+
+export default function LogoutPage() {
+    useEffect(() => {
+        setTimeout(() => {
+            window.location.pathname = "/";
+        }, 1000);
+    }, []);
+
+    return (
+        <Section
+            className={twMerge(
+                "h-screen w-screen px-0 items-center justify-center",
+            )}
+        >
+            <Center>
+                <Paper className="w-auto p-10 items-center">
+                    <Logo
+                        text_props={{
+                            className: "text-dark dark:text-white",
+                        }}
+                    />
+                    <Row>
+                        <Loading />
+                        <Span>Logging out ...</Span>
+                    </Row>
+                </Paper>
+            </Center>
+        </Section>
+    );
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Logging Out | ${SiteData["SiteName"]}`,
+    description: "You are being logged out and redirected to the homepage.",
+};

src/pages/auth/reset-password/(functions)/submit-request-reset.ts

@@ -0,0 +1,38 @@
+import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
+import type useFormInit from "@/src/hooks/use-form-init";
+import type { ApiReqParams, LoginFormObject } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import saveSSOPendingLogin from "@/src/functions/frontend/save-sso-pending-login";
+
+export default async function submitRequestReset({
+    setLoading,
+    setStatus,
+    form,
+}: ReturnType<typeof useFormInit<LoginFormObject>>) {
+    setLoading(true);
+
+    const identifier = form.username_or_email?.trim() || "";
+
+    const res = await fetchApi<ApiReqParams, APIResponseObject>(
+        `/api/auth/request-password-reset`,
+        {
+            method: "POST",
+            body: {
+                login: {
+                    email_or_username: identifier,
+                },
+            },
+        },
+    );
+
+    if (res.success) {
+        saveSSOPendingLogin({ identifier, method: "reset" });
+        window.location.pathname = `/auth/reset-password/confirm`;
+    } else {
+        setStatus({
+            error: true,
+            msg: res.msg || "Couldn't send a reset code. Please try again.",
+        });
+        setLoading(false);
+    }
+}

src/pages/auth/reset-password/(partials)/request-reset-form/index.tsx

@@ -0,0 +1,30 @@
+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 { LoginFormObject } from "@/src/types";
+import LoginShell from "@/src/components/general/login-shell";
+import LoginFormEmailUsername from "@/src/pages/auth/login/(partials)/login-form/login-form-email-username";
+import submitRequestReset from "../../(functions)/submit-request-reset";
+
+export default function RequestResetForm() {
+    const init = useFormInit<LoginFormObject>();
+    const { loading, status } = init;
+
+    return (
+        <LoginShell status={status}>
+            <Form
+                className="w-full flex items-center justify-center relative gap-4"
+                onSubmit={() => {
+                    submitRequestReset(init);
+                }}
+            >
+                {loading && <LoadingOverlay />}
+                <LoginFormEmailUsername {...init} />
+                <Button title="Email me a reset code" type="submit" className="w-full">
+                    Email me a reset code
+                </Button>
+            </Form>
+        </LoginShell>
+    );
+}

src/pages/auth/reset-password/(sections)/request-reset-section.tsx

@@ -0,0 +1,28 @@
+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 RequestResetForm from "../(partials)/request-reset-form";
+
+export default function RequestResetSection() {
+    return (
+        <Section>
+            <Container>
+                <Stack className="w-full items-center max-w-md mx-auto gap-8">
+                    <AuthHero
+                        eyebrow="Forgot password"
+                        title="Reset your password"
+                        description="Enter your email or username and we'll email you a code to set a new password."
+                    />
+                    <RequestResetForm />
+                    <AuthFooterLink
+                        prompt="Remembered it?"
+                        title="Log in"
+                        url="/auth/login"
+                    />
+                </Stack>
+            </Container>
+        </Section>
+    );
+}

src/pages/auth/reset-password/confirm/(functions)/submit-confirm-reset.ts

@@ -0,0 +1,46 @@
+import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
+import type useFormInit from "@/src/hooks/use-form-init";
+import type { ApiReqParams, PasswordResetFormObject } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import validatePassword from "@/src/utils/validate-password";
+
+export default async function submitConfirmReset({
+    setLoading,
+    setStatus,
+    form,
+}: ReturnType<typeof useFormInit<PasswordResetFormObject>>) {
+    const password_error = validatePassword({ password: form.new_password });
+
+    if (password_error) {
+        setStatus({ error: true, msg: password_error });
+        return;
+    }
+
+    if (form.new_password != form.confirm_password) {
+        setStatus({ error: true, msg: "The passwords don't match." });
+        return;
+    }
+
+    setLoading(true);
+
+    const res = await fetchApi<ApiReqParams, APIResponseObject>(
+        `/api/auth/reset-password`,
+        {
+            method: "POST",
+            body: {
+                sso_code: form.code?.trim(),
+                new_password: form.new_password,
+            },
+        },
+    );
+
+    if (res.success) {
+        window.location.pathname = `/admin`;
+    } else {
+        setStatus({
+            error: true,
+            msg: res.msg || "Couldn't reset your password. Please try again.",
+        });
+        setLoading(false);
+    }
+}

src/pages/auth/reset-password/confirm/(partials)/confirm-reset-form/index.tsx

@@ -0,0 +1,57 @@
+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 { PasswordResetFormObject } from "@/src/types";
+import { AppData } from "@/src/data/app-data";
+import LoginShell from "@/src/components/general/login-shell";
+import LoginCodeInput from "@/src/components/general/login-code-input";
+import PasswordInput from "@/src/components/general/password-input";
+import ResendCodeButton from "@/src/components/general/resend-code-button";
+import submitConfirmReset from "../../(functions)/submit-confirm-reset";
+
+export default function ConfirmResetForm() {
+    const init = useFormInit<PasswordResetFormObject>();
+    const { loading, status, setForm } = init;
+
+    return (
+        <LoginShell status={status}>
+            <Form
+                className="w-full flex items-center justify-center relative gap-4"
+                onSubmit={() => {
+                    submitConfirmReset(init);
+                }}
+            >
+                {loading && <LoadingOverlay />}
+                <LoginCodeInput
+                    onCodeChange={(code) => {
+                        setForm((prev) => ({ ...prev, code }));
+                    }}
+                />
+                <PasswordInput
+                    id="new_password"
+                    label="New password"
+                    autoComplete="new-password"
+                    info={`At least ${AppData["PasswordMinLength"]} characters.`}
+                    onValueChange={(new_password) => {
+                        setForm((prev) => ({ ...prev, new_password }));
+                    }}
+                    required
+                />
+                <PasswordInput
+                    id="confirm_password"
+                    label="Confirm new password"
+                    autoComplete="new-password"
+                    onValueChange={(confirm_password) => {
+                        setForm((prev) => ({ ...prev, confirm_password }));
+                    }}
+                    required
+                />
+                <Button title="Save password and log in" type="submit" className="w-full">
+                    Save password and log in
+                </Button>
+            </Form>
+            <ResendCodeButton {...init} />
+        </LoginShell>
+    );
+}

src/pages/auth/reset-password/confirm/(sections)/confirm-reset-section.tsx

@@ -0,0 +1,38 @@
+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 useSSOPendingLogin from "@/src/hooks/use-sso-pending-login";
+import { AppData } from "@/src/data/app-data";
+import ConfirmResetForm from "../(partials)/confirm-reset-form";
+
+export default function ConfirmResetSection() {
+    const pending = useSSOPendingLogin();
+
+    const expiry = `It expires in ${AppData["SSOCodeExpiryMinutes"]} minutes.`;
+
+    return (
+        <Section>
+            <Container>
+                <Stack className="w-full items-center max-w-md mx-auto gap-8">
+                    <AuthHero
+                        eyebrow="Check your email"
+                        title="Set a new password"
+                        description={
+                            pending?.identifier
+                                ? `If ${pending.identifier} matches an account, we've emailed it a 6-digit reset code. ${expiry}`
+                                : `Enter the 6-digit reset code we emailed you. ${expiry}`
+                        }
+                    />
+                    <ConfirmResetForm />
+                    <AuthFooterLink
+                        prompt="Wrong account?"
+                        title="Start over"
+                        url="/auth/reset-password"
+                    />
+                </Stack>
+            </Container>
+        </Section>
+    );
+}

src/pages/auth/reset-password/confirm/index.server.ts

@@ -0,0 +1,18 @@
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import grabLoginMethod from "@/src/functions/backend/auth/grab-login-method";
+
+/**
+ * Password resets only exist in password login mode.
+ */
+export const server: BunextPageServerFn = async () => {
+    if (grabLoginMethod() != "password") {
+        return {
+            redirect: {
+                destination: "/auth/login",
+                permanent: false,
+            },
+        };
+    }
+
+    return {};
+};

src/pages/auth/reset-password/confirm/index.tsx

@@ -0,0 +1,12 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import ConfirmResetSection from "./(sections)/confirm-reset-section";
+import { SiteData } from "@/src/data/site-data";
+
+export default function ConfirmResetPage() {
+    return <ConfirmResetSection />;
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Set New Password | ${SiteData["SiteName"]}`,
+    description: `Set a new password for your ${SiteData["SiteName"]} account.`,
+};

src/pages/auth/reset-password/index.server.ts

@@ -0,0 +1,18 @@
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import grabLoginMethod from "@/src/functions/backend/auth/grab-login-method";
+
+/**
+ * Password resets only exist in password login mode.
+ */
+export const server: BunextPageServerFn = async () => {
+    if (grabLoginMethod() != "password") {
+        return {
+            redirect: {
+                destination: "/auth/login",
+                permanent: false,
+            },
+        };
+    }
+
+    return {};
+};

src/pages/auth/reset-password/index.tsx

@@ -0,0 +1,12 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import RequestResetSection from "./(sections)/request-reset-section";
+import { SiteData } from "@/src/data/site-data";
+
+export default function ResetPasswordPage() {
+    return <RequestResetSection />;
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Reset Password | ${SiteData["SiteName"]}`,
+    description: `Reset your ${SiteData["SiteName"]} password.`,
+};

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

@@ -0,0 +1,65 @@
+import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
+import type useFormInit from "@/src/hooks/use-form-init";
+import type { ApiReqParams, LoginMethod, SignupFormObject } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import saveSSOPendingLogin from "@/src/functions/frontend/save-sso-pending-login";
+import validatePassword from "@/src/utils/validate-password";
+
+type Params = ReturnType<typeof useFormInit<SignupFormObject>> & {
+    method: LoginMethod;
+};
+
+export default async function submitSignupForm({
+    setLoading,
+    setStatus,
+    form,
+    method,
+}: Params) {
+    const password_error =
+        method == "password"
+            ? validatePassword({ password: form.password })
+            : undefined;
+
+    if (password_error) {
+        setStatus({ error: true, msg: password_error });
+        return;
+    }
+
+    if (method == "password" && form.password != form.confirm_password) {
+        setStatus({ error: true, msg: "The passwords don't match." });
+        return;
+    }
+
+    setLoading(true);
+
+    const res = await fetchApi<ApiReqParams, APIResponseObject>(
+        `/api/auth/signup`,
+        {
+            method: "POST",
+            body: {
+                signup: {
+                    first_name: form.first_name,
+                    last_name: form.last_name,
+                    username: form.username,
+                    email: form.email,
+                    password: method == "password" ? form.password : undefined,
+                },
+            },
+        },
+    );
+
+    if (res.success) {
+        saveSSOPendingLogin({
+            identifier: form.email?.trim() || "",
+            method,
+        });
+        window.location.pathname = `/auth/sso`;
+    } else {
+        setStatus({
+            error: true,
+            msg: res.msg || "Couldn't create your account. Please try again.",
+        });
+
+        setLoading(false);
+    }
+}

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

@@ -0,0 +1,44 @@
+import Form from "@moduletrace/twui/form/Form";
+import LoadingOverlay from "@moduletrace/twui/elements/LoadingOverlay";
+import useFormInit from "@/src/hooks/use-form-init";
+import useLoginMethod from "@/src/hooks/use-login-method";
+import { type SignupFormObject } from "@/src/types";
+import LoginShell from "@/src/components/general/login-shell";
+import SignupFormName from "./signup-form-name";
+import SignupFormUsername from "./signup-form-username";
+import SignupFormEmail from "./signup-form-email";
+import SignupFormPassword from "./signup-form-password";
+import SignupFormConfirmPassword from "./signup-form-confirm-password";
+import GoogleAuthSection from "@/src/components/general/google-auth-section";
+import SignupFormAction from "./signup-form-action";
+import submitSignupForm from "../../(functions)/submit-signup-form";
+
+export default function SignupForm() {
+    const init = useFormInit<SignupFormObject>();
+    const { loading, status } = init;
+    const method = useLoginMethod();
+
+    return (
+        <LoginShell status={status}>
+            <GoogleAuthSection {...init} mode="signup" />
+            <Form
+                className="w-full flex items-center justify-center relative gap-4"
+                onSubmit={() => {
+                    submitSignupForm({ ...init, method });
+                }}
+            >
+                {loading && <LoadingOverlay />}
+                <SignupFormEmail {...init} />
+                <SignupFormName {...init} />
+                <SignupFormUsername {...init} />
+                {method == "password" ? (
+                    <>
+                        <SignupFormPassword {...init} />
+                        <SignupFormConfirmPassword {...init} />
+                    </>
+                ) : null}
+                <SignupFormAction {...init} />
+            </Form>
+        </LoginShell>
+    );
+}

src/pages/auth/signup/(partials)/signup-form/signup-form-action.tsx

@@ -0,0 +1,13 @@
+import Button from "@moduletrace/twui/layout/Button";
+import useFormInit from "@/src/hooks/use-form-init";
+import { type SignupFormObject } from "@/src/types";
+
+export default function SignupFormAction({}: ReturnType<
+    typeof useFormInit<SignupFormObject>
+>) {
+    return (
+        <Button title="Create account" type="submit" className="w-full">
+            Create account
+        </Button>
+    );
+}

src/pages/auth/signup/(partials)/signup-form/signup-form-confirm-password.tsx

@@ -0,0 +1,19 @@
+import useFormInit from "@/src/hooks/use-form-init";
+import { type SignupFormObject } from "@/src/types";
+import PasswordInput from "@/src/components/general/password-input";
+
+export default function SignupFormConfirmPassword({
+    setForm,
+}: ReturnType<typeof useFormInit<SignupFormObject>>) {
+    return (
+        <PasswordInput
+            id="confirm_password"
+            label="Confirm password"
+            autoComplete="new-password"
+            onValueChange={(confirm_password) => {
+                setForm((prev) => ({ ...prev, confirm_password }));
+            }}
+            required
+        />
+    );
+}

src/pages/auth/signup/(partials)/signup-form/signup-form-email.tsx

@@ -0,0 +1,26 @@
+import Input from "@moduletrace/twui/form/Input";
+import useFormInit from "@/src/hooks/use-form-init";
+import { type SignupFormObject } from "@/src/types";
+
+export default function SignupFormEmail({
+    setForm,
+}: ReturnType<typeof useFormInit<SignupFormObject>>) {
+    return (
+        <Input
+            id="email"
+            name="email"
+            type="email"
+            label="Email address"
+            placeholder="[email protected]"
+            autoComplete="email"
+            onChange={(e) => {
+                setForm((prev) => ({
+                    ...prev,
+                    email: e.target.value,
+                }));
+            }}
+            showLabel
+            required
+        />
+    );
+}

src/pages/auth/signup/(partials)/signup-form/signup-form-name.tsx

@@ -0,0 +1,42 @@
+import Input from "@moduletrace/twui/form/Input";
+import Row from "@moduletrace/twui/layout/Row";
+import useFormInit from "@/src/hooks/use-form-init";
+import { type SignupFormObject } from "@/src/types";
+
+export default function SignupFormName({
+    setForm,
+}: ReturnType<typeof useFormInit<SignupFormObject>>) {
+    return (
+        <Row className="w-full grid sm:grid-cols-2 gap-4">
+            <Input
+                id="first_name"
+                name="first_name"
+                type="text"
+                label="First name"
+                autoComplete="given-name"
+                onChange={(e) => {
+                    setForm((prev) => ({
+                        ...prev,
+                        first_name: e.target.value,
+                    }));
+                }}
+                showLabel
+                required
+            />
+            <Input
+                id="last_name"
+                name="last_name"
+                type="text"
+                label="Last name (optional)"
+                autoComplete="family-name"
+                onChange={(e) => {
+                    setForm((prev) => ({
+                        ...prev,
+                        last_name: e.target.value,
+                    }));
+                }}
+                showLabel
+            />
+        </Row>
+    );
+}

src/pages/auth/signup/(partials)/signup-form/signup-form-password.tsx

@@ -0,0 +1,21 @@
+import useFormInit from "@/src/hooks/use-form-init";
+import { type SignupFormObject } from "@/src/types";
+import { AppData } from "@/src/data/app-data";
+import PasswordInput from "@/src/components/general/password-input";
+
+export default function SignupFormPassword({
+    setForm,
+}: ReturnType<typeof useFormInit<SignupFormObject>>) {
+    return (
+        <PasswordInput
+            id="password"
+            label="Password"
+            autoComplete="new-password"
+            info={`At least ${AppData["PasswordMinLength"]} characters.`}
+            onValueChange={(password) => {
+                setForm((prev) => ({ ...prev, password }));
+            }}
+            required
+        />
+    );
+}

src/pages/auth/signup/(partials)/signup-form/signup-form-username.tsx

@@ -0,0 +1,31 @@
+import Input from "@moduletrace/twui/form/Input";
+import useFormInit from "@/src/hooks/use-form-init";
+import { type SignupFormObject } from "@/src/types";
+import { AppData } from "@/src/data/app-data";
+
+export default function SignupFormUsername({
+    setForm,
+}: ReturnType<typeof useFormInit<SignupFormObject>>) {
+    return (
+        <Input
+            id="username"
+            name="username"
+            type="text"
+            label="Username"
+            autoComplete="username"
+            autoCapitalize="none"
+            spellCheck={false}
+            validationRegex={AppData["UsernameRegex"]}
+            invalidMessage="Use 3-32 lowercase letters, numbers, dots, dashes or underscores"
+            info="3-32 characters: lowercase letters, numbers, dots, dashes or underscores. You can log in with this or your email."
+            onChange={(e) => {
+                setForm((prev) => ({
+                    ...prev,
+                    username: e.target.value,
+                }));
+            }}
+            showLabel
+            required
+        />
+    );
+}

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

@@ -0,0 +1,36 @@
+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 { SiteData } from "@/src/data/site-data";
+import SignupForm from "../(partials)/signup-form";
+import useLoginMethod from "@/src/hooks/use-login-method";
+
+export default function SignupFormSection() {
+    const method = useLoginMethod();
+
+    return (
+        <Section>
+            <Container>
+                <Stack className="w-full items-center max-w-md mx-auto gap-8">
+                    <AuthHero
+                        eyebrow="Get started"
+                        title="Create your account"
+                        description={
+                            method == "password"
+                                ? `Sign up for ${SiteData["SiteName"]}. We'll email you a code to confirm it's you.`
+                                : `Sign up for ${SiteData["SiteName"]} and we'll email you a one-time login code.`
+                        }
+                    />
+                    <SignupForm />
+                    <AuthFooterLink
+                        prompt="Already have an account?"
+                        title="Log in"
+                        url="/auth/login"
+                    />
+                </Stack>
+            </Container>
+        </Section>
+    );
+}

src/pages/auth/signup/index.server.tsx

@@ -0,0 +1,5 @@
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+export const server: BunextPageServerFn = async () => {
+    return {};
+};

src/pages/auth/signup/index.tsx

@@ -0,0 +1,12 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import SignupFormSection from "./(sections)/signup-form-section";
+import { SiteData } from "@/src/data/site-data";
+
+export default function SignupPage() {
+    return <SignupFormSection />;
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Sign Up | ${SiteData["SiteName"]}`,
+    description: `Create your ${SiteData["SiteName"]} account.`,
+};

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"]}.`,
+};