Add 1.9.3 changes

CHANGES

@@ -1151,3 +1151,33 @@
 * Update node to 8.9.3 LTS
 * Set max email recepient limit (in outgoing emails) to 500
 
+[1.9.1]
+* Prepare Cloudron for supporting multiple domains
+* Add Cloudron restore UI
+* Do not put app in errored state if backup fails
+* Display backup progress in CaaS
+* Add Google Cloud Storage backend for backups
+* Update node to 8.9.3 LTS
+* Set max email recepient limit (in outgoing emails) to 500
+* Put terminal and app logs viewer to separate window
+
+[1.9.2]
+* Prepare Cloudron for supporting multiple domains
+* Add Cloudron restore UI
+* Do not put app in errored state if backup fails
+* Display backup progress in CaaS
+* Add Google Cloud Storage backend for backups
+* Update node to 8.9.3 LTS
+* Set max email recepient limit (in outgoing emails) to 500
+* Put terminal and app logs viewer to separate window
+
+[1.9.3]
+* Prepare Cloudron for supporting multiple domains
+* Add Cloudron restore UI
+* Do not put app in errored state if backup fails
+* Display backup progress in CaaS
+* Add Google Cloud Storage backend for backups
+* Update node to 8.9.3 LTS
+* Set max email recepient limit (in outgoing emails) to 500
+* Put terminal and app logs viewer to separate window
+

gulpfile.js

@@ -50,7 +50,7 @@ if (argv.help || argv.h) {
     process.exit(1);
 }
 
