Add password strength indicator

i18n/locales/en/create-account.json

@@ -19,10 +19,14 @@
     "mainnet": "My Account",
     "testnet": "My Testnet Account"
   },
-  "confirm": {
+  "confirm-no-password": {
     "text": "You are about to create an account without password protection. Anyone that has access to your device will have access to your account funds. <1 /> <3 /> Are you sure you want to continue without setting up a password?",
     "title": "Continue without password"
   },
+  "confirm-weak-password": {
+    "text": "You are about to protect this account with a weak password. Anyone that has access to your device will have access to your account funds. <1 /> <3 /> Are you sure you want to continue without setting up a strong password?",
+    "title": "Continue without strong password"
+  },
   "header": {
     "placeholder": {
       "mainnet": "New Account",

i18n/locales/en/generic.json

@@ -69,6 +69,15 @@
       "timeout": "The server did not respond. Please try again."
     }
   },
+  "password-strength": {
+    "label": {
+      "0": "Very Weak",
+      "1": "Weak",
+      "2": "Fair",
+      "3": "Good",
+      "4": "Strong"
+    }
+  },
   "qr-reader": {
     "action": {
       "cancel": "Cancel"

package.json

@@ -56,7 +56,8 @@
     "lodash.pick": "^4.4.0",
     "nanoid": "^2.1.1",
     "react-hook-form": "^5.0.3",
-    "stellar-sdk": "^6.2.0"
+    "stellar-sdk": "^6.2.0",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@material-ui/core": "^4.5.1",
@@ -93,6 +94,7 @@
     "@types/storybook__addon-actions": "^3.4.3",
     "@types/storybook__react": "^3.0.9",
     "@types/zen-observable": "^0.8.0",
+    "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/parser": "^2.19.2",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.0.6",

src/Account/components/AccountView.tsx

@@ -4,6 +4,7 @@ import Dialog from "@material-ui/core/Dialog"
 import AccountActions from "~Account/components/AccountActions"
 import AccountCreationActions from "~AccountCreation/components/AccountCreationActions"
 import NoPasswordConfirmation from "~AccountCreation/components/NoPasswordConfirmation"
+import WeakPasswordConfirmation from "~AccountCreation/components/WeakPasswordConfirmation"
 import { AccountCreation } from "~AccountCreation/types/types"
 import useAccountCreation from "~AccountCreation/hooks/useAccountCreation"
 import AccountHeaderCard from "~Account/components/AccountHeaderCard"
@@ -82,6 +83,7 @@ const AccountPageContent = React.memo(function AccountPageContent(props: Account
   const { renameAccount } = React.useContext(AccountsContext)
   const [accountToBackup, setAccountToBackup] = React.useState<Account | null>(null)
   const [noPasswordDialogOpen, setNoPasswordDialogOpen] = React.useState(false)
+  const [weakPasswordDialogOpen, setWeakPasswordDialogOpen] = React.useState(false)
 
   const showAccountCreation =
     matchesRoute(router.location.pathname, routes.createAccount(props.testnet), false) ||
@@ -189,13 +191,24 @@ const AccountPageContent = React.memo(function AccountPageContent(props: Account
       return
     }
 
-    if (!accountCreation.requiresPassword && !props.testnet) {
+    if (accountCreation.requiresPassword && accountCreation.weakPassword) {
+      setWeakPasswordDialogOpen(true)
+    } else if (!accountCreation.requiresPassword && !props.testnet) {
       setNoPasswordDialogOpen(true)
     } else {
       createNewAccount()
     }
   }, [accountCreation, createNewAccount, props.testnet, validateAccountCreation])
 
+  const closeWeakPasswordDialog = React.useCallback(() => {
+    setWeakPasswordDialogOpen(false)
+  }, [])
+
+  const confirmWeakPasswordDialog = React.useCallback(() => {
+    setWeakPasswordDialogOpen(false)
+    createNewAccount()
+  }, [createNewAccount])
+
   const closeNoPasswordDialog = React.useCallback(() => {
     setNoPasswordDialogOpen(false)
   }, [])
@@ -422,11 +435,18 @@ const AccountPageContent = React.memo(function AccountPageContent(props: Account
         </>
       ) : null}
       {props.account ? null : (
-        <NoPasswordConfirmation
-          onClose={closeNoPasswordDialog}
-          onConfirm={confirmNoPasswordDialog}
-          open={noPasswordDialogOpen}
-        />
+        <>
+          <NoPasswordConfirmation
+            onClose={closeNoPasswordDialog}
+            onConfirm={confirmNoPasswordDialog}
+            open={noPasswordDialogOpen}
+          />
+          <WeakPasswordConfirmation
+            onClose={closeWeakPasswordDialog}
+            onConfirm={confirmWeakPasswordDialog}
+            open={weakPasswordDialogOpen}
+          />
+        </>
       )}
     </VerticalLayout>
   )

src/AccountCreation/components/NewAccountSettings.tsx

@@ -40,6 +40,13 @@ function NewAccountSettings(props: NewAccountSettingsProps) {
     [onUpdateAccountCreation]
   )
 
+  const updatePasswordStrength = React.useCallback(
+    (weakPassword: boolean) => {
+      onUpdateAccountCreation({ weakPassword })
+    },
+    [onUpdateAccountCreation]
+  )
+
   return (
     <List style={{ padding: isSmallScreen ? 0 : "24px 16px" }}>
       {props.accountCreation.import ? (
@@ -55,6 +62,7 @@ function NewAccountSettings(props: NewAccountSettingsProps) {
         onEnterPassword={updatePassword}
         onRepeatPassword={updateRepeatedPassword}
         onTogglePassword={togglePasswordProtection}
+        onPasswordStrengthChange={updatePasswordStrength}
         repeatedPassword={props.accountCreation.repeatedPassword}
         requiresPassword={props.accountCreation.requiresPassword}
       />

src/AccountCreation/components/NoPasswordConfirmation.tsx

@@ -20,9 +20,9 @@ function NoPasswordConfirmation(props: NoPasswordConfirmationProps) {
       }
       onClose={props.onClose}
       open={props.open}
-      title={t("create-account.confirm.title")}
+      title={t("create-account.confirm-no-password.title")}
     >
-      <Trans i18nKey="create-account.confirm.text">
+      <Trans i18nKey="create-account.confirm-no-password.text">
         You are about to create an account without password protection. Anyone that has access to your device will have
         access to your account funds. <br /> <br /> Are you sure you want to continue without setting up a password?
       </Trans>

src/AccountCreation/components/PasswordSetting.tsx

@@ -5,20 +5,38 @@ import ListItemText from "@material-ui/core/ListItemText"
 import Switch from "@material-ui/core/Switch"
 import AccountSettingsItem from "~AccountSettings/components/AccountSettingsItem"
 import PasswordField from "~Generic/components/PasswordField"
+import ViewLoading from "~Generic/components/ViewLoading"
+import withFallback from "~Generic/hocs/withFallback"
+
+// lazy load because `zxcvbn` bundle size is big
+const PasswordStrengthTextField = withFallback(
+  React.lazy(() => import("~Generic/components/PasswordStrengthTextField")),
+  <ViewLoading style={{ justifyContent: "flex-end" }} />
+)
 
 interface PasswordSettingProps {
   error?: string
   password: string
   onEnterPassword: (password: string) => void
   onRepeatPassword: (password: string) => void
   onTogglePassword: () => void
+  onPasswordStrengthChange: (weak: boolean) => void
   repeatedPassword: string
   requiresPassword: boolean
 }
 
 function PasswordSetting(props: PasswordSettingProps) {
+  const { onPasswordStrengthChange } = props
   const { t } = useTranslation()
 
+  const onScoreChange = React.useCallback(
+    (score: number) => {
+      const weak = score < 3 ? true : false
+      onPasswordStrengthChange(weak)
+    },
+    [onPasswordStrengthChange]
+  )
+
   return (
     <>
       <AccountSettingsItem
@@ -39,12 +57,13 @@ function PasswordSetting(props: PasswordSettingProps) {
       <Collapse in={props.requiresPassword}>
         <AccountSettingsItem icon={null} subItem>
           <ListItemText style={{ marginLeft: 12, marginRight: 56, marginTop: -8 }}>
-            <PasswordField
+            <PasswordStrengthTextField
               error={Boolean(props.error)}
               fullWidth
               label={t("create-account.inputs.password.label")}
               margin="normal"
               onChange={event => props.onEnterPassword(event.target.value)}
+              onScoreChange={onScoreChange}
               placeholder={t("create-account.inputs.password.placeholder")}
               value={props.password}
             />

src/AccountCreation/components/WeakPasswordConfirmation.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import { useTranslation, Trans } from "react-i18next"
+import { ActionButton, ConfirmDialog } from "~Generic/components/DialogActions"
+
+interface WeakPasswordConfirmationProps {
+  onClose: () => void
+  onConfirm: () => void
+  open: boolean
+}
+
+function WeakPasswordConfirmation(props: WeakPasswordConfirmationProps) {
+  const { t } = useTranslation()
+  return (
+    <ConfirmDialog
+      cancelButton={<ActionButton onClick={props.onClose}>{t("create-account.action.cancel")}</ActionButton>}
+      confirmButton={
+        <ActionButton onClick={props.onConfirm} type="primary">
+          {t("create-account.action.confirm")}
+        </ActionButton>
+      }
+      onClose={props.onClose}
+      open={props.open}
+      title={t("create-account.confirm-weak-password.title")}
+    >
+      <Trans i18nKey="create-account.confirm-weak-password.text">
+        You are about to protect this account with a weak password. Anyone that has access to your device will have
+        access to your account funds. <br /> <br /> Are you sure you want to continue without setting up a strong
+        password?
+      </Trans>
+    </ConfirmDialog>
+  )
+}
+
+export default React.memo(WeakPasswordConfirmation)

src/AccountCreation/hooks/useAccountCreation.ts

@@ -65,6 +65,7 @@ function useAccountCreation(options: UseAccountCreationOptions) {
     password: "",
     repeatedPassword: "",
     requiresPassword: true,
+    weakPassword: true,
     testnet: options.testnet
   }))
 

src/AccountCreation/types/types.ts

@@ -7,6 +7,7 @@ export interface AccountCreation {
   requiresPassword: boolean
   secretKey?: string
   testnet: boolean
+  weakPassword: boolean
 }
 
 export interface AccountCreationErrors {