@conduction/nextcloud-vue 2.74.0 → 2.76.0

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -357,7 +357,8 @@ export default {
 		 * Host translate function provided by CnAppRoot as
 		 * `cnTranslate: this.translate` (bound to the host app's id). The
 		 * manifest-authored `content.emptyText` is run through it for this
-		 * component's OWN empty state, and so is `content.prompt`. Defaults to an identity function so
+		 * component's OWN empty state, and so are `content.prompt` and
+		 * `content.addLabel`. Defaults to an identity function so
 		 * an untranslated key renders as itself.
 		 */
 		cnTranslate: { default: () => (key) => key },
@@ -1092,9 +1093,24 @@ export default {
 			return (c.formFieldOverrides && typeof c.formFieldOverrides === 'object') ? c.formFieldOverrides : {}
 		},
 
-		/** Pre-translated Add label (overridable via `content.addLabel`). */
+		/**
+		 * The Add label: `content.addLabel` through the app's translate
+		 * function, else the library's "Add".
+		 *
+		 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/object-list-add-label/spec.md
+		 * @return {string}
+		 */
 		addLabel() {
-			return this.content.addLabel || t('nextcloud-vue', 'Add')
+			// `content.addLabel` is manifest copy in the APP's catalogue, so it
+			// goes through the host translate function like `emptyText` and
+			// `prompt`. It used to print raw, so a Dutch user read the English
+			// manifest string. A label an app already translated has no key
+			// of its own in the catalogue and comes back unchanged.
+			if (this.content.addLabel) {
+				const fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
+				return fn(this.content.addLabel)
+			}
+			return t('nextcloud-vue', 'Add')
 		},
 
 		/** Stable signature of the query so the watcher only refetches on real change. */

package/src/components/CnQuickFilterBar/CnQuickFilterBar.vue

@@ -46,7 +46,7 @@
 					:name="entry.tab.icon"
 					:size="16"
 					class="cn-quick-filter-bar__icon" />
-				<span class="cn-quick-filter-bar__label">{{ entry.tab.label }}</span>
+				<span class="cn-quick-filter-bar__label">{{ tl(entry.tab.label) }}</span>
 				<span
 					v-if="countOf(entry) !== null"
 					class="cn-quick-filter-bar__count"
@@ -102,7 +102,7 @@
 							:name="entry.tab.icon"
 							:size="16"
 							class="cn-quick-filter-bar__icon" />
-						<span class="cn-quick-filter-bar__label">{{ entry.tab.label }}</span>
+						<span class="cn-quick-filter-bar__label">{{ tl(entry.tab.label) }}</span>
 						<span
 							v-if="countOf(entry) !== null"
 							class="cn-quick-filter-bar__count"
@@ -152,6 +152,11 @@ export default {
 	inject: {
 		/** The look CnAppRoot provides; `board` draws the tabs as pressed chips. */
 		cnLook: { default: 'nextcloud' },
+		/**
+		 * The host's label lookup (CnAppRoot provides it); identity without one, so a
+		 * label that is not a key renders as written.
+		 */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	// NO `model: { prop, event }` OPTION.
@@ -336,7 +341,7 @@ export default {
 		overflowLabel() {
 			const active = this.activeOverflowEntries
 			if (active.length === 1) {
-				return active[0].tab.label
+				return this.tl(active[0].tab.label)
 			}
 			if (active.length > 1) {
 				return t('nextcloud-vue', '{count} filters', { count: active.length })
@@ -370,7 +375,7 @@ export default {
 				.map((tab, index) => {
 					const count = this.countOf({ tab, index })
 					return {
-						label: count === null ? tab.label : `${tab.label} (${count})`,
+						label: count === null ? this.tl(tab.label) : `${this.tl(tab.label)} (${count})`,
 						icon: tab.icon,
 						index,
 						_empty: this.isEmptyFilter(tab),
@@ -394,6 +399,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
+		 * such as "Mine" reads in the user's language.
+		 *
+		 * @param {string} text The text as written in the manifest.
+		 * @return {string} The translated text.
+		 */
+		tl(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
 		t,
 
 		/**

package/src/components/CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue

@@ -91,6 +91,20 @@
 					</ul>
 				</section>
 
+				<p v-if="visibleGroups.length && pendingSections.length"
+					class="cn-related-objects-widget__section-status"
+					data-testid="cn-related-pending"
+					role="status">
+					{{ pendingLabel }}
+				</p>
+				<p v-for="failed in failedSections"
+					:key="`failed-${failed.key}`"
+					class="cn-related-objects-widget__section-error"
+					data-testid="cn-related-section-error"
+					:data-section="failed.key">
+					{{ t('nextcloud-vue', 'Could not load {section}.', { section: failed.label }) }}
+				</p>
+
 				<div v-if="loading && !visibleGroups.length" class="cn-related-objects-widget__empty">
 					{{ loadingLabel }}
 				</div>
@@ -710,6 +724,12 @@ export default {
 			groups: [],
 			/** Active tab key. */
 			activeKey: '',
+			/** Keys of the tabbed sections whose request is still in flight (`objects`, `files`, `relations`). */
+			pendingSections: [],
+			/** Tabbed sections whose request failed: `{ key, label }`. */
+			failedSections: [],
+			/** Bumped per `loadTabs()`; an answer from an older load is dropped. */
+			loadToken: 0,
 			/** Key of the inline-expanded row (`{group}-{id}`) for leaves with no owning-app page (e.g. notes). */
 			expandedKey: '',
 			/** Whether a footer file upload is in flight. */
@@ -834,6 +854,22 @@ export default {
 			)
 		},
 
+		/**
+		 * The line under the panel naming the sections still loading, once
+		 * another section is already on screen.
+		 *
+		 * @return {string}
+		 */
+		pendingLabel() {
+			const labels = {
+				objects: this.objectsLabel,
+				files: this.filesLabel,
+				relations: t('nextcloud-vue', 'Linked items'),
+			}
+			const names = this.pendingSections.map((key) => labels[key] || key).join(', ')
+			return t('nextcloud-vue', 'Still loading: {sections}', { sections: names })
+		},
+
 		/** Placeholder shown in the body while the first fetch is in flight. */
 		loadingLabel() {
 			return t('nextcloud-vue', 'Loading …')
@@ -1330,16 +1366,27 @@ export default {
 		 * @return {Promise<object|null>}
 		 */
 		async fetchSubResource(suffix) {
+			return (await this.fetchSection(suffix)).data
+		},
+
+		/**
+		 * GET an OpenRegister sub-resource and say whether it answered, so a
+		 * section can tell "nothing linked" from "could not load".
+		 *
+		 * @param {string} suffix - The sub-resource suffix.
+		 * @return {Promise<{ ok: boolean, data: object|null }>}
+		 */
+		async fetchSection(suffix) {
 			try {
 				// `no-store`: relations change as the user links content; a stale
 				// cached empty response would wrongly show the empty state on load.
 				const response = await fetch(this.relatedUrl(suffix), { method: 'GET', headers: buildHeaders(), cache: 'no-store' })
 				if (!response.ok) {
-					return null
+					return { ok: false, data: null }
 				}
-				return await response.json()
+				return { ok: true, data: await response.json() }
 			} catch {
-				return null
+				return { ok: false, data: null }
 			}
 		},
 
@@ -1543,56 +1590,138 @@ export default {
 		},
 
 		/**
-		 * Fetch every group directly from OpenRegister and build the tabs.
+		 * Fetch every group directly from OpenRegister and build the tabs,
+		 * one section at a time.
+		 *
+		 * 🔴 EACH SECTION SHOWS WHEN ITS OWN REQUEST RETURNS. This used to wait
+		 * for relations, uses, used, contracts and files together behind one
+		 * `Promise.all`, so the relations call (0.45 s on pipelinq's lead page)
+		 * sat behind uses/used (about 9 s) and the card said "Loading …" the
+		 * whole time. Now the groups are laid out up front in their fixed order
+		 * and filled in place as each answer arrives, so a slow section never
+		 * reorders or hides a fast one. A section still in flight is named in
+		 * `pendingSections`; one whose request failed in `failedSections`.
 		 *
+		 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/related-objects-progressive/spec.md
 		 * @return {Promise<void>}
 		 */
 		async loadTabs() {
+			const token = ++this.loadToken
+			const current = () => token === this.loadToken
 			this.loading = true
-			try {
-				const [relations, uses, used, contracts, files] = await Promise.all([
-					this.fetchSubResource('relations'),
-					this.showObjects ? this.fetchSubResource('uses') : null,
-					this.showObjects ? this.fetchSubResource('used') : null,
-					(this.showObjects && this.showContracts) ? this.fetchSubResource('contracts') : null,
-					this.showFiles ? this.fetchSubResource('files') : null,
-				])
+			this.failedSections = []
+
+			const objectSuffixes = this.showObjects
+				? ['uses', 'used', ...(this.showContracts ? ['contracts'] : [])]
+				: []
+			const sections = [
+				...(this.showObjects ? [{ key: 'objects', label: this.objectsLabel }] : []),
+				...(this.showFiles ? [{ key: 'files', label: this.filesLabel }] : []),
+				{ key: 'relations', label: t('nextcloud-vue', 'Linked items') },
+			]
+			this.pendingSections = sections.map((section) => section.key)
 
-				const groups = []
+			// Lay out every group now, in its fixed order, empty. visibleGroups
+			// hides an empty group, so nothing shows until a section fills it.
+			const groups = []
+			if (this.showObjects) {
+				groups.push({ key: 'objects', label: this.objectsLabel, icon: 'FileTreeOutline', integrationId: '', items: [], total: 0 })
+			}
+			if (this.showFiles) {
+				groups.push({ key: 'files', label: this.filesLabel, icon: 'Paperclip', integrationId: 'files', items: [], total: 0 })
+			}
+			for (const def of LEAF_GROUPS) {
+				groups.push({
+					key: def.key,
+					label: this.leafLabel(def.key),
+					// Prefer the registered integration's icon so it matches the
+					// sidebar/linked-apps; fall back to the known-good default.
+					icon: this.integrationIcon(def.integrationId) || def.icon,
+					integrationId: def.integrationId,
+					requiredApp: def.requiredApp,
+					items: [],
+					total: 0,
+				})
+			}
+			this.groups = groups
 
-				if (this.showObjects) {
-					await this.resolveSchemaTitles([uses, used, contracts])
-					const objectItems = this.mergeObjectResults([uses, used, contracts])
-					groups.push({ key: 'objects', label: this.objectsLabel, icon: 'FileTreeOutline', integrationId: '', items: objectItems, total: objectItems.length })
+			const setGroup = (key, items, total) => {
+				const index = this.groups.findIndex((group) => group.key === key)
+				if (index === -1) {
+					return
 				}
-
-				if (this.showFiles) {
-					const fileResults = (files && files.results) || []
-					groups.push({ key: 'files', label: this.filesLabel, icon: 'Paperclip', integrationId: 'files', items: fileResults.map((f) => this.toFileRow(f)), total: files ? (files.total ?? fileResults.length) : 0 })
+				const next = this.groups.slice()
+				next[index] = { ...next[index], items, total }
+				this.groups = next
+			}
+			const settle = (key, ok) => {
+				this.pendingSections = this.pendingSections.filter((k) => k !== key)
+				if (!ok) {
+					const section = sections.find((s) => s.key === key)
+					this.failedSections = [...this.failedSections, { key, label: section ? section.label : key }]
 				}
+				// Keep the tab the reader saw first: pin it, so a slower section
+				// that sorts before it does not take the panel away.
+				if (!this.activeKey && this.visibleGroups.length) {
+					this.activeKey = this.visibleGroups[0].key
+				}
+			}
 
+			const loadRelations = this.fetchSection('relations').then(({ ok, data }) => {
+				if (!current()) {
+					return
+				}
 				for (const def of LEAF_GROUPS) {
-					const block = relations && relations[def.responseKey]
+					const block = data && data[def.responseKey]
 					const results = (block && block.results) || []
-					groups.push({
-						key: def.key,
-						label: this.leafLabel(def.key),
-						// Prefer the registered integration's icon so it matches the
-						// sidebar/linked-apps; fall back to the known-good default.
-						icon: this.integrationIcon(def.integrationId) || def.icon,
-						integrationId: def.integrationId,
-						requiredApp: def.requiredApp,
-						items: results.map((r, i) => this.toLeafRow(r, i)),
-						total: block ? (block.total ?? results.length) : 0,
-					})
+					setGroup(def.key, results.map((r, i) => this.toLeafRow(r, i)), block ? (block.total ?? results.length) : 0)
 				}
+				settle('relations', ok)
+			})
 
-				this.groups = groups
-				if (!this.activeGroup && this.visibleGroups.length) {
-					this.activeKey = this.visibleGroups[0].key
-				}
+			const loadFiles = this.showFiles
+				? this.fetchSection('files').then(({ ok, data }) => {
+						if (!current()) {
+							return
+						}
+						const fileResults = (data && data.results) || []
+						setGroup('files', fileResults.map((f) => this.toFileRow(f)), data ? (data.total ?? fileResults.length) : 0)
+						settle('files', ok)
+					})
+				: null
+
+			// uses, used and contracts merge into one Objects group: each answer
+			// re-merges what has arrived so far, and the group stays pending
+			// until the last of them is in.
+			const envelopes = objectSuffixes.map(() => null)
+			let objectsOk = true
+			const loadObjects = objectSuffixes.length
+				? Promise.all(objectSuffixes.map((suffix, i) => this.fetchSection(suffix).then(async ({ ok, data }) => {
+						if (!current()) {
+							return
+						}
+						objectsOk = objectsOk && ok
+						envelopes[i] = data
+						await this.resolveSchemaTitles([data])
+						if (!current()) {
+							return
+						}
+						const objectItems = this.mergeObjectResults(envelopes)
+						setGroup('objects', objectItems, objectItems.length)
+					}))).then(() => {
+						if (current()) {
+							settle('objects', objectsOk)
+						}
+					})
+				: null
+
+			try {
+				await Promise.all([loadRelations, loadFiles, loadObjects])
 			} finally {
-				this.loading = false
+				if (current()) {
+					this.loading = false
+					this.pendingSections = []
+				}
 			}
 		},
 
@@ -1896,6 +2025,20 @@ export default {
 	font-style: italic;
 }
 
+.cn-related-objects-widget__section-status {
+	margin: 0;
+	padding: var(--default-grid-baseline, 4px) calc(2 * var(--default-grid-baseline, 4px));
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+}
+
+.cn-related-objects-widget__section-error {
+	margin: 0;
+	padding: var(--default-grid-baseline, 4px) calc(2 * var(--default-grid-baseline, 4px));
+	color: var(--color-error-text, var(--color-error));
+	font-size: 0.85em;
+}
+
 .cn-related-objects-widget__empty-state {
 	/* NcEmptyContent defaults to filling tall parents; inside a widget cell a
 	   compact block reads better. */

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -39,7 +39,7 @@
 					</slot>
 				</span>
 				<h4 class="cn-kpi-card__title" :title="title || undefined">
-					{{ title || t('nextcloud-vue', 'Objects') }}
+					{{ title ? tl(title) : t('nextcloud-vue', 'Objects') }}
 				</h4>
 			</div>
 
@@ -54,7 +54,7 @@
 					<!-- @binding {string} formatted The default localized count string. -->
 					<slot name="value" :count="count" :formatted="formattedCount">{{ formattedCount }}</slot>
 				</span>
-				<span class="cn-kpi-card__label cn-stats-block__count-label">{{ countLabel }}</span>
+				<span class="cn-kpi-card__label cn-stats-block__count-label">{{ countLabel ? tl(countLabel) : countLabel }}</span>
 			</div>
 			<div v-else-if="loading" class="cn-stats-block__loading">
 				<NcLoadingIcon :size="16" />
@@ -164,6 +164,11 @@ export default {
 		 * @spec openspec/changes/screens-dashboard-parity/specs/dashboard-page/spec.md#requirement-the-board-kpi-tile
 		 */
 		cnLook: { default: 'nextcloud' },
+		/**
+		 * The host's label lookup (CnAppRoot provides it); identity without one, so a
+		 * label that is not a key renders as written.
+		 */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
@@ -453,6 +458,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
+		 * such as "Mine" reads in the user's language.
+		 *
+		 * @param {string} text The text as written in the manifest.
+		 * @return {string} The translated text.
+		 */
+		tl(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
 		formatBreakdownLabel(key) {
 			return key.charAt(0).toUpperCase() + key.slice(1) + ':'
 		},

package/src/composables/__tests__/useObjectLock.endpoints.spec.js

@@ -174,3 +174,86 @@ describe('useObjectLock reaches the routes OpenRegister actually declares', () =
 		})
 	})
 })
+
+/**
+ * Run the composable with getter inputs, the way CnDetailPage calls it.
+ *
+ * @param {object}   store   The object store double.
+ * @param {object}   targets Getters for register, schema (cache key), id and slug.
+ * @param {Function} body    What to do with the lock state.
+ * @return {Promise<*>} Whatever `body` returned.
+ */
+async function withGetterLock(store, targets, body) {
+	const scope = effectScope()
+	let lock
+	scope.run(() => {
+		lock = useObjectLock(store, targets.register, targets.schema, targets.id, {
+			autoRenew: false,
+			schemaSlug: targets.slug,
+		})
+	})
+	try {
+		return await body(lock)
+	} finally {
+		scope.stop()
+	}
+}
+
+describe('useObjectLock reads getter inputs as values', () => {
+	beforeEach(() => {
+		mockAxios.post.mockReset().mockResolvedValue({ data: {} })
+	})
+
+	it('🔴 puts the getter VALUES in the lock URL, not their source', async () => {
+		await withGetterLock(storeWithLock(null), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			await lock.acquire()
+		})
+
+		const [url] = mockAxios.post.mock.calls[0]
+		expect(url).toBe('/apps/openregister/api/objects/dossiq/case/case-1/lock')
+		expect(url).not.toMatch(/=>/)
+	})
+
+	it('🔴 reads the cached lock under the getter value of the cache key', async () => {
+		await withGetterLock(storeWithLock('bram'), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			expect(lock.locked.value).toBe(true)
+			expect(lock.lockedBy.value).toBe('bram')
+		})
+	})
+
+	it('🔴 releases on the getter values too', async () => {
+		await withGetterLock(storeWithLock('anna'), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			await lock.release()
+		})
+
+		expect(mockAxios.post).toHaveBeenCalledWith('/apps/openregister/api/objects/dossiq/case/case-1/unlock')
+	})
+
+	it.each([
+		['register', { register: () => '', schema: () => 'dossiq-case', id: () => 'case-1', slug: () => 'case' }],
+		['schema slug', { register: () => 'dossiq', schema: () => 'dossiq-case', id: () => 'case-1', slug: () => undefined }],
+		['object id', { register: () => 'dossiq', schema: () => 'dossiq-case', id: () => null, slug: () => 'case' }],
+	])('sends nothing while the %s is unknown', async (_label, targets) => {
+		await withGetterLock(storeWithLock('anna'), targets, async (lock) => {
+			await lock.acquire()
+			await lock.release()
+		})
+
+		expect(mockAxios.post).not.toHaveBeenCalled()
+	})
+})

package/src/composables/useObjectLock.js

@@ -5,7 +5,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { tryOnScopeDispose } from '@vueuse/core'
-import { computed, onBeforeUnmount, onMounted, unref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, toValue } from 'vue'
 
 /**
  * Thrown when an `acquire()` POST returns 409 (Conflict) or 423
@@ -46,14 +46,14 @@ export class PermissionError extends Error {
  * other path that keeps `objectStore.objects[type][id]` fresh).
  *
  * @param {object} objectStore  Pinia store instance (`useObjectStore()` result).
- * @param {string|import('vue').Ref<string>}      register OR register slug.
- * @param {string|import('vue').Ref<string>}      schema   OR schema slug (also the GraphQL field name).
- * @param {string|import('vue').Ref<string>}      id       Object UUID.
+ * @param {string|import('vue').Ref<string>|function(): string}      register OR register slug.
+ * @param {string|import('vue').Ref<string>|function(): string}      schema   OR schema slug (also the GraphQL field name).
+ * @param {string|import('vue').Ref<string>|function(): string}      id       Object UUID.
  * @param {object}  [options]  Optional config.
  * @param {boolean} [options.autoRenew]      Renew the lock on a fixed interval while editing + visible.
  * @param {number}  [options.renewIntervalMs]  Renew every N ms (default 10 min).
  * @param {number}  [options.lockDurationSec]   Server-side TTL requested on acquire (default 30 min).
- * @param {string|import('vue').Ref<string>} [options.schemaSlug] The schema slug for the LOCK URL, when `schema` is the object-cache key rather than the slug (CnDetailPage passes `<register>-<schema>` as the key). Defaults to `schema`.
+ * @param {string|import('vue').Ref<string>|function(): string} [options.schemaSlug] The schema slug for the LOCK URL, when `schema` is the object-cache key rather than the slug (CnDetailPage passes `<register>-<schema>` as the key). Defaults to `schema`.
  * @return {{
  *   locked: import('vue').ComputedRef<boolean>,
  *   lockedByMe: import('vue').ComputedRef<boolean>,
@@ -62,6 +62,7 @@ export class PermissionError extends Error {
  *   acquire: () => Promise<void>,
  *   release: () => Promise<void>
  * }} Reactive lock state + actions.
+ * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/object-lock/spec.md
  */
 export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	const autoRenew = options.autoRenew !== false
@@ -74,14 +75,23 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	const isVisible = () => typeof document === 'undefined' || document.visibilityState !== 'hidden'
 	let renewTimer = null
 
+	/*
+	 * 🔴 `toValue`, NOT `unref`. CnDetailPage passes GETTER FUNCTIONS
+	 * (`() => props.objectId`) so the lock follows the route. `unref` returns a
+	 * function untouched, so the getter's SOURCE was interpolated into the URL:
+	 * every detail page sent `/api/objects/()=>pn/()=>Ct.schema||Bn/()=>Ct.objectId/lock`
+	 * and got a 404, and the cache lookup used the function as its key, so the
+	 * banner never saw a lock either. `toValue` reads a plain value, a ref and a
+	 * getter alike.
+	 */
 	function readType() {
-		return unref(schema)
+		return toValue(schema)
 	}
 	function readId() {
-		return unref(id)
+		return toValue(id)
 	}
 	function readRegister() {
-		return unref(register)
+		return toValue(register)
 	}
 
 	function readSelfLock() {
@@ -127,7 +137,22 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	})
 
 	function readSchemaSlug() {
-		return unref(options.schemaSlug ?? schema)
+		return toValue(options.schemaSlug ?? schema)
+	}
+
+	/**
+	 * Whether register, schema slug and object id are all known.
+	 *
+	 * A detail page mounts before its route params or object have resolved.
+	 * Without this a lock call would go out with `undefined` in the path, a
+	 * request OpenRegister can only answer with a 404.
+	 *
+	 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/object-lock/spec.md
+	 * @return {boolean} True when a lock URL can be built.
+	 */
+	function hasTarget() {
+		return [readRegister(), readSchemaSlug(), readId()]
+			.every((part) => typeof part === 'string' ? part !== '' : typeof part === 'number')
 	}
 
 	/**
@@ -176,6 +201,9 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	}
 
 	async function acquire() {
+		if (!hasTarget()) {
+			return
+		}
 		try {
 			await axios.post(endpoint(), { duration: lockDurationSec })
 		} catch (e) {
@@ -208,6 +236,9 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 
 	async function release() {
 		stopRenewTimer()
+		if (!hasTarget()) {
+			return
+		}
 		try {
 			await axios.post(unlockEndpoint())
 		} catch (e) {
@@ -251,7 +282,7 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	}
 
 	function beaconRelease() {
-		if (!lockedByMe.value) {
+		if (!lockedByMe.value || !hasTarget()) {
 			return
 		}
 		try {

package/src/css/form-field.css

@@ -88,7 +88,7 @@
 }
 
 /* An invalid field: 2px error border on the control, 4px edge on the group. */
-.cn-look-board .cn-form-field--invalid input,
+.cn-look-board .cn-form-field--invalid input:not([type='checkbox']):not([type='radio']),
 .cn-look-board .cn-form-field--invalid textarea,
 .cn-look-board .cn-form-field--invalid .select {
 	border: var(--cn-field-error-border) solid var(--color-error);