1 files changed, 59 insertions, 13 deletions

diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
index e6ba146d6..5ca19ccd8 100644
--- a/ui/app/components/modals/qr-scanner/qr-scanner.component.js
+++ b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
@@ -9,6 +9,7 @@ export default class QrScanner extends Component {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     qrCodeDetected: PropTypes.func,
+    scanQrCode: PropTypes.func,
     error: PropTypes.bool,
     errorType: PropTypes.string,
   }
@@ -20,18 +21,9 @@ export default class QrScanner extends Component {
   constructor (props, context) {
     super(props)
 
-    let initialMsg = context.t('accessingYourCamera')
-    if (props.error) {
-      if (props.errorType === 'NO_WEBCAM_FOUND') {
-        initialMsg = context.t('noWebcamFound')
-      } else {
-        initialMsg = context.t('unknownCameraError')
-      }
-    }
-
     this.state = {
       ready: false,
-      msg: initialMsg,
+      msg: context.t('accessingYourCamera'),
     }
     this.codeReader = null
     this.permissionChecker = null
@@ -118,11 +110,22 @@ export default class QrScanner extends Component {
 
 
   stopAndClose = () => {
-    this.codeReader.reset()
+    if (this.codeReader) {
+      this.codeReader.reset()
+    }
     this.setState({ ready: false })
     this.props.hideModal()
   }
 
+  tryAgain = () => {
+    // close the modal
+    this.stopAndClose()
+    // wait for the animation and try again
+    setTimeout(_ => {
+      this.props.scanQrCode()
+    }, 1000)
+  }
+
   renderVideo () {
     return (
       <div className={'qr-scanner__content__video-wrapper'}>
@@ -137,18 +140,61 @@ export default class QrScanner extends Component {
     )
   }
 
+  renderErrorModal () {
+    let title, msg
+
+    if (this.props.error) {
+      if (this.props.errorType === 'NO_WEBCAM_FOUND') {
+        title = this.context.t('noWebcamFoundTitle')
+        msg = this.context.t('noWebcamFound')
+      } else {
+        title = this.context.t('unknownCameraErrorTitle')
+        msg = this.context.t('unknownCameraError')
+      }
+    }
+
+    return (
+      <div className="qr-scanner">
+        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
+
+        <div className="qr-scanner__image">
+          <img src={'images/webcam.svg'} width={70} height={70} />
+        </div>
+        <div className="qr-scanner__title">
+          { title }
+        </div>
+        <div className={'qr-scanner__error'}>
+          {msg}
+        </div>
+        <div className={'qr-scanner__footer'}>
+          <button className="btn-default btn--large" onClick={this.stopAndClose}>
+            CANCEL
+          </button>
+          <button className="btn-primary btn--large" onClick={this.tryAgain}>
+            TRY AGAIN
+          </button>
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const { t } = this.context
 
+    if (this.props.error) {
+      return this.renderErrorModal()
+    }
+
     return (
       <div className="qr-scanner">
+        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
         <div className="qr-scanner__title">
           { `${t('scanQrCode')}` }
         </div>
         <div className="qr-scanner__content">
-          { !this.props.error ? this.renderVideo() : null}
+          { this.renderVideo() }
         </div>
-        <div className={`qr-scanner__status ${this.props.error ? 'error' : ''}`}>
+        <div className={'qr-scanner__status'}>
           {this.state.msg}
         </div>
       </div>