diff options
Diffstat (limited to 'ui/app/components/modals/qr-scanner/qr-scanner.component.js')
-rw-r--r-- | ui/app/components/modals/qr-scanner/qr-scanner.component.js | 72 |
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> |