Merge pull request #11456 from brave/use-common-password-validation

Use Common Password Validation on Desktop

Author: Douglashdaniel

components/brave_wallet_ui/common/async/lib.ts

@@ -74,6 +74,11 @@ export const getBalance = (address: string): Promise<string> => {
   })
 }
 
+export async function isStrongPassword (value: string) {
+  const apiProxy = getAPIProxy()
+  return (await apiProxy.keyringController.isStrongPassword(value)).result
+}
+
 export async function findENSAddress (address: string) {
   const apiProxy = getAPIProxy()
   return apiProxy.ethJsonRpcController.ensGetEthAddr(address)

components/brave_wallet_ui/components/desktop/wallet-onboarding/restore/index.tsx

@@ -16,9 +16,9 @@ import { PasswordInput, BackButton } from '../../../shared'
 import { NavButton } from '../../../extension'
 import { getLocale } from '../../../../../common/locale'
 import { Checkbox } from 'brave-ui'
-import { isStrongPassword } from '../../../../utils/password-utils'
 
 export interface Props {
+  checkIsStrongPassword: (value: string) => Promise<boolean>
   toggleShowRestore: () => void
   onRestore: (phrase: string, password: string, isLegacy: boolean) => void
   hasRestoreError: boolean
@@ -28,10 +28,12 @@ function OnboardingRestore (props: Props) {
   const {
     onRestore,
     toggleShowRestore,
+    checkIsStrongPassword,
     hasRestoreError
   } = props
   const [showRecoveryPhrase, setShowRecoveryPhrase] = React.useState<boolean>(false)
   const [isLegacyWallet, setIsLegacyWallet] = React.useState<boolean>(false)
+  const [isStrongPassword, setIsStrongPassword] = React.useState<boolean>(false)
   const [password, setPassword] = React.useState<string>('')
   const [confirmedPassword, setConfirmedPassword] = React.useState<string>('')
   const [recoveryPhrase, setRecoveryPhrase] = React.useState<string>('')
@@ -47,8 +49,10 @@ function OnboardingRestore (props: Props) {
     onRestore(recoveryPhrase.trimEnd(), password, isLegacyWallet)
   }
 
-  const handlePasswordChanged = (value: string) => {
+  const handlePasswordChanged = async (value: string) => {
     setPassword(value)
+    const isStrong = await checkIsStrongPassword(value)
+    setIsStrongPassword(isStrong)
   }
 
   const handleConfirmPasswordChanged = (value: string) => {
@@ -87,13 +91,9 @@ function OnboardingRestore (props: Props) {
   const checkPassword = React.useMemo(() => {
     if (password === '') {
       return false
-    } else {
-      if (!isStrongPassword.test(password)) {
-        return true
-      }
-      return false
     }
-  }, [password])
+    return !isStrongPassword
+  }, [password, isStrongPassword])
 
   const checkConfirmedPassword = React.useMemo(() => {
     if (confirmedPassword === '') {

components/brave_wallet_ui/constants/types.ts

@@ -377,6 +377,10 @@ export interface GetEthAddrReturnInfo {
   address: string
 }
 
+export interface GetIsStrongPassswordReturnInfo {
+  result: boolean
+}
+
 export interface RecoveryObject {
   value: string
   id: number

components/brave_wallet_ui/page/container.tsx

@@ -53,7 +53,8 @@ import {
   findUnstoppableDomainAddress,
   getBalance,
   getERC20Allowance,
-  onConnectHardwareWallet
+  onConnectHardwareWallet,
+  isStrongPassword
 } from '../common/async/lib'
 
 import { formatBalance } from '../utils/format-balances'
@@ -517,6 +518,7 @@ function Container (props: Props) {
             {isWalletLocked &&
               <OnboardingWrapper>
                 <OnboardingRestore
+                  checkIsStrongPassword={isStrongPassword}
                   onRestore={restoreWallet}
                   toggleShowRestore={onToggleShowRestore}
                   hasRestoreError={restoreError}
@@ -526,6 +528,7 @@ function Container (props: Props) {
           </Route>
           <Route path={WalletRoutes.Onboarding} exact={true}>
             <Onboarding
+              checkIsStrongPassword={isStrongPassword}
               recoveryPhrase={recoveryPhrase}
               onPasswordProvided={passwordProvided}
               onSubmit={completeWalletSetup}

components/brave_wallet_ui/stories/screens/onboarding.tsx

@@ -10,14 +10,14 @@ import {
 } from '../../constants/types'
 import { BackButton } from '../../components/shared'
 import BackupWallet from './backup-wallet'
-import { isStrongPassword } from '../../utils/password-utils'
 import { OnboardingWrapper } from '../style'
 
 export interface Props {
   recoveryPhrase: string[]
   metaMaskWalletDetected: boolean
   braveLegacyWalletDetected: boolean
   importError: ImportWalletError
+  checkIsStrongPassword: (value: string) => Promise<boolean>
   onSetImportError: (hasError: boolean) => void
   onPasswordProvided: (password: string) => void
   onImportMetaMask: (password: string, newPassword: string) => void
@@ -32,6 +32,7 @@ function Onboarding (props: Props) {
     metaMaskWalletDetected,
     braveLegacyWalletDetected,
     importError,
+    checkIsStrongPassword,
     onSetImportError,
     onPasswordProvided,
     onSubmit,
@@ -40,6 +41,8 @@ function Onboarding (props: Props) {
     onImportCryptoWallets
   } = props
   const [onboardingStep, setOnboardingStep] = React.useState<WalletOnboardingSteps>(WalletOnboardingSteps.OnboardingWelcome)
+  const [isStrongPassword, setIsStrongPassword] = React.useState<boolean>(false)
+  const [isStrongImportPassword, setIsStrongImportPassword] = React.useState<boolean>(false)
   const [importPassword, setImportPassword] = React.useState<string>('')
   const [password, setPassword] = React.useState<string>('')
   const [confirmedPassword, setConfirmedPassword] = React.useState<string>('')
@@ -89,7 +92,7 @@ function Onboarding (props: Props) {
     onSubmit(false)
   }
 
-  const handleImportPasswordChanged = (value: string) => {
+  const handleImportPasswordChanged = async (value: string) => {
     if (importError.hasError) {
       onSetImportError(false)
     }
@@ -98,10 +101,14 @@ function Onboarding (props: Props) {
       setUseSamePassword(false)
     }
     setImportPassword(value)
+    const isStrong = await checkIsStrongPassword(value)
+    setIsStrongImportPassword(isStrong)
   }
 
-  const handlePasswordChanged = (value: string) => {
+  const handlePasswordChanged = async (value: string) => {
     setPassword(value)
+    const isStrong = await checkIsStrongPassword(value)
+    setIsStrongPassword(isStrong)
   }
 
   const handleConfirmPasswordChanged = (value: string) => {
@@ -138,13 +145,9 @@ function Onboarding (props: Props) {
   const checkPassword = React.useMemo(() => {
     if (password === '') {
       return false
-    } else {
-      if (!isStrongPassword.test(password)) {
-        return true
-      }
-      return false
     }
-  }, [password])
+    return !isStrongPassword
+  }, [password, isStrongPassword])
 
   const checkConfirmedPassword = React.useMemo(() => {
     if (confirmedPassword === '') {
@@ -158,11 +161,11 @@ function Onboarding (props: Props) {
     setOnboardingStep(WalletOnboardingSteps.OnboardingCreatePassword)
   }
 
-  React.useMemo(() => {
+  React.useEffect(() => {
     if (useSamePassword) {
-      setPassword(importPassword)
+      handlePasswordChanged(importPassword)
       setConfirmedPassword(importPassword)
-      if (!isStrongPassword.test(importPassword)) {
+      if (!isStrongImportPassword) {
         setNeedsNewPassword(true)
         setUseSamePasswordVerified(false)
       } else {
@@ -174,6 +177,7 @@ function Onboarding (props: Props) {
       setConfirmedPassword('')
       setNeedsNewPassword(false)
       setUseSamePasswordVerified(false)
+      setIsStrongPassword(false)
     }
   }, [useSamePassword])
 

components/brave_wallet_ui/stories/wallet-components.tsx

@@ -10,6 +10,7 @@ import './locale'
 import {
   recoveryPhrase
 } from './mock-data/user-accounts'
+import { isStrongPassword } from '../utils/password-utils'
 
 export default {
   title: 'Wallet/Desktop/Components',
@@ -100,10 +101,15 @@ export const _Onboarding = () => {
     // Does nothing here
   }
 
+  const checkIsStrongPassword = async (value: string) => {
+    return isStrongPassword.test(value)
+  }
+
   return (
     <WalletPageLayout>
       <WalletSubViewLayout>
         <Onboarding
+          checkIsStrongPassword={checkIsStrongPassword}
           importError={{ hasError: false }}
           recoveryPhrase={recoveryPhrase}
           onSubmit={complete}

components/brave_wallet_ui/stories/wallet-concept.tsx

@@ -49,6 +49,7 @@ import {
 } from '../components/desktop/popup-modals/add-account-modal/hardware-wallet-connect/types'
 import { mockNetworks } from './mock-data/mock-networks'
 import { HardwareWalletAccount } from '../common/hardware/types'
+import { isStrongPassword } from '../utils/password-utils'
 export default {
   title: 'Wallet/Desktop',
   argTypes: {
@@ -665,6 +666,10 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
     setCustomTolerance(value)
   }
 
+  const checkIsStrongPassword = async (value: string) => {
+    return isStrongPassword.test(value)
+  }
+
   return (
     <WalletPageLayout>
       {/* <SideNav
@@ -675,6 +680,7 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
       <WalletSubViewLayout>
         {isRestoring ? (
           <OnboardingRestore
+            checkIsStrongPassword={checkIsStrongPassword}
             hasRestoreError={hasRestoreError}
             onRestore={onRestore}
             toggleShowRestore={onToggleRestore}
@@ -684,6 +690,7 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
             {needsOnboarding
               ? (
                 <Onboarding
+                  checkIsStrongPassword={checkIsStrongPassword}
                   importError={importWalletError}
                   recoveryPhrase={recoveryPhrase}
                   onSubmit={completeWalletSetup}