@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.1

package/components/Drupal/Webform/index.vue

@@ -1,18 +1,57 @@
 <template>
-  <div :class="themedClass('containerClass')">
+  <div ref="containerRef" :class="themedClass('containerClass')">
+    <div
+      v-if="submitted"
+      :class="
+        themedClass(
+          'confirmationClass',
+          'bg-success-100 text-success-800 flex items-start gap-4 rounded-sm p-6',
+        )
+      "
+    >
+      <CircleCheck
+        :class="themedClass('confirmationIconClass', 'mt-1 size-8 shrink-0')"
+        aria-hidden="true"
+      />
+      <div>
+        <p
+          :class="
+            themedClass('confirmationTitleClass', 'text-h5 font-semibold')
+          "
+        >
+          {{
+            confirmation?.title ||
+            $texts('webform.confirmation_title', 'Thank you!')
+          }}
+        </p>
+        <p
+          v-if="confirmationMessage"
+          :class="themedClass('confirmationMessageClass', 'mt-2')"
+          v-html="confirmationMessage"
+        />
+        <p v-else :class="themedClass('confirmationMessageClass', 'mt-2')">
+          {{
+            $texts(
+              'webform.submit_success',
+              'Your form has been submitted successfully.',
+            )
+          }}
+        </p>
+      </div>
+    </div>
     <UForm
+      v-else
       :class="themedClass('formClass', 'space-y-4')"
       :schema="schema"
       :state="state"
+      novalidate
       @submit="onSubmit"
       @error="console.log"
-      noValidate
     >
-
       <DesignSystemAtomsButton
         v-if="debug"
-        @click="console.log(schema.safeParse(state))"
         label="Debug Schema"
+        @click="console.log(schema.safeParse(state))"
       />
 
       <div
@@ -20,25 +59,42 @@
         :key="formElement?.metadata?.key"
         :class="themedClass('elementWrapperClass')"
       >
-        <!-- <NuxtTurnstile
-          v-model="token"
-          v-if="formElement?.metadata?.key === 'actions'"
-        /> -->
+        <NuxtTurnstile
+          v-if="
+            turnstileEnabled &&
+            formElement?.metadata?.key === turnstileAnchorKey
+          "
+          ref="turnstileRef"
+          v-model="turnstileToken"
+          :class="themedClass('turnstileClass', 'mb-4')"
+        />
 
         <component
-          v-if="formElement?.metadata?.type"
           :is="getComponent(formElement?.metadata?.type)"
-          :formElement="formElement"
-          v-model="state[formElement.metadata && formElement.metadata.key ? formElement.metadata.key : '']"
+          v-if="formElement?.metadata?.type"
+          v-model="
+            state[
+              formElement.metadata && formElement.metadata.key
+                ? formElement.metadata.key
+                : ''
+            ]
+          "
+          :form-element="formElement"
           :class="themedClass('elementClass')"
           :debug="debug"
         />
       </div>
+      <NuxtTurnstile
+        v-if="turnstileEnabled && turnstileAnchorKey === null"
+        ref="turnstileRef"
+        v-model="turnstileToken"
+        :class="themedClass('turnstileClass', 'mb-4')"
+      />
       <DesignSystemAtomsButton
         v-if="debug"
-        @click="console.log(schema.safeParse(state))"
         label="Debug Schema"
-        :buttonStyle="'focus'"
+        :button-style="'focus'"
+        @click="console.log(schema.safeParse(state))"
       />
     </UForm>
   </div>
@@ -46,6 +102,7 @@
 
 <script lang="ts" setup>
 import { z } from 'zod'
