hide qr code scan btn if device check failed

react/src/components/dashboard/qrModal/qrModal.js

@@ -14,6 +14,7 @@ class QRModal extends React.Component {
     this.state = {
       modalIsOpen: false,
       error: null,
+      errorShown: false,
     };
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
@@ -65,6 +66,7 @@ class QRModal extends React.Component {
   closeModal() {
     this.setState({
       modalIsOpen: false,
+      errorShown: this.state.error ? true : false,
     });
   }
 

react/src/components/dashboard/qrModal/qrModal.render.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { translate } from '../../../translate/translate';
 import QRCode from 'qrcode.react';
 
-export const QRModalRender = function () {
+export const QRModalRender = function() {
   return (
     <span>
       <span className="label label-default margin-left-10 action"
@@ -41,7 +41,8 @@ export const QRModalRender = function () {
   );
 };
 
-export const QRModalReaderRender = function () {
+export const QRModalReaderRender = function() {
+  if (!this.state.errorShown) {
     return (
       <span>
         <button type="button"
@@ -66,13 +67,7 @@ export const QRModalReaderRender = function () {
                 </div>
                 <div className="modal-body">
                   <div className="animsition vertical-align fade-in">
-                  <div
+                    <div className="page-content vertical-align-middle webcam-frame">
-                    className="page-content vertical-align-middle"
-                    style={{
-                      width: '100%',
-                      textAlign: 'center',
-                      fontSize: '16px'
-                    }}>
                       <div id="webcam">
                         { this.state.error }
                       </div>
@@ -85,4 +80,7 @@ export const QRModalReaderRender = function () {
         <div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
       </span>
     );
+  } else {
+    return null;
+  }
 };

react/src/components/dashboard/qrModal/qrModal.scss

@@ -3,3 +3,9 @@
   top: 15px;
   right: 30px;
 }
+
+.webcam-frame {
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+}