fix(need-help): need help linking and recovery improvements

blockchain · May 18, 2022 · be802db · be802db
1 parent 31d315d
commit be802db
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 26 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/EnterEmail/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/EnterEmail/index.tsx
@@ -14,7 +14,6 @@ import { removeWhitespace } from 'services/forms/normalizers'
 import { media } from 'services/styles'
 
 import { Props } from '../..'
-import NeedHelpLink from '../../components/NeedHelpLink'
 import ProductTabMenu from '../../components/ProductTabMenu'
 import SignupLink from '../../components/SignupLink'
 import { ActionButton, LinkRow, LoginFormLabel, WrapperWithPadding } from '../../model'
@@ -82,12 +81,6 @@ const EnterEmail = (props: Props) => {
               </Text>
             )}
           </ActionButton>
-          <NeedHelpLink
-            origin='IDENTIFIER'
-            platform={productAuthMetadata.platform}
-            product={ProductAuthOptions.EXCHANGE}
-            unified={cache.unifiedAccount}
-          />
         </LinkRow>
       </WrapperWithPadding>
       <SignupLink platform={magicLinkData?.platform_type} />

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterEmailOrGuid/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterEmailOrGuid/index.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { LinkContainer } from 'react-router-bootstrap'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
 
-import { HeartbeatLoader, Text } from 'blockchain-info-components'
+import { HeartbeatLoader, Link, Text } from 'blockchain-info-components'
 import FormGroup from 'components/Form/FormGroup'
 import FormItem from 'components/Form/FormItem'
 import TextBox from 'components/Form/TextBox'
 import { Wrapper } from 'components/Public'
-import { ProductAuthOptions } from 'data/types'
+import { ProductAuthOptions, RecoverSteps } from 'data/types'
 import { required, validWalletIdOrEmail } from 'services/forms'
 import { removeWhitespace } from 'services/forms/normalizers'
 import { media } from 'services/styles'
 
+import { RECOVER_FORM } from '../../../RecoverWallet/model'
 import { Props } from '../..'
-import NeedHelpLink from '../../components/NeedHelpLink'
 import ProductTabMenu from '../../components/ProductTabMenu'
 import SignupLink from '../../components/SignupLink'
 import { ActionButton, GuidError, LinkRow, LoginFormLabel, WrapperWithPadding } from '../../model'
@@ -90,11 +91,14 @@ const EnterEmailOrGuid = (props: Props) => {
               </Text>
             )}
           </ActionButton>
-          <NeedHelpLink
-            origin='IDENTIFIER'
-            platform={productAuthMetadata.platform}
-            product={ProductAuthOptions.WALLET}
-          />
+          <LinkContainer to='/recover'>
+            <Link size='13px' weight={600} data-e2e='loginGetHelp'>
+              <FormattedMessage
+                id='scenes.login.import_your_account'
+                defaultMessage='Import Your Account'
+              />
+            </Link>
+          </LinkContainer>
         </LinkRow>
       </WrapperWithPadding>
       <SignupLink platform={magicLinkData?.platform_type} />

diff --git a/...kchain-wallet-v4-frontend/src/scenes/RecoverWallet/RecoveryPhrase/SecondStep/template.tsx b/...kchain-wallet-v4-frontend/src/scenes/RecoverWallet/RecoveryPhrase/SecondStep/template.tsx
@@ -4,7 +4,7 @@ import { has } from 'ramda'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
 
-import { Button, HeartbeatLoader, Text } from 'blockchain-info-components'
+import { Button, HeartbeatLoader, Text, TextGroup } from 'blockchain-info-components'
 import Form from 'components/Form/Form'
 import FormGroup from 'components/Form/FormGroup'
 import FormLabel from 'components/Form/FormLabel'
