Auto-submit review fixes: safe modal lifecycle, resilient portal drafts

pr-review findings:
- The modal clears the Turnstile token after EVERY finalize attempt:
  the server verifies the captcha before any other check, so a 409/422
  consumed the single-use token and every retry then failed at
  Cloudflare with the button still enabled — a permanent dead-end.
- The modal only renders when the prompt id matches the map on screen:
  the store is module-global, so a stale id could finalize (publish)
  a map the user was no longer looking at.
- The Save & Share entry point is gated on ready_to_share — finalize
  hard-requires it, so the button previously walked users into a
  guaranteed 409 (and a burned captcha).
- The abbreviated form renders through FormField: the hand-rolled
  inputs dropped Select options (free-text states break the gallery's
  exact-match state filter), zip pattern anchoring, label association,
  and require_email_confirm entirely.
- create_document degrades a missing FormConfig to a normal map (log +
  no draft) instead of 404ing the whole creation — a portal page can
  outlive its config; test updated to pin the new decision, and a CMS
  test pins the negative injection case (config-less portals get no
  portalId on their create buttons).
- Moderation queue defaults to status=submitted: draft rows point at
  the author's LIVE working map, which nobody consented to share yet.
- Draft registry hardening: shape-check on read, quota-safe writes
  (same policy as session.ts), finalized entries pruned.
- Dead handleCreateBlankMetadataObject deleted.

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

Author: nofurtherinformation

app/src/app/components/MapPage/SubmitToPortalModal.tsx

@@ -1,7 +1,8 @@
 'use client';
 import {useEffect, useMemo, useState} from 'react';
-import {Blockquote, Box, Button, Checkbox, Dialog, Flex, Text, TextArea} from '@radix-ui/themes';
+import {Blockquote, Button, Checkbox, Dialog, Flex, Text} from '@radix-ui/themes';
 import {useMapStore} from '@/app/store/mapStore';
