feat(neuron-ui): add dynamic prmopt in wallet wizard

Author: Keith-CY

packages/neuron-ui/src/components/WalletWizard/index.tsx

@@ -1,14 +1,24 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Stack, Text, Label, Image, PrimaryButton, DefaultButton, TextField, FontSizes } from 'office-ui-fabric-react'
+import {
+  Stack,
+  Icon,
+  Text,
+  Label,
+  Image,
+  PrimaryButton,
+  DefaultButton,
+  TextField,
+  FontSizes,
+} from 'office-ui-fabric-react'
 
 import withWizard, { WizardElementProps, WithWizardState } from 'components/withWizard'
 import { generateMnemonic, validateMnemonic, showErrorMessage } from 'services/remote'
 import { createWalletWithMnemonic, importWalletWithMnemonic } from 'states/stateProvider/actionCreators'
 
 import { Routes, MnemonicAction, BUTTON_GAP } from 'utils/const'
 import { buttonGrommetIconStyles } from 'utils/icons'
-import { verifyWalletSubmission } from 'utils/validators'
+import { verifyPasswordComplexity } from 'utils/validators'
 
 export enum WalletWizardPath {
   Welcome = '/welcome',
@@ -243,7 +253,10 @@ const Submission = ({
     }
   }, [type, name, password, imported, history, dispatch])
 
-  const disableNext = !verifyWalletSubmission({ name, password, confirmPassword })
+  const isNameUnused = useMemo(() => name && !wallets.find(w => w.name === name), [name, wallets])
+  const isPwdComplex = useMemo(() => verifyPasswordComplexity(password) === true, [password])
+  const isPwdSame = useMemo(() => password && password === confirmPassword, [password, confirmPassword])
+  const disableNext = !(isNameUnused && isPwdComplex && isPwdSame)
 
   return (
     <Stack verticalFill verticalAlign="center" horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>
@@ -261,6 +274,21 @@ const Submission = ({
         </div>
       ))}
 
+      <Stack>
+        <Stack horizontal tokens={{ childrenGap: 3 }}>
+          {isNameUnused ? <Icon iconName="Matched" /> : <Icon iconName="Unmatched" />}
+          <Text variant="xSmall">{t('wizard.new-name')}</Text>
+        </Stack>
+        <Stack horizontal tokens={{ childrenGap: 3 }}>
+          {isPwdComplex ? <Icon iconName="Matched" /> : <Icon iconName="Unmatched" />}
+          <Text variant="xSmall">{t('wizard.complex-password')}</Text>
+        </Stack>
+        <Stack horizontal tokens={{ childrenGap: 3 }}>
+          {isPwdSame ? <Icon iconName="Matched" /> : <Icon iconName="Unmatched" />}
+          <Text variant="xSmall">{t('wizard.same-password')}</Text>
+        </Stack>
+      </Stack>
+
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: BUTTON_GAP }}>
         <DefaultButton onClick={history.goBack} text={t('wizard.back')} />
         <PrimaryButton onClick={onNext} disabled={disableNext} text={t('wizard.next')} />

packages/neuron-ui/src/locales/en.json

@@ -47,7 +47,10 @@
       "set-wallet-name": "Give your new wallet a name",
       "set-a-strong-password-to-protect-your-wallet": "Create a strong password to protect your wallet",
       "wallet-suffix": "Wallet {{suffix}}",
-      "write-down-seed": "Write down your wallet seed and save it in a safe place"
+      "write-down-seed": "Write down your wallet seed and save it in a safe place",
+      "new-name": "Use an unused name for the new wallet",
+      "complex-password": "The password is a string of 8 to 50 characters consisting of three types of characters: uppercase letters, lowercase letters, numbers, and special symbols, and must start with a letter or a number.",
+      "same-password": "Confirm the password"
     },
     "detail": {
       "more-transactions": "More"

packages/neuron-ui/src/locales/zh.json

@@ -47,7 +47,10 @@
       "set-wallet-name": "为钱包设置名称",
       "set-a-strong-password-to-protect-your-wallet": "请设置一个强密码用于保护您的钱包",
       "wallet-suffix": "钱包 {{suffix}}",
-      "write-down-seed": "请记下您的助记词并保存到安全的地方"
+      "write-down-seed": "请记下您的助记词并保存到安全的地方",
+      "new-name": "输入新的钱包名称",
+      "complex-password": "密码为 8 至 50 位由大写字母、小写字母、数字、特殊符号中三类字符组成的字符串, 且必须以字母或者数字开头",
+      "same-password": "两次输入密码应一致"
     },
     "detail": {
       "more-transactions": "更多交易记录"

packages/neuron-ui/src/utils/loadTheme.tsx

@@ -22,6 +22,7 @@ import {
   Nodes as ConnectedIcon,
   Scan as ScanIcon,
   Search as SearchIcon,
+  StatusGood as MatchedIcon,
   SubtractCircle as RemoveIcon,
   Update as UpdateIcon,
 } from 'grommet-icons'
@@ -73,6 +74,8 @@ registerIcons({
     Disconnected: <AlertIcon size="small" color="red" />,
     Updating: <UpdateIcon size="16px" style={{ animation: 'rotate360 3s linear infinite' }} />,
     More: <MoreIcon size="16px" />,
+    Matched: <MatchedIcon size="16px" color="green" />,
+    Unmatched: <InfoIcon size="16px" color="#d50000" />,
   },
 })
 

packages/neuron-ui/src/utils/validators.ts

@@ -4,30 +4,46 @@ export const verifyAddress = (address: string): boolean => {
   // TODO: verify address, prd required
   return address.length === ADDRESS_LENGTH
 }
-export const verifyWalletSubmission = ({
-  password,
-  confirmPassword,
-  name,
-}: {
-  password: string
-  confirmPassword: string
-  name: string
-}) => {
-  return (
-    password &&
-    name &&
-    password === confirmPassword &&
-    password.length >= MIN_PASSWORD_LENGTH &&
-    password.length <= MAX_PASSWORD_LENGTH
-  )
-}
 
 export const verifyAmountRange = (amount: string) => {
   return +amount >= MIN_AMOUNT
 }
 
+export const verifyPasswordComplexity = (password: string) => {
+  if (!password) {
+    return 'password-is-empty'
+  }
+  if (password.length < MIN_PASSWORD_LENGTH) {
+    return 'password-is-too-short'
+  }
+  if (password.length > MAX_PASSWORD_LENGTH) {
+    return 'password-is-too-long'
+  }
+  let complex = 0
+  let reg = /\d/
+  if (reg.test(password)) {
+    complex++
+  }
+  reg = /[a-z]/
+  if (reg.test(password)) {
+    complex++
+  }
+  reg = /[A-Z]/
+  if (reg.test(password)) {
+    complex++
+  }
+  reg = /[^0-9a-zA-Z]/
+  if (reg.test(password)) {
+    complex++
+  }
+  if (complex < 3) {
+    return 'password-is-too-simple'
+  }
+  return true
+}
+
 export default {
   verifyAddress,
-  verifyWalletSubmission,
   verifyAmountRange,
+  verifyPasswordComplexity,
 }