add restore UI

Add a link from setup page to restore

Part of #439

webadmin/src/js/client.js

@@ -575,6 +575,19 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         }).error(defaultErrorHandler(callback));
     };
 
+    Client.prototype.restore = function (backupConfig, backupId, version, callback) {
+        var data = {
+            backupConfig: backupConfig,
+            backupId: backupId,
+            version: version
+        };
+
+        post('/api/v1/cloudron/restore', data).success(function(data, status) {
+            if (status !== 202 || typeof data !== 'object') return callback(new ClientError(status, data));
+            callback(null, data);
+        }).error(defaultErrorHandler(callback));
+    };
+
     Client.prototype.getEventLogs = function (action, search, page, perPage, callback) {
         var config = {
             params: {

webadmin/src/js/restore.js

@@ -0,0 +1,183 @@
+'use strict';
+
+/* global tld */
+
+// create main application module
+var app = angular.module('Application', ['angular-md5', 'ui-notification']);
+
+app.filter('zoneName', function () {
+    return function (domain) {
+        return tld.getDomain(domain);
+    };
+});
+
+app.controller('RestoreController', ['$scope', '$http', 'Client', function ($scope, $http, 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.busy = false;
+    $scope.error = {};
+    $scope.provider = '';
+    $scope.bucket = '';
+    $scope.prefix = '';
+    $scope.accessKeyId = '';
+    $scope.secretAccessKey = '';
+    $scope.region = '';
+    $scope.endpoint = '';
+    $scope.backupFolder = '';
+    $scope.backupId = '';
+    $scope.instanceId = '';
+    $scope.acceptSelfSignedCerts = false;
+    $scope.format = 'tgz';
+
+    // List is from http://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region
+    $scope.s3Regions = [
+        { name: 'Asia Pacific (Mumbai)', value: 'ap-south-1' },
+        { name: 'Asia Pacific (Seoul)', value: 'ap-northeast-2' },
+        { name: 'Asia Pacific (Singapore)', value: 'ap-southeast-1' },
+        { name: 'Asia Pacific (Sydney)', value: 'ap-southeast-2' },
+        { name: 'Asia Pacific (Tokyo)', value: 'ap-northeast-1' },
+        { name: 'Canada (Central)', value: 'ca-central-1' },
+        { name: 'EU (Frankfurt)', value: 'eu-central-1' },
+        { name: 'EU (Ireland)', value: 'eu-west-1' },
+        { name: 'EU (London)', value: 'eu-west-2' },
+        { name: 'South America (São Paulo)', value: 'sa-east-1' },
+        { name: 'US East (N. Virginia)', value: 'us-east-1' },
+        { name: 'US East (Ohio)', value: 'us-east-2' },
+        { name: 'US West (N. California)', value: 'us-west-1' },
+        { name: 'US West (Oregon)', value: 'us-west-2' },
+    ];
+
+    $scope.doSpacesRegions = [
+        { name: 'AMS3', value: 'https://ams3.digitaloceanspaces.com' },
+        { name: 'NYC3', value: 'https://nyc3.digitaloceanspaces.com' }
+    ];
+
+    $scope.storageProvider = [
+        { name: 'Amazon S3', value: 's3' },
+        { name: 'DigitalOcean Spaces', value: 'digitalocean-spaces' },
+        { name: 'Exoscale SOS', value: 'exoscale-sos' },
+        { name: 'Filesystem', value: 'filesystem' },
+        { name: 'Minio', value: 'minio' },
+        { name: 'S3 API Compatible (v4)', value: 's3-v4-compat' },
+    ];
+
+    $scope.formats = [
+        { name: 'Tarball (zipped)', value: 'tgz' },
+        { name: 'rsync', value: 'rsync' }
+    ];
+
+    $scope.s3like = function (provider) {
+        return provider === 's3' || provider === 'minio' || provider === 's3-v4-compat' || provider === 'exoscale-sos' || provider === 'digitalocean-spaces';
+    };
+
+    $scope.restore = function () {
+        $scope.error = {};
+        $scope.busy = true;
+
+        var backupConfig = {
+            provider: $scope.provider,
+            key: $scope.key,
+            format: $scope.format
+        };
+
+        // only set provider specific fields, this will clear them in the db
+        if ($scope.s3like(backupConfig.provider)) {
+            backupConfig.bucket = $scope.bucket;
+            backupConfig.prefix = $scope.prefix;
+            backupConfig.accessKeyId = $scope.accessKeyId;
+            backupConfig.secretAccessKey = $scope.secretAccessKey;
+
+            if ($scope.endpoint) backupConfig.endpoint = $scope.endpoint;
+
+            if (backupConfig.provider === 's3') {
+                if ($scope.region) backupConfig.region = $scope.region;
+            } else if (backupConfig.provider === 'minio' || backupConfig.provider === 's3-v4-compat') {
+                backupConfig.region = 'us-east-1';
+                backupConfig.acceptSelfSignedCerts = $scope.acceptSelfSignedCerts;
+            } else if (backupConfig.provider === 'exoscale-sos') {
+                backupConfig.endpoint = 'https://sos.exo.io';
+                backupConfig.region = 'us-east-1';
+                backupConfig.signatureVersion = 'v2';
+            } else if (backupConfig.provider === 'digitalocean-spaces') {
+                backupConfig.region = 'us-east-1';
+            }
+        } else if (backupConfig.provider === 'filesystem') {
+            backupConfig.backupFolder = $scope.backupFolder;
+        }
+
+        var version = $scope.backupId.match(/_v(\d+.\d+.\d+)/);
+        Client.restore(backupConfig, $scope.backupId.replace(/\.tar\.gz(\.enc)?$/, ''), version ? version[1] : '', function (error) {
+            $scope.busy = false;
+
+            if (error) {
+                if (error.statusCode === 402) {
+                    $scope.error.generic = error.message;
+
+                    if (error.message.indexOf('AWS Access Key Id') !== -1) {
+                        $scope.error.accessKeyId = true;
+                        $scope.accessKeyId = '';
+                        $scope.configureBackupForm.accessKeyId.$setPristine();
+                        $('#inputConfigureBackupAccessKeyId').focus();
+                    } else if (error.message.indexOf('not match the signature') !== -1 ) {
+                        $scope.error.secretAccessKey = true;
+                        $scope.secretAccessKey = '';
+                        $scope.configureBackupForm.secretAccessKey.$setPristine();
+                        $('#inputConfigureBackupSecretAccessKey').focus();
+                    } else if (error.message.toLowerCase() === 'access denied') {
+                        $scope.error.bucket = true;
+                        $scope.bucket = '';
+                        $scope.configureBackupForm.bucket.$setPristine();
+                        $('#inputConfigureBackupBucket').focus();
+                    } else if (error.message.indexOf('ECONNREFUSED') !== -1) {
+                        $scope.error.generic = 'Unknown region';
+                        $scope.error.region = true;
+                        $scope.configureBackupForm.region.$setPristine();
+                        $('#inputConfigureBackupRegion').focus();
+                    } else if (error.message.toLowerCase() === 'wrong region') {
+                        $scope.error.generic = 'Wrong S3 Region';
+                        $scope.error.region = true;
+                        $scope.configureBackupForm.region.$setPristine();
+                        $('#inputConfigureBackupRegion').focus();
+                    } else {
+                        $('#inputConfigureBackupBucket').focus();
+                    }
+                } else {
+                    $scope.error.generic = error.message;
+                }
+
+                return;
+            }
+
+            waitForRestore();
+        });
+    }
+
+    function waitForRestore() {
+        $scope.busy = true;
+
+        Client.getStatus(function (error, status) {
+            if (!error && !status.restoring) {
+                window.location.href = '/';
+            }
+
+            setTimeout(waitForRestore, 5000);
+        });
+    }
+
+    Client.getStatus(function (error, status) {
+        if (error) {
+            window.location.href = '/error.html';
+            return;
+        }
+
+        if (status.restoring) return waitForRestore();
+
+        if (status.activated) {
+            window.location.href = '/';
+            return;
+        }
+
+        $scope.instanceId = search.instanceId;
+        $scope.initialized = true;
+    });
+}]);

webadmin/src/restore.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+<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" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'unsafe-eval' 'self' *.cloudron.io <%= apiOriginHostname %>; img-src 'self' <%= apiOriginHostname %>;" />
+
+    <title> Cloudron Restore </title>
+
+    <!-- Theme 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-md5.min.js"></script>
+    <script src="3rdparty/js/angular-ui-notification.min.js"></script>
+    <script src="3rdparty/js/autofill-event.js"></script>
+
+    <!-- Angular directives for tldjs -->
+    <script src="3rdparty/js/tld.js"></script>
+
+    <!-- Setup Application -->
+    <script src="js/restore.js"></script>
+
+</head>
+
+<body class="setup" ng-app="Application" ng-controller="RestoreController">
+
+    <div class="main-container ng-cloak text-center" ng-show="busy">
+        <div class="row">
+            <div class="col-md-6 col-md-offset-3">
+                <i class="fa fa-circle-o-notch fa-spin fa-5x"></i><br/>
+                <h3>Downloading backup</h3>
+            </div>
+        </div>
+    </div>
+
+    <div class="main-container ng-cloak" ng-show="initialized && !busy">
+        <div class="row">
+            <div class="col-md-6 col-md-offset-3">
+                <div class="card" style="max-width: none; padding: 20px;">
+                    <form name="configureBackupForm" role="form" novalidate ng-submit="restore()" autocomplete="off">
+                        <div class="row">
+                            <div class="col-md-10 col-md-offset-1 text-center">
+                                <h2>Cloudron Restore</h2>
+                                <p>Provide the backup to restore from</p>
+                                <br/>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-10 col-md-offset-1 text-center">
+                                <p class="has-error text-center" ng-show="error">{{ error.generic }}</p>
+
+                                <div class="form-group">
+                                    <label class="control-label" for="storageProviderProvider">Storage provider <sup><a ng-href="{{ config.webServerOrigin }}/documentation/backups/" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+                                    <select class="form-control" id="storageProviderProvider" ng-model="provider" ng-options="a.value as a.name for a in storageProvider" ng-change=clearForm()></select>
+                                </div>
+
+                                <!-- Filesystem -->
+                                <div class="form-group" ng-class="{ 'has-error': error.backupFolder }" ng-show="provider === 'filesystem'">
+                                    <label class="control-label" for="inputConfigureBackupFolder">Local backup directory</label>
+                                    <input type="text" class="form-control" ng-model="backupFolder" id="inputConfigureBackupFolder" name="backupFolder" ng-disabled="busy" placeholder="Directory for backups" ng-required="provider === 'filesystem'">
+                                </div>
+
+                                <!-- S3/Minio/SOS -->
+                                <div class="form-group" ng-class="{ 'has-error': error.endpoint }" ng-show="provider === 'minio' || provider === 's3-v4-compat'">
+                                    <label class="control-label" for="inputConfigureBackupEndpoint">Endpoint</label>
+                                    <input type="text" class="form-control" ng-model="endpoint" id="inputConfigureBackupEndpoint" name="endpoint" ng-disabled="busy" placeholder="URL of Minio/S3 Compatible" ng-required="provider === 'minio' || provider === 's3-v4-compat'">
+                                </div>
+
+                                <div class="checkbox" ng-show="provider === 'minio' || provider === 's3-v4-compat'" >
+                                    <label>
+                                        <input type="checkbox" ng-model="acceptSelfSignedCerts" id="inputConfigureBackupSelfSigned">
+                                            Accept Self-signed certificate
+                                        </input>
+                                    </label>
+                                </div>
+
+                                <div class="form-group" ng-class="{ 'has-error': error.bucket }" ng-show="s3like(provider)">
+                                    <label class="control-label" for="inputConfigureBackupBucket">Bucket name</label>
+                                    <input type="text" class="form-control" ng-model="bucket" id="inputConfigureBackupBucket" name="bucket" ng-disabled="busy" ng-required="s3like(provider)">
+                                </div>
+
+                                <div class="form-group" ng-class="{ 'has-error': error.prefix }" ng-show="s3like(provider)">
+                                    <label class="control-label" for="inputConfigureBackupPrefix">Prefix</label>
+                                    <input type="text" class="form-control" ng-model="prefix" id="inputConfigureBackupPrefix" name="prefix" ng-disabled="busy" placeholder="Prefix for backup file names">
+                                </div>
+
+                                <div class="form-group" ng-class="{ 'has-error': error.region }" ng-show="provider === 's3'">
+                                    <label class="control-label" for="inputConfigureBackupRegion">Region</label>
+                                    <select class="form-control" name="region" id="inputConfigureBackupRegion" ng-model="region" ng-options="a.value as a.name for a in s3Regions" ng-disabled="busy" ng-required="provider === 's3'"></select>
+                                </div>
+
+                                <div class="form-group" ng-class="{ 'has-error': error.region }" ng-show="provider === 'digitalocean-spaces'">
+                                    <label class="control-label" for="inputConfigureBackupRegion">Region</label>
+                                    <select class="form-control" name="region" id="inputConfigureBackupRegion" ng-model="endpoint" ng-options="a.value as a.name for a in doSpacesRegions" ng-disabled="busy" ng-required="provider === 'digitalocean-spaces'"></select>
+                                </div>
+
+                                <div class="form-group" ng-class="{ 'has-error': error.accessKeyId }" ng-show="s3like(provider)">
+                                    <label class="control-label" for="inputConfigureBackupAccessKeyId">Access key id</label>
+                                    <input type="text" class="form-control" ng-model="accessKeyId" id="inputConfigureBackupAccessKeyId" name="accessKeyId" ng-disabled="busy" ng-required="s3like(provider)">
+                                </div>
+
+                                <div class="form-group" ng-class="{ 'has-error': error.secretAccessKey }" ng-show="s3like(provider)">
+                                    <label class="control-label" for="inputConfigureBackupSecretAccessKey">Secret access key</label>
+                                    <input type="text" class="form-control" ng-model="secretAccessKey" id="inputConfigureBackupSecretAccessKey" name="secretAccessKey" ng-disabled="busy" ng-required="s3like(provider)">
+                                </div>
+
+                                <div class="form-group" ng-show="provider !== 'noop'">
+                                    <label class="control-label" for="storageFormat">Storage Format</label>
+                                    <select class="form-control" id="storageFormat" ng-change="key = ''" ng-model="format" ng-options="a.value as a.name for a in formats"></select>
+                                </div>
+
+                                <div class="form-group" ng-class="{ 'has-error': error.key }" ng-show="provider !== 'noop' && format === 'tgz'">
+                                    <label class="control-label" for="inputConfigureBackupKey">Encryption key (optional)</label>
+                                    <input type="text" class="form-control" ng-model="key" id="inputConfigureBackupKey" name="prefix" ng-disabled="busy" placeholder="Passphrase used to encrypt the backups">
+                                </div>
+
+                                <div class="form-group" ng-class="{ 'has-error': error.backupId }">
+                                    <label class="control-label" for="inputConfigureBackupId">Backup ID</label>
+
+                                    <input type="text" class="form-control" ng-model="backupId" name="inputConfigureBackupId" placeholder="Backup Id" required ng-disabled="busy">
+                                </div>
+
+                                <input class="ng-hide" type="submit" ng-disabled="configureBackupForm.$invalid"/>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-12 text-center">
+                                <button type="submit" class="btn btn-primary" ng-disabled="configureBackupForm.$invalid"/><i class="fa fa-circle-o-notch fa-spin" ng-show="busy"></i> Restore</button>
+                            </div>
+                        </div>
+
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="text-center">
+        <span class="text-muted">&copy;2017 <a href="https://cloudron.io" target="_blank">Cloudron</a></span>
+        <span class="text-muted"><a href="https://twitter.com/cloudron_io" target="_blank">Twitter <i class="fa fa-twitter"></i></a></span>
+        <span class="text-muted"><a href="https://chat.cloudron.io" target="_blank">Chat <i class="fa fa-comments"></i></a></span>
+    </footer>
+
+</body>
+</html>

webadmin/src/setup.html

@@ -89,6 +89,9 @@
                                 <input type="submit" class="btn btn-primary" ng-disabled="setupForm.$invalid" value="Done">
                             </div>
                         </div>
+                        <div class="row">
+                            <div class="col-md-12 text-center"><small>Looking to <a href="/restore.html">restore?</a></small></div>
+                        </div>
                     </form>
                 </div>
             </div>

webadmin/src/views/settings.html

@@ -125,7 +125,7 @@
                         <p class="has-error text-center" ng-show="configureBackup.error">{{ configureBackup.error.generic }}</p>
 
                         <div class="form-group">
-                            <label class="control-label" for="storageProviderProvider">Storage provider <sup><a ng-href="{{ config.webServerOrigin }}/references/selfhosting/#backups" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+                            <label class="control-label" for="storageProviderProvider">Storage provider <sup><a ng-href="{{ config.webServerOrigin }}/documentation/backups/" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
                             <select class="form-control" id="storageProviderProvider" ng-model="configureBackup.provider" ng-options="a.value as a.name for a in storageProvider" ng-change=configureBackup.clearForm()></select>
                         </div>