Add UI support for restoring from backup package

src/_services/user.service.js

@@ -10,6 +10,7 @@ export const userService = {
     appLogin,
     logout,
     restore,
+    restoreFromPackage,
     forgotPassword,
     register,
     searchAccounts,
@@ -77,6 +78,14 @@ function restore(shortKey, longKey, password, messages, errors) {
         .then(handleAuthResponse(messages, errors));
 }
 
+function restoreFromPackage(shortKey, backupFileRef, password, messages, errors) {
+    let formData = new FormData();
+    formData.append('file', backupFileRef);
+    formData.append('password', password);
+    return fetch(`${config.apiUrl}/auth/restore/apply/${shortKey}`, util.putWithAuth(formData))
+        .then(util.handleAuthResponse(messages, errors));
+}
+
 function logout(messages, errors) {
     if (util.currentUser() === null) {
         console.log('userService.logout: already logged out');

src/_store/account.module.js

@@ -164,6 +164,12 @@ const actions = {
         (error) => commit('restoreFailure', systemConfigs, error)
       );
   },
+  restoreFromPackage({ commit }, { shortKey, backupFileRef, password, systemConfigs, messages, errors }) {
+    commit('restoreRequest', systemConfigs);
+    userService.restoreFromPackage(shortKey, backupFileRef, password, messages, errors)
+               .then(ok => commit('restoreSuccess', systemConfigs),
+                     error => commit('restoreFailure', systemConfigs, error));
+  },
   forgotPassword({ commit }, { username, messages, errors }) {
     commit('forgotPasswordRequest');
     return userService.forgotPassword(username, messages, errors).then(

src/auth/RestorePage.vue

@@ -24,15 +24,29 @@
                     </div>
                 </div>
 
-                <div class="form-group">
-                    <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 style="border: 2px solid #000;">
+                    <div class="form-group">
+                        <label htmlFor="restoreLongNetworkKeyFile">{{ messages.field_label_restore_long_key }}</label>
+                        <input type="file" ref="restoreLongNetworkKeyFile" @change="readUploadedKeyFile"
+                            class="form-control" :class="{ 'is-invalid': fileFieldsConstaintFailed }" />
+                        <div v-if="submitted && errors.has('restoreLongNetworkKey')" class="invalid-feedback d-block">
+                            {{ errors.first('restoreLongNetworkKey') }}
+                        </div>
+                    </div>
+                    {{ messages.label_or }}
+                    <div class="form-group">
+                        <label htmlFor="restoreBackupPackageFile">
+                            {{ messages.field_label_restore_backup_package }}
+                        </label>
+                        <input type="file" ref="restoreBackupPackageFile" @change="setBackupFileForUpload"
+                            class="form-control" :class="{ 'is-invalid': fileFieldsConstaintFailed }" />
+                        <div v-if="submitted && errors.has('restoreLongNetworkKey')" class="invalid-feedback d-block">
+                            {{ errors.first('restoreLongNetworkKey') }}
+                        </div>
                     </div>
-                    <div v-if="submitted && errors.has('restoreLongNetworkKey')" class="invalid-feedback d-block">
-                        {{ errors.first('restoreLongNetworkKey') }}
+
+                    <div v-show="fileFieldsConstaintFailed" class="invalid-feedback">
+                        {{ messages.err_restoreFile_constraint }}
                     </div>
                 </div>
 
@@ -68,6 +82,7 @@ export default {
         return {
             restoreShortKey: (this.$route.query && this.$route.query.k) ? this.$route.query.k : null,
             restoreLongNetworkKey: null,
+            restoreBackupPackageFileRef: null,
             password: '',
             submitted: false,
             loadingImgSrc: loadingImgSrc
@@ -78,25 +93,40 @@ export default {
     },
     computed: {
         ...mapState('account', [ 'status' ]),
-        ...mapState('system', [ 'configs', 'messages' ])
+        ...mapState('system', [ 'configs', 'messages' ]),
+        fileFieldsConstaintFailed() {
+            // only and exactly 1 file may be uploaded - either file including long network key, or full backup package
+            return this.submitted && ((!this.restoreLongNetworkKey && !this.restoreBackupPackageFileRef)
+                                      || (this.restoreLongNetworkKey && this.restoreBackupPackageFileRef))
+        }
     },
     methods: {
-        ...mapActions('account', [ 'restore' ]),
+        ...mapActions('account', [ 'restore', 'restoreFromPackage' ]),
         ...mapActions('system', [ 'loadSystemConfigs' ]),
         handleSubmit (e) {
             this.errors.clear();
             const { restoreShortKey, password } = this;
             this.submitted = true;
-            this.restore({
-                shortKey: restoreShortKey, longKey: this.restoreLongNetworkKey, password: password,
-                systemConfigs: this.configs, messages: this.messages, errors: this.errors
-            });
+            if (this.restoreLongNetworkKey) {
+                this.restore({
+                    shortKey: restoreShortKey, longKey: this.restoreLongNetworkKey, password: password,
+                    systemConfigs: this.configs, messages: this.messages, errors: this.errors
+                });
+            } else {
+                this.restoreFromPackage({
+                    shortKey: restoreShortKey, backupFileRef: this.restoreBackupPackageFileRef, 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);
+        },
+        setBackupFileForUpload() {
+            this.restoreBackupPackageFileRef = this.$refs.restoreBackupPackageFile.files[0];
         }
     }
 };