@conduction/nextcloud-vue 2.79.0 → 2.81.0

package/src/components/CnFilesBrowser/filesBrowser.js

@@ -220,3 +220,103 @@ export async function resolveObjectFolderInfo({ apiBase, register, schema, objec
 		return null
 	}
 }
+
+/**
+ * Read a dotted path off a value without throwing on a missing segment.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The value.
+ * @param {string} path A dotted path; empty answers the value itself.
+ * @return {(Array|object|string|number|boolean|null|undefined)} What sits at the path, or undefined.
+ */
+function readPath(value, path) {
+	if (typeof path !== 'string' || path === '') {
+		return value
+	}
+	return path.split('.').reduce((acc, key) => (acc === null || acc === undefined ? undefined : acc[key]), value)
+}
+
+/**
+ * Turn a host endpoint's answer into the browser's `rowData`: the host's own
+ * record for each file, keyed by file id.
+ *
+ * The answer may be a list of records (directly, at `path`, or under `items`
+ * or `results`), each naming its file in `key` (`fileId` unless the host says
+ * otherwise); a record without one is skipped. An object that is not a list
+ * and holds neither is taken as already keyed by file id. Anything else is
+ * an empty map: the extra columns stay empty, the files still list.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} data The endpoint answer.
+ * @param {object} [options] Where to look.
+ * @param {string} [options.path] A dotted path to the list in the answer.
+ * @param {string} [options.key] The record field that holds the file id.
+ * @return {object} The records by file id.
+ */
+export function indexRowData(data, { path = '', key = 'fileId' } = {}) {
+	let picked = readPath(data, path)
+	if (picked && typeof picked === 'object' && !Array.isArray(picked)) {
+		if (Array.isArray(picked.items)) {
+			picked = picked.items
+		} else if (Array.isArray(picked.results)) {
+			picked = picked.results
+		} else {
+			return { ...picked }
+		}
+	}
+	if (!Array.isArray(picked)) {
+		return {}
+	}
+	const byId = {}
+	picked.forEach((record) => {
+		if (!record || typeof record !== 'object') {
+			return
+		}
+		const id = record[key]
+		if (id === null || id === undefined || id === '') {
+			return
+		}
+		byId[String(id)] = record
+	})
+	return byId
+}
+
+/**
+ * Whether a host row action is offered on a file, by its `visibleIf`.
+ *
+ * `visibleIf.extension` lists file extensions (no case, a leading dot is
+ * allowed); `visibleIf.mime` lists mime types, where one ending in `/` or
+ * `/*` names the whole family. Every condition named must hold. An action
+ * without `visibleIf` is offered on every file, as before.
+ *
+ * @param {object} action The declared action.
+ * @param {object} node The file (`basename`, `mime`).
+ * @return {boolean} True when the action belongs on this file.
+ */
+export function hostActionApplies(action, node) {
+	const condition = action && action.visibleIf
+	if (!condition || typeof condition !== 'object') {
+		return true
+	}
+	if (Array.isArray(condition.extension)) {
+		const name = String((node && node.basename) || '')
+		const dot = name.lastIndexOf('.')
+		const extension = dot > 0 ? name.slice(dot + 1).toLowerCase() : ''
+		const wanted = condition.extension.map((entry) => String(entry).replace(/^\./, '').toLowerCase())
+		if (extension === '' || !wanted.includes(extension)) {
+			return false
+		}
+	}
+	if (Array.isArray(condition.mime)) {
+		const mime = String((node && node.mime) || '').toLowerCase()
+		const matches = condition.mime.some((entry) => {
+			const wanted = String(entry).toLowerCase()
+			if (wanted.endsWith('/*') || wanted.endsWith('/')) {
+				return mime.startsWith(wanted.replace(/\*$/, ''))
+			}
+			return mime === wanted
+		})
+		if (!matches) {
+			return false
+		}
+	}
+	return true
+}

package/src/components/CnFilesBrowser/filesBrowserColumns.js

@@ -219,3 +219,143 @@ export function sortNodesByColumn(nodes, column, ascending, rowData = null, isFo
 		return String(left).localeCompare(String(right)) * direction
 	})
 }
