frontend: fix continue btn disabled on choosing device name setup

also added a new device name error state 'tooShort'. Error will
only show when user has started typing and deletes everything.
Won't show on initial (empty) name.

Author: shonsirsha

frontends/web/src/hooks/devicename.ts

@@ -0,0 +1,42 @@
+import { useCallback, useMemo } from 'react';
+import { TDeviceNameError } from '../utils/types';
+
+// matches any character that is not a printable ASCII character or space
+const regexInvalid = /[^ -~]/g;
+
+export const useValidateDeviceName = (name: string) => {
+
+  const getDeviceNameValidationError = useCallback((name: string): TDeviceNameError => {
+    const trimmed = name.trim();
+    regexInvalid.lastIndex = 0; // resets lastIndex before each test
+
+    if (trimmed.length < 1) {
+      return 'tooShort';
+    }
+
+    if (trimmed.length > 30) {
+      return 'tooLong';
+    }
+
+    if (regexInvalid.test(trimmed)) {
+      return 'invalidChars';
+    }
+
+  }, []);
+
+  const getInvalidCharsInDeviceName = useCallback((deviceName: string) => deviceName.match(regexInvalid)?.filter(filterUnique).join(', '), []);
+
+  const { error, invalidChars, nameIsTooShort } = useMemo(() => {
+    const error = getDeviceNameValidationError(name);
+    const invalidChars = getInvalidCharsInDeviceName(name);
+    const nameIsTooShort = error === 'tooShort';
+    return { error, invalidChars, nameIsTooShort };
+  }, [getDeviceNameValidationError, getInvalidCharsInDeviceName, name]);
+
+
+  const filterUnique = (value: string, index: number, array: string[]) => {
+    return array.indexOf(value) === index;
+  };
+
+  return { error, invalidChars, nameIsTooShort };
+};

frontends/web/src/routes/device/bitbox02/setup/name.tsx

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import { FormEvent, useEffect, useMemo, useState } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { View, ViewButtons, ViewContent, ViewHeader } from '../../../../components/view/view';
 import { Status } from '../../../../components/status/status';
 import { Button, Input } from '../../../../components/forms';
 import { checkSDCard } from '../../../../api/bitbox02';
-import { TDeviceNameError, getInvalidCharsInDeviceName, getDeviceNameValidationError } from '../../../../utils/device';
 import style from './name.module.css';
