feat(ts): authorize login to ts

blockchain · Aug 11, 2020 · c479eba · c479eba
1 parent d462933
commit c479eba
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 27 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
@@ -1363,11 +1363,11 @@ type MessagesType = {
   'scenes.authorizelogin.accept': 'Accept'
   'scenes.authorizelogin.attemptfrombrowser': 'Login attempt from another browser'
   'scenes.authorizelogin.attemptfrombrowsermsg': 'Someone, hopefully you, is attempting to login to your wallet from a different browser.'
-  'scenes.authorizelogin.browser': 'Browser:'
-  'scenes.authorizelogin.country': 'Country of Origin:'
+  'scenes.authorizelogin.browser': 'Browser: '
+  'scenes.authorizelogin.country': 'Country of Origin: '
   'scenes.authorizelogin.error.msg': 'Error: {error}'
   'scenes.authorizelogin.error.uhoh': 'Uh Oh. Something went wrong.'
-  'scenes.authorizelogin.ipaddress': 'IP Address:'
+  'scenes.authorizelogin.ipaddress': 'IP Address: '
   'scenes.authorizelogin.loading.approved.content': 'Please return to your previous tab to view your wallet.'
   'scenes.authorizelogin.loading.approved.title': 'Login Approved!'
   'scenes.authorizelogin.loading.rejected.content': 'Please contact our support team if you have any questions or concerns.'

diff --git a/...ontend/src/scenes/AuthorizeLogin/index.js → ...ntend/src/scenes/AuthorizeLogin/index.tsx b/...ontend/src/scenes/AuthorizeLogin/index.js → ...ntend/src/scenes/AuthorizeLogin/index.tsx
@@ -1,5 +1,5 @@
 import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
+import { connect, ConnectedProps } from 'react-redux'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -22,7 +22,7 @@ const {
   VERIFY_DEVICE_REJECTED
 } = model.analytics.PREFERENCE_EVENTS.SECURITY
 
-class AuthorizeLogin extends React.PureComponent {
+class AuthorizeLogin extends React.PureComponent<Props, State> {
   constructor (props) {
     super(props)
     this.onAccept = this.onAccept.bind(this)
@@ -89,4 +89,13 @@ const mapDispatchToProps = dispatch => ({
   miscActions: bindActionCreators(actions.core.data.misc, dispatch)
 })
 
-export default connect(mapStateToProps, mapDispatchToProps)(AuthorizeLogin)
+const connector = connect(mapStateToProps, mapDispatchToProps)
+
+type Props = ConnectedProps<typeof connector>
+
+type State = {
+  loginApproved: boolean
+  token: string
+}
+
+export default connector(AuthorizeLogin)
diff --git a/...nd/src/scenes/AuthorizeLogin/selectors.js → ...nd/src/scenes/AuthorizeLogin/selectors.ts b/...nd/src/scenes/AuthorizeLogin/selectors.js → ...nd/src/scenes/AuthorizeLogin/selectors.ts
diff --git a/...c/scenes/AuthorizeLogin/template.error.js → .../scenes/AuthorizeLogin/template.error.tsx b/...c/scenes/AuthorizeLogin/template.error.js → .../scenes/AuthorizeLogin/template.error.tsx
@@ -14,7 +14,7 @@ const Error = props => {
   return (
     <Wrapper>
       <Icon name='alert-filled' color='red600' size='40px' />
-      <Text size='16px' weight={400} style={{ 'margin-top': '25px' }}>
+      <Text size='16px' weight={400} style={{ marginTop: '24px' }}>
         <FormattedHTMLMessage
           id='scenes.authorizelogin.error.uhoh'
           defaultMessage='Uh Oh. Something went wrong.'

diff --git a/...scenes/AuthorizeLogin/template.loading.js → ...cenes/AuthorizeLogin/template.loading.tsx b/...scenes/AuthorizeLogin/template.loading.js → ...cenes/AuthorizeLogin/template.loading.tsx
@@ -10,11 +10,11 @@ const Wrapper = styled.div`
   flex-direction: column;
 `
 
-const Loading = props => {
+const Loading = () => {
   return (
     <Wrapper>
       <BlockchainLoader width='40px' height='40px' />
-      <Text size='16px' weight={400} style={{ 'margin-top': '25px' }}>
+      <Text size='16px' weight={400} style={{ marginTop: '24px' }}>
         <FormattedMessage
           id='scenes.authorizelogin.verifying'
           defaultMessage="We're verifying your authorization attempt. Please wait..."

diff --git a/...scenes/AuthorizeLogin/template.success.js → ...cenes/AuthorizeLogin/template.success.tsx b/...scenes/AuthorizeLogin/template.success.js → ...cenes/AuthorizeLogin/template.success.tsx
@@ -114,7 +114,7 @@ const Success = props => {
               size='24px'
               weight={500}
               color='grey700'
-              style={{ 'margin-top': '25px' }}
+              style={{ marginTop: '24px' }}
             >
               <FormattedMessage
                 id='scenes.authorizelogin.attemptfrombrowser'
@@ -125,7 +125,7 @@ const Success = props => {
               size='13px'
               weight={400}
               color='grey700'
-              style={{ 'margin-top': '10px' }}
+              style={{ marginTop: '10px' }}
             >
               <FormattedMessage
                 id='scenes.authorizelogin.attemptfrombrowsermsg'
@@ -251,7 +251,11 @@ const Success = props => {
               </DeviceDiff>
             </DeviceInfoWrapper>
             <ApproveWrapper>
-              <ApproveRejectButtons nature='warning' onClick={props.onAccept}>
+              <ApproveRejectButtons
+                data-e2e='approveLogin'
+                nature='warning'
+                onClick={props.onAccept}
+              >
                 <FormattedMessage
                   id='scenes.authorizelogin.accept'
                   defaultMessage='Accept'
@@ -263,7 +267,11 @@ const Success = props => {
                   defaultMessage='Or'
                 />
               </OrText>
-              <ApproveRejectButtons nature='primary' onClick={props.onReject}>
+              <ApproveRejectButtons
+                data-e2e='rejectLogin'
+                nature='primary'
+                onClick={props.onReject}
+              >
                 <FormattedMessage
                   id='scenes.authorizelogin.reject'
                   defaultMessage='Reject'

diff --git a/packages/blockchain-wallet-v4/src/redux/data/misc/actions.ts b/packages/blockchain-wallet-v4/src/redux/data/misc/actions.ts
@@ -81,7 +81,7 @@ export const encodePairingCodeFailure = error => ({
 })
 
 // AUTHORIZE_LOGIN
-export const authorizeLogin = (token, confirm) => ({
+export const authorizeLogin = (token, confirm?: any) => ({
   type: AT.AUTHORIZE_LOGIN,
   payload: { token, confirm }
 })

diff --git a/packages/blockchain-wallet-v4/src/redux/data/misc/selectors.ts b/packages/blockchain-wallet-v4/src/redux/data/misc/selectors.ts
@@ -5,29 +5,28 @@ import {
   RemoteDataType,
   WalletCurrencyType
 } from 'core/types'
-import { dataPath } from '../../paths'
 import { INVALID_COIN_TYPE } from 'blockchain-wallet-v4/src/model'
-import { path } from 'ramda'
 import { Remote } from 'blockchain-wallet-v4/src'
 import { RootState } from 'data/rootReducer'
 
-export const getCaptcha = path([dataPath, 'misc', 'captcha'])
+export const getCaptcha = (state: RootState) => state.dataPath.misc.captcha
 
-export const getPriceIndexSeries = path([
-  dataPath,
-  'misc',
-  'price_index_series'
-])
+export const getPriceIndexSeries = (state: RootState) =>
+  state.dataPath.misc.price_index_series
 
-export const getLogs = path([dataPath, 'misc', 'logs'])
+export const getLogs = (state: RootState) => state.dataPath.misc.logs
 
-export const getPairingCode = path([dataPath, 'misc', 'pairing_code'])
+export const getPairingCode = (state: RootState) =>
+  state.dataPath.misc.pairing_code
 
-export const authorizeLogin = path([dataPath, 'misc', 'authorize_login'])
+export const authorizeLogin = (state: RootState) =>
+  state.dataPath.misc.authorize_login
 
-export const handle2FAReset = path([dataPath, 'misc', 'handle_2fa_reset'])
+export const handle2FAReset = (state: RootState) =>
+  state.dataPath.misc.handle_2fa_reset
 
-export const verifyEmailToken = path([dataPath, 'misc', 'verify_email_token'])
+export const verifyEmailToken = (state: RootState) =>
+  state.dataPath.misc.verify_email_token
 
 export const getPrice24H = (coin: CoinType, state: RootState) =>
   state.dataPath.misc.price_24h[coin]