[Bug]: accounts -> new account UX improvable

kesselb commented 3 months ago

⚠️ This issue respects the following points: ⚠️

[X] This is a bug, not a question or a configuration/webserver/proxy issue.
[X] This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
[X] Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
[X] I agree to follow Nextcloud's Code of Conduct.

Bug description

The UX for adding a new account could be improved.

Screencast from 2024-07-26 14-57-25.webm

1) No visual feedback for the add new account button. There should be a feedback (e.g., a spinner, blur the form,..) that the operation is running. 2) The button should be disabled to prevent submitting the request again. 3) It's possible to press the close button when the create user operations run, but this will not cancel the process. Maybe disable the close/x as well?

Steps to reproduce

Login as admin
Visit accounts
Add a new user

Expected behavior

Visual feedback that the add new user operations is running.

Additional info

Patch to delay the user creation.

Index: apps/provisioning_api/lib/Controller/UsersController.php
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/apps/provisioning_api/lib/Controller/UsersController.php b/apps/provisioning_api/lib/Controller/UsersController.php
--- a/apps/provisioning_api/lib/Controller/UsersController.php  (revision 87dc0614d703536843b878808a2721899df798b4)
+++ b/apps/provisioning_api/lib/Controller/UsersController.php  (date 1721998715741)
@@ -454,6 +454,7 @@
        string $language = '',
        ?string $manager = null,
    ): DataResponse {
+       sleep(5);
        $user = $this->userSession->getUser();
        $isAdmin = $this->groupManager->isAdmin($user->getUID());
        $isDelegatedAdmin = $this->groupManager->isDelegatedAdmin($user->getUID());

cc @nextcloud/designers

jancborchardt commented 2 months ago

Yup @kesselb, agree with all your suggestions. Regarding point 1: All the fields in the form should be disabled and the button should get a spinner icon, text updating to "Adding new account".

susnux commented 2 months ago

All the fields in the form should be disabled and the button should get a spinner icon, text updating to "Adding new account".

One hint: Never disable the submit button, that will make the loading information unavailable for screen readers. Instead set aria-disabled and do not re-submit while loading. We are currently working on this feature as part of the Dialog component (supporting forms as content) :)

nextcloud / server