+import { CircleCheck } from 'lucide-vue-next'
 import type { FormSubmitEvent } from '@nuxt/ui'
 import {
   FormTextInput,
@@ -62,6 +119,13 @@ import {
   FormHiddenInput,
 } from '#components'
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+// Shared with the server middleware that enforces the check, so the header name
+// and the error code cannot drift apart. Deliberately not imported from
+// `server/`: that directory carries a tsconfig Vite cannot resolve from a layer.
+import {
+  TURNSTILE_ERROR_CODE,
+  TURNSTILE_TOKEN_HEADER,
+} from '@iqual/nuxt-icms/utils/turnstile'
 import type {
   FormElementPreprocessor,
   SubmissionPreprocessor,
@@ -72,22 +136,77 @@ const { $texts } = useNuxtApp()
 const themedClass = useTheme('DrupalWebform')
 const { messages } = useDrupalMessages()
 
-const props = withDefaults(defineProps<{
-  formId: string
-  formElementPreprocessor?: FormElementPreprocessor
-  submissionPreprocessor?: SubmissionPreprocessor
-  debug?: boolean
-  containerClass?: string
-  formClass?: string
-  colorScheme?: ColorScheme
-  floatingLabels?: boolean
-}>(), {
-  floatingLabels: false,
-})
+const props = withDefaults(
+  defineProps<{
+    formId: string
+    formElementPreprocessor?: FormElementPreprocessor
+    submissionPreprocessor?: SubmissionPreprocessor
+    debug?: boolean
+    containerClass?: string
+    formClass?: string
+    colorScheme?: ColorScheme
+    floatingLabels?: boolean
+    /**
+     * The entity the form is embedded in, e.g. 'node'.
+     *
+     * Webform records the entity a form was submitted from, and its whole source
+     * entity feature set keys off it: the per-entity results and download pages,
+     * source entity filters, submission totals. Passing it here is what makes a
+     * submission show up under the entity it was made from in Drupal.
+     */
+    sourceEntityType?: string
+    /**
+     * The ID of the entity the form is embedded in.
+     */
+    sourceEntityId?: string
+  }>(),
+  {
+    floatingLabels: false,
+    sourceEntityType: undefined,
+    sourceEntityId: undefined,
+  },
+)
 
 // Init a state object that will hold
 const state = ref<Record<string, any>>({})
 
+// Cloudflare Turnstile. The widget only renders — and the token is only sent —
+// when the project configured a site key; the server middleware enforces the
+// check whenever a secret key is configured. Both default to empty, so ICMS
+// installations without a Cloudflare account are unaffected.
+const turnstileSiteKey = computed(
+  () => useRuntimeConfig().public.turnstile?.siteKey || '',
+)
+const turnstileEnabled = computed(() => !!turnstileSiteKey.value)
+const turnstileToken = ref<string | undefined>()
+const turnstileRef = ref<{ reset: () => void } | null>(null)
+
+// Whether the form was submitted successfully. Replaces the form with a
+// prominent confirmation so users notice the feedback and can not
+// accidentally register twice with the same data.
+const submitted = ref(false)
+const containerRef = ref<HTMLElement | null>(null)
+
+// Confirmation settings configured on the webform in Drupal. The message
+// arrives as rendered HTML from the backend.
+type WebformConfirmation = {
+  type?: string | null
+  title?: string | null
+  message?: string | null
+  redirectUrl?: string | null
+}
+const confirmation = ref<WebformConfirmation | null>(null)
+
+// Only show the backend message for confirmation types where an editor
+// explicitly chose a message display. For PAGE and NONE the backend returns
+// Drupal's generic default, which is not meant for visitors.
+const confirmationMessage = computed(() =>
+  confirmation.value?.type &&
+  ['MESSAGE', 'INLINE', 'MODAL'].includes(confirmation.value.type)
+    ? confirmation.value.message || ''
+    : '',
+)
+
 // Asynchronously get the form definition
 const queryKey = `drupalWebform-${props?.formId || '0'}`
 const { data: formDefinition } = await useAsyncData(queryKey, async () => {
@@ -110,6 +229,17 @@ const formElements = computed<WebformElement[]>(() => {
   })
 })
 
+// Webform renders its buttons through an actions element; the widget belongs
+// right above it. Falls back to rendering after the elements when a webform
+// carries no actions element, so the check is never silently skipped.
+const turnstileAnchorKey = computed<string | null>(() => {
+  const actions = formElements.value.find(
+    (element) => element.metadata?.type === 'webform_actions',
+  )
+
+  return actions?.metadata?.key || null
+})
+
 // Compute a dynamic Zod validation schema based on form definition
 const schema = computed(() => {
   const shape: Record<string, any> = {}
@@ -291,8 +421,7 @@ const schema = computed(() => {
         break
     }
 
-    if (!validator)
-      return
+    if (!validator) return
 
     shape[key] = validator
   })
@@ -343,12 +472,49 @@ if (props.debug) {
   )
 }
 
+/**
+ * The message shown when the spam protection rejects a submission.
+ */
+function spamProtectionMessage(): string {
+  return $texts(
+    'webform.spam_protection_error',
+    'The spam protection could not verify this submission. Please try again.',
+  )
+}
+
+/**
+ * Whether a failed request was rejected by the Turnstile middleware.
+ *
+ * The middleware answers with a 403 whose body carries the error code; ofetch
+ * exposes that body on the thrown error.
+ */
+function isTurnstileRejection(error: unknown): boolean {
+  // Only the error code identifies a rejection: a 403 on its own can just as
+  // well be a permission problem on the Drupal side and must keep its own
+  // message. ofetch exposes the H3 error body as `data`, so the code the
+  // middleware sets in `data.code` arrives as `data.data.code`.
+  const candidate = error as
+    { data?: { code?: string; data?: { code?: string } } } | undefined
+
+  return (
+    candidate?.data?.data?.code === TURNSTILE_ERROR_CODE ||
+    candidate?.data?.code === TURNSTILE_ERROR_CODE
+  )
+}
+
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   const submissionData = event.data as Record<string, unknown>
   let hasShownErrorMessage = false
 
   if (props.debug) console.log('[Webform] Event data:', submissionData)
 
+  // The widget has not produced a token yet (still solving the challenge, or
+  // it expired). Submitting would be rejected by the server anyway.
+  if (turnstileEnabled.value && !turnstileToken.value) {
+    messages.value.push({ type: 'error', message: spamProtectionMessage() })
+    return
+  }
+
   try {
     const submissionElements = Object.entries(submissionData)
       .filter(
@@ -366,18 +532,42 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     })
 
     if (Array.isArray(preprocessedSubmission)) {
-      submissionElements.splice(0, submissionElements.length, ...preprocessedSubmission)
-    }
-    else if (preprocessedSubmission?.elements) {
-      submissionElements.splice(0, submissionElements.length, ...preprocessedSubmission.elements)
+      submissionElements.splice(
+        0,
+        submissionElements.length,
+        ...preprocessedSubmission,
+      )
+    } else if (preprocessedSubmission?.elements) {
+      submissionElements.splice(
+        0,
+        submissionElements.length,
+        ...preprocessedSubmission.elements,
+      )
     }
 
     if (props.debug) console.log('[Webform] Payload:', submissionElements)
 
-    const response = await useGraphqlMutation('submitWebform', {
-      id: props.formId,
-      elements: submissionElements,
-    })
+    const response = await useGraphqlMutation(
+      'submitWebform',
+      {
+        id: props.formId,
+        elements: submissionElements,
+        // Both halves or neither: a type without an ID is not a source entity.
+        ...(props.sourceEntityType && props.sourceEntityId
+          ? {
+              sourceEntityType: props.sourceEntityType,
+              sourceEntityId: props.sourceEntityId,
+            }
+          : {}),
+      },
+      turnstileEnabled.value
+        ? {
+            fetchOptions: {
+              headers: { [TURNSTILE_TOKEN_HEADER]: turnstileToken.value ?? '' },
+            },
+          }
+        : undefined,
+    )
 
     const result = response.data?.submitWebform
     const hasErrors = result?.errors?.length || result?.validationErrors?.length
@@ -388,28 +578,52 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
         console.error('[Webform] Submission Errors:', result.errors)
       }
 
-      messages.value.push({
-        type: 'error',
-        message: $texts(
-          'webform.submit_error',
-          'The form could not be submitted. Please check your entries and try again.',
-        ),
-      })
-      hasShownErrorMessage = true
+      const validationErrors = result?.validationErrors || []
+      for (const error of validationErrors) {
+        const message =
+          error?.messages?.join('\n') ||
+          $texts(
+            'webform.submit_error',
+            'The form could not be submitted. Please check your entries and try again.',
+          )
+
+        messages.value.push({
+          type: 'error',
+          message: error?.element ? `${error.element}: ${message}` : message,
+        })
+      }
+
+      // Fall back to the generic message when only general submission
+      // errors were returned.
+      hasShownErrorMessage = validationErrors.length > 0
 
       throw new Error()
     }
 
