fix(settings): add loading feedback to account create/edit dialogs

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

Author: pringelmann

apps/settings/src/components/Users/EditUserDialog.spec.ts

@@ -0,0 +1,126 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const confirmPassword = vi.hoisted(() => vi.fn())
+vi.mock('@nextcloud/password-confirmation', () => ({ confirmPassword }))
+vi.mock('@nextcloud/dialogs', () => ({ showError: vi.fn(), showSuccess: vi.fn() }))
+
+// Decouple the dialog test from form-data diffing internals: always report a
+// non-empty change set so save() proceeds past its early return. Other exports
+// (used transitively by the form sub-components) are kept real.
+vi.mock('./userFormUtils.ts', async (importActual) => ({
+	...(await importActual()),
+	userToFormData: () => ({
+		username: 'bob',
+		displayName: 'Bob',
+		password: '',
+		email: '',
+		groups: [],
+		subadminGroups: [],
+		quota: { id: 'default' },
+		language: { code: 'en' },
+		manager: { id: '' },
+	}),
+	diffPayload: () => ({ displayName: 'Bobby' }),
+}))
+
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import EditUserDialog from './EditUserDialog.vue'
+import { flushPromises, NcButtonStub, NcDialogStub, UserFormFieldsStub } from './dialogTestHelpers.ts'
+
+function mountDialog({ dispatch = vi.fn() } = {}) {
+	return mount(EditUserDialog, {
+		propsData: {
+			user: { id: 'bob', backendCapabilities: { setPassword: true } },
+			quotaOptions: [],
+		},
+		mocks: {
+			t: (_app: string, text: string) => text,
+			$store: {
+				dispatch,
+				getters: {
+					getGroups: [],
+					getServerData: { languages: [], canChangePassword: true },
+					getPasswordPolicyMinLength: 8,
+				},
+			},
+		},
+		stubs: {
+			NcDialog: NcDialogStub,
+			NcButton: NcButtonStub,
+			UserFormFields: UserFormFieldsStub,
+		},
+	})
+}
+
+describe('EditUserDialog loading feedback', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		confirmPassword.mockResolvedValue(undefined)
+	})
+
+	it('does not dispatch a second save request while one is in flight', async () => {
+		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog({ dispatch })
+
+		await wrapper.find('form').trigger('submit')
+		await flushPromises()
+		await wrapper.find('form').trigger('submit')
+		await flushPromises()
+
+		const saveCalls = dispatch.mock.calls.filter(([action]) => action === 'editUserMultiField')
+		expect(saveCalls).toHaveLength(1)
+	})
+
+	it('marks the form as busy and inert while saving', async () => {
+		confirmPassword.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
+
+		await wrapper.find('form').trigger('submit')
+
+		const form = wrapper.find('form')
+		expect(form.attributes('aria-busy')).toBe('true')
+		expect(form.attributes('inert')).toBeDefined()
+	})
+
+	it('shows a spinner and busy label on the submit button while saving', async () => {
+		confirmPassword.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
+
+		await wrapper.find('form').trigger('submit')
+
+		expect(wrapper.findComponent(NcLoadingIcon).exists()).toBe(true)
+		expect(wrapper.find('[data-test="submit"]').text()).toContain('Saving')
+	})
+
+	it('sets aria-disabled (not disabled) on the submit button while saving', async () => {
+		confirmPassword.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
+		const submit = wrapper.find('[data-test="submit"]')
+
+		expect(submit.attributes('aria-disabled')).toBe('false')
+		expect(submit.attributes('disabled')).toBeUndefined()
+
+		await wrapper.find('form').trigger('submit')
+
+		expect(submit.attributes('aria-disabled')).toBe('true')
+		expect(submit.attributes('disabled')).toBeUndefined()
+	})
+
+	it('prevents closing the dialog while saving', async () => {
+		confirmPassword.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
+		const dialog = wrapper.findComponent(NcDialogStub)
+
+		expect(dialog.props('noClose')).toBe(false)
+
+		await wrapper.find('form').trigger('submit')
+
+		expect(dialog.props('noClose')).toBe(true)
+	})
+})

apps/settings/src/components/Users/EditUserDialog.vue

@@ -9,12 +9,14 @@
 		size="small"
 		:name="t('settings', 'Edit account')"
 		outTransition
+		:noClose="saving"
 		@closing="$emit('closing')">
 		<form
 			id="edit-user-form"
 			class="edit-dialog__form"
 			data-test="form"
-			:disabled="saving"
+			:inert="saving"
+			:aria-busy="saving ? 'true' : 'false'"
 			@submit.prevent="save">
 			<UserFormFields
 				:fieldConfig="fieldConfig"
@@ -29,7 +31,10 @@
 				form="edit-user-form"
 				variant="primary"
 				type="submit"
-				:disabled="saving">
+				:aria-disabled="saving ? 'true' : 'false'">
+				<template v-if="saving" #icon>
+					<NcLoadingIcon />
+				</template>
 				{{ saving ? t('settings', 'Saving\u00A0…') : t('settings', 'Save') }}
 			</NcButton>
 		</template>