+
+/**
+ * Whether a cell value counts as filled in.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The value.
+ * @return {boolean} False for nothing, an empty string or an empty list.
+ */
+function isFilled(value) {
+	if (value === null || value === undefined || value === '') {
+		return false
+	}
+	return !(Array.isArray(value) && value.length === 0)
+}
+
+/**
+ * The single value a node is grouped under, as a string key: a list groups
+ * under its first entry, an object under its label, title, name or id.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The cell value.
+ * @return {(string|null)} The group key, or null when nothing is filled in.
+ */
+function groupKeyOf(value) {
+	const first = Array.isArray(value) ? value[0] : value
+	if (!isFilled(first)) {
+		return null
+	}
+	if (typeof first === 'object') {
+		const label = first.label ?? first.title ?? first.name ?? first.id
+		return isFilled(label) ? String(label) : null
+	}
+	return String(first)
+}
+
+/**
+ * The values a node carries in a column, as strings, for counting and
+ * filtering: every entry of a list, the one value otherwise.
+ *
+ * @param {object} column A resolved column.
+ * @param {object} node The node.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {string[]} The values, deduplicated.
+ */
+function facetValuesOf(column, node, rowData) {
+	const value = fileColumnValue(column, node, rowData)
+	const entries = Array.isArray(value) ? value : [value]
+	const out = []
+	entries.forEach((entry) => {
+		const key = groupKeyOf(entry)
+		if (key !== null && !out.includes(key)) {
+			out.push(key)
+		}
+	})
+	return out
+}
+
+/**
+ * Group nodes on a column's value, in the order each value is first met.
+ * Nodes with no value come last, in one group whose value is null.
+ *
+ * @param {Array<object>} nodes The nodes, already in display order.
+ * @param {object} column The resolved column.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {Array<{value: (string|null), nodes: Array<object>}>} The groups.
+ */
+export function groupNodes(nodes, column, rowData = null) {
+	const groups = []
+	const byKey = new Map()
+	const empty = { value: null, nodes: [] }
+	;(Array.isArray(nodes) ? nodes : []).forEach((node) => {
+		const key = column ? groupKeyOf(fileColumnValue(column, node, rowData)) : null
+		if (key === null) {
+			empty.nodes.push(node)
+			return
+		}
+		if (!byKey.has(key)) {
+			const group = { value: key, nodes: [] }
+			byKey.set(key, group)
+			groups.push(group)
+		}
+		byKey.get(key).nodes.push(node)
+	})
+	if (empty.nodes.length > 0) {
+		groups.push(empty)
+	}
+	return groups
+}
+
+/**
+ * The values in use in a column across the nodes, with how many nodes carry
+ * each; a list counts once per entry. Most used first, then in first-seen
+ * order.
+ *
+ * @param {Array<object>} nodes The nodes.
+ * @param {object} column The resolved column.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {Array<{value: string, count: number}>} The values and counts.
+ */
+export function facetCounts(nodes, column, rowData = null) {
+	const counts = []
+	const byValue = new Map()
+	;(Array.isArray(nodes) ? nodes : []).forEach((node) => {
+		facetValuesOf(column, node, rowData).forEach((value) => {
+			if (!byValue.has(value)) {
+				const entry = { value, count: 0 }
+				byValue.set(value, entry)
+				counts.push(entry)
+			}
+			byValue.get(value).count += 1
+		})
+	})
+	return counts
+		.map((entry, index) => ({ entry, index }))
+		.sort((a, b) => (b.entry.count - a.entry.count) || (a.index - b.index))
+		.map(({ entry }) => entry)
+}
+
+/**
+ * Whether a node passes the chosen facet values: within one facet any chosen
+ * value will do, and every facet with a choice must pass. A facet with
+ * nothing chosen does not filter.
+ *
+ * @param {object} node The node.
+ * @param {object} selections Chosen values by column key.
+ * @param {object} columnsByKey Resolved columns by key.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {boolean} True when the node stays in the list.
+ */
+export function nodeMatchesFacets(node, selections, columnsByKey, rowData = null) {
+	return Object.entries(selections || {}).every(([key, chosen]) => {
+		if (!Array.isArray(chosen) || chosen.length === 0) {
+			return true
+		}
+		const column = columnsByKey && columnsByKey[key]
+		if (!column) {
+			return true
+		}
+		const values = facetValuesOf(column, node, rowData)
+		return chosen.some((value) => values.includes(value))
+	})
+}

