luci-app-wireguard: add QR Code support plus fixes 2195/head
authorDirk Brenken <dev@brenken.org>
Mon, 1 Oct 2018 06:09:12 +0000 (08:09 +0200)
committerDirk Brenken <dev@brenken.org>
Mon, 1 Oct 2018 09:57:38 +0000 (11:57 +0200)
* add optional QR Code support to status page (per wg Interface),
  submitted information via QR code are:
  - [Interface] (list of) Address / PrivateKey
  - [Peer] Endpoint / PublicKey / (list of) AllowedIPs
  - support multiple interfaces and peers
* fix XHTML rendering errors with OpenWrt standard theme
* fix logical glitch with empty descriptions, remove needless variables
* left align the output for better viewing esp. with material theme
* freshen up design a little bit
* switch space indentation to tabs

Signed-off-by: Dirk Brenken <dev@brenken.org>
applications/luci-app-wireguard/luasrc/controller/wireguard.lua
applications/luci-app-wireguard/luasrc/view/wireguard.htm

index 68a82fe5cc223cf7d53d17400ff546a2d0e258d3..5a919609745d28152093c40e25d6b5864bf9594c 100644 (file)
@@ -4,5 +4,5 @@
 module("luci.controller.wireguard", package.seeall)
 
 function index()
-  entry({"admin", "status", "wireguard"}, template("wireguard"), _("WireGuard Status"), 92)
+       entry({"admin", "status", "wireguard"}, template("wireguard"), _("WireGuard Status"), 92)
 end
index c25ef85caacc4f1c5dcc23de9f30139c1ac778d5..444533275e657b06be5ea1ae5d5e46ab816f8bd6 100644 (file)
 <%#
- Copyright 2016-2017 Dan Luedtke <mail@danrl.com>
- Licensed to the public under the Apache License 2.0.
      Copyright 2016-2017 Dan Luedtke <mail@danrl.com>
      Licensed to the public under the Apache License 2.0.
 -%>
 
 <%
-  local data = { }
-  local last_device = ""
+       local uci = uci.cursor()
+       local data = { }
+       local last_device = ""
+       local enc = { }
 
-  local wg_dump = io.popen("wg show all dump")
-  if wg_dump then
-    local line
-    for line in wg_dump:lines() do
-      local line = string.split(line, "\t")
-      if not (last_device == line[1]) then
-        last_device = line[1]
-        data[line[1]] = {
-          name                 = line[1],
-          public_key           = line[3],
-          listen_port          = line[4],
-          fwmark               = line[5],
-          peers                = { }
-        }
-      else
-        local peer = {
-          public_key           = line[2],
-          endpoint             = line[4],
-          allowed_ips          = { },
-          latest_handshake     = line[6],
-          transfer_rx          = line[7],
-          transfer_tx          = line[8],
-          persistent_keepalive = line[9]
-        }
-        if not (line[4] == '(none)') then
-          for ipkey, ipvalue in pairs(string.split(line[5], ",")) do
-            if #ipvalue > 0 then
-              table.insert(peer['allowed_ips'], ipvalue)
-            end
-          end
-        end
-        table.insert(data[line[1]].peers, peer)
-      end
-    end
-  end
+       local wg_dump = io.popen("wg show all dump")
+       if wg_dump then
+               local line
+               for line in wg_dump:lines() do
+                       local line = string.split(line, "\t")
+                       if not (last_device == line[1]) then
+                               last_device = line[1]
+                               data[line[1]] = {
+                                       name            = line[1],
+                                       public_key      = line[3],
+                                       listen_port     = line[4],
+                                       fwmark          = line[5],
+                                       peers           = { }
+                               }
+                               local s = uci:get_list("network", line[1], "addresses")
+                               local address = ""
+                               local key, value
+                               for key, value in pairs(s) do
+                                       if address ~= "" then
+                                               address = address.. ", " ..value
+                                       else
+                                               address = value
+                                       end
+                               end
+                               enc[line[1]] = "[Interface]\nPrivateKey = " ..line[2].. "\nAddress = " ..address
+                       else
+                               local peer = {
+                                       public_key              = line[2],
+                                       endpoint                = line[4],
+                                       allowed_ips             = { },
+                                       latest_handshake        = line[6],
+                                       transfer_rx             = line[7],
+                                       transfer_tx             = line[8],
+                                       persistent_keepalive    = line[9]
+                               }
+                               if not (line[4] == '(none)') then
+                                       local ipkey, ipvalue
+                                       for ipkey, ipvalue in pairs(string.split(line[5], ",")) do
+                                               if #ipvalue > 0 then
+                                                       table.insert(peer['allowed_ips'], ipvalue)
+                                               end
+                                       end
+                               end
+                               table.insert(data[line[1]].peers, peer)
+                               enc[line[1]] = enc[line[1]].. "\n\n[Peer]\nEndpoint = " ..line[4].. "\nPublicKey = " ..line[2].. "\nAllowedIPs = " ..line[5]
+                       end
+               end
+       end
 
