Add sysinfo configuration

2019-11-05 13:45:24 +01:00
parent 82b2b0b334
commit b520b6dc13
2 changed files with 179 additions and 15 deletions
@@ -201,6 +201,48 @@
  </div>
 </div>

+<!-- Modal sysinfo -->
+<div class="modal fade" id="sysinfoModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Configure SysInfo Backend</h4>
+        </div>
+        <div class="modal-body">
+          <form name="sysinfoForm" role="form" novalidate ng-submit="sysinfo.submit()" autocomplete="off">
+            <fieldset>
+              <div class="form-group">
+                <label class="control-label">Backend  <sup><a href="https://cloudron.io/documentation/domains/#sysinfo" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+                <select class="form-control" ng-model="sysinfo.newProvider" ng-options="a.value as a.name for a in sysinfoProvider"></select>
+              </div>
+
+              <!-- Fixed -->
+              <div class="form-group" ng-show="sysinfo.newProvider === 'fixed'" ng-class="{ 'has-error': (!sysinfoForm.ip.$dirty && sysinfo.error.ip) }">
+                <label class="control-label">IP Address</label>
+                <input type="text" class="form-control" ng-model="sysinfo.newIp" name="ip" ng-disabled="sysinfo.busy" ng-required="sysinfo.newProvider === 'fixed'">
+                <p class="has-error" ng-show="sysinfo.error.ip">{{ sysinfo.error.ip }}</p>
+              </div>
+
+              <!-- Network Interface -->
+              <div class="form-group" ng-show="sysinfo.newProvider === 'network-interface'" ng-class="{ 'has-error': (!sysinfoForm.ifname.$dirty && sysinfo.error.ifname) }">
+                <label class="control-label">Interface Name</label>
+                <p>List available devices on the server with <code>ip -f inet -br addr</code></p>
+                <input type="text" class="form-control" ng-model="sysinfo.newIfname" name="ifname" ng-disabled="sysinfo.busy" ng-required="sysinfo.newProvider === 'network-interface'">
+                <p class="has-error" ng-show="sysinfo.error.ifname">{{ sysinfo.error.ifname }}</p>
+              </div>
+
+              <input class="ng-hide" type="submit" ng-disabled="sysinfoForm.$invalid || sysinfo.busy"/>
+            </fieldset>
+          </form>
+        </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="sysinfo.submit()" ng-disabled="sysinfoForm.$invalid || sysinfo.busy"><i class="fa fa-circle-notch fa-spin" ng-show="sysinfo.busy"></i> Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
 <div class="content">
  <div class="text-left">
    <h1>Domains <button class="btn btn-primary btn-outline pull-right" ng-click="domainConfigure.show()"><i class="fa fa-plus"></i> Add Domain</button></h1>
@@ -320,6 +362,41 @@
    </div>
  </div>

+  <div class="text-left">
+    <h3>SysInfo / IP Address</h3>
+  </div>
+
+  <div class="card">
+    <div class="row">
+      <div class="col-md-12">
+        <p>
+          To automatically setup DNS records, Cloudron needs to know which IP address should be used.
+        </p>
+        <table>
+          <tr>
+            <td class="text-bold" style="vertical-align: top; width: 200px;">Current Backend</td>
+            <td class="text-right" style="vertical-align: top;">{{ prettySysinfoProviderName(sysinfo.provider) }}</td>
+          </tr>
+          <tr ng-show="sysinfo.ip">
+            <td class="text-bold" style="vertical-align: top;">IP Address</td>
+            <td class="text-right" style="vertical-align: top;">{{ sysinfo.ip }}</td>
+          </tr>
+          <tr ng-show="sysinfo.ifname">
+            <td class="text-bold" style="vertical-align: top;">Network Interface Name</td>
+            <td class="text-right" style="vertical-align: top;">{{ sysinfo.ifname }}</td>
+          </tr>
+        </table>
+        </p>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6 col-md-offset-6 text-right">
+        <button class="btn btn-outline btn-primary pull-right" ng-click="sysinfo.show()">Change Backend</button>
+      </div>
+    </div>
+  </div>
+
  <div class="text-left" ng-show="config.uiSpec.domains.dynamicDns">
    <h3>Dynamic DNS</h3>
  </div>
