src/_services/network.service.js

@@ -81,7 +81,11 @@ function requestNetworkKeys(userId, networkId, messages, errors) {
 }
 
 function retrieveNetworkKeys(userId, networkId, code, password, messages, errors) {
-    return fetch(`${config.apiUrl}/users/${userId}/networks/${networkId}/actions/keys/${code}`, util.postWithAuth({name: 'password', value: password})).then(util.handleCrudResponse(messages, errors));
+    return fetch(`${config.apiUrl}/users/${userId}/networks/${networkId}/actions/keys/${code}`,
+                 util.postWithAuth({ name: 'password', value: password }))
+            .then(util.handleCrudResponse(messages, errors))
+            .then(netKeyObj => netKeyObj.data)
+            .then(util.handleDataToDownloadAsFile('restore.' + networkId + '.key', 'text/plain'));
 }
 
 function getNetworkBackups(userId, networkId, messages, errors) {

src/_store/networks.module.js

@@ -22,7 +22,6 @@ const state = {
     networkNodes: null,
     deletedNetworkUuid: null,
     networkKeysRequested: null,
-    networkKeys: null,
     restoreKey: null,
     backups: null,
 };
@@ -151,10 +150,8 @@ const actions = {
     retrieveNetworkKeys({ commit }, {userId, networkId, code, password, messages, errors}) {
         commit('retrieveNetworkKeysRequest');
         networkService.retrieveNetworkKeys(userId, networkId, code, password, messages, errors)
-            .then(
-                keys => commit('retrieveNetworkKeysSuccess', keys),
-                error => commit('retrieveNetworkKeysFailure', error)
-            );
+                      .then(ok => commit('retrieveNetworkKeysSuccess'),
+                            error => commit('retrieveNetworkKeysFailure', error));
     },
 
     resetRestoreKey({ commit }) { commit('resetRestoreKey'); }
@@ -304,7 +301,6 @@ const mutations = {
     requestNetworkKeysRequest(state) {
         state.loading.requestNetworkKeys = true;
         state.networkKeysRequested = null;
-        state.networkKeys = null;
     },
     requestNetworkKeysSuccess(state, networkId) {
         state.loading.requestNetworkKeys = false;
@@ -318,11 +314,9 @@ const mutations = {
     retrieveNetworkKeysRequest(state) {
         state.loading.retrieveNetworkKeys = true;
         state.networkKeysRequested = null;
-        state.networkKeys = null;
     },
-    retrieveNetworkKeysSuccess(state, keys) {
+    retrieveNetworkKeysSuccess(state) {
         state.loading.retrieveNetworkKeys = false;
-        state.networkKeys = keys;
     },
     retrieveNetworkKeysFailure(state, error) {
         state.loading.retrieveNetworkKeys = false;

src/account/NetworkPage.vue

@@ -97,13 +97,6 @@
                 </button>
                 <img v-show="loading && loading.retrieveNetworkKeys" :src="loadingImgSrc" />
             </form>
-            <div v-if="networkKeys">
-                <hr />
-                <h4><b>{{ messages.message_network_keys }}</b></h4>
-                <textarea v-model="networkKeys.data" name="networkKeys" class="form-control" cols="50"
-                          readonly="true" />
-                {{ messages.message_network_keys_description }}
-            </div>
 
             <span v-html="latestBackupInfoHtml"></span>
 
@@ -193,7 +186,7 @@
         computed: {
             ...mapState('networks', [
                 'network', 'newNodeNotification', 'networkStatuses', 'networkNodes', 'networkKeysRequested',
-                'deletedNetworkUuid', 'networkKeys', 'loading', 'restoreKey', 'backups'
+                'deletedNetworkUuid', 'loading', 'restoreKey', 'backups'
             ]),
             ...mapState('system', ['messages', 'configs', 'appLinks', 'upgradeCheck', 'upgrading']),
             showSetupHelp () {

src/auth/RestorePage.vue

@@ -25,9 +25,9 @@
                 </div>
 
                 <div class="form-group">
-                    <label htmlFor="restoreLongNetworkKey">{{messages.field_label_restore_long_key}}</label>
-                    <textarea v-model="restoreLongNetworkKey" name="restoreLongNetworkKey" class="form-control"
-                                :class="{ 'is-invalid': submitted && !restoreLongNetworkKey }" />
+                    <label htmlFor="restoreLongNetworkKeyFile">{{ messages.field_label_restore_long_key }}</label>
+                    <input type="file" ref="restoreLongNetworkKeyFile" @change="readUploadedKeyFile"
+                           class="form-control" :class="{ 'is-invalid': submitted && !restoreLongNetworkKey }" />
                     <div v-show="submitted && !restoreLongNetworkKey" class="invalid-feedback">
                         {{ messages.err_restoreLongNetworkKey_required }}
                     </div>
@@ -85,12 +85,18 @@ export default {
         ...mapActions('system', [ 'loadSystemConfigs' ]),
         handleSubmit (e) {
             this.errors.clear();
+            const { restoreShortKey, password } = this;
             this.submitted = true;
-            const { restoreShortKey, restoreLongNetworkKey, password } = this;
             this.restore({
-                shortKey: restoreShortKey, longKey: restoreLongNetworkKey, password: password,
+                shortKey: restoreShortKey, longKey: this.restoreLongNetworkKey, password: password,
                 systemConfigs: this.configs, messages: this.messages, errors: this.errors
             });
+        },
+        readUploadedKeyFile() {
+            var uploadedFile = this.$refs.restoreLongNetworkKeyFile.files[0];
+            var reader = new FileReader();
+            reader.onload = (event) => this.restoreLongNetworkKey = event.target.result;
+            reader.readAsText(uploadedFile);
         }
     }
 };