+import {useFormState} from '@/app/store/formState';
 import {useDraftSubmissionStore} from '@/app/store/draftSubmissionStore';
 import {getDraftSubmission, updateDraftSubmission} from '@/app/utils/draftSubmissions';
 import {
@@ -10,6 +11,7 @@ import {
   type FormConfigPublic,
 } from '@/app/utils/api/apiHandlers/postSubmission';
 import {FIELD_ORDER, FIELD_REGISTRY} from '@/app/components/Forms/fieldRegistry';
+import {FormField} from '@/app/components/Forms/FormField';
 import {useTurnstile} from '@/app/hooks/useTurnstile';
 
 const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
@@ -26,10 +28,13 @@ export const SubmitToPortalModal: React.FC = () => {
   const promptDocumentId = useDraftSubmissionStore(state => state.promptDocumentId);
   const closePrompt = useDraftSubmissionStore(state => state.closePrompt);
   const setNotification = useMapStore(state => state.setNotification);
+  const currentDocumentId = useMapStore(state => state.mapDocument?.document_id);
+  const setCaptchaToken = useFormState(state => state.setCaptchaToken);
 
   const draft = useMemo(() => getDraftSubmission(promptDocumentId), [promptDocumentId]);
   const [config, setConfig] = useState<FormConfigPublic | null>(null);
   const [values, setValues] = useState<Record<string, string>>({});
+  const [emailConfirm, setEmailConfirm] = useState('');
   const [acknowledged, setAcknowledged] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState('');
@@ -38,29 +43,40 @@ export const SubmitToPortalModal: React.FC = () => {
   useEffect(() => {
     setConfig(null);
     setValues({});
+    setEmailConfirm('');
     setAcknowledged(false);
     setError('');
     if (!draft) return;
     getFormConfig(draft.portalId).then(response => {
       if (response.ok) setConfig(response.response);
       else setError('Could not load the portal form. Please try again later.');
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [draft?.portalId, promptDocumentId]);
 
-  if (!promptDocumentId || !draft || draft.submitted) return null;
+  // The prompt id must match the map on screen: the store is module-global,
+  // so a stale id from a previous map would otherwise finalize (publish) a
+  // map the user is no longer looking at.
+  if (!promptDocumentId || promptDocumentId !== currentDocumentId || !draft || draft.submitted) {
+    return null;
+  }
 
   const requiredFields = FIELD_ORDER.filter(name => config?.required_fields?.includes(name));
+  const needsEmailConfirm = !!config?.require_email_confirm && requiredFields.includes('email');
+  const fieldIsValid = (name: string) => {
+    const value = (values[name] ?? '').trim();
+    if (!value) return false;
+    const spec = FIELD_REGISTRY[name];
+    if (name === 'email') return EMAIL_RE.test(value);
+    if (spec.pattern && !new RegExp(`^(?:${spec.pattern})$`).test(value)) return false;
+    return !spec.validator || spec.validator(value);
+  };
   const isValid =
     !!config &&
     acknowledged &&
     !!captchaToken &&
-    requiredFields.every(name => {
-      const value = (values[name] ?? '').trim();
-      if (!value) return false;
-      if (name === 'email') return EMAIL_RE.test(value);
-      const spec = FIELD_REGISTRY[name];
-      return !spec.validator || spec.validator(value);
-    });
+    requiredFields.every(fieldIsValid) &&
+    (!needsEmailConfirm || emailConfirm === values['email']);
 
   const dismiss = () => {
     updateDraftSubmission(promptDocumentId, {suppressed: true});
@@ -75,6 +91,11 @@ export const SubmitToPortalModal: React.FC = () => {
       tags: [],
       turnstile_token: captchaToken,
     });
+    // Turnstile tokens are single-use: the server verifies the captcha
+    // BEFORE any other check, so even a 409/422 consumed it. Clearing the
+    // token re-renders the widget; without this every retry fails at
+    // Cloudflare with the button still enabled.
+    setCaptchaToken('');
     setIsSubmitting(false);
     if (response.ok) {
       updateDraftSubmission(promptDocumentId, {submitted: true});
@@ -86,7 +107,7 @@ export const SubmitToPortalModal: React.FC = () => {
         type: 'success',
       });
     } else {
-      setError(response.error);
+      setError(response.error || 'Something went wrong — please try again.');
     }
   };
 
@@ -106,26 +127,32 @@ export const SubmitToPortalModal: React.FC = () => {
         <Flex direction="column" gap="3" mt="3">
           {requiredFields.map(name => {
             const spec = FIELD_REGISTRY[name];
-            const isTextArea = spec.component === TextArea;
             return (
               <Flex key={name} direction="column" gap="1">
-                <Text as="label" size="2" weight="medium">
-                  {spec.label} *
-                </Text>
-                {isTextArea ? (
-                  <TextArea
-                    value={values[name] ?? ''}
-                    placeholder={spec.label}
-                    onChange={e => setValues(v => ({...v, [name]: e.target.value}))}
-                  />
-                ) : (
-                  <input
-                    className="rt-TextFieldInput rt-r-size-2 border border-slate-300 rounded p-2"
-                    type={spec.type ?? 'text'}
-                    value={values[name] ?? ''}
-                    placeholder={spec.label}
-                    autoComplete={spec.autoComplete}
-                    onChange={e => setValues(v => ({...v, [name]: e.target.value}))}
+                <FormField
+                  name={`portal_${name}`}
+                  label={`${spec.label} *`}
+                  type={spec.type}
+                  component={spec.component}
+                  options={spec.options}
+                  autoComplete={spec.autoComplete}
+                  pattern={spec.pattern}
+                  validator={spec.validator}
+                  invalidMessage={spec.invalidMessage}
+                  required
+                  value={values[name] ?? ''}
+                  onChangeValue={value => setValues(v => ({...v, [name]: value}))}
+                />
+                {name === 'email' && needsEmailConfirm && (
+                  <FormField
+                    name="portal_email_confirm"
+                    label="Confirm Email *"
+                    type="email"
+                    required
+                    value={emailConfirm}
+                    onChangeValue={setEmailConfirm}
+                    validator={value => value === values['email']}
+                    invalidMessage="Email addresses must match"
                   />
                 )}
               </Flex>

app/src/app/components/Toolbar/SaveShareModal/SaveShareModal.tsx

@@ -7,6 +7,7 @@ import {ShareMapSection} from './ShareMapSection';
 import {useSaveShareStore} from '@/app/store/saveShareStore';
 import {Link1Icon} from '@radix-ui/react-icons';
 import {useMapMetadata} from '@/app/hooks/useMapMetadata';
+import {DRAFT_STATUSES} from '@/app/constants/document/draftStatus';
 import {useEditableDocId} from '@/app/hooks/useEditableDocId';
 import {DEFAULT_MAP_METADATA} from '@/app/utils/language';
 import {routeForType} from '@constants/document/routes';
@@ -116,22 +117,27 @@ export const SaveShareModal: React.FC<{
           />
           <hr className="my-4" />
           <ShareMapSection isEditing={isEditing} />
-          {isEditing && draftSubmission && !draftSubmission.submitted && (
-            <Button
-              variant="soft"
-              color="violet"
-              size="3"
-              className="mt-2"
-              onClick={() => {
-                if (mapDocument?.document_id) {
-                  onClose();
-                  openSubmitPrompt(mapDocument.document_id);
-                }
-              }}
-            >
-              Submit to the {draftSubmission.portalId} portal
-            </Button>
-          )}
+          {isEditing &&
+            draftSubmission &&
+            !draftSubmission.submitted &&
+            // Finalize hard-requires ready_to_share server-side; offering the
+            // modal earlier guarantees a 409 (and burns a captcha token).
+            mapMetadata?.draft_status === DRAFT_STATUSES.READY_TO_SHARE && (
+              <Button
+                variant="soft"
+                color="violet"
+                size="3"
+                className="mt-2"
+                onClick={() => {
+                  if (mapDocument?.document_id) {
+                    onClose();
+                    openSubmitPrompt(mapDocument.document_id);
+                  }
+                }}
+              >
+                Submit to the {draftSubmission.portalId} portal
+              </Button>
+            )}
           {isEditing ? (
             <Flex direction="column" gap="2" className="mt-4">
               <Flex direction="row" gap="2" justify="between">

app/src/app/utils/draftSubmissions.ts

@@ -27,14 +27,29 @@ const readAll = (): DraftSubmissionMap => {
 };
 
 const writeAll = (all: DraftSubmissionMap) => {
-  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
+  } catch {
+    // ignore storage errors (private mode, quota) — same policy as
+    // utils/api/session.ts; the draft flow degrades to "no prompt".
+  }
 };
 
-export const getDraftSubmission = (documentId?: string | null): DraftSubmission | null =>
-  (documentId && readAll()[documentId]) || null;
+export const getDraftSubmission = (documentId?: string | null): DraftSubmission | null => {
+  if (!documentId) return null;
+  const entry = readAll()[documentId];
+  // Shape-check: a corrupt/legacy value would otherwise flow into
+  // getFormConfig(undefined) and dead-end the modal with no way to clear it.
+  return entry && typeof entry === 'object' && entry.submissionId && entry.portalId ? entry : null;
+};
 
 export const setDraftSubmission = (documentId: string, draft: DraftSubmission) => {
-  writeAll({...readAll(), [documentId]: draft});
+  const all = readAll();
+  // Prune finalized entries — the registry is otherwise append-only.
+  for (const [key, entry] of Object.entries(all)) {
+    if (entry?.submitted) delete all[key];
+  }
+  writeAll({...all, [documentId]: draft});
 };
 
 export const updateDraftSubmission = (documentId: string, updates: Partial<DraftSubmission>) => {

app/src/app/utils/metadata/handleCreateBlankMetadataObject.ts

@@ -445,9 +445,18 @@ async def create_document(
     # uses to finalize (submit to the portal's gallery).
     draft_submission_id: str | None = None
     if data.portal_id is not None:
-        # Reuse the submissions module's resolver (single source of the
-        # portal-validity rule and its 404 message).
-        submissions.get_form_config(data.portal_id, session)
+        # portal_id is advisory metadata: a portal page can outlive its
+        # FormConfig (config deleted, cached page), and losing the draft
+        # must degrade to "a normal map", never "no map".
+        try:
+            submissions.get_form_config(data.portal_id, session)
+        except HTTPException:
+            logger.warning(
+                f"create_document: no form config for portal {data.portal_id!r}; "
+                "creating the map without a draft submission"
+            )
+            data.portal_id = None
+    if data.portal_id is not None:
         draft = Submission(
             portal_id=data.portal_id,
             map_public_id=new_document.public_id,

backend/app/main.py

@@ -403,12 +403,24 @@ def test_create_document_with_portal_creates_draft(
         # Drafts are invisible publicly and never in the gallery.
         assert client.get(f"/api/submissions?portal_id={PORTAL}").json() == []
 
-    def test_create_document_with_unknown_portal_404(self, client, form_config):
+    def test_create_document_with_unknown_portal_degrades(
+        self, client, form_config, session
+    ):
+        # portal_id is advisory: a portal page can outlive its FormConfig, so
+        # a missing config must degrade to a normal map (no draft), never
+        # abort document creation on a live portal page.
         response = client.post(
             "/api/create_document",
             json={"districtr_map_slug": GERRY_DB_FIXTURE_NAME, "portal_id": "nope"},
         )
-        assert response.status_code == 404
+        assert response.status_code == 201, response.json()
+        assert response.json().get("submission_id") is None
+        assert (
+            session.exec(
+                select(Submission).where(col(Submission.portal_id) == "nope")
+            ).first()
+            is None
+        )
 
     def test_unknown_capability_404(self, client, form_config):
         response = self._finalize(client, "00000000-0000-0000-0000-000000000000")

backend/tests/test_submissions.py

@@ -1248,6 +1248,26 @@ def test_portal_without_config_serves_null_fields(self):
         value = self._form_block("bare")
         self.assertIsNone(value["fields"])
 
+    def test_map_create_buttons_without_config_get_no_portal_id(self):
+        # The decision that matters: a config-less portal must NOT stamp
+        # portalId onto its create buttons — that key is what makes
+        # create_document mint a draft, and the backend logs-and-degrades
+        # only because the CMS normally withholds it here.
+        from core.testing import make_portal
+
+        bare = make_portal("bare-buttons")
+        bare.body = [
+            {"type": "map_create_buttons", "value": {"views": [], "type": "simple"}}
+        ]
+        bare.save_revision(clean=False).publish()
+        payload = self.client.get("/api/content/tags/slug/bare-buttons").json()
+        buttons = next(
+            block["value"]
+            for block in payload["content"]["body"]
+            if block["type"] == "map_create_buttons"
+        )
+        self.assertNotIn("portalId", buttons)
+
 
 # ---------------------------------------------------------------------------
 # Portal wizard

cms/content/tests.py

@@ -154,7 +154,10 @@ def portal_review(request, slug):
     if kind not in ("comments", "maps"):
         kind = "comments"
 
-    form = SubmissionFilterForm(request.GET or {})
+    # Default to submitted: draft rows point at the author's LIVE working
+    # map, which no one has consented to share yet — reviewers opt in to
+    # seeing drafts explicitly.
+    form = SubmissionFilterForm(request.GET or {"status": "submitted"})
 
     def fetch(user, **params):
         params["portal_id"] = portal.slug