Fix waiting and transition after initiating restore

src/_services/user.service.js

@@ -79,7 +79,7 @@ function restoreFromPackage(shortKey, backupFileRef, password, messages, errors)
     formData.append('file', backupFileRef);
     formData.append('password', password);
     return fetch(`${config.apiUrl}/auth/restore/apply/${shortKey}`, util.postFormDataWithAuth(formData))
-        .then(util.handleAuthResponse(messages, errors));
+        .then(handleAuthResponse(messages, errors));
 }
 
 function logout(messages, errors) {

src/_store/account.module.js

@@ -11,7 +11,7 @@ const user = util.currentUser();
 const defaultStatus = {
   loggingIn: false,
   loggedIn: false,
-  restoring: false,
+  uploadingRestoreRequestData: false,
   registering: false,
   updating: false,
   settingLocale: false,
@@ -410,15 +410,15 @@ const mutations = {
   },
 
   restoreRequest(state, systemConfigs) {
-    state.status = Object.assign({}, state.status, { restoring: true });
-    systemConfigs.restoreInProgress = true;
+    state.status = Object.assign({}, state.status, { uploadingRestoreRequestData: true });
   },
   restoreSuccess(state, systemConfigs) {
-    state.status = Object.assign({}, state.status, { restoring: false });
+    state.status = Object.assign({}, state.status, { uploadingRestoreRequestData: false });
+    systemConfigs.restoreInProgress = true;
     systemConfigs.awaitingRestore = false;
   },
   restoreFailure(state, systemConfigs, error) {
-    state.status = Object.assign({}, state.status, { restoring: false });
+    state.status = Object.assign({}, state.status, { uploadingRestoreRequestData: false });
     systemConfigs.restoreInProgress = false;
     console.log('restore failed: ' + JSON.stringify(error));
   },

src/auth/RestorePage.vue

@@ -12,63 +12,68 @@
 
         <div v-else>
             <form @submit.prevent="handleSubmit">
-                <div class="form-group">
-                    <label htmlFor="restoreShortKey">{{messages.field_label_restore_short_key}}</label>
-                    <input type="text" v-model="restoreShortKey" name="restoreShortKey" class="form-control"
-                        :class="{ 'is-invalid': submitted && !restoreShortKey }" />
-                    <div v-show="submitted && !restoreShortKey" class="invalid-feedback">
-                        {{ messages.err_restoreShortKey_required }}
-                    </div>
-                    <div v-if="submitted && errors.has('restoreShortKey')" class="invalid-feedback d-block">
-                        {{ errors.first('restoreShortKey') }}
+                <fieldset :disabled="status.uploadingRestoreRequestData">
+                    <div class="form-group">
+                        <label htmlFor="restoreShortKey">{{messages.field_label_restore_short_key}}</label>
+                        <input type="text" v-model="restoreShortKey" name="restoreShortKey" class="form-control"
+                            :class="{ 'is-invalid': submitted && !restoreShortKey }" />
+                        <div v-show="submitted && !restoreShortKey" class="invalid-feedback">
+                            {{ messages.err_restoreShortKey_required }}
+                        </div>
+                        <div v-if="submitted && errors.has('restoreShortKey')" class="invalid-feedback d-block">
+                            {{ errors.first('restoreShortKey') }}
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <div style="border: 2px solid #000;">
-                        <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 class="form-group">
+                        <div style="border: 2px solid #000;">
+                            <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 style="text-align: center">{{ messages.label_or }}</div>
+                            <div style="text-align: center">{{ messages.label_or }}</div>
 
-                        <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('restoreBackupPackageFileRef')"
-                                class="invalid-feedback d-block">
-                            {{ errors.first('restoreBackupPackageFileRef') }}
+                            <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('restoreBackupPackageFileRef')"
+                                 class="invalid-feedback d-block">
+                                {{ errors.first('restoreBackupPackageFileRef') }}
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="invalid-feedback" :class="{ 'd-block': fileFieldsConstaintFailed }">
-                        {{ messages.err_restoreFile_constraint }}
+                        <div class="invalid-feedback" :class="{ 'd-block': fileFieldsConstaintFailed }">
+                            {{ messages.err_restoreFile_constraint }}
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <label htmlFor="password">{{messages.field_label_password}}</label>
-                    <input type="password" v-model="password" name="password" class="form-control"
-                            :class="{ 'is-invalid': submitted && !password }" />
-                    <div v-show="submitted && !password" class="invalid-feedback">
-                        {{ messages.err_password_required }}
-                    </div>
-                    <div v-if="submitted && errors.has('password')" class="invalid-feedback d-block">
-                        {{ errors.first('password') }}
+                    <div class="form-group">
+                        <label htmlFor="password">{{messages.field_label_password}}</label>
+                        <input type="password" v-model="password" name="password" class="form-control"
+                                :class="{ 'is-invalid': submitted && !password }" />
+                        <div v-show="submitted && !password" class="invalid-feedback">
+                            {{ messages.err_password_required }}
+                        </div>
+                        <div v-if="submitted && errors.has('password')" class="invalid-feedback d-block">
+                            {{ errors.first('password') }}
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <button class="btn btn-primary" :disabled="status.restoring">
-                        {{ messages.button_label_restore }}
-                    </button>
-                    <img v-show="status.restoring" :src="loadingImgSrc" />
-                </div>
+                    <div class="form-group">
+                        <button class="btn btn-primary" :disabled="status.uploadingRestoreRequestData">
+                            {{ messages.button_label_restore }}
+                        </button>
+                        <img v-show="status.uploadingRestoreRequestData" :src="loadingImgSrc" />
+                    </div>
+                </fieldset>
             </form>
         </div>
     </div>