Merge pull request #5 from bartbutenaers/master

Button to generate VAPID keypair

Author: webmaxru

package.json

@@ -28,5 +28,5 @@
       "web-push-notification": "web-push-notification.js"
     }
   },
-  "version": "0.0.1"
+  "version": "0.0.2"
 }

vapid-configuration.html

@@ -10,6 +10,31 @@
         },
         label: function () {
             return this.name || this.subject;
+        },
+        oneditprepare: function () {
+            var node = this;
+            
+            $("#node-input-generateKeyPair").click(function () {
+                if ($("#node-config-input-publicKey").val() || $("#node-config-input-privateKey").val()) {
+                    if (!confirm("The current keypair will be overwritten!  Are you sure to continue?")) {
+                        // The user has clicked the 'Cancel' button
+                        return;
+                    }
+                }
+                
+                // Ask the server side flow to generate a new key pair
+                $.getJSON('vapid_configuration/generate_key_pair', function(jsonData) {
+                    // Show the new keys on the config screen
+                    $("#node-config-input-publicKey").val(jsonData.publicKey);
+                    $("#node-config-input-privateKey").val(jsonData.privateKey);
+                    
+                    // Make sure the validators are being triggerd, otherwise the red border will remain around the input fields
+                    $("#node-config-input-publicKey").change();
+                    $("#node-config-input-privateKey").change();
+                }).error(function() {
+                    RED.notify("Cannot create VAPID key pair.  See Node-RED log for more details...", "error");
+                });
+            });
         }
     });
 
@@ -20,6 +45,10 @@
         <label for="node-config-input-subject"><i class="icon-tag"></i> Subject</label>
         <input type="text" id="node-config-input-subject" placeholder="This must be either a URL or a 'mailto:' address.">
     </div>
+    <div class="form-row">
+        <label>&nbsp;</label>
+        <button id="node-input-generateKeyPair"><i class="fa fa-exchange"></i> Generate VAPID keypair</button>
+    </div>
     <div class="form-row">
         <label for="node-config-input-publicKey"><i class="icon-tag"></i> Public Key</label>
         <input type="text" id="node-config-input-publicKey" placeholder="The public VAPID key">
@@ -39,6 +68,9 @@
 </script>
 
 <script type="text/x-red" data-help-name="vapid-configuration">
-    <p>Configuration for VAPID. You can generate the key pair using <code>generateVAPIDKeys()</code> method of <a href="https://www.npmjs.com/package/web-push" target="_blank">web-push</a> library or online here: <a href="https://web-push-codelab.glitch.me/" target="_blank">https://web-push-codelab.glitch.me</a>.</p>
+    <p>Configuration for VAPID. You can generate the key pair using the <i>"Generate VAPID keypair"</i> button or online here: <a href="https://web-push-codelab.glitch.me/" target="_blank">https://web-push-codelab.glitch.me</a>.</p>
+    <p>Read more about the VAPID specification here: <a href="https://tools.ietf.org/html/rfc8292" target="_blank">https://tools.ietf.org/html/rfc8292</a>.</p>
     <p>For Chrome prior to version 52 and some old browsers, you're also still required to include a <code>gcm_sender_id</code> in your web app's manifest.json.</p>
-</script>
+</script>
+
+

vapid-configuration.js

@@ -8,3 +8,33 @@ module.exports = function (RED) {
   }
   RED.nodes.registerType('vapid-configuration', VapidConfigurationNode)
 }
+module.exports = function (RED) {
+  const webpush = require('web-push');
+    
+  function VapidConfigurationNode (config) {
+    RED.nodes.createNode(this, config)
+    this.subject = config.subject
+    this.publicKey = config.publicKey
+    this.privateKey = config.privateKey
+    this.gcmApiKey = config.gcmApiKey
+  }
+  RED.nodes.registerType('vapid-configuration', VapidConfigurationNode)
+  
+  // Make the key pair generation available to the config screen (in the flow editor)
+  RED.httpAdmin.get('/vapid_configuration/generate_key_pair', RED.auth.needsPermission('vapid-configuration.write'), async function(req, res){
+    try {
+      // Generate a VAPID keypair
+      const vapidKeys = webpush.generateVAPIDKeys();
+ 
+      // Return public key and private key to the config screen (since they need to be stored in the node's credentials)
+      res.json({
+        publicKey: vapidKeys.publicKey,
+        privateKey: vapidKeys.privateKey
+      })
+    }
+    catch (err) {
+      console.log("Error while generating VAPID keypair: " + err)
+      res.status(500).json({error: 'Error while generating VAPID keypair'})
+    }
+  });
+}