add ipv6 configure form

src/views/network.html

@@ -9,12 +9,12 @@
         <form name="sysinfoForm" role="form" novalidate ng-submit="sysinfo.submit()" autocomplete="off">
           <fieldset>
             <div class="form-group">
-              <label class="control-label">{{ 'network.ip.provider' | tr }} <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+              <label class="control-label">{{ 'network.ip.provider' | tr }} <sup><a ng-href="https://docs.cloudron.io/networking/#ipv4" 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>
 
             <div ng-show="sysinfo.newProvider === 'generic'">
-              {{ 'network.configureIp.providerGenericDescription' | tr }} <sup><a ng-href="https://api.cloudron.io/api/v1/helper/public_ip" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
+              {{ 'network.configureIp.providerGenericDescription' | tr }} <sup><a ng-href="https://ipv4.api.cloudron.io/api/v1/helper/public_ip" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
             </div>
 
             <!-- Fixed -->
@@ -23,11 +23,6 @@
               <input type="text" class="form-control" ng-model="sysinfo.newIPv4" name="ipv4" ng-disabled="sysinfo.busy" ng-required="sysinfo.newProvider === 'fixed'">
               <p class="has-error" ng-show="sysinfo.error.ipv4">{{ sysinfo.error.ipv4 }}</p>
             </div>
-            <div class="form-group" ng-show="sysinfo.newProvider === 'fixed' && ipv6Configure.isEnabled" ng-class="{ 'has-error': (!sysinfoForm.ipv4.$dirty && sysinfo.error.ipv6) }">
-              <label class="control-label">{{ 'network.ipv6.address' | tr }}</label>
-              <input type="text" class="form-control" ng-model="sysinfo.newIPv6" name="ipv6" ng-disabled="sysinfo.busy" ng-required="sysinfo.newProvider === 'fixed'&& ipv6Configure.isEnabled">
-              <p class="has-error" ng-show="sysinfo.error.ipv6">{{ sysinfo.error.ipv6 }}</p>
-            </div>
 
             <!-- Network Interface -->
             <div class="form-group" ng-show="sysinfo.newProvider === 'network-interface'" ng-class="{ 'has-error': (!sysinfoForm.ifname.$dirty && sysinfo.error.ifname) }">
@@ -75,11 +70,58 @@
   </div>
 </div>
 
