Wallet creation - add a seed copy button

react/src/components/login/login.js

@@ -7,7 +7,8 @@ import {
   getDexCoins,
   toggleSyncOnlyModal,
   getSyncOnlyForks,
-  createNewWallet
+  createNewWallet,
+  triggerToaster
 } from '../../actions/actionCreators';
 import Store from '../../store';
 import {PassPhraseGenerator} from '../../util/crypto/passphrasegenerator';
@@ -44,6 +45,7 @@ class Login extends React.Component {
     this.handleRegisterWallet = this.handleRegisterWallet.bind(this);
     this.openSyncOnlyModal = this.openSyncOnlyModal.bind(this);
     this.toggleSeedBackupModal = this.toggleSeedBackupModal.bind(this);
+    this.copyPassPhraseToClipboard = this.copyPassPhraseToClipboard.bind(this);
     this.execWalletCreate = this.execWalletCreate.bind(this);
   }
 
@@ -266,7 +268,7 @@ class Login extends React.Component {
       isSeedConfirmError: !enteredSeedsMatch ? true : false,
       isSeedBlank: isSeedBlank ? true : false,
     });
-    
+
     if (enteredSeedsMatch && !isSeedBlank && _customSeed !== null) {
       this.toggleSeedBackupModal();
     }
@@ -288,6 +290,24 @@ class Login extends React.Component {
     }));
   }
 
+  copyPassPhraseToClipboard() {
+    const passPhrase = this.state.randomSeed;
+    const textField = document.createElement('textarea');
+    textField.innerText = passPhrase;
+    document.body.appendChild(textField);
+    textField.select();
+    document.execCommand('copy');
+    textField.remove();
+
+    Store.dispatch(
+      triggerToaster(
+        translate('LOGIN.SEED_SUCCESSFULLY_COPIED'),
+        translate('LOGIN.SEED_COPIED'),
+        'success'
+      )
+    );
+  }
+
   renderSwallModal() {
     if (this.state.displaySeedBackupModal) {
       return SwallModalRender.call(this);

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

@@ -197,6 +197,9 @@ const LoginRender = function () {
                   onChange={ (e) => this.updateWalletSeed(e) }
                   readOnly={ !this.isCustomWalletSeed() }
                 ></textarea>
+                <button className="copy-floating-label"
+                  htmlFor="walletseed"
+                  onClick={ () => this.copyPassPhraseToClipboard() }>Copy</button>
                 <span className={ this.state.isCustomSeedWeak ? 'tooltiptext' : 'hide' }>
                   <strong>Weak seed!</strong><br /><br />
                   Your seed must contain:<br />

react/src/components/login/login.scss

@@ -89,4 +89,16 @@ textarea {
 .auto-side-margin {
   margin-left: auto;
   margin-right: auto;
+}
+
+button.copy-floating-label {
+  position: absolute;
+  font-weight: 500;
+  font-size: 11.2px;
+  top: -11px;
+  right: 0;
+  background-color: #757575;
+  border: 0;
+  cursor: pointer;
+  z-index: 1000;
 }

react/src/translate/en.js

@@ -408,7 +408,9 @@ export const _lang = {
       'SEED_NOT_OF_TYPE': 'The inserted seed is not of type',
       'IGUANA_SEED': 'Iguana (256 bits)',
       'WAVES_SEED': 'Waves',
-      'NXT_SEED': 'NXT'
+      'NXT_SEED': 'NXT',
+      'SEED_COPIED': 'Seed copied',
+      'SEED_SUCCESSFULLY_COPIED': 'The seed was successfully copied'
     },
     'SIDEBAR': {
       'EDEX_MOTTO': 'Most Secure, Easy and Native Decentralised Exchange',