Show username validation error messages

src/apps/dashboard/routes/users/add.tsx

@@ -148,9 +148,17 @@ const UserNew = () => {
                 }).catch(err => {
                     console.error('[usernew] failed to update user policy', err);
                 });
-            }, function () {
-                toast(globalize.translate('ErrorDefault'));
-                loading.hide();
+            }, function (error) {
+                try {
+                    console.error('[usernew] failed to create new user', error);
+                    error.text().then((errorMessage: string) => {
+                        toast(errorMessage);
+                        loading.hide();
+                    });
+                } catch {
+                    toast(globalize.translate('ErrorDefault'));
+                    loading.hide();
+                }
             });
         };
 
@@ -197,6 +205,7 @@ const UserNew = () => {
                             type='text'
                             id='txtUsername'
                             label='LabelName'
+                            validator={{ pattern: '^([\\w \\-\'._@+]*)([\\w\\-\'._@+])([\\w \\-\'._@+]*)$', errMessage: globalize.translate('MessageInvalidUsernameFormat') }}
                             options={'required'}
                         />
                     </div>

src/apps/dashboard/routes/users/profile.tsx

@@ -173,7 +173,7 @@
         (page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value = String(user.Policy?.MaxActiveSessions) || '0';
         (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value = String(user.Policy?.SyncPlayAccess);
         loading.hide();
     }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]);
 
     const loadData = useCallback(() => {
         loading.show();
@@ -182,7 +182,7 @@
         }).catch(err => {
             console.error('[useredit] failed to load data', err);
         });
     }, [loadUser]);
 
     useEffect(() => {
         const page = element.current;
@@ -230,7 +230,16 @@
             )).then(() => {
                 onSaveComplete();
             }).catch(err => {
-                console.error('[useredit] failed to update user', err);
+                try {
+                    console.error('[useredit] failed to update user', err);
+                    err.text().then((errorMessage: string) => {
+                        toast(errorMessage);
+                        loading.hide();
+                    });
+                } catch {
+                    toast(globalize.translate('ErrorDefault'));
+                    loading.hide();
+                }
             });
         };
 
@@ -261,7 +270,7 @@
         (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
             window.history.back();
         });
     }, [loadData]);
 
     const optionLoginProvider = authProviders.map((provider) => {
         const selected = provider.Id === authenticationProviderId || authProviders.length < 2 ? ' selected' : '';
@@ -318,6 +327,7 @@
                             type='text'
                             id='txtUserName'
                             label='LabelName'
+                            validator={{ pattern: '^([\\w \\-\'._@+]*)([\\w\\-\'._@+])([\\w \\-\'._@+]*)$', errMessage: globalize.translate('MessageInvalidUsernameFormat') }}
                             options={'required'}
                         />
                     </div>

src/elements/InputElement.tsx

@@ -2,23 +2,30 @@ import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import globalize from 'lib/globalize';
 
+import './InputElementInvalidMessage.scss';
+
 interface CreateInputElementParams {
     type?: string
     id?: string
     label?: string
     initialValue?: string
+    validator?: { pattern: string, errMessage: string }
     options?: string
 }
 
-const createInputElement = ({ type, id, label, initialValue, options }: CreateInputElementParams) => ({
+const createInputElement = ({ type, id, label, initialValue, validator, options }: CreateInputElementParams) => ({
     __html: `<input
         is="emby-input"
         type="${type}"
         id="${id}"
         label="${label}"
         value="${initialValue}"
+        ${validator ? 'pattern="' + validator.pattern + '"' : ''}
         ${options}
-    />`
+    />
+    <div class="inputElementInvalidMessage">
+        ${validator?.errMessage || ''}
+    </div>`
 });
 
 type InputElementProps = {
@@ -33,7 +40,9 @@ const InputElement: FC<InputElementProps> = ({
     type,
     id,
     label,
+    validator,
     options = ''
+
 }) => {
     const container = useRef<HTMLDivElement>(null);
 
@@ -44,14 +53,16 @@ const InputElement: FC<InputElementProps> = ({
             id,
             label: globalize.translate(label),
             initialValue,
+            validator,
             options
         })
     // eslint-disable-next-line react-hooks/exhaustive-deps
     ), []);
 
     const onInput = useCallback((e: Event) => {
+        if (validator) (e.target as HTMLElement).parentElement?.querySelector('.inputElementInvalidMessage')?.classList.add('inputReadyForValidation');
         onChange((e.target as HTMLInputElement).value);
-    }, [ onChange ]);
+    }, [ onChange, validator ]);
 
     useEffect(() => {
         const inputElement = container?.current?.querySelector<HTMLInputElement>('input');

src/elements/InputElementInvalidMessage.scss

@@ -0,0 +1,8 @@
+.inputElementInvalidMessage {
+    color: red;
+    display: none;
+}
+
+.emby-input:invalid + .inputElementInvalidMessage.inputReadyForValidation {
+    display: block;
+}

src/strings/en-us.json

@@ -1113,6 +1113,7 @@
     "MessageImageTypeNotSelected": "Please select an image type from the drop-down menu.",
     "MessageInvalidForgotPasswordPin": "An invalid or expired PIN code was entered. Please try again.",
     "MessageInvalidUser": "Invalid username or password. Please try again.",
+    "MessageInvalidUsernameFormat": "Username must not be empty and contain only numbers, letters, spaces, or the following symbols -'._@+",
     "MessageItemsAdded": "Items added.",
     "MessageItemSaved": "Item saved.",
     "MessageLeaveEmptyToInherit": "Leave empty to inherit settings from a parent item or the global default value.",