add QR codes to wg-quick instructions

2 files changed, 34 insertions, 5 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index 90295f0..5b26576 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -198,13 +198,21 @@ Data.prototype.hide_error = function() {
     $('#params_error').hide();
 }
 
-var ConfigFile = function(name, contents) {
+function format_pre_text(text) {
+    return $('<pre/>').text(text);
+}
+
+var ConfigFile = function(name, text) {
     this.name = name;
-    this.contents = contents;
+    this.text = text;
 }
 
 ConfigFile.prototype.toString = function() {
-    return this.contents;
+    return this.text;
+}
+
+ConfigFile.prototype.format = function() {
+    return format_pre_text(this.toString());
 }
 
 var Script = function(text) {
@@ -215,6 +223,24 @@ Script.prototype.toString = function() {
     return this.text;
 }
 
+Script.prototype.format = function() {
+    return format_pre_text(this.toString());
+}
+
+var QRCode = function(text) {
+    this.text = text;
+}
+
+QRCode.prototype.format = function() {
+    var canvas = $('<canvas/>');
+    var qr = new QRious({
+        element: canvas[0],
+        value: this.text,
+        size: 350
+    });
+    return $('<div class="text-center"/>').append(canvas);
+}
+
 function wg_quick_client_file(data) {
     var path = `/etc/wireguard/${iface}.conf`;
     return new ConfigFile(path,
@@ -401,7 +427,9 @@ var InstructWgQuick = function() {}
 InstructWgQuick.prototype.name = function() { return 'wg-quick'; }
 
 InstructWgQuick.prototype.for_client = function(data) {
-    return [wg_quick_client_file(data)];
+    var config = wg_quick_client_file(data);
+    var qr = new QRCode(config.text);
+    return [config, qr];
 }
 
 InstructWgQuick.prototype.for_server = function(data) {
@@ -450,7 +478,7 @@ function clear_instructors() {
 function format_instructions(instructions) {
     var container = $('<div/>');
     instructions.forEach(function(instruction) {
-        container.append($('<pre/>').text(instruction.toString()));
+        container.append(instruction.format());
     });
     return container;
 }
diff --git a/index.html b/index.html
index fbe10e0..369ee21 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@ navbar:
   icon: home
 custom_js:
   - https://cdn.jsdelivr.net/npm/ipaddr.js@2.0.1/ipaddr.min.js
+  - https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js
   - main.js
 
 params: