From f5c68626275f772fd2fd2fdd5fa2549e700a315b Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 19 Jan 2017 17:04:20 +0100
Subject: [PATCH] Improve backup creation UI

- Do not prompt the user if he really wants to create a backup
- Show error message if a backup can't be created at the moment
---
 webadmin/src/views/settings.html | 13 ++++++-------
 webadmin/src/views/settings.js   | 20 +++++++++++++-------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/webadmin/src/views/settings.html b/webadmin/src/views/settings.html
index c1ef24490..1f19e16a1 100644
--- a/webadmin/src/views/settings.html
+++ b/webadmin/src/views/settings.html
@@ -79,19 +79,18 @@
     </div>
 </div>
 
-<!-- Modal backup -->
-<div class="modal fade" id="createBackupModal" tabindex="-1" role="dialog">
+<!-- Modal backup failed -->
+<div class="modal fade" id="createBackupFailedModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title">Create a new Backup</h4>
+                <h4 class="modal-title">Unable to create backup</h4>
             </div>
             <div class="modal-body">
-                Do you really want to create a new backup?
+                {{ createBackup.errorMessage }}
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-success" ng-click="createBackup.doCreateBackup()" ng-disabled="createBackup.busy"><i class="fa fa-spinner fa-pulse" ng-show="developerModeChange.busy"></i> Confirm</button>
+                <button type="button" class="btn btn-success" data-dismiss="modal">Ok</button>
             </div>
         </div>
     </div>
@@ -374,7 +373,7 @@
         <div class="col-xs-6 text-right">
             <button class="btn btn-outline btn-primary pull-right" ng-click="configureBackup.show()" ng-disabled="createBackup.busy">Configure</button>
 
-            <button class="btn btn-outline btn-primary" ng-click="createBackup.showCreateBackup()" ng-disabled="createBackup.busy" style="margin-right: 10px">Backup now</button>
+            <button class="btn btn-outline btn-primary" ng-click="createBackup.doCreateBackup()" ng-disabled="createBackup.busy" style="margin-right: 10px">Backup now</button>
         </div>
     </div>
 </div>
diff --git a/webadmin/src/views/settings.js b/webadmin/src/views/settings.js
index 81b506226..171e0877d 100644
--- a/webadmin/src/views/settings.js
+++ b/webadmin/src/views/settings.js
@@ -100,16 +100,26 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     $scope.createBackup = {
         busy: false,
         percent: 100,
+        errorMessage: '',
 
         doCreateBackup: function () {
-            $('#createBackupModal').modal('hide');
             $scope.createBackup.busy = true;
-            $scope.createBackup.percent = 100;
+            $scope.createBackup.percent = 0;
+            $scope.createBackup.errorMessage = '';
 
             Client.backup(function (error) {
                 if (error) {
-                    console.error(error);
+                    if (error.statusCode === 409) {
+                        $scope.createBackup.errorMessage = 'App task is currently in progress. Please retry later.';
+                    } else {
+                        $scope.createBackup.errorMessage = error.message;
+                        console.error(error);
+                    }
+
                     $scope.createBackup.busy = false;
+                    $('#createBackupFailedModal').modal('show');
+
+                    return;
                 }
 
                 function checkIfDone() {
@@ -131,10 +141,6 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
 
                 checkIfDone();
             });
-        },
-
-        showCreateBackup: function () {
-            $('#createBackupModal').modal('show');
         }
     };