@@ -15,6 +15,11 @@ import Terms from 'components/Terms'
 import { RecoverSteps } from 'data/types'
 import {
   required,
+  stringContainsLowercaseLetter,
+  stringContainsNumber,
+  stringContainsSpecialChar,
+  stringContainsUppercaseLetter,
+  stringLengthBetween,
   validEmail,
   validPasswordConfirmation,
   validStrongPassword
@@ -29,6 +34,12 @@ const PageHeader = styled(Column)`
   margin-bottom: 32px;
 `
 
+const PasswordRequirementText = styled(Text)<{ isValid?: boolean }>`
+  font-size: 12px;
+  font-weight: 400;
+  color: ${(props) => (props.isValid ? props.theme.grey800 : props.theme.red600)};
+`
+
 const validatePasswordConfirmation = validPasswordConfirmation('recoverPassword')
 
 class SecondStep extends React.PureComponent<Props, State> {
@@ -49,6 +60,7 @@ class SecondStep extends React.PureComponent<Props, State> {
 
   render() {
     const { formValues, invalid, isRestoring, isRestoringFromMetadata } = this.props
+    const passwordValue = formValues?.recoverPassword || ''
     return (
       <>
         {!isRestoringFromMetadata && !this.state.importWalletPrompt && (
@@ -121,14 +133,70 @@ class SecondStep extends React.PureComponent<Props, State> {
                     validate={[required, validStrongPassword]}
                     component={PasswordBox}
                   />
-                  <div>
-                    <Text size='12px' weight={400} style={{ marginTop: '4px' }}>
-                      <FormattedMessage
-                        id='scenes.register.passwordstrengthwarn'
-                        defaultMessage='Password must be at least 12 characters in length and contain at least one uppercase letter, lowercase letter, number and symbol.'
-                      />
-                    </Text>
-                  </div>
+                  {passwordValue.length > 0 && !!validStrongPassword(passwordValue) && (
+                    <div style={{ marginTop: '4px' }}>
+                      <TextGroup inline>
+                        <PasswordRequirementText isValid>
+                          <FormattedMessage
+                            id='scenes.register.password.part1'
+                            defaultMessage='Passwords must contain a'
+                          />{' '}
+                        </PasswordRequirementText>
+                        <PasswordRequirementText
+                          isValid={stringContainsLowercaseLetter(passwordValue)}
+                        >
+                          <FormattedMessage
+                            id='scenes.register.password.part2'
+                            defaultMessage='lowercase letter'
+                          />
+                          {', '}
+                        </PasswordRequirementText>
+                        <PasswordRequirementText
+                          isValid={stringContainsUppercaseLetter(passwordValue)}
+                        >
+                          <FormattedMessage
+                            id='scenes.register.password.part3'
+                            defaultMessage='uppercase letter'
+                          />
+                          {', '}
+                        </PasswordRequirementText>
+                        <PasswordRequirementText isValid={stringContainsNumber(passwordValue)}>
+                          <FormattedMessage
+                            id='scenes.register.password.part4'
+                            defaultMessage='number'
+                          />
+                          {', '}
+                        </PasswordRequirementText>
+                        <PasswordRequirementText isValid={stringContainsSpecialChar(passwordValue)}>
+                          <FormattedMessage
+                            id='scenes.register.password.part5'
+                            defaultMessage='special character'
+                          />{' '}
+                        </PasswordRequirementText>
+                        <PasswordRequirementText isValid>
+                          <FormattedMessage
+                            id='scenes.register.password.part6'
+                            defaultMessage='and be at least'
+                          />
+                        </PasswordRequirementText>
+                        <PasswordRequirementText
+                          isValid={stringLengthBetween(passwordValue, 12, 64)}
+                        >
+                          <FormattedMessage
+                            id='scenes.register.password.part7'
+                            defaultMessage='12 characters'
+                          />{' '}
+                        </PasswordRequirementText>
+                        <PasswordRequirementText isValid>
+                          <FormattedMessage
+                            id='scenes.register.password.part7'
+                            defaultMessage='long'
+                          />
+                          .
+                        </PasswordRequirementText>
+                      </TextGroup>
+                    </div>
+                  )}
                 </FormGroup>
                 <FormGroup>
                   <FormLabel htmlFor='confirmationPassword'>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/model.tsx
@@ -113,8 +113,8 @@ export const ReverifyIdentityInfoBox = () => {
     <RectangleBackground>
       <Text size='12px' weight={500} lineHeight='1.5' color='grey900'>
         <FormattedMessage
-          id='scenes.recovery.reverify'
-          defaultMessage='For your security, you may have to re-verify your identity before accessing your trading or rewards account.'
+          id='scenes.recovery.reverify_warning'
+          defaultMessage='For your security, you may be to re-verify your identity before accessing your Wallet or Exchange funds.'
         />
       </Text>
     </RectangleBackground>