First Commit. Duplicate bunext-sqlite preset

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