@@ -34,21 +34,37 @@ angular.module('Application').controller('DomainsController', ['$scope', '$locat
        { name: 'No-op (only for development)', value: 'noop' }
    ];

-    $scope.prettyProviderName = function (domain) {
-        switch (domain.provider) {
-        case 'caas': return 'Managed Cloudron';
-        case 'route53': return 'AWS Route53';
-        case 'cloudflare': return 'Cloudflare';
-        case 'digitalocean': return 'DigitalOcean';
-        case 'gandi': return 'Gandi LiveDNS';
-        case 'namecom': return 'Name.com';
-        case 'namecheap': return 'Namecheap';
-        case 'gcdns': return 'Google Cloud';
-        case 'godaddy': return 'GoDaddy';
-        case 'manual': return 'Manual';
-        case 'wildcard': return 'Wildcard';
-        case 'noop': return 'No-op';
-        default: return 'Unknown';
+        $scope.prettyProviderName = function (domain) {
+            switch (domain.provider) {
+                case 'caas': return 'Managed Cloudron';
+                case 'route53': return 'AWS Route53';
+                case 'cloudflare': return 'Cloudflare';
+                case 'digitalocean': return 'DigitalOcean';
+                case 'gandi': return 'Gandi LiveDNS';
+                case 'namecom': return 'Name.com';
+                case 'namecheap': return 'Namecheap';
+                case 'gcdns': return 'Google Cloud';
+                case 'godaddy': return 'GoDaddy';
+                case 'manual': return 'Manual';
+                case 'wildcard': return 'Wildcard';
+                case 'noop': return 'No-op';
+                default: return 'Unknown';
+        }
+    };
+
+    // keep in sync with sysinfo.js
+    $scope.sysinfoProvider = [
+        { name: 'Automatic (default)', value: 'generic' },
+        { name: 'Static IP Address', value: 'fixed' },
+        { name: 'Network Interface', value: 'network-interface' }
+    ];
+
+    $scope.prettySysinfoProviderName = function (provider) {
+        switch (provider) {
+            case 'generic': return 'Automatic';
+            case 'fixed': return 'Static IP Address';
+            case 'network-interface': return 'Network Interface';
+            default: return 'Unknown';
        }
    };

@@ -531,6 +547,76 @@ angular.module('Application').controller('DomainsController', ['$scope', '$locat
        }
    };

+    $scope.sysinfo = {
+        busy: false,
+        error: {},
+
+        provider: '',
+        ip: '',
+        ifname: '',
+
+        // configure dialog
+        newProvider: '',
+        newIp: '',
+        newIfname: '',
+
+        refresh: function () {
+            Client.getSysinfoConfig(function (error, result) {
+                if (error) return console.error(error);
+
+                $scope.sysinfo.provider = result.provider;
+                $scope.sysinfo.ip = result.ip || '';
+                $scope.sysinfo.ifname = result.ifname || '';
+            });
+        },
+
+        show: function () {
+            $scope.sysinfo.error = {};
+            $scope.sysinfo.newProvider = $scope.sysinfo.provider;
+            $scope.sysinfo.newIp = $scope.sysinfo.ip;
+            $scope.sysinfo.newIfname = $scope.sysinfo.ifname;
+
+            $('#sysinfoModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.sysinfo.error = {};
+            $scope.sysinfo.busy = true;
+
+            var config = {
+                provider: $scope.sysinfo.newProvider
+            };
+
+            if (config.provider === 'fixed') {
+                config.ip = $scope.sysinfo.newIp;
+            } else if (config.provider === 'network-interface') {
+                config.ifname = $scope.sysinfo.newIfname;
+            }
+
+            Client.setSysinfoConfig(config, function (error) {
+                $scope.sysinfo.busy = false;
+                if (error && error.message.indexOf('ip') !== -1) {
+                    $scope.sysinfo.error.ip = error.message;
+                    $scope.sysinfoForm.$setPristine();
+                    $scope.sysinfoForm.$setUntouched();
+                    return;
+                } else if (error && (error.message.indexOf('interface') !== -1 || error.message.indexOf('IPv4') !== -1)) {
+                    $scope.sysinfo.error.ifname = error.message;
+                    $scope.sysinfoForm.$setPristine();
+                    $scope.sysinfoForm.$setUntouched();
+                    return;
+                } else if (error) {
+                    console.error(error);
+                    return;
+                }
+
+                $scope.sysinfo.refresh();
+
+                $('#sysinfoModal').modal('hide');
+            });
+        }
+    };
+
    Client.onReady(function () {
        refreshDomains(function (error) {
            if (error) return console.error(error);
@@ -543,6 +629,7 @@ angular.module('Application').controller('DomainsController', ['$scope', '$locat
        });

        $scope.renewCerts.checkStatus();
+        $scope.sysinfo.refresh();
    });

    document.getElementById('gcdnsKeyFileInput').onchange = readFileLocally($scope.domainConfigure.gcdnsKey, 'content', 'keyFileName');