Merge pull request #2195 from dibdot/wg-qrcode

luci-app-wireguard: add QR Code support plus fixes
This commit is contained in:
Dirk Brenken 2018-10-05 12:30:02 +02:00 committed by GitHub
commit bc974aab96
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 241 additions and 201 deletions

View file

@ -4,8 +4,10 @@
-%> -%>
<% <%
local uci = uci.cursor()
local data = { } local data = { }
local last_device = "" local last_device = ""
local enc = { }
local wg_dump = io.popen("wg show all dump") local wg_dump = io.popen("wg show all dump")
if wg_dump then if wg_dump then
@ -21,6 +23,17 @@
fwmark = line[5], fwmark = line[5],
peers = { } 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 else
local peer = { local peer = {
public_key = line[2], public_key = line[2],
@ -32,6 +45,7 @@
persistent_keepalive = line[9] persistent_keepalive = line[9]
} }
if not (line[4] == '(none)') then if not (line[4] == '(none)') then
local ipkey, ipvalue
for ipkey, ipvalue in pairs(string.split(line[5], ",")) do for ipkey, ipvalue in pairs(string.split(line[5], ",")) do
if #ipvalue > 0 then if #ipvalue > 0 then
table.insert(peer['allowed_ips'], ipvalue) table.insert(peer['allowed_ips'], ipvalue)
@ -39,6 +53,7 @@
end end
end end
table.insert(data[line[1]].peers, peer) 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 end
end end
@ -82,6 +97,15 @@
return t.toUTCString() + ' (' + ago + ')'; return t.toUTCString() + ' (' + ago + ')';
} }
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 }, XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 },
function(x, data) { function(x, data) {
for (var key in data) { for (var key in data) {
@ -125,7 +149,7 @@
if (peer.allowed_ips.length > 0) { if (peer.allowed_ips.length > 0) {
s += '<br /><strong><%:Allowed IPs%>:</strong>'; s += '<br /><strong><%:Allowed IPs%>:</strong>';
for (var k = 0, klen = peer.allowed_ips.length; k < klen; k++) { for (var k = 0, klen = peer.allowed_ips.length; k < klen; k++) {
s += '<br />&nbsp;&nbsp;&bull;&nbsp;' + peer.allowed_ips[k]; s += '<br />&#160;&#160;&#8226;&#160;' + peer.allowed_ips[k];
} }
} }
if (peer.persistent_keepalive != 'off') { if (peer.persistent_keepalive != 'off') {
@ -147,7 +171,7 @@
'<br /><strong><%:Data Received%>: </strong>%s' + '<br /><strong><%:Data Received%>: </strong>%s' +
'<br /><strong><%:Data Transmitted%>: </strong>%s', '<br /><strong><%:Data Transmitted%>: </strong>%s',
bytes_to_str(peer.transfer_rx), bytes_to_str(peer.transfer_rx),
bytes_to_str(peer.transfer_tx) bytes_to_str(peer.transfer_tx),
); );
document.getElementById(ifname + "_" + peer.public_key + "_icon").innerHTML = icon; document.getElementById(ifname + "_" + peer.public_key + "_icon").innerHTML = icon;
document.getElementById(ifname + "_" + peer.public_key + "_info").innerHTML = s; document.getElementById(ifname + "_" + peer.public_key + "_info").innerHTML = s;
@ -158,32 +182,48 @@
<h2>WireGuard Status</h2> <h2>WireGuard Status</h2>
<fieldset class="cbi-section"> <div class="cbi-section">
<%- <%-
local ikey, iface
for ikey, iface in pairs(data) do for ikey, iface in pairs(data) do
-%> -%>
<legend><%:Interface%> <%=ikey%></legend> <h3><%:Interface%> <%=ikey%></h3>
<div class="table" width="100%" cellspacing="10"> <div class="cbi-value" id="button" style="padding: 5px">
<div class="tr"> <input class="cbi-button cbi-button-apply" type="button" name="qrcode_<%=ikey%>" value="<%:Show/Hide QR-Code%>" onclick="toggle_qrcode(this)" />
<div class="td" width="33%" style="vertical-align:top"><%:Configuration%></div> </div>
<div class="td"> <%-
<div class="table"> local qrcode
<div class="tr"> if fs.access("/usr/bin/qrencode") then
<div class="td" id="<%=ikey%>_icon" style="width:16px; text-align:center; padding:3px"> if enc[ikey]:sub(26,31) ~= "(none)" then
&nbsp; 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 class="td" id="<%=ikey%>_info" style="vertical-align:middle; padding: 3px">
<em><%:Collecting data...%></em>
</div> </div>
</div></div>
</div> </div>
</div> </div>
<%- <%-
local cur = uci.cursor() local cur = uci.cursor()
local pkey, peer
for pkey, peer in pairs(iface.peers) do for pkey, peer in pairs(iface.peers) do
local desc, tmp_desc, pub_key = "", "", "" local desc
cur:foreach("network", "wireguard_" .. ikey, function(s) cur:foreach("network", "wireguard_" .. ikey, function(s)
local tmp_desc, pub_key = "", "" local key, value, tmp_desc, pub_key
for key, value in pairs(s) do for key, value in pairs(s) do
if key == "description" then if key == "description" then
tmp_desc = value tmp_desc = value
@ -191,34 +231,34 @@ for ikey, iface in pairs(data) do
if value == peer.public_key then if value == peer.public_key then
pub_key = value pub_key = value
end end
if pub_key == peer.public_key and tmp_desc ~= "" then if pub_key and tmp_desc then
desc = ': ' .. tmp_desc desc = ': ' ..tmp_desc
end end
end end
end) end)
-%> -%>
<div class="tr"> <div class="tr cbi-section-table-row" style="text-align: left;">
<div class="td" width="33%" style="vertical-align:top"><%:Peer%><%=desc%></div> <div class="td" style="text-align: left; vertical-align:top"><%:Peer%><%=desc%></div>
<div class="td"> <div class="td" style="flex: 0 1 90%; text-align: left;">
<div class="table"> <div class="table cbi-section-table" style="border: 0px">
<div class="tr"> <div class="tr cbi-section-table-row" style="border: 0px;">
<div class="td" id="<%=ikey%>_<%=peer.public_key%>_icon" style="width:16px; text-align:center; padding:3px"> <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" /><br /> <img src="<%=resource%>/icons/tunnel_disabled.png" />
<small>?</small> <small>?</small>
</div> </div>
<div class="td" id="<%=ikey%>_<%=peer.public_key%>_info" style="vertical-align:middle; padding: 3px"> <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>
<em><%:Collecting data...%></em> </div>
</div> </div>
</div></div>
</div> </div>
</div> </div>
<%- <%-
end end
-%> -%>
</div> </div>
</div>
<%- <%-
end end
-%> -%>
</fieldset> </div>
<%+footer%> <%+footer%>