+import { useValidateDeviceName } from '../../../../hooks/devicename';
+import { TDeviceNameError } from '../../../../utils/types';
 
 type TProps = {
   onDeviceName: (name: string) => void;
@@ -39,17 +40,7 @@ export const SetDeviceName = ({
 }: TSetDeviceNameProps) => {
   const { t } = useTranslation();
   const [deviceName, setDeviceName] = useState('');
-  const [error, setError] = useState<TDeviceNameError>();
-  const invalidChars = useMemo(() => getInvalidCharsInDeviceName(deviceName), [deviceName]);
-
-  const handleDeviceNameInput = (event: Event) => {
-    const target = (event.target as HTMLInputElement);
-    const value: string = target.value;
-    const validationError = getDeviceNameValidationError(value);
-    setError(validationError);
-    setDeviceName(value);
-  };
-
+  const { error, invalidChars, nameIsTooShort } = useValidateDeviceName(deviceName);
 
   return (
     <form
@@ -74,9 +65,9 @@ export const SetDeviceName = ({
         <ViewContent textAlign="left" minHeight="140px">
           <Input
             autoFocus
-            className={`${style.wizardLabel} ${error ? style.inputError : ''}`}
+            className={`${style.wizardLabel} ${error && !nameIsTooShort ? style.inputError : ''}`}
             label={t('bitbox02Wizard.stepCreate.nameLabel')}
-            onInput={handleDeviceNameInput}
+            onInput={(e) => setDeviceName(e.target.value)}
             placeholder={t('bitbox02Wizard.stepCreate.namePlaceholder')}
             value={deviceName}
             id="deviceName">
@@ -85,7 +76,7 @@ export const SetDeviceName = ({
         </ViewContent>
         <ViewButtons>
           <Button
-            disabled={!!error || error !== false}
+            disabled={!!error}
             primary
             type="submit">
             {t('button.continue')}
@@ -109,6 +100,9 @@ type TDeviceNameErrorMessageProps = {
 
 export const DeviceNameErrorMessage = ({ error, invalidChars }: TDeviceNameErrorMessageProps) => {
   const { t } = useTranslation();
+  if (error === 'tooShort') {
+    return null;
+  }
   return (<span hidden={!error} className={style.errorMessage}>
     {t(`bitbox02Wizard.stepCreate.error.${error}`, {
       invalidChars

frontends/web/src/routes/settings/components/device-settings/device-name-setting.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, ChangeEvent, useMemo } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SettingsItem } from '../settingsItem/settingsItem';
 import { ChevronRightDark } from '../../../../components/icon';
@@ -23,8 +23,8 @@ import { Dialog, DialogButtons } from '../../../../components/dialog/dialog';
 import { getDeviceInfo, setDeviceName } from '../../../../api/bitbox02';
 import { alertUser } from '../../../../components/alert/Alert';
 import { WaitDialog } from '../../../../components/wait-dialog/wait-dialog';
-import { TDeviceNameError, getInvalidCharsInDeviceName, getDeviceNameValidationError } from '../../../../utils/device';
 import { DeviceNameErrorMessage } from '../../../device/bitbox02/setup/name';
+import { useValidateDeviceName } from '../../../../hooks/devicename';
 import nameStyle from '../../../device/bitbox02/setup/name.module.css';
 
 type TDeviceNameSettingProps = {
@@ -104,16 +104,7 @@ const DeviceNameSetting = ({ deviceName, deviceID }: TDeviceNameSettingProps) =>
 
 const SetDeviceNameDialog = ({ open, onClose, currentName, onInputChange, name, handleUpdateName }: TDialogProps) => {
   const { t } = useTranslation();
-  const [validationNameError, setValidationNameError] = useState<TDeviceNameError>();
-  const invalidChars = useMemo(() => getInvalidCharsInDeviceName(name), [name]);
-
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    const error = getDeviceNameValidationError(value);
-    setValidationNameError(error);
-    onInputChange(value);
-  };
-
+  const { error, invalidChars, nameIsTooShort } = useValidateDeviceName(name);
 
   return (
     <Dialog
@@ -133,21 +124,21 @@ const SetDeviceNameDialog = ({ open, onClose, currentName, onInputChange, name,
           </div>
           <div className="column">
             <Input
-              className={`m-none ${validationNameError ? nameStyle.inputError : ''}`}
+              className={`m-none ${error && !nameIsTooShort ? nameStyle.inputError : ''}`}
               label={t('bitbox02Settings.deviceName.input')}
-              onInput={handleInputChange}
+              onInput={(e) => onInputChange(e.target.value)}
               placeholder={t('bitbox02Settings.deviceName.placeholder')}
               value={name}
               id="deviceName"
             />
-            <DeviceNameErrorMessage error={validationNameError} invalidChars={invalidChars} />
+            <DeviceNameErrorMessage error={error} invalidChars={invalidChars} />
           </div>
         </div>
       </div>
       <DialogButtons>
         <Button
           primary
-          disabled={!(name && !validationNameError)}
+          disabled={!!error}
           onClick={handleUpdateName}
         >
           {t('button.ok')}

frontends/web/src/utils/device.test.ts

@@ -26,3 +26,5 @@ export type KeysOf<T> = Array<keyof T>;
  * At the moment, we are using version 2.9.2 (yarn run tsc -version).
  */
 export type ObjectButNotFunction = object & { prototype?: never; };
+
+export type TDeviceNameError = undefined | 'tooShort' | 'tooLong' | 'invalidChars'