+<!-- Modal IPv6 -->
+<div class="modal fade" id="ipv6ConfigureModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">{{ 'network.configureIpv6.title' | tr }}</h4>
+      </div>
+      <div class="modal-body">
+        <form name="ipv6ConfigureForm" role="form" novalidate ng-submit="ipv6Configure.submit()" autocomplete="off">
+          <fieldset>
+            <div class="form-group">
+              <label class="control-label">{{ 'network.ip.provider' | tr }} <sup><a ng-href="https://docs.cloudron.io/networking/#ipv6" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+              <select class="form-control" ng-model="ipv6Configure.newProvider" ng-options="a.value as a.name for a in ipv6ConfigureProvider"></select>
+            </div>
+
+            <div ng-show="ipv6Configure.newProvider === 'generic'">
+              {{ 'network.configureIp.providerGenericDescription' | tr }} <sup><a ng-href="https://ipv6.api.cloudron.io/api/v1/helper/public_ip" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
+            </div>
+
+            <!-- Fixed -->
+            <div class="form-group" ng-show="ipv6Configure.newProvider === 'fixed'" ng-class="{ 'has-error': (!ipv6ConfigureForm.ipv4.$dirty && ipv6Configure.error.ipv6) }">
+              <label class="control-label">{{ 'network.ipv6.address' | tr }}</label>
+              <input type="text" class="form-control" ng-model="ipv6Configure.newIPv6" name="ipv6" ng-disabled="ipv6Configure.busy" ng-required="ipv6Configure.newProvider === 'fixed'">
+              <p class="has-error" ng-show="ipv6Configure.error.ipv6">{{ ipv6Configure.error.ipv6 }}</p>
+            </div>
+
+            <!-- Network Interface -->
+            <div class="form-group" ng-show="ipv6Configure.newProvider === 'network-interface'" ng-class="{ 'has-error': (!ipv6ConfigureForm.ifname.$dirty && ipv6Configure.error.ifname) }">
+              <label class="control-label">{{ 'network.ip.interface' | tr }}</label>
+              <p>{{ 'network.ip.interfaceDescription' | tr }} <code>ip -f inet6 -br addr</code></p>
+              <input type="text" class="form-control" ng-model="ipv6Configure.newIfname" name="ifname" ng-disabled="ipv6Configure.busy" ng-required="ipv6Configure.newProvider === 'network-interface'">
+              <p class="has-error" ng-show="ipv6Configure.error.ifname">{{ ipv6Configure.error.ifname }}</p>
+            </div>
+
+            <input class="ng-hide" type="submit" ng-disabled="ipv6ConfigureForm.$invalid || ipv6Configure.busy"/>
+          </fieldset>
+        </form>
+      </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-success" ng-click="ipv6Configure.submit()" ng-disabled="ipv6ConfigureForm.$invalid || ipv6Configure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="ipv6Configure.busy"></i> {{ 'main.dialog.save' | tr }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="content">
   <div class="text-left">
     <h1>{{ 'network.title' | tr }}</h1>
   </div>
 
+  <!-- IPv4 -->
   <div class="text-left">
     <h3>{{ 'network.ip.title' | tr }}</h3>
   </div>
@@ -97,7 +139,7 @@
         <span class="text-muted">{{ 'network.ip.provider' | tr }}</span>
       </div>
       <div class="col-xs-6 text-right">
-        <span>{{ prettySysinfoProviderName(sysinfo.provider) }}</span>
+        <span>{{ prettyIpProviderName(sysinfo.provider) }}</span>
       </div>
     </div>
 
@@ -111,16 +153,6 @@
       </div>
     </div>
 
-    <div class="row" ng-show="ipv6Configure.isEnabled">
-      <div class="col-xs-6">
-        <span class="text-muted">{{ 'network.ipv6.address' | tr }}</span>
-      </div>
-      <div class="col-xs-6 text-right">
-        <span ng-show="sysinfo.ipv6">{{ sysinfo.ipv6 }}</span>
-        <span ng-show="!sysinfo.ipv6">{{ sysinfo.serverIPv6 }} ({{ 'network.ip.detected' | tr }})</span>
-      </div>
-    </div>
-
     <div class="row" ng-show="sysinfo.ifname">
       <div class="col-xs-6">
         <span class="text-muted">{{ 'network.ip.interface' | tr }}</span>
@@ -139,6 +171,7 @@
     </div>
   </div>
 
+  <!-- Firewall -->
   <div class="text-left" ng-show="user.isAtLeastOwner">
     <h3>{{ 'network.firewall.title' | tr }}</h3>
   </div>
@@ -154,22 +187,52 @@
     </div>
   </div>
 
+  <!-- IPv6 -->
   <div class="text-left">
     <h3>{{ 'network.ipv6.title' | tr }}</h3>
   </div>
 
   <div class="card">
     <div class="row">
-      <div class="col-md-12">
-        <p>{{ 'network.ipv6.description' | tr }}</p>
-        <p class="text-danger" ng-show="ipv6Configure.error"><br/>{{ ipv6Configure.error }}</p>
+      <div class="col-xs-12">
+        {{ 'network.ipv6.description' | tr }}
       </div>
     </div>
 
+    <br/>
     <div class="row">
-      <div class="col-md-12 text-right">
-        <button class="btn btn-outline btn-primary" ng-hide="ipv6Configure.isEnabled" ng-click="ipv6Configure.setEnabled(true)" ng-disabled="ipv6Configure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="ipv6Configure.busy"></i>  {{ 'main.enableAction' | tr }}</button>
-        <button class="btn btn-outline btn-danger" ng-show="ipv6Configure.isEnabled" ng-click="ipv6Configure.setEnabled(false)" ng-disabled="ipv6Configure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="ipv6Configure.busy"></i>  {{ 'main.disableAction' | tr }}</button>
+      <div class="col-xs-6">
+        <span class="text-muted">{{ 'network.ip.provider' | tr }}</span>
+      </div>
+      <div class="col-xs-6 text-right">
+        <span>{{ prettyIpProviderName(ipv6Configure.provider) }}</span>
+      </div>
+    </div>
+
+    <div class="row" ng-show="ipv6Configure.provider !== 'noop'">
+      <div class="col-xs-6">
+        <span class="text-muted">{{ 'network.ip.address' | tr }}</span>
+      </div>
+      <div class="col-xs-6 text-right">
+        <span ng-show="ipv6Configure.ipv6">{{ ipv6Configure.ipv6 }}</span>
+        <span ng-show="!ipv6Configure.ipv6">{{ ipv6Configure.serverIPv6 }} ({{ 'network.ip.detected' | tr }})</span>
+      </div>
+    </div>
+
+    <div class="row" ng-show="ipv6Configure.ifname">
+      <div class="col-xs-6">
+        <span class="text-muted">{{ 'network.ip.interface' | tr }}</span>
+      </div>
+      <div class="col-xs-6 text-right">
+        <span>{{ ipv6Configure.ifname }}</span>
+      </div>
+    </div>
+
+    <br/>
+
+    <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="ipv6Configure.show()">{{ 'network.ip.configure' | tr }}</button>
       </div>
     </div>
   </div>

src/views/network.js

@@ -16,8 +16,16 @@ angular.module('Application').controller('NetworkController', ['$scope', '$locat
         { name: 'Network Interface', value: 'network-interface' }
     ];
 
-    $scope.prettySysinfoProviderName = function (provider) {
+    $scope.ipv6ConfigureProvider = [
+        { name: 'Disabled', value: 'noop' },
+        { name: 'Public IP', value: 'generic' },
+        { name: 'Static IP Address', value: 'fixed' },
+        { name: 'Network Interface', value: 'network-interface' }
+    ];
+
+    $scope.prettyIpProviderName = function (provider) {
         switch (provider) {
+        case 'noop': return 'Disabled';
         case 'generic': return 'Public IP';
         case 'fixed': return 'Static IP Address';
         case 'network-interface': return 'Network Interface';
@@ -53,26 +61,79 @@ angular.module('Application').controller('NetworkController', ['$scope', '$locat
 
     $scope.ipv6Configure = {
         busy: false,
-        error: '',
-        isEnabled: false,
+        error: {},
+
+        serverIPv6: '',
+
+        provider: '',
+        ipv6: '',
+        ifname: '',
+
+        // configure dialog
+        newProvider: '',
+        newIPv6: '',
+        newIfname: '',
 
         refresh: function () {
-            Client.getIPv6Config(function (error, enabled) {
+            Client.getIPv6Config(function (error, result) {
                 if (error) return console.error(error);
 
-                $scope.ipv6Configure.isEnabled = enabled;
+                $scope.ipv6Configure.provider = result.provider;
+                $scope.ipv6Configure.ipv6 = result.ipv6 || '';
+                $scope.ipv6Configure.ifname = result.ifname || '';
+                if (result.provider === 'noop') return;
+
+                Client.getServerIpv6(function (error, result) {
+                    if (error) return console.error(error);
+
+                    $scope.ipv6Configure.serverIPv6 = result.ipv6;
+                });
             });
         },
 
-        setEnabled: function (enabled) {
+        show: function () {
+            $scope.ipv6Configure.error = {};
+            $scope.ipv6Configure.newProvider = $scope.ipv6Configure.provider;
+            $scope.ipv6Configure.newIPv6 = $scope.ipv6Configure.ipv6;
+            $scope.ipv6Configure.newIfname = $scope.ipv6Configure.ifname;
+
+            $('#ipv6ConfigureModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.ipv6Configure.error = {};
             $scope.ipv6Configure.busy = true;
-            $scope.ipv6Configure.error = '';
 
-            Client.setIPv6Config(enabled, function (error) {
+            var config = {
+                provider: $scope.ipv6Configure.newProvider
+            };
+
+            if (config.provider === 'fixed') {
+                config.ipv4 = $scope.ipv6Configure.newIPv4;
+            } else if (config.provider === 'network-interface') {
+                config.ifname = $scope.ipv6Configure.newIfname;
+            }
+
+            Client.setIPv6Config(config, function (error) {
                 $scope.ipv6Configure.busy = false;
+                if (error && error.message.indexOf('ipv') !== -1) {
+                    $scope.ipv6Configure.error.ipv6 = error.message;
+                    $scope.ipv6ConfigureForm.$setPristine();
+                    $scope.ipv6ConfigureForm.$setUntouched();
+                    return;
+                } else if (error && (error.message.indexOf('interface') !== -1 || error.message.indexOf('IPv6') !== -1)) {
+                    $scope.ipv6Configure.error.ifname = error.message;
+                    $scope.ipv6ConfigureForm.$setPristine();
+                    $scope.ipv6ConfigureForm.$setUntouched();
+                    return;
+                } else if (error) {
+                    console.error(error);
+                    return;
+                }
 
-                if (error) $scope.ipv6Configure.error = error.message;
-                else $scope.ipv6Configure.isEnabled = enabled;
+                $scope.ipv6Configure.refresh();
+
+                $('#ipv6ConfigureModal').modal('hide');
             });
         }
     };