chore(merge): merge password screen changes

blockchain · Nov 18, 2021 · ff10c70 · ff10c70
2 parents 01e641a + 2c00c99
commit ff10c70
Show file tree

Hide file tree

Showing 19 changed files with 75 additions and 312 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
@@ -174,10 +174,13 @@ type MessagesType = {
   'components.alerts.message_sign_error': 'Failed to sign message.'
   'components.alerts.mnemonic_verify_success_new': 'Your Secret Private Key Recovery Phrase has been verified!'
   'components.alerts.mobile_code_sent_error': 'Mobile verification code sent'
+  'components.alerts.mobile_login_confirm': 'Please confirm the login on your mobile device.'
   'components.alerts.mobile_code_sent_success': 'Mobile verification code sent'
+  'components.alerts.mobile_login_declined': 'Mobile Log In Failed. Scan QR code to try again.'
   'components.alerts.mobile_login_error': 'Error logging into your wallet'
   'components.alerts.mobile_login_error_qrcode_expired': 'QR code expired'
   'components.alerts.mobile_login_scan_error': 'Could not scan the mobile login QR Code'
+  'components.alerts.mobile_login_success': 'Success! Logging in...'
   'components.alerts.mobile_update_error': 'Failed to update mobile number.'
   'components.alerts.mobile_update_success': 'Mobile number has been successfully updated. Verification SMS has been sent.'
   'components.alerts.mobile_verify_error': 'Failed to verify mobile number'
@@ -2297,8 +2300,6 @@ type MessagesType = {
   'scenes.login.qrcodelogin_description_1': 'Open your mobile Blockchain App, tap the QR Code Scanner'
   'scenes.login.qrcodelogin_description_2': 'in the top right & scan this code to log in.'
   'scenes.login.qrcodelogin_failed': 'Login failed. Please refresh browser and try again.'
-  'scenes.login.qrcodelogin_success': 'Success! Logging in...'
-  'scenes.login.qrcodelogin_success_confirm': 'Please confirm the login on your mobile device.'
   'scenes.login.qrcodelogin_refresh_code': 'Refresh Code'
   'scenes.login.recovery_options.title': 'Recovery Options'
   'scenes.login.recovery_options.cloud_backup.title': 'Recover Account with Cloud Backup'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.tsx
@@ -487,6 +487,20 @@ const getAlertContent = (message, data = undefined) => {
           defaultMessage='Mobile verification code sent'
         />
       )
+    case C.MOBILE_LOGIN_CONFIRM:
+      return buildMessageTemplate(
+        <FormattedMessage
+          id='components.alerts.mobile_login_confirm'
+          defaultMessage='Please confirm the login on your mobile device.'
+        />
+      )
+    case C.MOBILE_LOGIN_DECLINED:
+      return buildMessageTemplate(
+        <FormattedMessage
+          id='components.alerts.mobile_login_declined'
+          defaultMessage='Mobile Log In Failed. Scan QR code to try again.'
+        />
+      )
     case C.MOBILE_LOGIN_ERROR:
       return buildMessageTemplate(
         <FormattedMessage
@@ -508,6 +522,13 @@ const getAlertContent = (message, data = undefined) => {
           defaultMessage='Could not scan the mobile login QR Code'
         />
       )
+    case C.MOBILE_LOGIN_SUCCESS:
+      return buildMessageTemplate(
+        <FormattedMessage
+          id='components.alerts.mobile_login_success'
+          defaultMessage='Success! Logging in...'
+        />
+      )
     case C.MOBILE_UPDATE_ERROR:
       return buildMessageTemplate(
         <FormattedMessage

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.ts
@@ -551,11 +551,10 @@ export default ({ api, coreSagas, networks }) => {
           yield put(actions.form.change(LOGIN_FORM, 'guid', lastGuid || storedGuid))
           yield put(actions.form.change(LOGIN_FORM, 'email', email))
           // determine initial step
-          const initialStep = isMobileConnected
-            ? LoginSteps.VERIFICATION_MOBILE
-            : product === ProductAuthOptions.EXCHANGE
-            ? LoginSteps.ENTER_PASSWORD_EXCHANGE
-            : LoginSteps.ENTER_PASSWORD_WALLET
+          const initialStep =
+            product === ProductAuthOptions.EXCHANGE
+              ? LoginSteps.ENTER_PASSWORD_EXCHANGE
+              : LoginSteps.ENTER_PASSWORD_WALLET
           yield put(actions.form.change(LOGIN_FORM, 'step', initialStep))
           break
         // url is just /login, take them to enter guid or email
@@ -565,7 +564,7 @@ export default ({ api, coreSagas, networks }) => {
         // guid is on the url e.g. login/{guid}
         case isGuid(walletGuidOrMagicLinkFromUrl):
           yield put(actions.form.change(LOGIN_FORM, 'guid', walletGuidOrMagicLinkFromUrl))
-          yield put(actions.form.change(LOGIN_FORM, 'step', LoginSteps.VERIFICATION_MOBILE))
+          yield put(actions.form.change(LOGIN_FORM, 'step', LoginSteps.ENTER_PASSWORD_WALLET))
           break
         // url has base64 encrypted magic link JSON
         default:

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.utils.ts b/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.utils.ts
@@ -92,12 +92,7 @@ export const parseMagicLink = function* () {
             product: ProductAuthOptions.WALLET
           })
         )
-        // check if mobile detected
-        if (walletData?.is_mobile_setup) {
-          yield put(actions.form.change(LOGIN_FORM, 'step', LoginSteps.VERIFICATION_MOBILE))
-        } else {
-          yield put(actions.form.change(LOGIN_FORM, 'step', LoginSteps.ENTER_PASSWORD_WALLET))
-        }
+        yield put(actions.form.change(LOGIN_FORM, 'step', LoginSteps.ENTER_PASSWORD_WALLET))
       }
     }
     if (productAuth === ProductAuthOptions.EXCHANGE) {

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/auth/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/auth/types.ts
@@ -35,7 +35,6 @@ export enum LoginSteps {
   UPGRADE_CONFIRM = 'UPGRADE_CONFIRM',
   UPGRADE_PASSWORD = 'UPGRADE_PASSWORD',
   UPGRADE_SUCCESS = 'UPGRADE_SUCCESS',
-  VERIFICATION_MOBILE = 'VERIFICATION_MOBILE',
   VERIFY_MAGIC_LINK = 'VERIFY_MAGIC_LINK'
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/cache/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/cache/selectors.ts
@@ -17,6 +17,7 @@ export const getPhonePubkey = (state): string | undefined =>
   path(['cache', 'channelPhonePubkey'], state)
 export const getHasCloudBackup = (state): boolean | undefined =>
   path(['cache', 'hasCloudBackup'], state)
+export const getLastLogout = (state): boolean | undefined => path(['cache', 'lastLogout'], state)
 
 export const getChannelPrivKeyForQrData = (state) => {
   const channelPrivKey = getChannelPrivKey(state)

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/cache/slice.ts b/packages/blockchain-wallet-v4-frontend/src/data/cache/slice.ts
@@ -9,6 +9,7 @@ const initialState = {
   hasCloudBackup: undefined,
   lastEmail: undefined,
   lastGuid: undefined,
+  lastLogout: undefined,
   mobileConnected: undefined
 }
 
@@ -48,6 +49,9 @@ const cacheSlice = createSlice({
     hasCloudBackup: (state, action) => {
       state.hasCloudBackup = action.payload
     },
+    lastLogout: (state, action) => {
+      state.lastLogout = action.payload
+    },
     mobileConnectedStored: (state, action) => {
       state.mobileConnected = action.payload
     },

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/middleware/webSocket/coins/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/middleware/webSocket/coins/sagas.js
@@ -40,6 +40,7 @@ export default ({ api, socket }) => {
     }
 
     yield put(actions.auth.secureChannelLoginLoading())
+    yield put(actions.alerts.displayInfo(T.MOBILE_LOGIN_CONFIRM))
     yield put(actions.core.data.misc.sendSecureChannelMessage(payload))
   }
 
@@ -63,6 +64,17 @@ export default ({ api, socket }) => {
         param: { channelId }
       })
     )
+    // Also, if we already know a phone, let's ping it to give us it's secrets
+    const phonePubkey = yield select(selectors.cache.getPhonePubkey)
+    const guid = yield select(selectors.cache.getLastGuid)
+    const lastLogoutTime = yield select(selectors.cache.getLastLogout)
+
+    // only ping phone if last logout time is more than 5 minutes
+    // prevents pinging phone again right when user logs out
+    const pingPhoneOnLoad = Date.now() - lastLogoutTime > 300000
+    if (phonePubkey && guid && pingPhoneOnLoad) {
+      yield pingPhone(channelId, secretHex, phonePubkey, guid)
+    }
   }
 
   const onAuth = function* () {
@@ -276,6 +288,7 @@ export default ({ api, socket }) => {
             if (!payload.success) {
               yield put(actions.cache.channelPhoneConnected(undefined))
               yield put(actions.auth.secureChannelLoginFailure('Phone declined'))
+              yield put(actions.alerts.displayError(T.MOBILE_LOGIN_DECLINED))
               return
             }
 
@@ -296,8 +309,8 @@ export default ({ api, socket }) => {
               if (decrypted.remember) {
                 yield put(actions.cache.channelPhoneConnected(pubkey.toString('hex')))
               }
-
               yield put(actions.auth.secureChannelLoginSuccess())
+              yield put(actions.alerts.displaySuccess(T.MOBILE_LOGIN_SUCCESS))
               yield put(actions.form.change('login', 'guid', decrypted.guid))
               yield put(actions.form.change('login', 'password', decrypted.password))
               yield put(actions.form.startSubmit('login'))

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/session/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/session/sagas.ts
@@ -14,11 +14,13 @@ export default ({ api }) => {
 
   const logout = function* () {
     try {
-      yield put(actions.cache.disconnectChannelPhone())
       yield put(actions.modules.profile.clearSession())
       yield put(actions.middleware.webSocket.rates.stopSocket())
       yield put(actions.middleware.webSocket.coins.stopSocket())
       yield put(actions.middleware.webSocket.xlm.stopStreams())
+      // sets logout time so we know whether or not to
+      // send notification to mobile phone for login
+      yield put(actions.cache.lastLogout(Date.now()))
     } catch (e) {
       yield put(actions.logs.logErrorMessage(logLocation, 'logout', e))
     } finally {

diff --git a/...lockchain-wallet-v4-frontend/src/layouts/Public/components/Footer/CreateAccount/index.tsx b/...lockchain-wallet-v4-frontend/src/layouts/Public/components/Footer/CreateAccount/index.tsx
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Public/components/Footer/index.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Public/components/Footer/index.tsx
@@ -1,38 +1,23 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { LoginSteps, PlatformTypes, ProductAuthMetadata } from 'data/types'
-
-import CreateAccount from './CreateAccount'
 import DropdownLanguage from './DropdownLanguage'
 import Help from './Help'
-import ProductPicker from './ProductPicker'
 import Version from './Version'
 
 const FooterInner = styled.div`
   padding: 2rem;
   padding-bottom: 0;
 `
 
-const Footer = ({ isLogin, loginStep, productAuthMetadata }: Props) => {
+const Footer = () => {
   return (
-    <>
-      <FooterInner>
-        {isLogin && <ProductPicker productAuthMetadata={productAuthMetadata} />}
-      </FooterInner>
-      <FooterInner>
-        <DropdownLanguage color='grey400' size='16px' />
-        <Version />
-        <Help />
-      </FooterInner>
-    </>
+    <FooterInner>
+      <DropdownLanguage color='grey400' size='16px' />
+      <Version />
+      <Help />
+    </FooterInner>
   )
 }
 
-type Props = {
-  isLogin: boolean
-  loginStep: LoginSteps
-  productAuthMetadata: ProductAuthMetadata
-}
-
 export default Footer
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Public/index.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Public/index.tsx
@@ -73,6 +73,7 @@ const PublicLayoutContainer = ({
   productAuthMetadata
 }: Props) => {
   const isLogin = path === '/login'
+
   return (
     <Route
       path={path}
@@ -94,11 +95,7 @@ const PublicLayoutContainer = ({
             </ContentContainer>
 
             <FooterContainer>
-              <Footer
-                isLogin={isLogin}
-                productAuthMetadata={productAuthMetadata}
-                loginStep={loginStep}
-              />
+              <Footer />
             </FooterContainer>
           </Wrapper>
         </ErrorBoundary>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.error.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.error.tsx
@@ -3,10 +3,9 @@ import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
 import { Icon, Text } from 'blockchain-info-components'
+import { Wrapper } from 'components/Public'
 
-import { LoginWrapper } from '../model'
-
-const Wrapper = styled(LoginWrapper)`
+const ErrorWrapper = styled(Wrapper)`
   display: flex;
   text-align: center;
   align-items: center;
@@ -16,7 +15,7 @@ const Wrapper = styled(LoginWrapper)`
 const Error = (props) => {
   const { error } = props
   return (
-    <Wrapper>
+    <ErrorWrapper>
       <Icon color='error' name='close-circle' size='40px' />
       <Text size='20px' weight={600} color='black' style={{ marginTop: '8px' }}>
         {error.request_denied ? (
@@ -52,7 +51,7 @@ const Error = (props) => {
           />
         )}
       </Text>
-    </Wrapper>
+    </ErrorWrapper>
   )
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.loading.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.loading.tsx
@@ -3,10 +3,9 @@ import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
 import { SpinningLoader, Text } from 'blockchain-info-components'
+import { Wrapper } from 'components/Public'
 
-import { LoginWrapper } from '../model'
-
-const Wrapper = styled(LoginWrapper)`
+const LoadingWrapper = styled(Wrapper)`
   display: flex;
   text-align: center;
   align-items: center;
@@ -15,16 +14,15 @@ const Wrapper = styled(LoginWrapper)`
 
 const Loading = () => {
   return (
-    <Wrapper>
+    <LoadingWrapper>
       <SpinningLoader width='40px' height='40px' />
-
       <Text size='16px' weight={400} style={{ marginTop: '24px' }}>
         <FormattedMessage
           id='scenes.login.verify'
           defaultMessage="We're verifying your login attempt. Please wait..."
         />
       </Text>
-    </Wrapper>
+    </LoadingWrapper>
   )
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.success.tsx
@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
 import { Banner, Button, Icon, Image, Text } from 'blockchain-info-components'
+import { Wrapper } from 'components/Public'
 import { media } from 'services/styles'
 
 import { Props } from '..'