-    messages.value.push({
-      type: 'status',
-      message: $texts(
-        'webform.submit_success',
-        'Your form has been submitted successfully.',
-      ),
-    })
-
     if (props.debug) console.log('[Webform] Success:', response)
+
+    const confirmationResult = result?.submission?.confirmation
+    if (
+      (confirmationResult?.type === 'URL' ||
+        confirmationResult?.type === 'URL_MESSAGE') &&
+      confirmationResult.redirectUrl
+    ) {
+      await navigateTo(confirmationResult.redirectUrl, {
+        external: /^https?:\/\//.test(confirmationResult.redirectUrl),
+      })
+      return
+    }
+
+    confirmation.value = confirmationResult || null
+    submitted.value = true
+    await nextTick()
+    containerRef.value?.scrollIntoView({ behavior: 'smooth', block: 'center' })
   } catch (error) {
+    if (isTurnstileRejection(error)) {
+      messages.value.push({ type: 'error', message: spamProtectionMessage() })
+      hasShownErrorMessage = true
+    }
+
     if (!hasShownErrorMessage) {
       messages.value.push({
         type: 'error',
@@ -420,6 +634,12 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       })
     }
 
+    // Turnstile tokens are single use: without a reset every retry fails.
+    if (turnstileEnabled.value) {
+      turnstileToken.value = undefined
+      turnstileRef.value?.reset()
+    }
+
     if (props.debug) console.error('[Webform] Submission Error:', error)
   }
 }

