chore: allow hyphens and restrict wallet name length

joinmarket-webui · Oct 20, 2023 · 813ba4b · 813ba4b
1 parent 94c28e1
commit 813ba4b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/components/WalletCreationForm.tsx b/src/components/WalletCreationForm.tsx
@@ -3,7 +3,7 @@ import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { Formik, FormikErrors } from 'formik'
 import Sprite from './Sprite'
-import { sanitizeWalletName } from '../utils'
+import { JM_WALLET_FILE_EXTENSION, sanitizeWalletName } from '../utils'
 import styles from './WalletCreationForm.module.css'
 
 export interface CreateWalletFormValues {
@@ -20,7 +20,8 @@ const initialCreateWalletFormValues: CreateWalletFormValues = {
 
 export type WalletNameAndPassword = { name: string; password: string }
 
-const validateWalletName = (input: string) => /^\w+$/.test(input)
+const MAX_WALLET_NAME_LENGTH = 240 - JM_WALLET_FILE_EXTENSION.length
+const validateWalletName = (input: string) => input.length <= MAX_WALLET_NAME_LENGTH && /^[\w-]+$/.test(input)
 
 interface WalletCreationFormProps {
   initialValues?: CreateWalletFormValues
@@ -77,6 +78,7 @@ const WalletCreationForm = ({
               isValid={touched.walletName && !errors.walletName}
               isInvalid={touched.walletName && !!errors.walletName}
               className={styles.input}
+              maxLength={MAX_WALLET_NAME_LENGTH}
             />
             <rb.Form.Control.Feedback>{t('create_wallet.feedback_valid')}</rb.Form.Control.Feedback>
             <rb.Form.Control.Feedback type="invalid">{errors.walletName}</rb.Form.Control.Feedback>

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -125,7 +125,7 @@
     "feedback_valid": "Looks good!",
     "label_wallet_name": "Wallet name",
     "placeholder_wallet_name": "Your Wallet...",
-    "feedback_invalid_wallet_name": "Please choose a valid wallet name: Use only letters, numbers or '_'.",
+    "feedback_invalid_wallet_name": "Please choose a valid wallet name: Use only letters, numbers, underscores or hyphens.",
     "label_password": "Password to unlock the wallet",
     "placeholder_password": "Choose a secure password...",
     "feedback_invalid_password": "Please set a password.",

diff --git a/src/utils.ts b/src/utils.ts
@@ -13,7 +13,7 @@ const SATS_FORMATTER = new Intl.NumberFormat('en-US', {
 export const BTC: Unit = 'BTC'
 export const SATS: Unit = 'sats'
 
-const JM_WALLET_FILE_EXTENSION = '.jmdat'
+export const JM_WALLET_FILE_EXTENSION = '.jmdat'
 
 export const DUMMY_MNEMONIC_PHRASE: MnemonicPhrase =
   'abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about'.split(' ')