archive: add confirm delete dialog

dashboard/public/translation/en.json

@@ -652,6 +652,13 @@
         },
         "archive": {
             "description": "Deleted archives are cleaned up based on the backup policy."
+        },
+        "deleteArchiveDialog": {
+            "title": "Delete Archive of {{appTitle}} ({{fqdn}})",
+            "description": "After deletion, the archive will be cleaned up based on the backup policy."
+        },
+        "deleteArchive": {
+            "deleteAction": "Delete"
         }
     },
     "branding": {

dashboard/public/views/backups.html

@@ -541,6 +541,24 @@
   </div>
 </div>
 
+<!-- Modal delete archive -->
+<div class="modal fade" id="archiveDeleteModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">{{ 'backups.deleteArchiveDialog.title' | tr:{ appTitle: archiveDelete.archive.appConfig.manifest.title, fqdn: archiveDelete.archive.appConfig.fqdn } }}</h4>
+      </div>
+      <div class="modal-body">
+        <p>{{ 'backups.deleteArchiveDialog.description' | tr }}</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
+        <button type="button" class="btn btn-danger" ng-click="archiveDelete.submit()" ng-disabled="archiveDelete.busy"><i class="fa fa-circle-notch fa-spin" ng-show="archiveDelete.busy"></i> {{ 'backups.deleteArchive.deleteAction' | tr }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="content">
 
   <h1 class="section-header">{{ 'backups.title' | tr }}</h1>
@@ -776,7 +794,7 @@
                 </td>
                 <td class="text-right no-wrap" style="vertical-align: middle;">
                   <button class="btn btn-xs btn-default" ng-click="clone.show(archive)" uib-tooltip="Restore Archive"><i class="fas fa-history"></i></button>
-                  <button class="btn btn-xs btn-danger" ng-click="listArchives.delete(archive)" uib-tooltip="Delete Archive"><i class="fa fa-trash-alt"></i></button>
+                  <button class="btn btn-xs btn-danger" ng-click="archiveDelete.ask(archive)" uib-tooltip="Delete Archive"><i class="fa fa-trash-alt"></i></button>
                 </td>
               </tr>
             </tbody>

dashboard/public/views/backups.js

@@ -284,13 +284,31 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
                 });
             });
         },
+    };
 
-        delete: function (archive) {
-            Client.deleteArchive(archive.id, function (error) {
-                if (error) Client.error(error);
-                $scope.listArchives.fetch();
-            });
+    $scope.archiveDelete = {
+        busy: false,
+        error: {},
+        archive: null,
+
+        ask: function (archive) {
+            $scope.archiveDelete.busy = false;
+            $scope.archiveDelete.error = {};
+            $scope.archiveDelete.archive = archive;
+            $('#archiveDeleteModal').modal('show');
         },
+
+        submit: function () {
+            $scope.archiveDelete.busy = true;
+            $scope.archiveDelete.error = {};
+
+            Client.deleteArchive($scope.archiveDelete.archive.id, function (error) {
+                $scope.archiveDelete.busy = false;
+                if (error) return console.error('Unable to delete archive.', error.statusCode, error.message);
+                $scope.listArchives.fetch();
+                $('#archiveDeleteModal').modal('hide');
+            });
+        }
     };
 
     // keep in sync with app.js