fix(webapp): make the new-organization form submit work on the first click

The form submitted through the client-side router, which receives the
action's redirect as a bodiless response it has to interpret itself. If
that redirect was lost on the way, the router committed empty action data
and left the user sitting on /orgs/new with the typed name still in the
field and no error shown — while the organization had in fact been
created, so clicking Create again made a second one.

Submit the form as a document POST instead. The server then returns an
ordinary redirect and the browser follows it, so completing the form no
longer depends on the client interpreting the response. A genuine failure
is rendered server-side, keeping the submitted values and showing the
error message.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: claude

.server-changes/fix-new-organization-form-submit.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Creating an organization sometimes left you on the form with the name still filled in and no error shown, even though the organization had already been created, so clicking Create again made a duplicate. Creating an organization now reliably takes you to it, and if it genuinely fails you get an error message instead of silence.

apps/webapp/app/routes/_app.orgs.new/route.tsx

@@ -3,7 +3,7 @@ import { GlobeLinesIcon } from "~/assets/icons/GlobeLinesIcon";
 import { parseWithZod } from "@conform-to/zod";
 import { BuildingOffice2Icon } from "@heroicons/react/20/solid";
 import { RadioGroup } from "@radix-ui/react-radio-group";
-import { json, redirect, type ActionFunction, type LoaderFunctionArgs } from "@remix-run/node";
+import { json, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -24,6 +24,7 @@ import { useFaviconUrl } from "~/hooks/useFaviconUrl";
 import { useFeatures } from "~/hooks/useFeatures";
 import { createOrganization } from "~/models/organization.server";
 import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
+import { logger } from "~/services/logger.server";
 import { requireUser, requireUserId } from "~/services/session.server";
 import { extractDomain, faviconUrl } from "~/utils/favicon";
 import { organizationPath, rootPath } from "~/utils/pathBuilder";
@@ -47,7 +48,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   });
 };
 
-export const action: ActionFunction = async ({ request }) => {
+export const action = async ({ request }: ActionFunctionArgs) => {
   const user = await requireUser(request);
   const formData = await request.formData();
   const submission = parseWithZod(formData, { schema });
@@ -106,14 +107,26 @@ export const action: ActionFunction = async ({ request }) => {
     }
 
     return redirect(organizationPath(organization));
-  } catch (error: any) {
-    return json({ errors: { body: error.message } }, { status: 400 });
+  } catch (error) {
+    logger.error("Failed to create organization", {
+      userId: user.id,
+      error: error instanceof Error ? error.message : error,
+    });
+
+    return json(
+      submission.reply({
+        formErrors: [
+          "We couldn't create your organization. Check your organization list before trying again, and if this problem persists please contact support.",
+        ],
+      }),
+      { status: 400 }
+    );
   }
 };
 
 export default function NewOrganizationPage() {
   const { hasOrganizations } = useTypedLoaderData<typeof loader>();
-  const lastSubmission = useActionData();
+  const lastSubmission = useActionData<typeof action>();
   const { isManagedCloud } = useFeatures();
   const navigation = useNavigation();
   const [companyUrl, setCompanyUrl] = useState("");
@@ -122,7 +135,7 @@ export default function NewOrganizationPage() {
 
   const [form, { orgName }] = useForm({
     id: "create-organization",
-    lastResult: lastSubmission as any,
+    lastResult: lastSubmission,
     onValidate({ formData }) {
       return parseWithZod(formData, { schema });
     },
@@ -158,7 +171,8 @@ export default function NewOrganizationPage() {
             LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
             title="Create an Organization"
           />
-          <Form method="post" {...getFormProps(form)}>
+          {/* Submit as a document POST so the browser follows the redirect itself */}
+          <Form method="post" reloadDocument {...getFormProps(form)}>
             <Fieldset>
               <InputGroup>
                 <Label htmlFor={orgName.id}>Organization name *</Label>
@@ -228,6 +242,8 @@ export default function NewOrganizationPage() {
                 </>
               )}
 
+              <FormError id={form.errorId}>{form.errors}</FormError>
+
               <FormButtons
                 confirmButton={
                   <Button type="submit" variant={"primary/small"} isLoading={isLoading}>