@@ -41,6 +46,7 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import UserFormFields from './UserFormFields.vue'
 import logger from '../../logger.ts'
 import { diffPayload, userToFormData } from './userFormUtils.ts'
@@ -51,6 +57,7 @@ export default {
 	components: {
 		NcButton,
 		NcDialog,
+		NcLoadingIcon,
 		UserFormFields,
 	},
 
@@ -113,6 +120,11 @@ export default {
 
 	methods: {
 		async save() {
+			// Guard against re-submit while a request is already running. The
+			// button is only aria-disabled (not disabled), so it can still fire.
+			if (this.saving) {
+				return
+			}
 			this.fieldErrors = {}
 
 			const payload = diffPayload(this.initialData, this.editedUser)
@@ -152,4 +164,9 @@ export default {
 		margin-block-start: calc(var(--default-grid-baseline, 4px) * 3);
 	}
 }
+
+// Visually communicate the locked/busy form while the account is saved.
+.edit-dialog__form[aria-busy='true'] {
+	opacity: 0.5;
+}
 </style>

apps/settings/src/components/Users/NewUserDialog.spec.ts

@@ -0,0 +1,127 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NewUserDialog from './NewUserDialog.vue'
+import { flushPromises, NcButtonStub, NcDialogStub, UserFormFieldsStub } from './dialogTestHelpers.ts'
+
+function makeNewUser(overrides = {}) {
+	return {
+		username: 'alice',
+		displayName: '',
+		password: 'secret-password',
+		email: '',
+		groups: [],
+		subadminGroups: [],
+		quota: { id: 'default' },
+		language: { code: 'en' },
+		manager: { id: '' },
+		...overrides,
+	}
+}
+
+function mountDialog({ dispatch = vi.fn(), loading = { all: false } } = {}) {
+	return mount(NewUserDialog, {
+		propsData: {
+			loading,
+			newUser: makeNewUser(),
+			quotaOptions: [],
+		},
+		mocks: {
+			t: (_app: string, text: string) => text,
+			$store: {
+				dispatch,
+				getters: {
+					getServerData: { newUserGenerateUserID: false, newUserRequireEmail: false },
+					getPasswordPolicyMinLength: 8,
+				},
+			},
+		},
+		stubs: {
+			NcDialog: NcDialogStub,
+			NcButton: NcButtonStub,
+			UserFormFields: UserFormFieldsStub,
+		},
+	})
+}
+
+describe('NewUserDialog loading feedback', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it('does not dispatch a second create request while one is in flight', async () => {
+		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog({ dispatch })
+
+		await wrapper.find('form').trigger('submit')
+		await wrapper.find('form').trigger('submit')
+
+		const addUserCalls = dispatch.mock.calls.filter(([action]) => action === 'addUser')
+		expect(addUserCalls).toHaveLength(1)
+	})
+
+	it('marks the form as busy and inert while creating', async () => {
+		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog({ dispatch })
+
+		await wrapper.find('form').trigger('submit')
+
+		const form = wrapper.find('form')
+		expect(form.attributes('aria-busy')).toBe('true')
+		expect(form.attributes('inert')).toBeDefined()
+	})
+
+	it('shows a spinner and busy label on the submit button while creating', async () => {
+		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog({ dispatch })
+
+		await wrapper.find('form').trigger('submit')
+
+		expect(wrapper.findComponent(NcLoadingIcon).exists()).toBe(true)
+		expect(wrapper.find('[data-test="submit"]').text()).toContain('Adding new account')
+	})
+
+	it('sets aria-disabled (not disabled) on the submit button while creating', async () => {
+		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog({ dispatch })
+		const submit = wrapper.find('[data-test="submit"]')
+
+		expect(submit.attributes('aria-disabled')).toBe('false')
+		expect(submit.attributes('disabled')).toBeUndefined()
+
+		await wrapper.find('form').trigger('submit')
+
+		expect(submit.attributes('aria-disabled')).toBe('true')
+		expect(submit.attributes('disabled')).toBeUndefined()
+	})
+
+	it('prevents closing the dialog while creating', async () => {
+		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog({ dispatch })
+		const dialog = wrapper.findComponent(NcDialogStub)
+
+		expect(dialog.props('noClose')).toBe(false)
+
+		await wrapper.find('form').trigger('submit')
+
+		expect(dialog.props('noClose')).toBe(true)
+	})
+
+	it('re-enables the form when the request fails', async () => {
+		const error = { response: { data: { ocs: { meta: { statuscode: 0 } } } } }
+		const dispatch = vi.fn().mockRejectedValue(error)
+		const loading = { all: false }
+		const wrapper = mountDialog({ dispatch, loading })
+
+		await wrapper.find('form').trigger('submit')
+		await flushPromises()
+
+		expect(loading.all).toBe(false)
+		expect(wrapper.find('form').attributes('aria-busy')).toBe('false')
+	})
+})