package/components/Drupal/Webform/mutation.graphql

@@ -2,12 +2,28 @@ mutation submitWebform(
   $id: String!
   $elements: [WebformSubmissionElement]
   $files: [WebformSubmissionFile]
+  $sourceEntityType: String
+  $sourceEntityId: ID
 ) {
-  submitWebform(id: $id, elements: $elements, files: $files) {
+  submitWebform(
+    id: $id
+    elements: $elements
+    files: $files
+    sourceEntityType: $sourceEntityType
+    sourceEntityId: $sourceEntityId
+  ) {
     errors
     validationErrors {
       element
       messages
     }
+    submission {
+      confirmation {
+        type
+        title
+        message
+        redirectUrl
+      }
+    }
   }
 }

package/components/Form/HiddenInput.vue

@@ -8,10 +8,7 @@ useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
 </script>
 
 <template>
-  <UFormField
-    :name="formElement?.metadata?.key"
-    class="hidden"
-  >
+  <UFormField :name="formElement?.metadata?.key" class="hidden">
     <input
       type="hidden"
       :name="formElement?.metadata?.key"

package/components/Form/SelectInput.vue

@@ -362,8 +362,8 @@ const hasSelectedValue = computed(() => {
   >
     <div :class="themedClass('selectWrapper', 'group relative')">
       <USelect
-        v-model="model"
         :id="formElement.metadata.key"
+        v-model="model"
         :items="formattedOptions"
         :multiple="Boolean(formElement.metadata.multiple)"
         :placeholder="

package/components/Form/SubmitButton.vue

@@ -19,7 +19,7 @@ const colorScheme = inject<ColorScheme>('colorScheme')
     as="button"
     type="submit"
     :label="formElement?.submitLabel || $texts('webform.submit', 'Submit')"
-    buttonStyle="focus"
-    :colorScheme="colorScheme"
+    button-style="focus"
+    :color-scheme="colorScheme"
   />
 </template>

package/components/Form/TextAreaInput.vue

@@ -249,8 +249,8 @@ const floatingLabelText = tv({
   >
     <div :class="themedClass('textAreaWrapper', 'relative')">
       <UTextarea
-        v-model="model"
         :id="formElement.metadata.key"
+        v-model="model"
         :placeholder="
           floatingLabels
             ? formElement.placeholder || ' '
@@ -260,12 +260,12 @@ const floatingLabelText = tv({
         :minlength="formElement.minlength"
         :pattern="formElement.pattern?.rule"
         :data-floating="floatingLabels"
-        @focus="isTextAreaFocused = true"
-        @blur="isTextAreaFocused = false"
         :ui="{
           root: themedClass('textAreaRoot', 'relative flex items-center'),
           base: textAreaBase({ colorScheme }),
         }"
+        @focus="isTextAreaFocused = true"
+        @blur="isTextAreaFocused = false"
       />
       <label
         v-if="floatingLabels"

package/components/Form/TextEmailInput.vue

@@ -179,8 +179,8 @@ const floatingLabelText = tv({
     }"
   >
     <UInput
-      v-model="model"
       :id="formElement.metadata.key"
+      v-model="model"
       :type="formElement.metadata.type"
       :placeholder="
         floatingLabels

package/components/Form/TextInput.vue

@@ -179,8 +179,8 @@ const floatingLabelText = tv({
     }"
   >
     <UInput
-      v-model="model"
       :id="formElement.metadata.key"
+      v-model="model"
       :type="formElement.metadata.type"
       :placeholder="
         floatingLabels

package/components/Form/TextPhoneInput.vue

@@ -179,8 +179,8 @@ const floatingLabelText = tv({
     }"
   >
     <UInput
-      v-model="model"
       :id="formElement.metadata.key"
+      v-model="model"
       :type="formElement.metadata.type"
       :placeholder="
         floatingLabels

package/components/Form/WebformMarkup.vue

@@ -37,5 +37,5 @@ const markupText = tv({
 </script>
 
 <template>
-  <div :class="markupText({ colorScheme })" v-html="formElement.markup"></div>
+  <div :class="markupText({ colorScheme })" v-html="formElement.markup" />
 </template>

package/components/Form/composables/useFormDefaultValue.ts

@@ -3,23 +3,21 @@ type ModelRef<T> = {
 }
 
 function parseFormDefaultValue(rawDefaultValue?: string | null): unknown {
-  if (!rawDefaultValue)
-    return undefined
+  if (!rawDefaultValue) return undefined
 
   try {
     return JSON.parse(rawDefaultValue)
-  }
-  catch {
+  } catch {
     return rawDefaultValue
   }
 }
 
 function isEmptyModelValue(value: unknown): boolean {
   return (
-    value === undefined
-    || value === null
-    || value === ''
-    || (Array.isArray(value) && value.length === 0)
+    value === undefined ||
+    value === null ||
+    value === '' ||
+    (Array.isArray(value) && value.length === 0)
   )
 }
 
@@ -29,9 +27,7 @@ export function useFormDefaultValue<T>(
 ): void {
   const parsedDefaultValue = parseFormDefaultValue(rawDefaultValue)
 
-  if (parsedDefaultValue === undefined)
-    return
+  if (parsedDefaultValue === undefined) return
 
-  if (isEmptyModelValue(model.value))
-    model.value = parsedDefaultValue as T
-}
+  if (isEmptyModelValue(model.value)) model.value = parsedDefaultValue as T
+}

package/components/Form/composables/useFormElement.ts

@@ -1,6 +1,8 @@
 import type { MetadataFragment } from '#graphql-operations'
 
-export function useFormElement<T extends { metadata: MetadataFragment }>(formElement: T) {
+export function useFormElement<T extends { metadata: MetadataFragment }>(
+  formElement: T,
+) {
   const cleanDescription = computed(() => {
     return formElement.metadata?.description?.replace(/<[^>]*>/g, '') ?? ''
   })
@@ -27,6 +29,6 @@ export function useFormElement<T extends { metadata: MetadataFragment }>(formEle
 
   return {
     cleanDescription,
-    formattedOptions
+    formattedOptions,
   }
-}
+}

package/components/Form/utils/types.ts

@@ -6,7 +6,7 @@ import type {
   WebformElementCheckboxesFragment,
   WebformElementMarkupBaseFragment,
   WebformElementManagedFileFragment,
-  WebformElementActionsFragment
+  WebformElementActionsFragment,
 } from '#graphql-operations'
 
 type Metadata<T> = {
@@ -51,7 +51,7 @@ export interface FormElementPreprocessorContext {
 
 export type FormElementPreprocessor = (
   context: FormElementPreprocessorContext,
-) => void | WebformElement
+) => WebformElement | undefined
 
 export interface SubmissionElement {
   element: string
@@ -66,4 +66,4 @@ export interface SubmissionPreprocessorContext {
 
 export type SubmissionPreprocessor = (
   context: SubmissionPreprocessorContext,
-) => void | SubmissionElement[] | { elements?: SubmissionElement[] }
+) => SubmissionElement[] | { elements?: SubmissionElement[] } | undefined

package/components/Media/Image/fragment.graphql

@@ -14,4 +14,8 @@ fragment mediaImage on MediaImage {
       y: yNormalized
     }
   }
+  dimensions: fieldMediaImage {
+    width
+    height
+  }
 }