Merge pull request #5323 from lvoegl/luci-proto-wireguard-client-qrcode

luci-app-wireguard: convert to JavaScript

1 files changed, 93 insertions, 0 deletions

diff --git a/protocols/luci-proto-wireguard/htdocs/luci-static/resources/protocol/wireguard.js b/protocols/luci-proto-wireguard/htdocs/luci-static/resources/protocol/wireguard.js
index e7e69a3d5b..51f9accf46 100644
--- a/protocols/luci-proto-wireguard/htdocs/luci-static/resources/protocol/wireguard.js
+++ b/protocols/luci-proto-wireguard/htdocs/luci-static/resources/protocol/wireguard.js
@@ -11,6 +11,13 @@ var generateKey = rpc.declare({
 	expect: { keys: {} }
 });
 
+var generateQrCode = rpc.declare({
+	object: 'luci.wireguard',
+	method: 'generateQrCode',
+	params: ['privkey', 'psk', 'allowed_ips'],
+	expect: { qr_code: '' }
+});
+
 function validateBase64(section_id, value) {
 	if (value.length == 0)
 		return true;
@@ -24,6 +31,24 @@ function validateBase64(section_id, value) {
 	return true;
 }
 
+function findSection(sections, name) {
+	for (var i = 0; i < sections.length; i++) {
+		var section = sections[i];
+		if (section['.name'] == name) return section;
+	}
+
+	return null;
+}
+
+function generateDescription(name, texts) {
+	return E('li', { 'style': 'color: inherit;' }, [
+		E('span', name),
+		E('ul', texts.map(function (text) {
+			return E('li', { 'style': 'color: inherit;' }, text);
+		}))
+	]);
+}
+
 return network.registerProtocol('wireguard', {
 	getI18n: function() {
 		return _('WireGuard VPN');
@@ -131,6 +156,74 @@ return network.registerProtocol('wireguard', {
 		o.datatype = 'string';
 		o.optional = true;
 
+		o = ss.option(form.Value, 'description', _('QR-Code'));
+		o.render = L.bind(function (view, section_id) {
+			var sections = uci.sections('network');
+			var client = findSection(sections, section_id);
+			var serverName = this.getIfname();
+			var server = findSection(sections, serverName);
+
+			var interfaceTexts = [
+				'PrivateKey: ' + _('A random, on the fly generated "PrivateKey", the key will not be saved on the router')
+			];
+
+			var peerTexts = [
+				'PublicKey: ' + _('The "PublicKey" of that wg interface'),
+				'AllowedIPs: ' + _('The list of this client\'s "AllowedIPs" or "0.0.0.0/0, ::/0" if not configured'),
+				'PresharedKey: ' + _('If available, the client\'s "PresharedKey"')
+			];
+
+			var description = [
+				E('span', '%q<br>%q'.format(_('If there are any unsaved changes for this client, please save the configuration before generating a QR-Code'),
+					_('The QR-Code works per wg interface, it will be refreshed with every button click and transfers the following information:'))),
+				E('ul', [
+					generateDescription('[Interface]', interfaceTexts),
+					generateDescription('[Peer]', peerTexts)
+				])
+			];
+
+			return E('div', { 'class': 'cbi-value' }, [
+				E('label', { 'class': 'cbi-value-title' }, _('QR-Code')),
+				E('div', {
+					'style': 'display: flex; flex-direction: column; align-items: baseline;',
+					'id': 'qr-' + section_id
+				}, [
+					E('button', {
+						'class': 'btn cbi-button cbi-button-apply',
+						'click': ui.createHandlerFn(this, function (server, client, section_id) {
+							var qrDiv = document.getElementById('qr-' + section_id);
+							var qrEl = qrDiv.querySelector('value');
+							var qrBtn = qrDiv.querySelector('button');
+							var qrencodeErr = '<b>%q</b>'.format(
+								_('For QR-Code support please install the qrencode package!'));
+
+							if (qrEl.innerHTML != '' && qrEl.innerHTML != qrencodeErr) {
+								qrEl.innerHTML = '';
+								qrBtn.innerHTML = _('Generate New QR-Code')
+							} else {
+								qrEl.innerHTML = _('Loading QR-Code...');
+
+								generateQrCode(server.private_key, client.preshared_key,
+									client.allowed_ips).then(function (qrCode) {
+										if (qrCode == '') {
+											qrEl.innerHTML = qrencodeErr;
+										} else {
+											qrEl.innerHTML = qrCode;
+											qrBtn.innerHTML = _('Hide QR-Code');
+										}
+									});
+							}
+						}, server, client, section_id)
+					}, _('Generate new QR-Code')),
+					E('value', {
+						'class': 'cbi-section',
+						'style': 'margin: 0;'
+					}),
+					E('div', { 'class': 'cbi-value-description' }, description)
+				])
+			]);
+		}, this);
+
 		o = ss.option(form.Value, 'public_key', _('Public Key'), _('Required. Base64-encoded public key of peer.'));
 		o.validate = validateBase64;
 		o.rmempty = false;