feat(onboarding): step-account-info — firstName/lastName, conditional password, findOrCreate

src/features/onboarding/actions/update-account.action.ts

@@ -0,0 +1,22 @@
+"use server";
+
+import { userAction } from "@/lib/safe-actions/actions";
+import { z } from "zod";
+import { db } from "@/db";
+import * as drizzleDb from "@/db";
+import { eq } from "drizzle-orm";
+
+export const updateAccountAction = userAction
+    .schema(z.object({
+        firstName: z.string().min(1),
+        lastName: z.string().min(1),
+    }))
+    .action(async ({ parsedInput, ctx }) => {
+        const name = `${parsedInput.firstName} ${parsedInput.lastName}`.trim();
+        const [updated] = await db
+            .update(drizzleDb.schemas.user)
+            .set({ name, updatedAt: new Date() })
+            .where(eq(drizzleDb.schemas.user.id, ctx.user.id))
+            .returning();
+        return { user: updated };
+    });

src/features/onboarding/steps/step-account-info.tsx

@@ -4,94 +4,154 @@ import { useOnboarding } from "@onboardjs/react";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { z } from "zod";
-import { useZodForm, Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
+import {
+    useZodForm,
+    Form,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormControl,
+    FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PasswordInput } from "@/components/ui/password-input";
 import { Button } from "@/components/ui/button";
 import { signUp } from "@/lib/auth/auth-client";
+import { updateAccountAction } from "@/features/onboarding/actions/update-account.action";
+import type { OnboardingMeta } from "@/features/onboarding/onboarding.types";
 
-const AccountStepSchema = z.object({
+const BaseSchema = z.object({
-    name: z.string().min(1, "Name is required"),
+    firstName: z.string().min(1, "First name required"),
+    lastName: z.string().min(1, "Last name required"),
     email: z.string().email("Invalid email"),
+});
+
+const WithPasswordSchema = BaseSchema.extend({
     password: z.string().min(8, "Min. 8 characters"),
 });
 
-type AccountStepType = z.infer<typeof AccountStepSchema>;
-
 export const StepAccountInfo = () => {
     const { next, updateContext, state } = useOnboarding();
-    const form = useZodForm({ schema: AccountStepSchema });
+    const meta = state?.context.flowData.meta as OnboardingMeta | undefined;
+    const existingAccount = state?.context.flowData.account;
+    const isUpdateMode = !!existingAccount;
+    const passkeyEnabled = meta?.passkeyEnabled ?? false;
+
+    const schema = passkeyEnabled ? BaseSchema : WithPasswordSchema;
+    const form = useZodForm({ schema }) as unknown as ReturnType<typeof useZodForm<typeof WithPasswordSchema>>;
 
     const mutation = useMutation({
-        mutationFn: async (values: AccountStepType) => {
+        mutationFn: async (values: z.infer<typeof WithPasswordSchema>) => {
-            await signUp.email(
+            if (isUpdateMode) {
-                { name: values.name, email: values.email, password: values.password },
+                const result = await updateAccountAction({
-                {
+                    firstName: values.firstName,
-                    onSuccess: async () => {
+                    lastName: values.lastName,
-                        await updateContext({
+                });
-                            flowData: { ...state?.context.flowData, account: { name: values.name, email: values.email } },
+                if (!result?.data) throw new Error("Failed to update account");
-                        });
+                await updateContext({
-                        await next();
+                    flowData: {
+                        ...state?.context.flowData,
+                        account: { firstName: values.firstName, lastName: values.lastName, email: values.email },
                     },
-                    onError: (error) => {
+                });
-                        toast.error(error.error.message);
+                await next();
-                    },
+            } else {
-                }
+                await signUp.email(
-            );
+                    {
+                        name: `${values.firstName} ${values.lastName}`,
+                        email: values.email,
+                        password: values.password ?? "",
+                    } as any,
+                    {
+                        onSuccess: async () => {
+                            await updateContext({
+                                flowData: {
+                                    ...state?.context.flowData,
+                                    account: { firstName: values.firstName, lastName: values.lastName, email: values.email },
+                                },
+                            });
+                            await next();
+                        },
+                        onError: (error) => {
+                            toast.error(error.error.message);
+                        },
+                    }
+                );
+            }
         },
     });
 
     return (
         <div className="flex flex-col gap-4">
             <div>
-                <h1 className="text-2xl font-semibold">Create your account</h1>
+                <h1 className="text-2xl font-semibold">
+                    {isUpdateMode ? "Update your account" : "Create your account"}
+                </h1>
                 <p className="text-sm text-muted-foreground mt-1">This step can&apos;t be skipped.</p>
             </div>
-            <Form form={form} className="flex flex-col gap-4" onSubmit={async (values) => mutation.mutateAsync(values)}>
+            <Form form={form} className="flex flex-col gap-4" onSubmit={async (values) => mutation.mutateAsync(values as any)}>
-                <FormField
+                <div className="grid grid-cols-2 gap-3">
-                    control={form.control}
+                    <FormField
-                    name="name"
+                        control={form.control}
-                    defaultValue=""
+                        name="firstName"
-                    render={({ field }) => (
+                        defaultValue={existingAccount?.firstName ?? ""}
-                        <FormItem>
+                        render={({ field }) => (
-                            <FormLabel>Name</FormLabel>
+                            <FormItem>
-                            <FormControl>
+                                <FormLabel>First name</FormLabel>
-                                <Input placeholder="Your name" {...field} />
+                                <FormControl>
-                            </FormControl>
+                                    <Input placeholder="John" {...field} />
-                            <FormMessage />
+                                </FormControl>
-                        </FormItem>
+                                <FormMessage />
-                    )}
+                            </FormItem>
-                />
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="lastName"
+                        defaultValue={existingAccount?.lastName ?? ""}
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Last name</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="Doe" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
                 <FormField
                     control={form.control}
                     name="email"
-                    defaultValue=""
+                    defaultValue={existingAccount?.email ?? ""}
                     render={({ field }) => (
                         <FormItem>
                             <FormLabel>Email</FormLabel>
                             <FormControl>
-                                <Input placeholder="example@portabase.io" {...field} />
+                                <Input placeholder="john@example.com" {...field} />
-                            </FormControl>
-                            <FormMessage />
-                        </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="password"
-                    defaultValue=""
-                    render={({ field }) => (
-                        <FormItem>
-                            <FormLabel>Password</FormLabel>
-                            <FormControl>
-                                <PasswordInput placeholder="Your password" {...field} />
                             </FormControl>
                             <FormMessage />
                         </FormItem>
                     )}
                 />
+                {!passkeyEnabled && !isUpdateMode && (
+                    <FormField
+                        control={form.control}
+                        name="password"
+                        defaultValue=""
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Password</FormLabel>
+                                <FormControl>
+                                    <PasswordInput placeholder="Min. 8 characters" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                )}
                 <Button type="submit" disabled={mutation.isPending}>
-                    Create account
+                    {isUpdateMode ? "Update account" : "Create account"}
                 </Button>
             </Form>
         </div>