Add save/restore backup config to app view

src/views/app.js

@@ -9,6 +9,7 @@
 /* global ERROR */
 /* global moment */
 /* global Chart */
+/* global SECRET_PLACEHOLDER */
 
 angular.module('Application').controller('AppController', ['$scope', '$location', '$timeout', '$interval', '$route', '$routeParams', 'Client', function ($scope, $location, $timeout, $interval, $route, $routeParams, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().isAtLeastAdmin) $location.path('/'); });
@@ -115,6 +116,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
     $scope.domains = [];
     $scope.groups = [];
     $scope.users = [];
+    $scope.backupConfig = null;
 
     $scope.HOST_PORT_MIN = 1024;
     $scope.HOST_PORT_MAX = 65535;
@@ -811,23 +813,10 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         busy: false,
         busyCreate: false,
         error: {},
-        copyBackupIdDone: false,
 
         enableBackup: false,
         backups: [],
 
-        copyBackupId: function (backup) {
-            var copyText = document.getElementById('backupIdHelper');
-            copyText.value = backup.id;
-            copyText.select();
-            document.execCommand('copy');
-
-            $scope.backups.copyBackupIdDone = true;
-
-            // reset after 2.5sec
-            $timeout(function () { $scope.backups.copyBackupIdDone = false; }, 2500);
-        },
-
         createBackup: function () {
             $scope.backups.busyCreate = true;
 
@@ -885,6 +874,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         busy: false,
         error: {},
 
+        // variables here have to match the import config logic!
         provider: '',
         bucket: '',
         prefix: '',
@@ -900,6 +890,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         password: '',
 
         clearForm: function () {
+            $scope.importBackup.provider = '';
             $scope.importBackup.bucket = '';
             $scope.importBackup.prefix = '';
             $scope.importBackup.accessKeyId = '';
@@ -1053,7 +1044,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         show: function () {
             $scope.importBackup.clearForm();
             $('#importBackupModal').modal('show');
-        }
+        },
     };
 
     $scope.uninstall = {
@@ -1458,7 +1449,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         Client.getBackupConfig(function (error, backupConfig) {
             if (error) return callback(error);
 
-            $scope.backupEnabled = backupConfig.provider !== 'noop';
+            $scope.backupConfig = backupConfig;
 
             callback();
         });
@@ -1515,6 +1506,57 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         $timeout(waitForAppTask.bind(null, callback), 2000); // not yet done
     }
 
+    // https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server#18197341
+    function download(filename, text) {
+        var element = document.createElement('a');
+        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+        element.setAttribute('download', filename);
+
+        element.style.display = 'none';
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+    }
+
+    $scope.downloadConfig = function (backup) {
+        // secrets and tokens already come with placeholder characters we remove them
+        var tmp = {
+            backupId: backup.id,
+            encrypted: !!$scope.backupConfig.password  // we add this just to help the import UI
+        };
+
+        Object.keys($scope.backupConfig).forEach(function (k) {
+            if ($scope.backupConfig[k] !== SECRET_PLACEHOLDER) tmp[k] = $scope.backupConfig[k];
+        });
+
+        download('cloudron_app_backup.json', JSON.stringify(tmp));
+    };
+
+    document.getElementById('backupConfigFileInput').onchange = function (event) {
+        var reader = new FileReader();
+        reader.onload = function (result) {
+            if (!result.target || !result.target.result) return console.error('Unable to read backup config');
+
+            var backupConfig;
+            try {
+                backupConfig = JSON.parse(result.target.result);
+            } catch (e) {
+                console.error('Unable to parse backup config');
+                return;
+            }
+
+            $scope.$apply(function () {
+                // we assume property names match here, this does not yet work for gcs keys
+                Object.keys(backupConfig).forEach(function (k) {
+                    if (k in $scope.importBackup) $scope.importBackup[k] = backupConfig[k];
+                });
+            });
+        };
+        reader.readAsText(event.target.files[0]);
+    };
+
     Client.onReady(function () {
         refreshApp(appId, function (error) {
             if (error) return Client.error(error);