fix(security-second-password): user can press enter to submit 2nd pas…

…sword
blockchain · Jul 24, 2019 · d4ed9c8 · d4ed9c8
1 parent 65f8eda
commit d4ed9c8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 50 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Settings/SecondPassword/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/Settings/SecondPassword/index.js
@@ -8,14 +8,9 @@ import { Types } from 'blockchain-wallet-v4'
 import * as C from 'services/AlertService'
 
 class SecondPasswordContainer extends React.PureComponent {
-  constructor (props) {
-    super(props)
-    this.state = { secondPassword: '' }
-    this.handleClick = this.handleClick.bind(this)
-    this.handleChange = this.handleChange.bind(this)
-  }
+  state = { secondPassword: '' }
 
-  handleClick () {
+  handleSubmit = () => {
     if (
       Types.Wallet.isValidSecondPwd(
         this.state.secondPassword,
@@ -30,15 +25,15 @@ class SecondPasswordContainer extends React.PureComponent {
     }
   }
 
-  handleChange (event) {
+  handleChange = event => {
     this.setState({ secondPassword: event.target.value })
   }
 
   render () {
     return (
       <SecondPassword
         {...this.props}
-        handleClick={this.handleClick}
+        handleSubmit={this.handleSubmit}
         handleChange={this.handleChange}
         value={this.state.secondPassword}
       />

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Settings/SecondPassword/template.js b/packages/blockchain-wallet-v4-frontend/src/modals/Settings/SecondPassword/template.js
@@ -15,59 +15,62 @@ import {
 
 const SecondPassword = props => {
   const { position, total, close, ...rest } = props
-  const { handleClick, handleChange, value } = rest
+  const { handleSubmit, handleChange, value } = rest
 
   return (
     <Modal size='medium' position={position} total={total} closeButton={false}>
-      <ModalHeader icon='safe' onClose={close}>
-        <FormattedMessage
-          id='modals.secondpassword.title'
-          defaultMessage='Second password required'
-        />
-      </ModalHeader>
-      <ModalBody>
-        <Text size='14px' weight={500}>
+      <form onSubmit={handleSubmit}>
+        <ModalHeader icon='safe' onClose={close}>
           <FormattedMessage
-            id='modals.secondpassword.explain'
-            defaultMessage='Please enter your second password'
+            id='modals.secondpassword.title'
+            defaultMessage='Second password required'
           />
-        </Text>
-        <PasswordInput
-          value={value}
-          onChange={handleChange}
-          data-e2e='secondPasswordModalInput'
-        />
-      </ModalBody>
-      <ModalFooter align='spaced'>
-        <Link
-          size='13px'
-          weight={400}
-          onClick={close}
-          data-e2e='secondPasswordModalCancelButton'
-        >
-          <FormattedMessage
-            id='modals.secondpassword.cancel'
-            defaultMessage='Cancel'
-          />
-        </Link>
-        <Button
-          nature='primary'
-          onClick={handleClick}
-          data-e2e='secondPasswordModalConfirmButton'
-        >
-          <FormattedMessage
-            id='modals.secondpassword.confirm'
-            defaultMessage='Confirm'
+        </ModalHeader>
+        <ModalBody>
+          <Text size='14px' weight={500}>
+            <FormattedMessage
+              id='modals.secondpassword.explain'
+              defaultMessage='Please enter your second password'
+            />
+          </Text>
+          <PasswordInput
+            value={value}
+            onChange={handleChange}
+            data-e2e='secondPasswordModalInput'
           />
-        </Button>
-      </ModalFooter>
+        </ModalBody>
+        <ModalFooter align='spaced'>
+          <Link
+            size='13px'
+            weight={400}
+            onClick={close}
+            data-e2e='secondPasswordModalCancelButton'
+          >
+            <FormattedMessage
+              id='modals.secondpassword.cancel'
+              defaultMessage='Cancel'
+            />
+          </Link>
+          <Button
+            type='submit'
+            nature='primary'
+            onClick={handleSubmit}
+            data-e2e='secondPasswordModalConfirmButton'
+          >
+            <FormattedMessage
+              id='modals.secondpassword.confirm'
+              defaultMessage='Confirm'
+            />
+          </Button>
+        </ModalFooter>
+      </form>
     </Modal>
   )
 }
 
 SecondPassword.propTypes = {
   secondPassword: PropTypes.string,
-  handleClick: PropTypes.func.isRequired
+  handleSubmit: PropTypes.func.isRequired
 }
 
 export default SecondPassword