package/src/components/CnFormDialog/CnFormDialog.md

@@ -113,7 +113,7 @@ export default {
 | `allowDraft` | `false` | Offer a **Save draft** button that stores the record with a draft marker instead of validating it. Inert unless the schema declares `draftField`. |
 | `draftField` | `'isDraft'` | The boolean property that marks a record as a draft. |
 | `draftAppId` | `''` | The app the draft belongs to, for the storage key. |
-| `draftUserId` | `''` | Who is typing, for the storage key. **Pass this on any shared device.** |
+| `draftUserId` | `''` | Who is typing, for the storage key. Empty: the signed-in Nextcloud user, and `anonymous` only when nobody is signed in. |
 
 #### What the draft does and does not do
 
@@ -122,9 +122,15 @@ Restore and Discard; the values go in only when somebody presses Restore. A form
 that filled itself would be indistinguishable from one the server prefilled, and
 somebody would submit last week's answers without knowing they were there.
 
-`draftUserId` is part of the storage key. A shared browser profile at a service
+The user is part of the storage key. A shared browser profile at a service
 desk is the ordinary case in a municipality, and a draft keyed without the user
-hands the next person at the counter what the last one typed. Pass it.
+hands the next person at the counter what the last one typed. Without
+`draftUserId` the dialog uses the signed-in Nextcloud user. A draft stored
+under `anonymous` is removed, never offered, once somebody is signed in.
+
+A draft is written only after a person changes a field, and only while that
+field differs from the value the form opened with. Opening a dialog, or the
+form filling in values by itself, writes nothing and shows no Saving or Saved.
 
 A draft is dropped rather than offered when it is more than seven days old, when
 the record has been saved by somebody else since it was written, or when the

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -186,7 +186,7 @@
 								:error="!!errors[field.key]"
 								:type="field.widget === 'email' ? 'email' : field.widget === 'url' ? 'url' : 'text'"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -208,7 +208,7 @@
 								:error="!!errors[field.key]"
 								type="number"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value !== '' ? Number(value) : null)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -230,7 +230,7 @@
 								v-bind="fieldAria(field)"
 								:value="formData[field.key] || ''"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								rows="4"
 								@input="updateField(field.key, $event.target.value)" />
 							<CnFieldHelper
@@ -652,7 +652,7 @@
 								:modelValue="formData[field.key] != null ? String(formData[field.key]) : ''"
 								:error="!!errors[field.key]"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -787,7 +787,7 @@ import CnPropertySourceField from '../CnPropertySourceField/CnPropertySourceFiel
 import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import CnSubObjectsField from '../CnSubObjectsField/CnSubObjectsField.vue'
 import { describeRowProblem, useChildRecords } from '../../composables/useChildRecords.js'
-import { draftIndicatorText, draftKey, formDraftMixin, readDraft } from '../../composables/useFormDraft.js'
+import { clearAnonymousDrafts, draftIndicatorText, draftKey, formDraftMixin, hasDraftChanges, readDraft, resolveDraftUserId } from '../../composables/useFormDraft.js'
 import { heldFromFailures, splitHeldFiles, uploadHeldFiles } from '../../composables/useHeldFileUpload.js'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { TENANT_CONTEXT_KEY } from '../../composables/useTenantContext.js'
@@ -1172,16 +1172,16 @@ export default {
 		 * 🔴 THE USER IS PART OF THE DRAFT KEY. A shared browser profile at a
 		 * service desk is the ordinary case in a municipality, and a draft
 		 * keyed without the user hands the next person at the counter what the
-		 * last one typed. A host that passes nothing gets `anonymous`, which
-		 * is correct for a single-user context and wrong for a counter — so
-		 * the prop exists and is documented rather than guessed at.
+		 * last one typed. A host that passes nothing gets the signed-in
+		 * Nextcloud user (`@nextcloud/auth`), and `anonymous` only when
+		 * nobody is signed in.
 		 */
 		draftAppId: {
 			type: String,
 			default: '',
 		},
 
-		/** Who is typing, for the draft key. See `draftAppId`. */
+		/** Who is typing, for the draft key. Empty: the signed-in user. See `draftAppId`. */
 		draftUserId: {
 			type: String,
 			default: '',
@@ -1442,10 +1442,20 @@ export default {
 				appId: this.draftAppId,
 				schema: (this.schema?.slug || this.schema?.title || ''),
 				objectId: (this.item?.id || this.item?.uuid || ''),
-				userId: this.draftUserId,
+				userId: this.draftUserOwner,
 			})
 		},
 