-  if luci.http.formvalue("status") == "1" then
-    luci.http.prepare_content("application/json")
-    luci.http.write_json(data)
-    return
-  end
+       if luci.http.formvalue("status") == "1" then
+               luci.http.prepare_content("application/json")
+               luci.http.write_json(data)
+               return
+       end
 -%>
 
 <%+header%>
 
 <script type="text/javascript">//<![CDATA[
 
-  function bytes_to_str(bytes) {
-    bytes = parseFloat(bytes);
-    if (bytes < 1) { return "0 B"; }
-    var sizes = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
-    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
-    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
-  };
+       function bytes_to_str(bytes) {
+               bytes = parseFloat(bytes);
+               if (bytes < 1) { return "0 B"; }
+               var sizes = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
+               var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+               return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+       };
 
-  function timestamp_to_str(timestamp) {
-    if (timestamp < 1) {
-      return '<%:Never%>';
-    }
-    var now = new Date();
-    var seconds = (now.getTime() / 1000) - timestamp;
-    var ago = "";
-    if (seconds < 60) {
-      ago = parseInt(seconds) + '<%:s ago%>';
-    } else if (seconds < 3600) {
-      ago = parseInt(seconds / 60) + '<%:m ago%>';
-    } else if (seconds < 86401) {
-      ago = parseInt(seconds / 3600) + '<%:h ago%>';
-    } else {
-      ago = '<%:over a day ago%>';
-    }
-    var t = new Date(timestamp * 1000);
-    return t.toUTCString() + ' (' + ago + ')';
-  }
+       function timestamp_to_str(timestamp) {
+               if (timestamp < 1) {
+                       return '<%:Never%>';
+               }
+               var now = new Date();
+               var seconds = (now.getTime() / 1000) - timestamp;
+               var ago = "";
+               if (seconds < 60) {
+                       ago = parseInt(seconds) + '<%:s ago%>';
+               } else if (seconds < 3600) {
+                       ago = parseInt(seconds / 60) + '<%:m ago%>';
+               } else if (seconds < 86401) {
+                       ago = parseInt(seconds / 3600) + '<%:h ago%>';
+               } else {
+                       ago = '<%:over a day ago%>';
+               }
+               var t = new Date(timestamp * 1000);
+               return t.toUTCString() + ' (' + ago + ')';
+       }
 
