From 2270114bb38ddbf2d8e5e5d2d1c5cd4e91f5f4de Mon Sep 17 00:00:00 2001
From: Alex <162911726+alex-dicko@users.noreply.github.com>
Date: Thu, 30 Jul 2026 20:11:50 +0100
Subject: [PATCH] Fixed infinite load when editing/adding user with invalid
 username (#8098)

* Add error messages when add/edit user fails. Add help text on username fields.

* fix linting errors

* add myself to contributors list

* Remove unused variable and restore formatting

* restore formatting

---------

Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>
---
 CONTRIBUTORS.md                               |  1 +
 .../features/users/components/Profile.tsx     | 19 +++++++++++++++++++
 src/apps/dashboard/routes/users/add.tsx       |  7 +++++++
 src/strings/en-us.json                        |  1 +
 4 files changed, 28 insertions(+)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 04339a6052..6d7d4fb3ea 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -108,6 +108,7 @@
 - [lmaotrigine](https://github.com/lmaotrigine)
 - [bjorntp](https://github.com/bjorntp)
 - [austinhardaway](https://github.com/austinhardaway)
+- [Alex Dickens](https://github.com/alex-dicko)
 - [shindouj](https://github.com/shindouj)
 
 ## Emby Contributors
diff --git a/src/apps/dashboard/features/users/components/Profile.tsx b/src/apps/dashboard/features/users/components/Profile.tsx
index ec3268aceb..7ec6ff7654 100644
--- a/src/apps/dashboard/features/users/components/Profile.tsx
+++ b/src/apps/dashboard/features/users/components/Profile.tsx
@@ -17,6 +17,7 @@ import { useChannels } from 'apps/dashboard/features/users/api/useChannels';
 import { useUpdateUser } from 'apps/dashboard/features/users/api/useUpdateUser';
 import { useUpdateUserPolicy } from 'apps/dashboard/features/users/api/useUpdateUserPolicy';
 import { useNetworkConfig } from 'apps/dashboard/features/users/api/useNetworkConfig';
+import Toast from 'apps/dashboard/components/Toast';
 
 interface ProfileProps {
     userDto: UserDto;
@@ -45,6 +46,12 @@ const Profile = ({ userDto }: ProfileProps) => {
     const { data: channels, isSuccess: isChannelsSuccess } = useChannels({ supportsMediaDeletion: true });
     const { data: netConfig, isSuccess: isNetConfigSuccess } = useNetworkConfig();
 
+    const [ isErrorToastOpen, setIsErrorToastOpen ] = useState(false);
+
+    const handleToastClose = useCallback(() => {
+        setIsErrorToastOpen(false);
+    }, []);
+
     const updateUser = useUpdateUser();
     const updateUserPolicy = useUpdateUserPolicy();
 
@@ -255,6 +262,10 @@ const Profile = ({ userDto }: ProfileProps) => {
                             }
                         });
                     }
+                },
+                onError: () => {
+                    loading.hide();
+                    setIsErrorToastOpen(true);
                 }
             });
         };
@@ -306,6 +317,11 @@ const Profile = ({ userDto }: ProfileProps) => {
 
     return (
         <div ref={element}>
+            <Toast
+                open={isErrorToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('ErrorDefault')}
+            />
             <div
                 className='lnkEditUserPreferencesContainer'
                 style={{ paddingBottom: '1em' }}
@@ -332,6 +348,9 @@ const Profile = ({ userDto }: ProfileProps) => {
                         label={globalize.translate('LabelName')}
                         required
                     />
+                    <div className='fieldDescription'>
+                        {globalize.translate('LabelUsernameAllowedCharactersHelp')}
+                    </div>
                 </div>
                 <div className='selectContainer fldSelectLoginProvider hide'>
                     <SelectElement
diff --git a/src/apps/dashboard/routes/users/add.tsx b/src/apps/dashboard/routes/users/add.tsx
index a00dfb338b..7581fb852b 100644
--- a/src/apps/dashboard/routes/users/add.tsx
+++ b/src/apps/dashboard/routes/users/add.tsx
@@ -167,6 +167,10 @@ const UserNew = () => {
                             setIsErrorToastOpen(true);
                         }
                     });
+                },
+                onError: () => {
+                    loading.hide();
+                    setIsErrorToastOpen(true);
                 }
             });
         };
@@ -231,6 +235,9 @@ const UserNew = () => {
                             label={globalize.translate('LabelName')}
                             required
                         />
+                        <div className='fieldDescription'>
+                            {globalize.translate('LabelUsernameAllowedCharactersHelp')}
+                        </div>
                     </div>
                     <div className='inputContainer'>
                         <Input
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 12e5ea5ab5..df0ae86e18 100755
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -1915,6 +1915,7 @@
     "LabelTileWidthHelp": "Maximum number of images per tile in the X direction.",
     "LabelTileHeight": "Tile Height",
     "LabelTileHeightHelp": "Maximum number of images per tile in the Y direction.",
+    "LabelUsernameAllowedCharactersHelp": "Usernames can contain letters, numbers, spaces, and the following characters: - _ ' . @ +. They cannot begin or end with a space.",
     "LabelJpegQuality": "JPEG Quality",
     "LabelJpegQualityHelp": "The JPEG compression quality for trickplay images.",
     "LabelQscale": "Qscale",