Mooooar buttons (firewall view)

src/js/yunohost/controllers/firewall.js

@@ -30,23 +30,53 @@
             // Get UPnP status
             firewall.upnp = data.uPnP.enabled;
 
-            c.view('tools/tools_firewall', firewall);
+            c.view('tools/tools_firewall', firewall, function() {
+
+                // Buttons in the 'ports' panel to open/close specific ports
+                $("button[data-port]").on("click", function() {
+
+                    var port = $(this).data("port");
+                    var action = $(this).data("action");
+                    var protocol = $(this).data("protocol");
+                    var connection = $(this).data("connection");
+                    c.confirm(
+                        y18n.t('firewall'),
+                        // confirm_firewall_open and confirm_firewall_close
+                        y18n.t('confirm_firewall_' + action, [ port, y18n.t(protocol), y18n.t(connection)]),
+                        function(){ c.togglePort(port, protocol, connection, action); }
+                    );
+                });
+
+                // Buttons to enable / disable UPnP
+                $("button[data-upnp]").on("click", function() {
+                    var action = $(this).data("upnp");
+                    c.confirm(
+                        y18n.t('firewall'),
+                        // confirm_upnp_enable and confirm_upnp_disable
+                        y18n.t('confirm_upnp_' + action),
+                        function(){
+                            c.api('GET', '/firewall/upnp', {action: action}, function(data) {
+                                c.redirect_to('#/tools/firewall');
+                            });
+                        }
+                    );
+               });
+            });
         });
     });
 
-    // Enable/Disable UPnP
+    // Update port status from form
-    app.get('#/tools/firewall/upnp/:action', function (c) {
+    app.post('#/tools/firewall/port', function (c) {
         c.confirm(
             y18n.t('firewall'),
-            // confirm_upnp_enable and confirm_upnp_disable
+            y18n.t('confirm_firewall_' + c.params['action'].toLowerCase(), [ c.params['port'], y18n.t(c.params['protocol']), y18n.t(c.params['connection']) ]),
-            y18n.t('confirm_upnp_' + c.params['action'].toLowerCase()),
             function(){
-                var params = {
+                c.togglePort(
-                    action : c.params['action']
+                    c.params['port'],
-                };
+                    c.params['protocol'],
-                c.api('GET', '/firewall/upnp', params, function(data) {
+                    c.params['connection'],
-                    c.redirect_to('#/tools/firewall');
+                    c.params['action']
-                });
+                );
             }
         );
     });
@@ -118,38 +148,5 @@
         return;
     });
 
-    // Update port status from direct link
-    // #/firewall/port/{{@key}}/tcp/ipv4/close
-    app.get('#/tools/firewall/port/:port/:protocol/:connection/:action', function (c) {
-        c.confirm(
-            y18n.t('firewall'),
-            // confirm_firewall_open and confirm_firewall_close
-            y18n.t( 'confirm_firewall_' + c.params['action'].toLowerCase(), [ c.params['port'], y18n.t(c.params['protocol']), y18n.t(c.params['connection'])]),
-            function(){
-                c.togglePort(
-                    c.params['port'],
-                    c.params['protocol'],
-                    c.params['connection'],
-                    c.params['action']
-                );
-            }
-        );
-    });
-
-    // Update port status from form
-    app.post('#/tools/firewall/port', function (c) {
-        c.confirm(
-            y18n.t('firewall'),
-            y18n.t('confirm_firewall_' + c.params['action'].toLowerCase(), [ c.params['port'], y18n.t(c.params['protocol']), y18n.t(c.params['connection']) ]),
-            function(){
-                c.togglePort(
-                    c.params['port'],
-                    c.params['protocol'],
-                    c.params['connection'],
-                    c.params['action']
-                );
-            }
-        );
-    });
 
 })();

src/views/tools/tools_firewall.ms

