blockchain · plondon · Mar 7, 2019 · Mar 7, 2019 · Mar 7, 2019 · Mar 7, 2019
@@ -19,7 +19,6 @@ const Error = styled(Text)`
   height: 15px;
   top: -20px;
   right: 0;
-  padding: 5px 0px 5px 0px;
 `
 const getErrorState = ({ touched, invalid }) => {
   return touched && invalid ? 'invalid' : 'initial'

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  width: 100%;
+  padding: 40px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  background-color: ${props => props.theme['white']};
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.21);
+
+  @media (min-width: 768px) {
+    width: 550px;
+  }
+`
@@ -2,22 +2,11 @@ import React from 'react'
 import { actions } from 'data'
 import { connect } from 'react-redux'
 import { getData } from './selectors'
-import styled from 'styled-components'
 import { bindActionCreators } from 'redux'
 import Loading from './template.loading'
 import Success from './template.success'
 import Error from './template.error'
-
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 35px;
-  box-sizing: border-box;
-  background-color: ${props => props.theme['white']};
-
-  @media (min-width: 768px) {
-    width: 550px;
-  }
-`
+import { Wrapper } from 'components/Public'
 
 class AuthorizeLogin extends React.PureComponent {
   constructor (props) {

@@ -4,17 +4,8 @@ import { FormattedMessage } from 'react-intl'
 import { LinkContainer } from 'react-router-bootstrap'
 
 import { Button, Link, Separator, Text } from 'blockchain-info-components'
+import { Wrapper } from 'components/Public'
 
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 40px;
-  box-sizing: border-box;
-  background-color: ${props => props.theme['white']};
-
-  @media (min-width: 768px) {
-    width: 550px;
-  }
-`
 const Row = styled.div`
   display: flex;
   justify-content: space-between;

@@ -1,20 +1,14 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { formValueSelector } from 'redux-form'
+import { formValueSelector, getFormMeta } from 'redux-form'
 
 import Login from './template.js'
 import { actions, selectors } from 'data'
-import { isGuid } from '../../services/ValidationHelper'
+import { isGuid, isEmail } from '../../services/ValidationHelper'
 
 class LoginContainer extends React.PureComponent {
-  constructor (props) {
-    super(props)
-    this.state = { useCode: true }
-    this.onSubmit = this.onSubmit.bind(this)
-    this.handleMobile = this.handleMobile.bind(this)
-    this.handleSmsResend = this.handleSmsResend.bind(this)
-  }
+  state = { useCode: true }
 
   componentDidMount () {
     this.props.loginActions.initialized()
@@ -24,7 +18,7 @@ class LoginContainer extends React.PureComponent {
     this.props.formActions.reset('login')
   }
 
-  onSubmit () {
+  onSubmit = () => {
     const { guid, password, code } = this.props
     let auth = code
     // only uppercase if authType is not Yubikey
@@ -34,11 +28,11 @@ class LoginContainer extends React.PureComponent {
     this.props.authActions.login(guid, password, auth)
   }
 
-  handleMobile () {
+  handleMobile = () => {
     this.props.modalActions.showModal('MobileLogin')
   }
 
-  handleSmsResend () {
+  handleSmsResend = () => {
     this.props.authActions.resendSmsCode(this.props.guid)
   }
 
@@ -74,12 +68,15 @@ class LoginContainer extends React.PureComponent {
 }
 
 const mapStateToProps = state => ({
+  code: formValueSelector('login')(state, 'code'),
   guid: formValueSelector('login')(state, 'guid'),
   password: formValueSelector('login')(state, 'password'),
-  code: formValueSelector('login')(state, 'code'),
+  formMeta: getFormMeta('login')(state),
   authType: selectors.auth.getAuthType(state),
   lastGuid: selectors.cache.getLastGuid(state),
-  data: selectors.auth.getLogin(state)
+  data: selectors.auth.getLogin(state),
+  isGuidValid: isGuid(formValueSelector('login')(state, 'guid')),
+  isGuidEmailAddress: isEmail(formValueSelector('login')(state, 'guid'))
 })
 
 const mapDispatchToProps = dispatch => ({

@@ -4,9 +4,11 @@ import styled from 'styled-components'
 import { Field, reduxForm } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
 import { LinkContainer } from 'react-router-bootstrap'
+import { path } from 'ramda'
 import { check, msie } from 'bowser'
 
-import { required } from 'services/FormHelper'
+import { required, validWalletId } from 'services/FormHelper'
+
 import {
   Banner,
   Button,
@@ -25,23 +27,19 @@ import {
   PasswordBox,
   TextBox
 } from 'components/Form'
+import { Wrapper } from 'components/Public'
 import MobileLogin from 'modals/Mobile/MobileLogin'
 
 const isSupportedBrowser =
   check({ safari: '8', chrome: '45', firefox: '45', opera: '20' }) && !msie
 
 export const removeWhitespace = string => string.replace(/\s/g, ``)
 
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 35px;
-  box-sizing: border-box;
-  background-color: ${props => props.theme['white']};
-
-  @media (min-width: 768px) {
-    width: 550px;
-  }
+const LoginWrapper = styled(Wrapper)`
+  position: relative;
+  overflow: visible;
 `
+
 const Header = styled.div`
   display: flex;
   justify-content: space-between;
@@ -82,7 +80,18 @@ const BrowserWarning = styled.div`
 `
 
 const Login = props => {
-  const { submitting, invalid, busy, loginError, password, ...rest } = props
+  const {
+    busy,
+    guid,
+    formMeta,
+    loginError,
+    password,
+    submitting,
+    invalid,
+    isGuidValid,
+    isGuidEmailAddress,
+    ...rest
+  } = props
   const { handleSubmit, handleMobile, handleSmsResend, authType } = rest
 
   const guidError =
@@ -96,8 +105,11 @@ const Login = props => {
     (loginError.toLowerCase().includes('this account has been locked') ||
       loginError.toLowerCase().includes('account is locked'))
 
+  const isGuidTouched = path(['guid', 'touched'], formMeta)
+  const showGuidInvalidError = guid && !isGuidValid && isGuidTouched
+
   return (
-    <Wrapper>
+    <LoginWrapper>
       <MobileLogin />
       <Header>
         <Text size='24px' weight={300} capitalize>
@@ -149,7 +161,7 @@ const Login = props => {
             <Field
               name='guid'
               normalize={removeWhitespace}
-              validate={[required]}
+              validate={[required, validWalletId]}
               component={TextBox}
               borderColor={guidError ? 'invalid' : undefined}
               disabled={!isSupportedBrowser}
@@ -179,26 +191,50 @@ const Login = props => {
               </LinkContainer>
             </GuidError>
           )}
-          <LoginTextGroup inline>
-            <Text size='12px' color='gray-3' weight={300}>
-              <FormattedMessage
-                id='scenes.login.info'
-                defaultMessage='Find the login link in your email,'
-              />
-            </Text>
-            <Text size='12px' color='gray-3' weight={300}>
-              <FormattedMessage
-                id='scenes.login.info2'
-                defaultMessage='e.g. blockchain.info/wallet/1111-222-333...'
-              />
-            </Text>
-            <Text size='12px' color='gray-3' weight={300}>
-              <FormattedMessage
-                id='scenes.login.info3'
-                defaultMessage='The series of numbers and dashes at the end of the link is your Wallet ID.'
-              />
+          {showGuidInvalidError ? (
+            <Text size='14px' weight={300}>
+              {isGuidEmailAddress ? (
+                <FormattedMessage
+                  id='scenes.login.isguidemailerror'
+                  defaultMessage='👋Hey! Make sure this is your Wallet ID and not an email address. If you need a reminder'
+                />
+              ) : (
+                <FormattedMessage
+                  id='scenes.login.isguidinvalid'
+                  defaultMessage="👋Hey! This format doesn't look quite right. Wallet ID's look like this: ef7549a5-94ad-39...If you need a reminder"
+                />
+              )}{' '}
+              <LinkContainer to='/reminder'>
+                <Link size='14px' weight={300}>
+                  <FormattedMessage
+                    id='scenes.login.clickhere'
+                    defaultMessage='click here.'
+                  />
+                </Link>
+              </LinkContainer>
             </Text>
-          </LoginTextGroup>
+          ) : (
+            <LoginTextGroup inline>
+              <Text size='12px' color='gray-3' weight={300}>
+                <FormattedMessage
+                  id='scenes.login.info'
+                  defaultMessage='Find the login link in your email,'
+                />
+              </Text>
+              <Text size='12px' color='gray-3' weight={300}>
+                <FormattedMessage
+                  id='scenes.login.info2'
+                  defaultMessage='e.g. blockchain.info/wallet/1111-222-333...'
+                />
+              </Text>
+              <Text size='12px' color='gray-3' weight={300}>
+                <FormattedMessage
+                  id='scenes.login.info3'
+                  defaultMessage='The series of numbers and dashes at the end of the link is your Wallet ID.'
+                />
+              </Text>
+            </LoginTextGroup>
+          )}
         </FormGroup>
         <FormGroup>
           <FormItem>
@@ -338,7 +374,7 @@ const Login = props => {
           </TextGroup>
         </Footer>
       )}
-    </Wrapper>
+    </LoginWrapper>
   )
 }
 

@@ -3,17 +3,8 @@ import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 
 import { Button, Link, Separator, Text } from 'blockchain-info-components'
+import { Wrapper } from 'components/Public'
 
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 40px;
-  box-sizing: border-box;
-  background-color: ${props => props.theme['white']};
-
-  @media (min-width: 768px) {
-    width: 550px;
-  }
-`
 const Header = styled.div`
   display: flex;
   justify-content: space-between;

@@ -12,18 +12,9 @@ import {
   Text,
   TextGroup
 } from 'blockchain-info-components'
+import { Wrapper } from 'components/Public'
 import { Form, FormGroup, FormItem, FormLabel, TextBox } from 'components/Form'
 
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 40px;
-  box-sizing: border-box;
-  background-color: ${props => props.theme['white']};
-
-  @media (min-width: 768px) {
-    width: 550px;
-  }
-`
 const Header = styled.div`
   display: flex;
   justify-content: space-between;

@@ -24,18 +24,9 @@ import {
   PasswordBox,
   TextBox
 } from 'components/Form'
+import { Wrapper } from 'components/Public'
 import Terms from 'components/Terms'
 
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 40px;
-  box-sizing: border-box;
-  background-color: ${props => props.theme['white']};
-
-  @media (min-width: 768px) {
-    width: 550px;
-  }
-`
 const Header = styled.div`
   display: flex;
   justify-content: space-between;

@@ -29,21 +29,12 @@ import {
   PasswordBox,
   TextBox
 } from 'components/Form'
+import { Wrapper } from 'components/Public'
 import Terms from 'components/Terms'
 
 const isSupportedBrowser =
   check({ safari: '8', chrome: '45', firefox: '45', opera: '20' }) && !msie
 
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 35px;
-  box-sizing: border-box;
-  background-color: ${props => props.theme['white']};
-
-  @media (min-width: 768px) {
-    width: 550px;
-  }
-`
 const Header = styled.div`
   display: flex;
   justify-content: space-between;

@@ -21,17 +21,8 @@ import {
   FormLabel,
   TextBox
 } from 'components/Form'
+import { Wrapper } from 'components/Public'
 
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 40px;
-  box-sizing: border-box;
-  background-color: ${props => props.theme['white']};
-
-  @media (min-width: 768px) {
-    width: 550px;
-  }
-`
 const Footer = styled.div`
   display: flex;
   flex-direction: row;