+		/**
+		 * Who the draft belongs to: `draftUserId`, else the signed-in user.
+		 *
+		 * @return {string} The user id, or '' when nobody is signed in.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+		 */
+		draftUserOwner() {
+			return resolveDraftUserId(this.draftUserId)
+		},
+
 		/**
 		 * Whether "Save draft" may be offered.
 		 *
@@ -1757,17 +1767,6 @@ export default {
 		formData: {
 			deep: true,
 			handler(values) {
-				// 🔴 THE FIRST CHANGE IS THE COMPONENT SEEDING THE FORM, NOT
-				// SOMEBODY TYPING. Writing a draft for it stores the empty
-				// form over a real one, and the indicator announces "Saving
-				// draft" about work nobody did — an instrument reporting
-				// activity that did not happen, which is the whole class of
-				// defect this library keeps paying down.
-				if (this.draftSeeded !== true) {
-					this.draftSeeded = true
-					return
-				}
-
 				// Nothing is written while a draft is being offered: the user
 				// has not chosen yet, and overwriting the stored draft with the
 				// empty form they are looking at would destroy the thing they
@@ -1776,6 +1775,19 @@ export default {
 					return
 				}
 
+				// 🔴 ONLY A PERSON'S CHANGE IS WORTH A DRAFT. The form fills
+				// in values by itself after it opens (an input reporting its
+				// value back, normalised dates, defaults, the organisation),
+				// and each of those used to write a draft and say "Saved just
+				// now" on a dialog nobody had touched. A field counts once a
+				// person edited it AND it differs from what the form opened
+				// with, so undoing the edit drops the draft again.
+				const edited = Object.keys(this.touchedFields || {}).filter((key) => this.touchedFields[key])
+				if (!hasDraftChanges(values, this.draftBaseline, edited)) {
+					this.settleUnchangedDraft(this.formDraftKey)
+					return
+				}
+
 				this.scheduleDraftWrite(this.formDraftKey, values)
 			},
 		},
@@ -1940,6 +1952,12 @@ export default {
 		// Silently refilling a form is how somebody submits last week's answers
 		// without noticing they were there, and a form that fills itself is
 		// indistinguishable from one the server prefilled.
+		// A draft stored under `anonymous` was written by a page that did not
+		// know who was typing. Once somebody is signed in it is removed, never
+		// offered: it may be another person's.
+		if (this.formDraftKey && this.draftUserOwner) {
+			clearAnonymousDrafts()
+		}
 		if (this.formDraftKey) {
 			this.draftOffer = readDraft(this.formDraftKey, {
 				objectUpdated: (this.item?.updated || this.item?.['@self']?.updated || ''),
@@ -2298,6 +2316,10 @@ export default {
 				this.runAssignments(null)
 				this.loadProfileDefaults()
 			}
+			// What the form opened with. A draft is written only once a field
+			// a person edited differs from this (see the `formData` watcher).
+			// Not reactive: nothing renders from it.
+			this.draftBaseline = JSON.parse(JSON.stringify(this.formData || {}))
 		},
 
 		/**
@@ -3085,6 +3107,27 @@ export default {
 			return this.showsOuterLabel(field) ? '' : this.errors[field.key]
 		},
 
+		/**
+		 * The placeholder of a text, number or textarea control.
+		 *
+		 * The field's description already shows as the help line under the
+		 * control, so the placeholder stays empty rather than repeat it word
+		 * for word. The help line is the one kept: it is still there after
+		 * somebody typed (a placeholder disappears with the first keystroke),
+		 * it is read out through `aria-describedby`, and in the Nextcloud look
+		 * a placeholder is hidden until the field has focus anyway. While an
+		 * error takes the help line's place, the description returns as the
+		 * placeholder so it is not lost.
+		 *
+		 * @param {object} field The field definition.
+		 * @return {string} The placeholder, or '' when the help line says it.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-field-description-shows-once
+		 */
+		fieldPlaceholder(field) {
+			const description = field.description || ''
+			return this.helperError(field) ? description : ''
+		},
+
 		/**
 		 * The accessibility attributes of a text control. In both looks an invalid
 		 * control is `aria-invalid` and `aria-describedby` lists the error before
@@ -4567,6 +4610,11 @@ export default {
 			}
 
 			this.formData = { ...this.formData, ...this.draftOffer.values }
+			// What the person typed last time is their edit now: it counts for
+			// the next draft write and survives the record arriving late.
+			for (const key of Object.keys(this.draftOffer.values)) {
+				this.touchedFields[key] = true
+			}
 			this.draftOffer = null
 		},
 

package/src/components/CnFormPage/CnFormPage.vue

@@ -116,6 +116,19 @@
 			v-if="!submitted || mode !== 'public'"
 			class="cn-form-page__form"
 			@submit.prevent="submit">
+			<!-- Spam protection: a field no person sees or reaches. A filled one
+			     means a bot; the submit then sends nothing (see `honeypot`). -->
+			<div v-if="honeypot" class="cn-form-page__honeypot" aria-hidden="true">
+				<label :for="`cn-form-page-hp-${honeypot}`">{{ t('nextcloud-vue', 'Leave this field empty') }}</label>
+				<input
+					:id="`cn-form-page-hp-${honeypot}`"
+					v-model="honeypotValue"
+					:name="honeypot"
+					type="text"
+					tabindex="-1"
+					autocomplete="off"
+					data-testid="cn-form-page-honeypot">
+			</div>
 			<!-- Paste to fill: only where it may be used (see smartPasteAvailable). -->
 			<div v-if="smartPasteAvailable" class="cn-form-page__smart-paste">
 				<NcButton type="button" data-testid="cn-form-page-smart-paste" @click="smartPasteOpen = true">
@@ -397,7 +410,7 @@ import CnFormErrorSummary from '../CnFormErrorSummary/CnFormErrorSummary.vue'
 import CnFormField from '../CnFormField/CnFormField.vue'
 import CnStepper from '../CnStepper/CnStepper.vue'
 import { cnRenderFormField } from '../../composables/cnFormFieldRenderer.js'
-import { draftIndicatorText, draftKey, formDraftMixin, readDraft } from '../../composables/useFormDraft.js'
+import { clearAnonymousDrafts, draftIndicatorText, draftKey, formDraftMixin, readDraft, resolveDraftUserId } from '../../composables/useFormDraft.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { cnSelectAria } from '../../directives/cnSelectAria.js'
 import { loadCurrentUserProfile } from '../../utils/currentUserProfile.js'
@@ -529,7 +542,7 @@ export default {
 			default: '',
 		},
 
-		/** Who is typing; part of the draft's storage key so a shared browser profile never leaks a draft between users. */
+		/** Who is typing; part of the draft's storage key so a shared browser profile never leaks a draft between users. Empty: the signed-in Nextcloud user. */
 		draftUserId: {
 			type: String,
 			default: '',
@@ -610,6 +623,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Name of a honeypot field for a form anonymous visitors fill in.
+		 * The field is rendered out of sight and out of the tab order; when
+		 * it is filled, submit sends nothing and shows the normal success,
+		 * so a bot learns nothing. Empty (default): no honeypot.
+		 */
+		honeypot: {
+			type: String,
+			default: '',
+		},
+
 		/** HTTP method for endpoint mode. POST | PUT | PATCH. */
 		submitMethod: {
 			type: String,
@@ -748,6 +772,8 @@ export default {
 			summaryKeys: [],
 			/** Per-field validation error messages, keyed by field.key. */
 			fieldErrors: {},
+			/** What a bot typed into the honeypot field; stays empty for a person. */
+			honeypotValue: '',
 			/**
 			 * Cache of resolved `endpoint`/`source` visibleWhen outcomes,
 			 * keyed by field.key. Resolved ONCE in `mounted()` — see the
@@ -949,7 +975,17 @@ export default {
 			if (this.recoverDraft !== true) {
 				return ''
 			}
-			return draftKey({ appId: this.draftAppId, schema: this.draftScope, objectId: 'new', userId: this.draftUserId })
+			return draftKey({ appId: this.draftAppId, schema: this.draftScope, objectId: 'new', userId: this.draftUserOwner })
+		},
+
+		/**
+		 * Who the draft belongs to: `draftUserId`, else the signed-in user.
+		 *
+		 * @return {string} The user id, or '' when nobody is signed in.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+		 */
+		draftUserOwner() {
+			return resolveDraftUserId(this.draftUserId)
 		},
 
 		/**
@@ -997,6 +1033,11 @@ export default {
 		this.calcTimers = {}
 		// Offered, never applied: a form that fills itself is indistinguishable
 		// from one the server prefilled.
+		// A draft under `anonymous` may be somebody else's: removed once a
+		// signed-in user is known, never offered.
+		if (this.formDraftKey && this.draftUserOwner) {
+			clearAnonymousDrafts()
+		}
 		if (this.formDraftKey) {
 			this.draftOffer = readDraft(this.formDraftKey)
 		}
@@ -1768,6 +1809,11 @@ export default {
 			}
 
 			this.lastError = null
+			if (this.honeypot && this.honeypotValue !== '') {
+				// A bot filled the field no person sees: send nothing, look done.
+				this.submitted = true
+				return
+			}
 			this.submitting = true
 			try {
 				if (this.submitEndpoint) {
@@ -1793,6 +1839,9 @@ export default {
 				// describes the transport ("Request failed with status code 400")
 				// and leaves the user to guess which field it meant.
 				this.lastError = serverErrorMessage(err)
+				// A refusal that names its fields (`findings[]`, as OpenRegister's
+				// form destination check answers 422) is marked on each field.
+				this.showServerFindings(err)
 				/**
 				 * Submit failure event. Payload is the thrown error / rejected reason.
 				 *
@@ -1805,6 +1854,45 @@ export default {
 			}
 		},
 
+		/**
+		 * Put each finding of a refused submit on its field.
+		 *
+		 * Reads `response.data.findings[]`, each `{ field?, property, message }`,
+		 * and marks the field whose key is the finding's `field`, or else its
+		 * `property`. Findings on no field of this form stay in the general
+		 * error above the form. Nothing happens for an answer without findings.
+		 *
+		 * @param {object} err The rejected request.
+		 * @return {void}
+		 */
+		showServerFindings(err) {
+			const findings = err?.response?.data?.findings
+			if (!Array.isArray(findings) || findings.length === 0) {
+				return
+			}
+			const keys = new Set(this.fields.map((f) => f && f.key))
+			const marked = []
+			for (const finding of findings) {
+				const key = finding && (finding.field || finding.property)
+				if (!key || !keys.has(key) || this.fieldErrors[key]) {
+					continue
+				}
+				this.fieldErrors[key] = String(finding.message || t('nextcloud-vue', 'This answer was refused.'))
+				marked.push(key)
+			}
+			if (marked.length === 0) {
+				return
+			}
+			this.summaryKeys = this.fields.map((f) => f.key).filter((key) => marked.includes(key))
+			if (this.hasSteps) {
+				const stepIndex = this.steps.findIndex((step) => this.stepFields(step).some((f) => f.key === this.summaryKeys[0]))
+				if (stepIndex >= 0) {
+					this.currentStepIndex = stepIndex
+				}
+			}
+			this.focusFirstError(this.summaryKeys[0])
+		},
+
 		async submitViaEndpoint() {
 			const method = (this.submitMethod || 'POST').toLowerCase()
 			const url = resolveParams(this.submitEndpoint, this.$route?.params || {})
@@ -1828,6 +1916,14 @@ export default {
 </script>
 
 <style>
+.cn-form-page__honeypot {
+	position: absolute;
+	left: -10000px;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
 .cn-form-page {
 	display: flex;
 	flex-direction: column;