@@ -29,20 +29,20 @@
                     <td>
                     {{#if this.ipv4}}
                     <span class="fa-check"></span>
-                    <a class="btn btn-xs btn-danger" href="#/tools/firewall/port/{{@key}}/tcp/ipv4/close">{{t 'close'}}</a>
+                    <button class="btn btn-xs btn-danger" data-action="close" data-port="{{@key}}" data-protocol="tcp" data-connection="ipv4">{{t 'close'}}</button>
                     {{else}}
                     <span></span>
                     <span class="fa-times"></span>
-                    <a class="btn btn-xs btn-success" href="#/tools/firewall/port/{{@key}}/tcp/ipv4/open">{{t 'open'}}</a>
+                    <button class="btn btn-xs btn-success" data-action="open" data-port="{{@key}}" data-protocol="tcp" data-connection="ipv4">{{t 'open'}}</button>
                     {{/if}}
                     </td>
                     <td>
                     {{#if this.ipv6}}
                     <span class="fa-check"></span>
-                    <a class="btn btn-xs btn-danger" href="#/tools/firewall/port/{{@key}}/tcp/ipv6/close">{{t 'close'}}</a>
+                    <button class="btn btn-xs btn-danger" data-action="close" data-port="{{@key}}" data-protocol="tcp" data-connection="ipv6">{{t 'close'}}</button>
                     {{else}}
                     <span class="fa-times"></span>
-                    <a class="btn btn-xs btn-success" href="#/tools/firewall/port/{{@key}}/tcp/ipv6/open">{{t 'open'}}</a>
+                    <button class="btn btn-xs btn-success" data-action="open" data-port="{{@key}}" data-protocol="tcp" data-connection="ipv6">{{t 'open'}}</button>
                     {{/if}}
                     </td>
                     <td>
@@ -75,20 +75,20 @@
                     <td>
                     {{#if this.ipv4}}
                     <span class="fa-check"></span>
-                    <a class="btn btn-xs btn-danger" href="#/tools/firewall/port/{{@key}}/udp/ipv4/close">{{t 'close'}}</a>
+                    <button class="btn btn-xs btn-danger" data-action="close" data-port="{{@key}}" data-protocol="udp" data-connection="ipv4">{{t 'close'}}</button>
                     {{else}}
                     <span></span>
                     <span class="fa-times"></span>
-                    <a class="btn btn-xs btn-success" href="#/tools/firewall/port/{{@key}}/udp/ipv4/open">{{t 'open'}}</a>
+                    <button class="btn btn-xs btn-success" data-action="open" data-port="{{@key}}" data-protocol="udp" data-connection="ipv4">{{t 'open'}}</button>
                     {{/if}}
                     </td>
                     <td>
                     {{#if this.ipv6}}
                     <span class="fa-check"></span>
-                    <a class="btn btn-xs btn-danger" href="#/tools/firewall/port/{{@key}}/udp/ipv6/close">{{t 'close'}}</a>
+                    <button class="btn btn-xs btn-danger" data-action="close" data-port="{{@key}}" data-protocol="udp" data-connection="ipv6">{{t 'close'}}</button>
                     {{else}}
                     <span class="fa-times"></span>
-                    <a class="btn btn-xs btn-success" href="#/tools/firewall/port/{{@key}}/udp/ipv6/open">{{t 'open'}}</a>
+                    <button class="btn btn-xs btn-success" data-action="open" data-port="{{@key}}" data-protocol="udp" data-connection="ipv6">{{t 'open'}}</button>
                     {{/if}}
                     </td>
                     <td>
@@ -168,10 +168,10 @@
     <div class="panel-body">
         {{#if upnp}}
             <p class="text-success">{{t 'upnp_enabled'}}</p>
-            <a role="button"  href="#/tools/firewall/upnp/disable" class="btn btn-danger">{{t 'disable'}}</a>
+            <button class="btn btn-danger" data-upnp="disable">{{t 'disable'}}</button>
         {{else}}
             <p class="text-danger">{{t 'upnp_disabled'}}</p>
-            <a role="button" href="#/tools/firewall/upnp/enable" class="btn btn-success">{{t 'enable'}}</a>
+            <button class="btn btn-success" data-upnp="enable">{{t 'enable'}}</button>
         {{/if}}
     </div>
 </div>