-gulp.task('js', ['js-index', 'js-setup', 'js-setupdns', 'js-restore', 'js-update'], function () {});
+gulp.task('js', ['js-index', 'js-logs', 'js-terminal', 'js-setup', 'js-setupdns', 'js-restore', 'js-update'], function () {});
 
 var oauth = {
     clientId: argv.clientId || 'cid-webadmin',
@@ -90,6 +90,38 @@ gulp.task('js-index', function () {
         .pipe(gulp.dest('webadmin/dist/js'));
 });
 
+gulp.task('js-logs', function () {
+    // needs special treatment for error handling
+    var uglifyer = uglify();
+    uglifyer.on('error', function (error) {
+        console.error(error);
+    });
+
+    gulp.src(['webadmin/src/js/logs.js', 'webadmin/src/js/client.js'])
+        .pipe(ejs({ oauth: oauth }, {}, { ext: '.js' }))
+        .pipe(sourcemaps.init())
+        .pipe(concat('logs.js', { newLine: ';' }))
+        .pipe(uglifyer)
+        .pipe(sourcemaps.write())
+        .pipe(gulp.dest('webadmin/dist/js'));
+});
+
+gulp.task('js-terminal', function () {
+    // needs special treatment for error handling
+    var uglifyer = uglify();
+    uglifyer.on('error', function (error) {
+        console.error(error);
+    });
+
+    gulp.src(['webadmin/src/js/terminal.js', 'webadmin/src/js/client.js'])
+        .pipe(ejs({ oauth: oauth }, {}, { ext: '.js' }))
+        .pipe(sourcemaps.init())
+        .pipe(concat('terminal.js', { newLine: ';' }))
+        .pipe(uglifyer)
+        .pipe(sourcemaps.write())
+        .pipe(gulp.dest('webadmin/dist/js'));
+});
+
 gulp.task('js-setup', function () {
     // needs special treatment for error handling
     var uglifyer = uglify();
@@ -209,6 +241,8 @@ gulp.task('watch', ['default'], function () {
     gulp.watch(['webadmin/src/js/setup.js', 'webadmin/src/js/client.js'], ['js-setup']);
     gulp.watch(['webadmin/src/js/setupdns.js', 'webadmin/src/js/client.js'], ['js-setupdns']);
     gulp.watch(['webadmin/src/js/restore.js', 'webadmin/src/js/client.js'], ['js-restore']);
+    gulp.watch(['webadmin/src/js/logs.js', 'webadmin/src/js/client.js'], ['js-logs']);
+    gulp.watch(['webadmin/src/js/terminal.js', 'webadmin/src/js/client.js'], ['js-terminal']);
     gulp.watch(['webadmin/src/js/index.js', 'webadmin/src/js/client.js', 'webadmin/src/js/appstore.js', 'webadmin/src/js/main.js', 'webadmin/src/views/*.js'], ['js-index']);
     gulp.watch(['webadmin/src/3rdparty/**/*'], ['3rdparty']);
 });

migrations/20171129005712-settings-add-fqdn-to-caas-backup-config.js

@@ -2,6 +2,7 @@
 
 var async = require('async');
 
+// NOTE: This migration is incorrect because 'caas' domain is not guaranteed to be present in all Caas cloudrons
 exports.up = function(db, callback) {
     db.all('SELECT * FROM domains', function (error, domains) {
         if (error) return callback(error);

src/backups.js

@@ -841,7 +841,7 @@ function cleanupBackup(backupConfig, backup, callback) {
     function done(error) {
         if (error) {
             debug('cleanupBackup: error removing backup %j : %s', backup, error.message);
-            callback();
+            return callback();
         }
 
         // prune empty directory if possible

src/cloudron.js

@@ -723,6 +723,7 @@ function doUpdate(boxUpdateInfo, callback) {
             apiServerOrigin: config.apiServerOrigin(),
             webServerOrigin: config.webServerOrigin(),
             fqdn: config.fqdn(),
+            adminFqdn: config.adminFqdn(),
             adminLocation: config.adminLocation(),
             isDemo: config.isDemo(),
             zoneName: config.zoneName(),

webadmin/src/index.html

@@ -73,12 +73,6 @@
     <!-- moment -->
     <script type="text/javascript" src="3rdparty/js/moment.min.js"></script>
 
-    <!-- xterm -->
-    <link href="3rdparty/xterm/xterm.css" rel="stylesheet">
-    <script src="3rdparty/xterm/xterm.js"></script>
-    <script src="3rdparty/xterm/addons/attach/attach.js"></script>
-    <script src="3rdparty/xterm/addons/fit/fit.js"></script>
-
     <!-- Main Application -->
     <script src="js/index.js"></script>
 
@@ -220,7 +214,6 @@
                                 <li ng-show="user.admin"><a href="#/graphs"><i class="fa fa-bar-chart fa-fw"></i> Graphs</a></li>
                                 <li ng-show="user.admin"><a href="#/settings"><i class="fa fa-wrench fa-fw"></i> Settings</a></li>
                                 <li ng-show="user.admin" class="divider"></li>
-                                <li ng-show="user.admin"><a href="#/debug"><i class="fa fa-terminal fa-fw"></i> Terminal</a></li>
                                 <li ng-show="user.admin"><a href="#/support"><i class="fa fa-comment fa-fw"></i> Support</a></li>
                                 <li class="divider"></li>
                                 <li><a href="" ng-click="logout($event)"><i class="fa fa-sign-out fa-fw"></i> Logout</a></li>

webadmin/src/js/index.js

@@ -52,18 +52,12 @@ app.config(['$routeProvider', function ($routeProvider) {
     }).when('/graphs', {
         controller: 'GraphsController',
         templateUrl: 'views/graphs.html'
-    }).when('/debug', {
-        controller: 'DebugController',
-        templateUrl: 'views/debug.html'
     }).when('/domains', {
         controller: 'DomainsController',
         templateUrl: 'views/domains.html'
     }).when('/email', {
         controller: 'EmailController',
         templateUrl: 'views/email.html'
-    }).when('/logs', {
-        controller: 'LogsController',
-        templateUrl: 'views/logs.html'
     }).when('/settings', {
         controller: 'SettingsController',
         templateUrl: 'views/settings.html'

webadmin/src/js/logs.js

@@ -0,0 +1,134 @@
+'use strict';
+
+/* global moment */
+
+// create main application module
+var app = angular.module('Application', ['angular-md5', 'ui-notification']);
+
+app.controller('LogsController', ['$scope', '$timeout', '$location', 'Client', function ($scope, $timeout, $location, Client) {
+    var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
+
+    $scope.initialized = false;
+    $scope.installedApps = Client.getInstalledApps();
+    $scope.client = Client;
+    $scope.logs = [];
+    $scope.selected = '';
+    $scope.activeEventSource = null;
+    $scope.lines = 10;
+    $scope.selectedAppInfo = null;
+
+    // Add built-in log types for now
+    $scope.logs.push({ name: 'System (All)', type: 'platform', value: 'all', url: Client.makeURL('/api/v1/cloudron/logs?units=all') });
+    $scope.logs.push({ name: 'Box', type: 'platform', value: 'box', url: Client.makeURL('/api/v1/cloudron/logs?units=box') });
+    $scope.logs.push({ name: 'Mail', type: 'platform', value: 'mail', url: Client.makeURL('/api/v1/cloudron/logs?units=mail') });
+
+    $scope.error = function (error) {
+        console.error(error);
+        window.location.href = '/error.html';
+    };
+
+    function ab2str(buf) {
+        return String.fromCharCode.apply(null, new Uint16Array(buf));
+    }
+
+    $scope.clear = function () {
+        var logViewer = $('.logs-container');
+        logViewer.empty();
+    };
+
+    $scope.showTerminal = function () {
+        if (!$scope.selected) return;
+
+        window.open('/terminal.html?id=' + $scope.selected.value, 'Cloudron Terminal', 'width=1024,height=800');
+    };
+
+    function showLogs() {
+        if (!$scope.selected) return;
+
+        var func = $scope.selected.type === 'platform' ? Client.getPlatformLogs : Client.getAppLogs;
+        func($scope.selected.value, true, $scope.lines, function handleLogs(error, result) {
+            if (error) return console.error(error);
+
+            $scope.activeEventSource = result;
+            result.onmessage = function handleMessage(message) {
+                var data;
+
+                try {
+                    data = JSON.parse(message.data);
+                } catch (e) {
+                    return console.error(e);
+                }
+
+                // check if we want to auto scroll (this is before the appending, as that skews the check)
+                var tmp = $('.logs-container');
+                var autoScroll = tmp[0].scrollTop > (tmp[0].scrollTopMax - 24);
+
+                var logLine = $('<div class="log-line">');
+                var timeString = moment.utc(data.realtimeTimestamp/1000).format('MMM DD HH:mm:ss');
+                logLine.html('<span class="time">' + timeString + ' </span>' + window.ansiToHTML(typeof data.message === 'string' ? data.message : ab2str(data.message)));
+                tmp.append(logLine);
+
+                if (autoScroll) tmp[0].lastChild.scrollIntoView({ behavior: 'instant', block: 'end' });
+            };
+        });
+    }
+
+    Client.onApps(function () {
+        if ($scope.selected.type !== 'app') return;
+
+        var appId = $scope.selected.value;
+
+        Client.getApp(appId, function (error, result) {
+            if (error) return console.error(error);
+
+            $scope.selectedAppInfo = result;
+        });
+    });
+
+    Client.getStatus(function (error, status) {
+        if (error) return $scope.error(error);
+
+        if (!status.activated) {
+            console.log('Not activated yet, redirecting', status);
+            window.location.href = '/';
+            return;
+        }
+
+        Client.refreshConfig(function (error) {
+            if (error) return $scope.error(error);
+
+            // check version and force reload if needed
+            if (!localStorage.version) {
+                localStorage.version = Client.getConfig().version;
+            } else if (localStorage.version !== Client.getConfig().version) {
+                localStorage.version = Client.getConfig().version;
+                window.location.reload(true);
+            }
+
+            Client.refreshInstalledApps(function (error) {
+                if (error) return $scope.error(error);
+
+                Client.getInstalledApps().forEach(function (app) {
+                    $scope.logs.push({
+                        type: 'app',
+                        value: app.id,
+                        name: app.fqdn + ' (' + app.manifest.title + ')',
+                        url: Client.makeURL('/api/v1/apps/' + app.id + '/logs'),
+                        addons: app.manifest.addons
+                    });
+                });
+
+                // activate pre-selected log from query otherwise choose the first one
+                $scope.selected = $scope.logs.find(function (e) { return e.value === search.id; });
+                if (!$scope.selected) $scope.selected = $scope.logs[0];
+
+                // now mark the Client to be ready
+                Client.setReady();
+
+                $scope.initialized = true;
+
+                showLogs();
+            });
+        });
+    });
+}]);

webadmin/src/js/terminal.js

@@ -2,8 +2,11 @@
 
 /* global Terminal */
 
-angular.module('Application').controller('DebugController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
-    Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
+// create main application module
+var app = angular.module('Application', ['angular-md5', 'ui-notification']);
+
+app.controller('TerminalController', ['$scope', '$timeout', '$location', 'Client', function ($scope, $timeout, $location, Client) {
+    var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
 
     $scope.config = Client.getConfig();
     $scope.user = Client.getUserInfo();
@@ -166,6 +169,19 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
     $scope.repairAppBegin = function () {
         $scope.appBusy = true;
 
+        function waitUntilInRepairState() {
+            Client.refreshInstalledApps(function (error) {
+                if (error) return console.error('Failed to refresh app status.', error);
+
+                Client.getApp($scope.selected.value, function (error, result) {
+                    if (error) return console.error('Failed to get app status.', error);
+
+                    if (result.installationState === 'installed') $scope.appBusy = false;
+                    else setTimeout(waitUntilInRepairState, 2000);
+                });
+            });
+        }
+
         Client.debugApp($scope.selected.value, true, function (error) {
             if (error) return console.error(error);
 
@@ -173,6 +189,8 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
                 if (error) console.error(error);
 
                 $('#repairAppModal').modal('hide');
+
+                waitUntilInRepairState();
             });
         });
     };
@@ -180,23 +198,48 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
     $scope.repairAppDone = function () {
         $scope.appBusy = true;
 
+        function waitUntilInNormalState() {
+            Client.refreshInstalledApps(function (error) {
+                if (error) return console.error('Failed to refresh app status.', error);
+
+                Client.getApp($scope.selected.value, function (error, result) {
+                    if (error) return console.error('Failed to get app status.', error);
+
+                    if (result.installationState === 'installed') $scope.appBusy = false;
+                    else setTimeout(waitUntilInNormalState, 2000);
+                });
+            });
+        }
+
         Client.debugApp($scope.selected.value, false, function (error) {
             if (error) return console.error(error);
 
             Client.refreshInstalledApps(function (error) {
                 if (error) console.error(error);
+
+                waitUntilInNormalState();
             });
         });
     };
 
-    $scope.showTerminal = function (retry) {
+    function showTerminal(retry) {
         reset();
 
         if (!$scope.selected) return;
 
-        // fetch current app state
-        Client.refreshInstalledApps(function (error) {
-            if (error) console.error(error);
+        var appId = $scope.selected.value;
+
+        Client.getApp(appId, function (error, result) {
+            if (error) return console.error(error);
+
+            // we expect this to be called _after_ a reconfigure was issued
+            if (result.installationState === 'pending_configure') {
+                $scope.appBusy = true;
+            } else if (result.installationState === 'installed') {
+                $scope.appBusy = false;
+            }
+
+            $scope.selectedAppInfo = result;
 
             $scope.terminal = new Terminal();
             $scope.terminal.open(document.querySelector('#terminalContainer'));
@@ -209,11 +252,9 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
                 $scope.terminal.attach($scope.terminalSocket);
 
                 $scope.terminalSocket.onclose = function () {
-                    // retry in one second only if terminal view is still selected
+                    // retry in one second
                     $scope.terminalReconnectTimeout = setTimeout(function () {
-                        // if the scope was already destroyed, do not reconnect
-                        if ($scope.$$destroyed) return;
-                        $scope.showTerminal(true);
+                        showTerminal(true);
                     }, 1000);
                 };
 
@@ -228,7 +269,7 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
             if (retry) $scope.terminal.writeln('Reconnecting...');
             else $scope.terminal.writeln('Connecting...');
         });
-    };
+    }
 
     $scope.terminalInject = function (addon) {
         if (!$scope.terminalSocket) return;
@@ -245,41 +286,30 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
 
         $scope.terminalSocket.send(cmd);
         $scope.terminal.focus();
-    }
-
-    $scope.$watch('selected', function (newVal) {
-        if (!newVal) return;
-
-        $scope.showTerminal();
-    });
+    };
 
     Client.onReady($scope.populateDropdown);
 
-    Client.onApps(function () {
-        if ($scope.$$destroyed) return;
-        if ($scope.selected.type !== 'app') return $scope.appBusy = false;
+    // Client.onApps(function () {
+    //     console.log('onapps')
+    //     if ($scope.$$destroyed) return;
+    //     if ($scope.selected.type !== 'app') return $scope.appBusy = false;
 
-        var appId = $scope.selected.value;
+    //     var appId = $scope.selected.value;
 
-        Client.getApp(appId, function (error, result) {
-            if (error) return console.error(error);
+    //     Client.getApp(appId, function (error, result) {
+    //         if (error) return console.error(error);
 
-            // we expect this to be called _after_ a reconfigure was issued
-            if (result.installationState === 'pending_configure') {
-                $scope.appBusy = true;
-            } else if (result.installationState === 'installed') {
-                $scope.appBusy = false;
-            }
+    //         // we expect this to be called _after_ a reconfigure was issued
+    //         if (result.installationState === 'pending_configure') {
+    //             $scope.appBusy = true;
+    //         } else if (result.installationState === 'installed') {
+    //             $scope.appBusy = false;
+    //         }
 
-            $scope.selectedAppInfo = result;
-        });
-    });
-
-    $scope.$on('$destroy', function () {
-        if ($scope.terminal) {
-            $scope.terminal.destroy();
-        }
-    });
+    //         $scope.selectedAppInfo = result;
+    //     });
+    // });
 
     // terminal right click handling
     $scope.terminalClear = function () {
@@ -320,6 +350,53 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
         return false;
     });
 
+    Client.getStatus(function (error, status) {
+        if (error) return $scope.error(error);
+
+        if (!status.activated) {
+            console.log('Not activated yet, closing or redirecting', status);
+            window.close();
+            window.location.href = '/';
+            return;
+        }
+
+        Client.refreshConfig(function (error) {
+            if (error) return $scope.error(error);
+
+            // check version and force reload if needed
+            if (!localStorage.version) {
+                localStorage.version = Client.getConfig().version;
+            } else if (localStorage.version !== Client.getConfig().version) {
+                localStorage.version = Client.getConfig().version;
+                window.location.reload(true);
+            }
+
+            Client.refreshInstalledApps(function (error) {
+                if (error) return $scope.error(error);
+
+                Client.getInstalledApps().forEach(function (app) {
+                    $scope.apps.push({
+                        type: 'app',
+                        value: app.id,
+                        name: app.fqdn + ' (' + app.manifest.title + ')',
+                        addons: app.manifest.addons
+                    });
+                });
+
+                // activate pre-selected log from query otherwise choose the first one
+                $scope.selected = $scope.apps.find(function (e) { return e.value === search.id; });
+                if (!$scope.selected) $scope.selected = $scope.apps[0];
+
+                // now mark the Client to be ready
+                Client.setReady();
+
+                $scope.initialized = true;
+
+                showTerminal();
+            });
+        });
+    });
+
     // setup all the dialog focus handling
     ['downloadFileModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {

webadmin/src/logs.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html ng-app="Application" ng-controller="LogsController">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+
+    <!-- this gets changed once we get the config (because angular has not loaded yet, we see template string for a flash) -->
+    <title> Logs </title>
+
+    <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
+
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="/3rdparty/angular-ui-notification.min.css"/>
+    <link href="theme.css" rel="stylesheet">
+
+    <!-- Custom Fonts -->
+    <link href="3rdparty/css/font-awesome.min.css" rel="stylesheet" rel="stylesheet" type="text/css">
+
+    <!-- jQuery-->
+    <script src="3rdparty/js/jquery.min.js"></script>
+
+    <!-- Bootstrap Core JavaScript -->
+    <script src="3rdparty/js/bootstrap.min.js"></script>
+
+    <!-- Angularjs scripts -->
+    <script src="3rdparty/js/angular.min.js"></script>
+    <script src="3rdparty/js/angular-loader.min.js"></script>
+    <script src="3rdparty/js/angular-animate.min.js"></script>
+    <script src="3rdparty/js/angular-base64.min.js"></script>
+    <script src="3rdparty/js/angular-md5.min.js"></script>
+    <script src="3rdparty/js/angular-sanitize.min.js"></script>
+    <script src="3rdparty/js/angular-ui-notification.min.js"></script>
+
+
+    <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
+    <script src="3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
+    <!-- colors -->
+    <script type="text/javascript" src="3rdparty/js/colors.js"></script>
+
+    <!-- moment -->
+    <script type="text/javascript" src="3rdparty/js/moment.min.js"></script>
+
+    <!-- Main Application -->
+    <script src="js/logs.js"></script>
+
+</head>
+
+<body class="logs">
+
+    <div class="animateMe ng-hide layout-root" ng-show="initialized">
+
+        <div class="logs-controls">
+            <h3 style="display: inline-block;">{{ selected.name }} Logs</h3>
+
+            <!-- logs actions -->
+            <div class="pull-right">
+                <a class="btn btn-primary" ng-click="showTerminal()"><i class="fa fa-terminal"></i> Terminal</a>
+                <a class="btn btn-primary" ng-click="clear()"><i class="fa fa-trash"></i> Clear View</a>
+                <a class="btn btn-primary" ng-href="{{ selected.url }}&format=short&lines=800"><i class="fa fa-download"></i> Download Full Logs</a>
+            </div>
+          </div>
+
+          <div class="logs-container"></div>
+
+    </div>
+
+</body>
+</html>

webadmin/src/restore.html

@@ -122,7 +122,7 @@
 
                                     <div class="input-group">
                                         <input type="file" id="gcsKeyFileInput" style="display:none"/>
-                                        <input type="text" class="form-control" placeholder="Service Account Key" ng-model="gcsKey.keyFileName" id="gcsKeyInput" name="cert" onclick="getElementById('gcsKeyFileInput').click();" style="cursor: pointer;" ng-disabled="busy" required>
+                                        <input type="text" class="form-control" placeholder="Service Account Key" ng-model="gcsKey.keyFileName" id="gcsKeyInput" name="cert" onclick="getElementById('gcsKeyFileInput').click();" style="cursor: pointer;" ng-disabled="busy" ng-required="provider === 'gcs'">
                                         <span class="input-group-addon">
                                       <i class="fa fa-upload" onclick="getElementById('gcsKeyFileInput').click();"></i>
                                     </span>

webadmin/src/terminal.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html ng-app="Application" ng-controller="TerminalController">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+
+    <!-- this gets changed once we get the config (because angular has not loaded yet, we see template string for a flash) -->
+    <title> Terminal </title>
+
+    <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
+
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="/3rdparty/angular-ui-notification.min.css"/>
+    <link href="theme.css" rel="stylesheet">
+
+    <!-- Custom Fonts -->
+    <link href="3rdparty/css/font-awesome.min.css" rel="stylesheet" rel="stylesheet" type="text/css">
+
+    <!-- jQuery-->
+    <script src="3rdparty/js/jquery.min.js"></script>
+
+    <!-- Bootstrap Core JavaScript -->
+    <script src="3rdparty/js/bootstrap.min.js"></script>
+
+    <!-- Angularjs scripts -->
+    <script src="3rdparty/js/angular.min.js"></script>
+    <script src="3rdparty/js/angular-loader.min.js"></script>
+    <script src="3rdparty/js/angular-animate.min.js"></script>
+    <script src="3rdparty/js/angular-base64.min.js"></script>
+    <script src="3rdparty/js/angular-md5.min.js"></script>
+    <script src="3rdparty/js/angular-sanitize.min.js"></script>
+    <script src="3rdparty/js/angular-ui-notification.min.js"></script>
+
+
+    <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
+    <script src="3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
+
+    <!-- Clipboard handling -->
+    <script src="3rdparty/js/clipboard.min.js"></script>
+
+    <!-- xterm -->
+    <link href="3rdparty/xterm/xterm.css" rel="stylesheet">
+    <script src="3rdparty/xterm/xterm.js"></script>
+    <script src="3rdparty/xterm/addons/attach/attach.js"></script>
+    <script src="3rdparty/xterm/addons/fit/fit.js"></script>
+
+    <!-- Main Application -->
+    <script src="js/terminal.js"></script>
+
+</head>
+
+<body>
+
+    <!-- Modal download file -->
+    <div class="modal fade" id="downloadFileModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Download from {{ selected.name }}</h4>
+                </div>
+                <div class="modal-body">
+                    <form name="downloadFileForm" ng-submit="downloadFile.submit()">
+                        <div class="form-group" ng-class="{ 'has-error': downloadFileForm.filePath.$dirty && downloadFile.error }">
+                            <label class="control-label" for="inputDownloadFilePath">Path to file or directory</label>
+                            <div class="control-label" ng-show="{ 'has-error': downloadFileForm.filePath.$dirty && downloadFile.error }">
+                                <small>{{ downloadFile.error }}</small>
+                            </div>
+                            <input type="text" class="form-control" name="filePath" ng-model="downloadFile.filePath" required autofocus>
+                        </div>
+                        <input id="inputDownloadFilePath" class="ng-hide" type="submit" ng-disabled="!downloadFile.filePath"/>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <a id="fileDownloadLink" class="" ng-href="{{ downloadFile.downloadUrl() }}" target="_blank"></a>
+
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-success" ng-click="downloadFile.submit()" ng-disabled="!downloadFile.filePath"><i class="fa fa-circle-o-notch fa-spin" ng-show="downloadFile.busy"></i> Download</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal upload progress -->
+    <div class="modal fade" id="uploadProgressModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Uploading file to {{ selected.name }}</h4>
+                </div>
+                <div class="modal-body">
+                    <span><b>{{ (uploadProgress.current/1000/1000).toFixed(2) }}MB</b> (total {{ (uploadProgress.total/1000/1000).toFixed(2) }}MB)</span>
+                    <div class="progress progress-striped active">
+                        <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ 100*(uploadProgress.current/uploadProgress.total) }}%"></div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal repair info -->
+    <div class="modal fade" id="repairAppModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Repair app {{ selected.name }} ?</h4>
+                </div>
+                <div class="modal-body">
+                    <p>This will restart the app in repair mode. The app will start in a paused state and can be used to fix broken plugins or database content.</p>
+                    <p class="text-danger text-bold">The app will not be reachable in repair mode!</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-danger" ng-click="repairAppBegin()">Repair</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="animateMe ng-hide layout-root terminal-view" ng-show="initialized">
+
+        <div class="terminal-controls">
+            <h3 style="display: inline-block;">{{ selected.name }}</h3>
+
+            <input type="file" id="fileUpload" class="hide"/>
+
+            <div class="pull-right">
+                <!-- addon actions -->
+                <a class="btn btn-success" ng-click="terminalInject('mysql')" ng-show="usesAddon('mysql')">MySQL</a>
+                <a class="btn btn-success" ng-click="terminalInject('postgresql')" ng-show="usesAddon('postgresql')">Postgres</a>
+                <a class="btn btn-success" ng-click="terminalInject('mongodb')" ng-show="usesAddon('mongodb')">MongoDB</a>
+                <a class="btn btn-success" ng-click="terminalInject('redis')" ng-show="usesAddon('redis')">Redis</a>
+
+                <!-- terminal actions -->
+                <a class="btn btn-primary" ng-click="restartApp()" ng-show="selected.type === 'app'" ng-disabled="restartAppBusy"><i class="fa fa-refresh" ng-class="{ 'fa-spin': restartAppBusy }"></i> Restart</a>
+                <a class="btn btn-primary" ng-click="uploadFile()" ng-show="selected.type === 'app' && !uploadProgress.busy"><i class="fa fa-upload"></i> Upload to /tmp</a>
+                <a class="btn btn-primary" ng-click="uploadProgress.show()" ng-show="uploadProgress.busy"><i class="fa fa-circle-o-notch fa-spin"></i> Uploading...</a>
+                <a class="btn btn-primary" ng-click="downloadFile.show()" ng-show="selected.type === 'app'"><i class="fa fa-download"></i> Download</a>
+                <a class="btn btn-primary" ng-click="repairApp()" ng-show="selected.type === 'app' && !selectedAppInfo.debugMode && !appBusy"><i class="fa fa-wrench"></i> Repair</a>
+                <a class="btn btn-danger" ng-click="repairAppDone()" ng-show="selectedAppInfo.debugMode && !appBusy"><i class="fa fa-wrench"></i> Repair Done</a>
+            </div>
+        </div>
+
+        <div class="terminal-container" id="terminalContainer" ng-hide="appBusy"></div>
+        <div class="terminal-container placeholder" ng-show="appBusy">
+            <h4>&nbsp;
+                <span ng-show="selectedAppInfo.installationState === 'pending_configure' && selectedAppInfo.debugMode">Restarting app for repair...</span>
+                <span ng-show="selectedAppInfo.installationState === 'pending_configure' && !selectedAppInfo.debugMode ">App is being reconfigured...</span>
+                <span ng-show="selectedAppInfo.installationState === 'installed' && !selectedAppInfo.debugMode">Waiting for app to start...</span>
+                <span ng-show="selectedAppInfo.installationState === 'pending_installed'">App is being installed...</span>
+            </h4>
+
+            <div class="progress" ng-show="appBusy" style="width: 80%">
+                <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%"></div>
+            </div>
+        </div>
+
+        <div class="contextMenuBackdrop">
+            <ul class="dropdown-menu" id="terminalContextMenu" style="position: absolute; display:none;">
+                <li><a href="" ng-click="terminalCopy()">Copy</a></li>
+                <li class="disabled"><a>For Paste use Ctrl+v</a></li>
+                <li role="separator" class="divider"></li>
+                <li><a href="" ng-click="terminalClear()">Clear</a></li>
+            </ul>
+        </div>
+
+    </div>
+
+</body>
+</html>

webadmin/src/theme.scss

@@ -1122,47 +1122,40 @@ footer {
 // Logs
 // ----------------------------
 
-.logs-controls {
-    margin-top: 25px;
-    margin-bottom: 10px;
+.logs {
+    background: black;
 
-    .ng-isolate-scope {
-        float: left;
-    }
+    .logs-controls {
+        margin: 5px;
 
-    h3 {
-        display: inline-block;
-        margin-top: 6px;
-        margin-bottom: 0;
-    }
-
-    select {
-        display: inline-block;
-        width: 250px;
-        margin-left: 20px;
-    }
-}
-
-.logs-container {
-    flex-grow: 1;
-    margin-left: calc(8.33% + 15px);
-    margin-right: calc(8.33% + 15px);
-    margin-bottom: 20px;
-    background-color: black;
-    color: white;
-    overflow: auto;
-    padding: 5px;
-    font-family: monospace;
-
-    .log-line {
-        line-height: 1.2;
-
-        &:hover {
-            background-color: #333333;
+        .ng-isolate-scope {
+            float: left;
         }
 
-        .time {
-            color: #00FFFF;
+        h3 {
+            margin: 5px 0;
+            color: white;
+        }
+    }
+
+    .logs-container {
+        flex-grow: 1;
+        margin-bottom: 5px;
+        color: white;
+        overflow: auto;
+        padding: 5px;
+        font-family: monospace;
+
+        .log-line {
+            line-height: 1.2;
+
+            &:hover {
+                background-color: #333333;
+            }
+
+            .time {
+                color: #00FFFF;
+            }
         }
     }
 }
@@ -1172,51 +1165,44 @@ footer {
 // Terminal
 // ----------------------------
 
-.terminal-controls {
-    margin-top: 25px;
-    margin-bottom: 10px;
+.terminal-view {
+    background: black;
 
-    .ng-isolate-scope {
-        float: left;
+    .terminal-controls {
+        margin: 5px;
+
+        .ng-isolate-scope {
+            float: left;
+        }
+
+        h3 {
+            margin: 5px 0;
+            color: white;
+        }
     }
 
-    h3 {
-        display: inline-block;
-        margin-top: 6px;
-        margin-bottom: 0;
+    .terminal-container {
+        flex-grow: 1;
+        margin-bottom: 5px;
+        color: white;
+        overflow: auto;
+        padding: 5px;
+        font-family: monospace;
+
+        &.placeholder {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
     }
 
-    select {
-        display: inline-block;
-        width: 250px;
-        margin-left: 20px;
+    .contextMenuBackdrop {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
     }
 }
-
-.terminal-container {
-    flex-grow: 1;
-    margin-left: calc(8.33% + 15px);
-    margin-right: calc(8.33% + 15px);
-    margin-bottom: 20px;
-    background-color: black;
-    color: white;
-    overflow: auto;
-    padding: 5px;
-    font-family: monospace;
-
-    &.placeholder {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-    }
-}
-
-.contextMenuBackdrop {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}

webadmin/src/views/account.html

@@ -113,7 +113,7 @@
               <div class="col-xs-4" style="min-width: 150px;">
                   <img width="128" height="128" ng-src="{{ user.gravatarHuge }}"/>
               </div>
-              <div class="col-xs-8 text-medium">
+              <div class="col-xs-8">
                   <table width="100%">
                       <tr>
                           <td class="text-muted" style="vertical-align: top;">Username</td>

webadmin/src/views/apps.html

@@ -432,7 +432,11 @@
                         </div>
 
                         <div>
-                            <a ng-href="{{ '#/logs?id=' + app.id }}" target="_blank" title="Logs"><i class="fa fa-file-text scale"></i></a>
+                            <a href="" ng-click="showTerminal(app)" title="Terminal"><i class="fa fa-terminal scale"></i></a>
+                        </div>
+
+                        <div>
+                            <a href="" ng-click="showLogs(app)" title="Logs"><i class="fa fa-file-text scale"></i></a>
                         </div>
 
                         <div>

webadmin/src/views/apps.js

@@ -369,6 +369,14 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
         return false; // prevent propagation and default
     };
 
+    $scope.showLogs = function (app) {
+        window.open('/logs.html?id=' + app.id, 'Logs', 'width=1024,height=800').focus();
+    };
+
+    $scope.showTerminal = function (app) {
+        window.open('/terminal.html?id=' + app.id, 'Terminal', 'width=1024,height=800').focus();
+    };
+
     $scope.showError = function (app) {
         $scope.reset();
 

webadmin/src/views/debug.html

@@ -1,119 +0,0 @@
-<!-- Modal download file -->
-<div class="modal fade" id="downloadFileModal" tabindex="-1" role="dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title">Download from {{ selected.name }}</h4>
-      </div>
-      <div class="modal-body">
-          <form name="downloadFileForm" ng-submit="downloadFile.submit()">
-            <div class="form-group" ng-class="{ 'has-error': downloadFileForm.filePath.$dirty && downloadFile.error }">
-              <label class="control-label" for="inputDownloadFilePath">Path to file or directory</label>
-              <div class="control-label" ng-show="{ 'has-error': downloadFileForm.filePath.$dirty && downloadFile.error }">
-                  <small>{{ downloadFile.error }}</small>
-              </div>
-              <input type="text" class="form-control" name="filePath" ng-model="downloadFile.filePath" required autofocus>
-            </div>
-            <input id="inputDownloadFilePath" class="ng-hide" type="submit" ng-disabled="!downloadFile.filePath"/>
-          </form>
-      </div>
-      <div class="modal-footer">
-        <a id="fileDownloadLink" class="" ng-href="{{ downloadFile.downloadUrl() }}" target="_blank"></a>
-
-        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-success" ng-click="downloadFile.submit()" ng-disabled="!downloadFile.filePath"><i class="fa fa-circle-o-notch fa-spin" ng-show="downloadFile.busy"></i> Download</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Modal upload progress -->
-<div class="modal fade" id="uploadProgressModal" tabindex="-1" role="dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title">Uploading file to {{ selected.name }}</h4>
-      </div>
-      <div class="modal-body">
-        <span><b>{{ (uploadProgress.current/1000/1000).toFixed(2) }}mb</b> (total {{ (uploadProgress.total/1000/1000).toFixed(2) }}mb)</span>
-        <div class="progress progress-striped active">
-          <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ 100*(uploadProgress.current/uploadProgress.total) }}%"></div>
-        </div>
-      </div>
-      <div class="modal-footer">
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Modal repair info -->
-<div class="modal fade" id="repairAppModal" tabindex="-1" role="dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title">Repair app {{ selected.name }} ?</h4>
-      </div>
-      <div class="modal-body">
-        <p>This will restart the app in repair mode. The app will start in a paused state and can be used to fix broken plugins or database content.</p>
-        <p class="text-danger text-bold">The app will not be reachable in repair mode!</p>
-      </div>
-      <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-danger" ng-click="repairAppBegin()">Repair</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="terminal-controls">
-  <div class="col-md-10 col-md-offset-1">
-    <h3>Terminal</h3>
-    <select class="form-control pull-right inline" ng-options="app.name for app in apps track by app.value" ng-model="selected">
-        <option value="" disabled selected>Select App</option>
-    </select>
-
-    <input type="file" id="fileUpload" class="hide"/>
-
-    <!-- terminal actions -->
-    <div class="btn-group pull-right" style="margin-left: 10px;">
-      <button class="btn btn-default" ng-click="restartApp()" ng-show="selected.type === 'app'" ng-disabled="restartAppBusy"><i class="fa fa-refresh" ng-class="{ 'fa-spin': restartAppBusy }"></i> Restart</button>
-      <button class="btn btn-default" ng-click="uploadFile()" ng-show="selected.type === 'app' && !uploadProgress.busy"><i class="fa fa-upload"></i> Upload to /tmp</button>
-      <button class="btn btn-default" ng-click="uploadProgress.show()" ng-show="uploadProgress.busy"><i class="fa fa-circle-o-notch fa-spin"></i> Uploading...</button>
-      <button class="btn btn-default" ng-click="downloadFile.show()" ng-show="selected.type === 'app'"><i class="fa fa-download"></i> Download</button>
-      <button class="btn btn-default" ng-click="repairApp()" ng-show="selected.type === 'app' && !selectedAppInfo.debugMode && !appBusy"><i class="fa fa-wrench"></i> Repair</button>
-      <button class="btn btn-danger" ng-click="repairAppDone()" ng-show="selectedAppInfo.debugMode && !appBusy"><i class="fa fa-wrench"></i> Repair Done</button>
-    </div>
-
-    <div class="btn-group pull-right" style="margin-left: 10px;">
-      <button class="btn btn-default" ng-click="terminalInject('mysql')" ng-show="usesAddon('mysql')">MySQL</button>
-      <button class="btn btn-default" ng-click="terminalInject('postgresql')" ng-show="usesAddon('postgresql')">Postgres</button>
-      <button class="btn btn-default" ng-click="terminalInject('mongodb')" ng-show="usesAddon('mongodb')">MongoDB</button>
-      <button class="btn btn-default" ng-click="terminalInject('redis')" ng-show="usesAddon('redis')">Redis</button>
-    </div>
-
-  </div>
-</div>
-
-<div class="terminal-container" id="terminalContainer" ng-hide="appBusy"></div>
-<div class="terminal-container placeholder" ng-show="appBusy">
-  <h4>&nbsp;
-    <span ng-show="selectedAppInfo.installationState === 'pending_configure' && selectedAppInfo.debugMode">Restarting app for repair...</span>
-    <span ng-show="selectedAppInfo.installationState === 'pending_configure' && !selectedAppInfo.debugMode ">App is being reconfigured...</span>
-    <span ng-show="selectedAppInfo.installationState === 'installed' && !selectedAppInfo.debugMode">Waiting for app to start...</span>
-    <span ng-show="selectedAppInfo.installationState === 'pending_installed'">App is being installed...</span>
-  </h4>
-
-  <div class="progress" ng-show="appBusy" style="width: 80%">
-    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%">
-    </div>
-  </div>
-</div>
-
-<div class="contextMenuBackdrop">
-  <ul class="dropdown-menu" id="terminalContextMenu" style="position: absolute; display:none;">
-    <li><a href="" ng-click="terminalCopy()">Copy</a></li>
-    <li class="disabled"><a>For Paste use Ctrl+v</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="" ng-click="terminalClear()">Clear</a></li>
-  </ul>
-</div>

webadmin/src/views/email.js

@@ -255,7 +255,7 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
         Client.getDomain($scope.config.fqdn, function (error, result) {
             if (error) return console.error(error);
 
-            $scope.dnsConfig = result.config;
+            $scope.dnsConfig = result;
         });
     }
 

webadmin/src/views/logs.html

@@ -1,12 +0,0 @@
-<div class="logs-controls">
-  <div class="col-md-10 col-md-offset-1">
-    <h3 style="display: inline-block;">Logs</h3>
-    <select class="form-control pull-right inline" ng-options="log.name for log in logs track by log.value" ng-model="selected"></select>
-
-    <!-- logs actions -->
-    <a class="btn btn-default pull-right" ng-href="{{ selected.url }}&format=short&lines=800" ng-hide="terminalVisible"><i class="fa fa-download"></i> Download Logs</a>
-  </div>
-</div>
-
-<div class="logs-container"</div>
-

webadmin/src/views/logs.js

@@ -1,119 +0,0 @@
-'use strict';
-
-/* global moment */
-
-angular.module('Application').controller('LogsController', ['$scope', '$location', '$route', '$routeParams', 'Client', function ($scope, $location, $route, $routeParams, Client) {
-    Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
-
-    $scope.config = Client.getConfig();
-    $scope.user = Client.getUserInfo();
-
-    $scope.logs = [];
-    $scope.selected = '';
-    $scope.activeEventSource = null;
-    $scope.lines = 10;
-    $scope.selectedAppInfo = null;
-
-    function ab2str(buf) {
-        return String.fromCharCode.apply(null, new Uint16Array(buf));
-    }
-
-    $scope.populateLogTypes = function () {
-        $scope.logs.push({ name: 'System (All)', type: 'platform', value: 'all', url: Client.makeURL('/api/v1/cloudron/logs?units=all') });
-        $scope.logs.push({ name: 'Box', type: 'platform', value: 'box', url: Client.makeURL('/api/v1/cloudron/logs?units=box') });
-        $scope.logs.push({ name: 'Mail', type: 'platform', value: 'mail', url: Client.makeURL('/api/v1/cloudron/logs?units=mail') });
-
-        Client.getInstalledApps().forEach(function (app) {
-            $scope.logs.push({
-                type: 'app',
-                value: app.id,
-                name: app.fqdn + ' (' + app.manifest.title + ')',
-                url: Client.makeURL('/api/v1/apps/' + app.id + '/logs'),
-                addons: app.manifest.addons
-            });
-        });
-
-        // activate pre-selected log from query
-        $scope.selected = $scope.logs.find(function (e) { return e.value === $routeParams.id; });
-
-        if (!$scope.selected) {
-            $scope.selected = $scope.logs[0];
-        }
-    };
-
-    function reset() {
-        // close the old event source so we wont receive any new logs
-        if ($scope.activeEventSource) {
-            $scope.activeEventSource.close();
-            $scope.activeEventSource = null;
-        }
-
-        var logViewer = $('.logs-container');
-        logViewer.empty();
-
-        $scope.selectedAppInfo = null;
-    }
-
-    $scope.showLogs = function () {
-        reset();
-
-        if (!$scope.selected) return;
-
-        var func = $scope.selected.type === 'platform' ? Client.getPlatformLogs : Client.getAppLogs;
-        func($scope.selected.value, true, $scope.lines, function handleLogs(error, result) {
-            if (error) return console.error(error);
-
-            $scope.activeEventSource = result;
-            result.onmessage = function handleMessage(message) {
-                var data;
-
-                try {
-                    data = JSON.parse(message.data);
-                } catch (e) {
-                    return console.error(e);
-                }
-
-                // check if we want to auto scroll (this is before the appending, as that skews the check)
-                var tmp = $('.logs-container');
-                var autoScroll = tmp[0].scrollTop > (tmp[0].scrollTopMax - 24);
-
-                var logLine = $('<div class="log-line">');
-                var timeString = moment.utc(data.realtimeTimestamp/1000).format('MMM DD HH:mm:ss');
-                logLine.html('<span class="time">' + timeString + ' </span>' + window.ansiToHTML(typeof data.message === 'string' ? data.message : ab2str(data.message)));
-                tmp.append(logLine);
-
-                if (autoScroll) tmp[0].lastChild.scrollIntoView({ behavior: 'instant', block: 'end' });
-            };
-        });
-    };
-
-    $scope.$watch('selected', function (newVal) {
-        if (!newVal) return;
-
-        $route.updateParams({ id: newVal.value });
-        $scope.showLogs();
-    });
-
-    Client.onReady($scope.populateLogTypes);
-
-    Client.onApps(function () {
-        if ($scope.$$destroyed) return;
-        if ($scope.selected.type !== 'app') return;
-
-        var appId = $scope.selected.value;
-
-        Client.getApp(appId, function (error, result) {
-            if (error) return console.error(error);
-
-            $scope.selectedAppInfo = result;
-        });
-    });
-
-    $scope.$on('$destroy', function () {
-        if ($scope.activeEventSource) {
-            $scope.activeEventSource.onmessage = function () {};
-            $scope.activeEventSource.close();
-            $scope.activeEventSource = null;
-        }
-    });
-}]);

webadmin/src/views/settings.html

@@ -203,7 +203,7 @@
 
                             <div class="input-group">
                                 <input type="file" id="gcsKeyFileInput" style="display:none"/>
-                                <input type="text" class="form-control" placeholder="Service Account Key" ng-model="configureBackup.gcsKey.keyFileName" id="gcsKeyInput" name="cert" onclick="getElementById('gcsKeyFileInput').click();" style="cursor: pointer;" ng-disabled="configureBackup.busy" required>
+                                <input type="text" class="form-control" placeholder="Service Account Key" ng-model="configureBackup.gcsKey.keyFileName" id="gcsKeyInput" name="cert" onclick="getElementById('gcsKeyFileInput').click();" style="cursor: pointer;" ng-disabled="configureBackup.busy" ng-required="configureBackup.provider === 'gcs'">
                                 <span class="input-group-addon">
                               <i class="fa fa-upload" onclick="getElementById('gcsKeyFileInput').click();"></i>
                             </span>