fix(mobile-auth): add old login via mobile if feature flag is off

blockchain · Mar 3, 2021 · 3ef8a23 · 3ef8a23
1 parent a11f0bf
commit 3ef8a23
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 15 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -1925,6 +1925,7 @@ type MessagesType = {
   'scenes.lockbox.welcome.trouble': 'Having trouble? View our'
   'scenes.login.browserwarning': 'Your browser is not supported. Please update to at least Chrome 45, Firefox 45, Safari 8, Edge, or Opera.'
   'scenes.login.clickhere': 'click here.'
+  'scenes.login.findyourguid': 'Forgot your Wallet ID? Request a reminder via email.'
   'scenes.login.needhelp': 'Need additional help logging in?'
   'scenes.login.google': 'Authenticator App Code'
   'scenes.login.guid': 'Wallet ID'
@@ -1938,6 +1939,7 @@ type MessagesType = {
   'scenes.login.version': 'Version {version}'
   'scenes.login.password': 'Password'
   'scenes.login.resendsms': 'Resend SMS'
+  'scenes.login.sendguid': 'Request Wallet ID'
   'scenes.login.simplebuy.header': 'Buy Crypto With Credit Card'
   'scenes.login.wallet.link': "Don't have a wallet?"
   'scenes.login.wallet.message.sent': 'Message Sent'

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/template.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/template.tsx
@@ -77,6 +77,19 @@ const CenterWrapper = styled.div`
   max-width: 480px;
   z-index: 1;
 `
+
+const Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-top: 15px;
+  ${media.atLeastTablet`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  `}
+`
 const LoginWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -319,7 +332,7 @@ const Login = (props: InjectedFormProps<{}, Props> & Props) => {
                     </LinkContainer>
                   </GuidError>
                 )}
-                {showGuidInvalidError && (
+                {showGuidInvalidError ? (
                   <LoginTextGroup inline>
                     <Text size='12px' color='grey800' weight={500}>
                       {isGuidEmailAddress ? (
@@ -343,6 +356,23 @@ const Login = (props: InjectedFormProps<{}, Props> & Props) => {
                       </Link>
                     </LinkContainer>
                   </LoginTextGroup>
+                ) : (
+                  <LoginTextGroup>
+                    <Text size='12px' color='grey800' weight={500}>
+                      <FormattedMessage
+                        id='scenes.login.findyourguid'
+                        defaultMessage='Forgot your Wallet ID? Request a reminder via email.'
+                      />
+                    </Text>
+                    <LinkContainer to='/reminder'>
+                      <Link size='12px' weight={500}>
+                        <FormattedMessage
+                          id='scenes.login.sendguid'
+                          defaultMessage='Request Wallet ID'
+                        />
+                      </Link>
+                    </LinkContainer>
+                  </LoginTextGroup>
                 )}
               </FormGroup>
               <FormGroup>
@@ -453,22 +483,52 @@ const Login = (props: InjectedFormProps<{}, Props> & Props) => {
                   )}
                 </LoginButton>
               </FormGroup>
-              <LoginHelpText>
-                <Text size='14px' color='grey600' weight={500}>
-                  <FormattedMessage
-                    id='scenes.login.needhelp'
-                    defaultMessage='Need additional help logging in?'
-                  />
-                </Text>
-                <LinkContainer to='/help'>
-                  <GetHelpLink size='13px' weight={600} data-e2e='loginGetHelp'>
+              {showMobileAuth && (
+                <LoginHelpText>
+                  <Text size='14px' color='grey600' weight={500}>
                     <FormattedMessage
-                      id='scenes.login.gethelp'
-                      defaultMessage='Get Help'
+                      id='scenes.login.needhelp'
+                      defaultMessage='Need additional help logging in?'
                     />
-                  </GetHelpLink>
-                </LinkContainer>
-              </LoginHelpText>
+                  </Text>
+                  <LinkContainer to='/help'>
+                    <GetHelpLink
+                      size='13px'
+                      weight={600}
+                      data-e2e='loginGetHelp'
+                    >
+                      <FormattedMessage
+                        id='scenes.login.gethelp'
+                        defaultMessage='Get Help'
+                      />
+                    </GetHelpLink>
+                  </LinkContainer>
+                </LoginHelpText>
+              )}
+              {isSupportedBrowser && !showMobileAuth && (
+                <Footer>
+                  <LinkContainer to='/mobile-login'>
+                    <Link
+                      size='13px'
+                      weight={600}
+                      data-e2e='loginViaMobileLink'
+                    >
+                      <FormattedMessage
+                        id='scenes.login.loginmobile'
+                        defaultMessage='Login via Mobile'
+                      />
+                    </Link>
+                  </LinkContainer>
+                  <LinkContainer to='/help'>
+                    <Link size='13px' weight={600} data-e2e='loginGetHelp'>
+                      <FormattedMessage
+                        id='scenes.login.needhelp'
+                        defaultMessage='Need some help?'
+                      />
+                    </Link>
+                  </LinkContainer>
+                </Footer>
+              )}
             </LoginForm>
           </PublicWrapper>