-  XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 },
-   function(x, data) {
-    for (var key in data) {
-      if (!data.hasOwnProperty(key)) { continue; }
-      var ifname = key;
-      var iface = data[key];
-      var s = "";
-      if (iface.public_key == '(none)') {
-        s += '<em><%:Interface does not have a public key!%></em>';
-      } else {
-        s += String.format(
-          '<strong><%:Public Key%>: </strong>%s',
-          iface.public_key
-        );
-      }
-      if (iface.listen_port > 0) {
-        s += String.format(
-          '<br /><strong><%:Listen Port%>: </strong>%s',
-          iface.listen_port
-        );
-      }
-      if (iface.fwmark != 'off') {
-        s += String.format(
-          '<br /><strong><%:Firewall Mark%>: </strong>%s',
-          iface.fwmark
-        );
-      }
-      document.getElementById(ifname + "_info").innerHTML = s;
-      for (var i = 0, ilen = iface.peers.length; i < ilen; i++) {
-        var peer = iface.peers[i];
-        var s = String.format(
-          '<strong><%:Public Key%>: </strong>%s',
-          peer.public_key
-        );
-        if (peer.endpoint != '(none)') {
-          s += String.format(
-            '<br /><strong><%:Endpoint%>: </strong>%s',
-            peer.endpoint
-          );
-        }
-        if (peer.allowed_ips.length > 0) {
-          s += '<br /><strong><%:Allowed IPs%>:</strong>';
-          for (var k = 0, klen = peer.allowed_ips.length; k < klen; k++) {
-            s += '<br />&nbsp;&nbsp;&bull;&nbsp;' + peer.allowed_ips[k];
-          }
-        }
-        if (peer.persistent_keepalive != 'off') {
-          s += String.format(
-            '<br /><strong><%:Persistent Keepalive%>: </strong>%ss',
-            peer.persistent_keepalive
-          );
-        }
-        var icon = '<img src="<%=resource%>/icons/tunnel_disabled.png" />';
-        var now = new Date();
-        if (((now.getTime() / 1000) - peer.latest_handshake) < 140) {
-          icon = '<img src="<%=resource%>/icons/tunnel.png" />';
-        }
-        s += String.format(
-          '<br /><strong><%:Latest Handshake%>: </strong>%s',
-          timestamp_to_str(peer.latest_handshake)
-        );
-        s += String.format(
-          '<br /><strong><%:Data Received%>: </strong>%s' +
-          '<br /><strong><%:Data Transmitted%>: </strong>%s',
-          bytes_to_str(peer.transfer_rx),
-          bytes_to_str(peer.transfer_tx)
-        );
-        document.getElementById(ifname + "_" + peer.public_key + "_icon").innerHTML = icon;
-        document.getElementById(ifname + "_" + peer.public_key + "_info").innerHTML = s;
-      }
-    }
-  });
+       function toggle_qrcode(iface) {
+               var view = document.getElementById(iface.name);
+               if (view.style.display === "none") {
+                       view.style.display = "block";
+               } else {
+                       view.style.display = "none";
+               }
+       }
+
+       XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 },
+       function(x, data) {
+               for (var key in data) {
+                       if (!data.hasOwnProperty(key)) { continue; }
+                       var ifname = key;
+                       var iface = data[key];
+                       var s = "";
+                       if (iface.public_key == '(none)') {
+                               s += '<em><%:Interface does not have a public key!%></em>';
+                       } else {
+                               s += String.format(
+                                       '<strong><%:Public Key%>: </strong>%s',
+                                       iface.public_key
+                               );
+                       }
+                       if (iface.listen_port > 0) {
+                               s += String.format(
+                                       '<br /><strong><%:Listen Port%>: </strong>%s',
+                                       iface.listen_port
+                               );
+                       }
+                       if (iface.fwmark != 'off') {
+                               s += String.format(
+                                       '<br /><strong><%:Firewall Mark%>: </strong>%s',
+                                       iface.fwmark
+                               );
+                       }
+                       document.getElementById(ifname + "_info").innerHTML = s;
+                       for (var i = 0, ilen = iface.peers.length; i < ilen; i++) {
+                               var peer = iface.peers[i];
+                               var s = String.format(
+                                       '<strong><%:Public Key%>: </strong>%s',
+                                       peer.public_key
+                               );
+                               if (peer.endpoint != '(none)') {
+                                       s += String.format(
+                                               '<br /><strong><%:Endpoint%>: </strong>%s',
+                                               peer.endpoint
+                                       );
+                               }
+                               if (peer.allowed_ips.length > 0) {
+                                       s += '<br /><strong><%:Allowed IPs%>:</strong>';
+                                       for (var k = 0, klen = peer.allowed_ips.length; k < klen; k++) {
+                                               s += '<br />&#160;&#160;&#8226;&#160;' + peer.allowed_ips[k];
+                                       }
+                               }
+                               if (peer.persistent_keepalive != 'off') {
+                                       s += String.format(
+                                               '<br /><strong><%:Persistent Keepalive%>: </strong>%ss',
+                                               peer.persistent_keepalive
+                                       );
+                               }
+                               var icon = '<img src="<%=resource%>/icons/tunnel_disabled.png" />';
+                               var now = new Date();
+                               if (((now.getTime() / 1000) - peer.latest_handshake) < 140) {
+                                       icon = '<img src="<%=resource%>/icons/tunnel.png" />';
+                               }
+                               s += String.format(
+                                       '<br /><strong><%:Latest Handshake%>: </strong>%s',
+                                       timestamp_to_str(peer.latest_handshake)
+                               );
+                               s += String.format(
+                                       '<br /><strong><%:Data Received%>: </strong>%s' +
+                                       '<br /><strong><%:Data Transmitted%>: </strong>%s',
+                                       bytes_to_str(peer.transfer_rx),
+                                       bytes_to_str(peer.transfer_tx),
+                               );
+                               document.getElementById(ifname + "_" + peer.public_key + "_icon").innerHTML = icon;
+                               document.getElementById(ifname + "_" + peer.public_key + "_info").innerHTML = s;
+                       }
+               }
+       });
 //]]></script>
 
 <h2>WireGuard Status</h2>
 
