login/create seed qr

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

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Store from '../../../store';
 import { translate } from '../../../translate/translate';
-import QrReader from 'react-qr-reader'
+import QrReader from 'react-qr-reader';
 import {
   QRModalRender,
   QRModalReaderRender,
@@ -72,15 +72,11 @@ class QRModal extends React.Component {
     const a = document.getElementById('saveModalImage' + this.props.content);
 
     a.href = dataURL;
-    a.download = this.props.content;
+    a.download = this.props.fileName || this.props.content;
   }
 
   render() {
-    if (this.props.mode === 'scan') {
-      return QRModalReaderRender.call(this);
-    } else {
-      return QRModalRender.call(this);
-    }
+    return this.props.mode === 'scan' ? QRModalReaderRender.call(this) : QRModalRender.call(this);
   }
 }
 

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

@@ -14,7 +14,7 @@ export const QRModalRender = function() {
       <div
         className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
         id="QRModal">
-        <div className="modal-dialog modal-center modal-sm">
+        <div className={ `modal-dialog modal-center modal-${this.props.modalSize || 'sm' }` }>
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button
@@ -23,7 +23,7 @@ export const QRModalRender = function() {
                 onClick={ this.closeModal }>
                 <span>×</span>
               </button>
-              <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QR_CODE') }</h4>
+              <h4 className="modal-title white text-left">{ this.props.title || translate('INDEX.SCAN_QR_CODE') }</h4>
             </div>
             <div className="modal-body">
               <div className="animsition vertical-align fade-in">
@@ -32,7 +32,7 @@ export const QRModalRender = function() {
                   className="page-content vertical-align-middle text-center">
                   <QRCode
                     value={ this.props.content }
-                    size={ 198 } />
+                    size={ Number(this.props.qrSize) || 198 } />
                   <p className="margin-top-10">
                     <a href=""
                       id={ 'saveModalImage' + this.props.content }
@@ -61,7 +61,7 @@ export const QRModalReaderRender = function() {
           className="btn btn-default"
           onClick={ this.openModal }>
           <i className="icon fa-qrcode"></i>
-          { translate('INDEX.SCAN_QRCODE_WEBCAM') }
+          { translate('INDEX.SCAN_QR_CODE') }
         </button>
         <div
           className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }

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

@@ -56,7 +56,7 @@ export const _SendFormRender = function() {
             <button type="button"
               className="btn btn-default btn-send-self"
               onClick={ this.setSendToSelf }>
-              Self
+              { translate('SEND.SELF') }
             </button>
           }
           <label
@@ -78,7 +78,7 @@ export const _SendFormRender = function() {
             <button type="button"
               className="btn btn-default btn-send-self"
               onClick={ this.setSendAmountAll }>
-              All
+              { translate('SEND.ALL') }
             </button>
           }
           <label

react/src/components/login/login.js

@@ -79,6 +79,7 @@ class Login extends React.Component {
     this.updateDecryptKey = this.updateDecryptKey.bind(this);
     this.loadPinList = this.loadPinList.bind(this);
     this.updateSelectedShortcut = this.updateSelectedShortcut.bind(this);
+    this.setRecieverFromScan = this.setRecieverFromScan.bind(this);
   }
 
   // the setInterval handler for 'activeCoins'
@@ -93,6 +94,22 @@ class Login extends React.Component {
     });
   }
 
+  setRecieverFromScan(receiver) {
+    if (receiver) {
+      this.setState({
+        loginPassphrase: receiver,
+      });
+    } else {
+      Store.dispatch(
+        triggerToaster(
+          'Unable to recognize QR code',
+          'QR scan Error',
+          'error'
+        )
+      );
+    }
+  }
+
   isCustomWalletSeed() {
     return this.state.customWalletSeed;
   }

react/src/components/login/login.render.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { translate } from '../../translate/translate';
 import LoginSettingsModal from '../dashboard/loginSettingsModal/loginSettingsModal';
 import ZcparamsFetchModal from '../dashboard/zcparamsFetchModal/zcparamsFetchModal';
+import QRModal from '../dashboard/qrModal/qrModal';
 import Select from 'react-select';
 import ReactTooltip from 'react-tooltip';
 
@@ -59,9 +60,9 @@ const LoginRender = function() {
             <div className="form-group form-material floating col-sm-12 horizontal-padding-0">
               <input
                 type="password"
-                className={ !this.state.seedInputVisibility ? 'form-control' : 'hide' }
                 name="loginPassphrase"
                 ref="loginPassphrase"
+                className={ !this.state.seedInputVisibility ? 'form-control' : 'hide' }
                 onChange={ this.updateLoginPassPhraseInput }
                 onKeyDown={ (event) => this.handleKeydown(event) }
                 autoComplete="off"
@@ -81,6 +82,11 @@ const LoginRender = function() {
               <label
                 className="floating-label"
                 htmlFor="inputPassword">{ translate('INDEX.WALLET_SEED') }</label>
+              <div className="qr-modal-login-block">
+                <QRModal
+                  mode="scan"
+                  setRecieverFromScan={ this.setRecieverFromScan } />
+              </div>
             </div>
             { this.state.loginPassPhraseSeedType &&
               <div
@@ -89,7 +95,6 @@ const LoginRender = function() {
                 <div className="placeholder-label">{ this.state.loginPassPhraseSeedType }</div>
               </div>
             }
-
             { this.state.loginPassphrase &&
               this.state.enableEncryptSeed &&
               <div className="row">
@@ -369,7 +374,9 @@ const LoginRender = function() {
                 <button
                   className="copy-floating-label"
                   htmlFor="walletseed"
-                  onClick={ () => this.copyPassPhraseToClipboard() }>{ translate('INDEX.COPY') }</button>
+                  onClick={ () => this.copyPassPhraseToClipboard() }>
+                  { translate('INDEX.COPY') }
+                </button>
                 <span className={ this.state.isCustomSeedWeak ? 'tooltiptext' : 'hide' }>
                   <strong>{ translate('INDEX.WEAK_SEED') }</strong><br /><br />
                   { translate('INDEX.YOUR_SEED_MUST_CONTAIN') }<br />
@@ -400,6 +407,16 @@ const LoginRender = function() {
                 <label
                   className="floating-label"
                   htmlFor="rwalletseed">{ translate('INDEX.CONFIRM_SEED') }</label>
+                <button
+                  type="button"
+                  className="btn btn-success btn-block margin-top-20 btn-generate-qr">
+                  <QRModal
+                    qrSize="256"
+                    modalSize="md"
+                    title="Seed QR recovery"
+                    fileName="agama-seed"
+                    content={ this.state.randomSeed } />
+                </button>
               </div>
               <button
                 type="button"

react/src/components/login/login.scss

@@ -233,3 +233,22 @@ option.login-option {
     color: #fff;
   }
 }
+
+.qrcode-modal + .modal {
+  a {
+    color: #fff;
+  }
+}
+
+.btn-generate-qr {
+  .qrcode-modal {
+    display: block;
+  }
+}
+
+.qr-modal-login-block {
+  .btn {
+    background: transparent;
+    color: #fff;
+  }
+}

react/src/translate/en.js

@@ -744,6 +744,8 @@ export const LANG_EN = {
     'DOWNLOAD': 'Download',
   },
   'SEND': {
+    'SELF': 'Self',
+    'ALL': 'All',
     'BAD_TXN_SPENT_ERR1': 'This particular error can happen in the following cases:',
     'BAD_TXN_SPENT_ERR2': 'Your machine\'s clock is not set properly',
     'BAD_TXN_SPENT_ERR3': 'SPV server is temporary out of sync. Try to switch over to another one.',