fix: user can create persona by more than 24 characters (#3408)

DimensionDev · Jun 21, 2021 · 582125f · 582125f
1 parent da43937
commit 582125f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/maskbook/src/extension/options-page/DashboardDialogs/Persona/Create.tsx b/packages/maskbook/src/extension/options-page/DashboardDialogs/Persona/Create.tsx
@@ -52,6 +52,9 @@ export function DashboardPersonaCreateDialog(props: WrappedDialogProps) {
                                         createPersonaAndNext()
                                     }
                                 }}
+                                inputProps={{
+                                    maxlength: WALLET_OR_PERSONA_NAME_MAX_LEN,
+                                }}
                                 variant="outlined"
                             />
                         </form>

diff --git a/packages/maskbook/src/extension/options-page/DashboardRouters/Setup.tsx b/packages/maskbook/src/extension/options-page/DashboardRouters/Setup.tsx
@@ -27,6 +27,8 @@ import {
     UpgradeBackupJSONFile,
     BackupJSONFileLatest,
     decompressBackupFile,
+    WALLET_OR_PERSONA_NAME_MAX_LEN,
+    checkInputLengthExceed,
 } from '../../../utils'
 import ActionButton from '../DashboardComponents/ActionButton'
 import DashboardRouterContainer from './Container'
@@ -261,9 +263,17 @@ export function CreatePersona() {
                             }
                         }}
                         label={t('name')}
-                        helperText={' '}
+                        helperText={
+                            checkInputLengthExceed(name)
+                                ? t('input_length_exceed_prompt', {
+                                      name: t('persona_name').toLowerCase(),
+                                      length: WALLET_OR_PERSONA_NAME_MAX_LEN,
+                                  })
+                                : undefined
+                        }
                         inputProps={{
                             'data-testid': 'username_input',
+                            maxlength: WALLET_OR_PERSONA_NAME_MAX_LEN,
                         }}
                         variant="outlined"
                     />
@@ -275,7 +285,7 @@ export function CreatePersona() {
                         className={setupFormClasses.button}
                         variant="contained"
                         onClick={createPersonaAndNext}
-                        disabled={!name}
+                        disabled={!name || checkInputLengthExceed(name)}
                         data-testid="next_button">
                         {t('set_up_button_next')}
                     </ActionButton>

diff --git a/packages/maskbook/src/utils/constants.ts b/packages/maskbook/src/utils/constants.ts
@@ -5,4 +5,4 @@ export enum DecryptFailedReason {
     MyCryptoKeyNotFound = 'MyCryptoKeyNotFound',
 }
 
-export const WALLET_OR_PERSONA_NAME_MAX_LEN = 31
+export const WALLET_OR_PERSONA_NAME_MAX_LEN = 24