-<fieldset class="cbi-section">
+<div class="cbi-section">
 <%-
+local ikey, iface
 for ikey, iface in pairs(data) do
-  -%>
-  <legend><%:Interface%> <%=ikey%></legend>
-  <div class="table" width="100%" cellspacing="10">
-    <div class="tr">
-      <div class="td" width="33%" style="vertical-align:top"><%:Configuration%></div>
-      <div class="td">
-        <div class="table">
-          <div class="tr">
-            <div class="td" id="<%=ikey%>_icon" style="width:16px; text-align:center; padding:3px">
-              &nbsp;
-            </div>
-            <div class="td" id="<%=ikey%>_info" style="vertical-align:middle; padding: 3px">
-              <em><%:Collecting data...%></em>
-            </div>
-        </div></div>
-      </div>
-    </div>
-  <%-
-  local cur = uci.cursor()
-  for pkey, peer in pairs(iface.peers) do
-    local desc, tmp_desc, pub_key = "", "", ""
-    cur:foreach("network", "wireguard_" .. ikey, function(s)
-      local tmp_desc, pub_key = "", ""
-      for key, value in pairs(s) do
-        if key == "description" then
-          tmp_desc = value
-        end
-        if value == peer.public_key then
-          pub_key = value
-        end
-        if pub_key == peer.public_key and tmp_desc ~= "" then
-          desc = ': ' .. tmp_desc
-        end
-      end
-    end)
-    -%>
-    <div class="tr">
-      <div class="td" width="33%" style="vertical-align:top"><%:Peer%><%=desc%></div>
-      <div class="td">
-        <div class="table">
-          <div class="tr">
-            <div class="td" id="<%=ikey%>_<%=peer.public_key%>_icon" style="width:16px; text-align:center; padding:3px">
-              <img src="<%=resource%>/icons/tunnel_disabled.png" /><br />
-              <small>?</small>
-            </div>
-            <div class="td" id="<%=ikey%>_<%=peer.public_key%>_info" style="vertical-align:middle; padding: 3px">
-              <em><%:Collecting data...%></em>
-            </div>
-        </div></div>
-      </div>
-    </div>
-    <%-
-  end
-  -%>
-  </div>
-  <%-
+-%>
+       <h3><%:Interface%> <%=ikey%></h3>
+       <div class="cbi-value" id="button" style="padding: 5px">
+               <input class="cbi-button cbi-button-apply" type="button" name="qrcode_<%=ikey%>" value="<%:Show/Hide QR-Code%>" onclick="toggle_qrcode(this)" />
+       </div>
+<%-
+       local qrcode
+       if fs.access("/usr/bin/qrencode") then
+               if enc[ikey]:sub(26,31) ~= "(none)" then
+                       qrcode = luci.sys.exec("/usr/bin/qrencode --inline --8bit --type=SVG --output=- '" ..enc[ikey].. "'")
+               end
+       else
+               qrcode = "<em>For QR-Code support please install package 'qrencode'!</em>"
+       end
+-%>
+       <div class="cbi-value-title">
+               <span class="cbi-value" style="display: none" id="qrcode_<%=ikey%>"><%=qrcode%></span>
+       </div>
+       <div class="cbi-section-node">
+               <div class="table cbi-section-table">
+                       <div class="tr cbi-section-table-row" style="text-align: left;">
+                               <div class="td" style="text-align: left; vertical-align:top"><%:Configuration%></div>
+                               <div class="td" style="flex: 0 1 90%; text-align: left;">
+                                       <div class="table cbi-section-table" style="border: 0px;">
+                                               <div class="tr cbi-section-table-row" style="text-align: left; border: 0px;">
+                                                       <div class="td" id="<%=ikey%>_icon" style="width: 22px; text-align: left; border-top: 0px; padding: 3px;">&#160;</div>
+                                                       <div class="td" id="<%=ikey%>_info" style="flex: 0 1 90%; text-align: left; vertical-align:middle; padding: 3px; border-top: 0px;"><em><%:Collecting data...%></em></div>
+                                               </div>
+                                       </div>
+                               </div>
+                       </div>
+       <%-
+       local cur = uci.cursor()
+       local pkey, peer
+       for pkey, peer in pairs(iface.peers) do
+               local desc
+               cur:foreach("network", "wireguard_" .. ikey, function(s)
+                       local key, value, tmp_desc, pub_key
+                       for key, value in pairs(s) do
+                               if key == "description" then
+                                       tmp_desc = value
+                               end
+                               if value == peer.public_key then
+                                       pub_key = value
+                               end
+                               if pub_key and tmp_desc then
+                                       desc = ': ' ..tmp_desc
+                               end
+                       end
+               end)
+       -%>
+                       <div class="tr cbi-section-table-row" style="text-align: left;">
+                               <div class="td" style="text-align: left; vertical-align:top"><%:Peer%><%=desc%></div>
+                               <div class="td" style="flex: 0 1 90%; text-align: left;">
+                                       <div class="table cbi-section-table" style="border: 0px">
+                                               <div class="tr cbi-section-table-row" style="border: 0px;">
+                                                       <div class="td" id="<%=ikey%>_<%=peer.public_key%>_icon" style="width:16px; text-align: left; padding: 3px;border-top: 0px;">
+                                                               <img src="<%=resource%>/icons/tunnel_disabled.png" />
+                                                               <small>?</small>
+                                                       </div>
+                                                       <div class="td" id="<%=ikey%>_<%=peer.public_key%>_info" style="flex: 0 1 90%; text-align: left; vertical-align:middle; padding: 3px;border-top: 0px;"><em><%:Collecting data...%></em></div>
+                                               </div>
+                                       </div>
+                               </div>
+                       </div>
+               <%-
+       end
+       -%>
+               </div>
+       </div>
+       <%-
 end
 -%>
-</fieldset>
+</div>
 
 <%+footer%>