QR code avilable at admin node

README.md

@@ -6,17 +6,20 @@ Currently in developing mode, Continous updated may encounter. :sweat_smile:
 Missing Nodes ? : To avoid long names, Node names are updated. If some node are missing after update please re-configure the update node, it will not change again. 
 
 ## To Connect with Whatsapp 
-1. Deploy any whatsapp node along with whatsappLink node.
-2. look in Console/ Bash/ terminal.
-3. whatsappLink node will initilize, connect with whatsapp and generate a QR code it terminal.
-4. Scan the QR code with your Whatsapp Mobile App (Go to settings > Linked device > Scan & Connect).
-5. Done - Whatsapp Connected.
 
- *It will create a Whatsapp Web instance in your machine and store your session locally in Node-RED.*
+1. Deploy whatsapp admin node (along with whatsappLink node).
+2. whatsappLink node will initilize, connect with whatsapp and generate a <b>QR code below the Admin Node </b> and in terminal also.
+3. Scan the QR code with your Whatsapp Mobile App (Go to settings > Linked device > Scan & Connect).
+4. Done - Whatsapp Connected.
+
+ *It will create a Whatsapp Web instance in your machine and store your session locally in Node-RED. All session is store in `.wwebjs_auth` folder*
+ 
 
 
 ## Nodes
-1. **Whatsapp Admin** : Node used for basic status of whatsapp.
+1. **Whatsapp Admin** : Node used for  first time users to connect with whatsapp and other admin related tasks. </br>
+Admin Node generate QR Code just below the node for easy connection with whatsapp.
+
     
 
     | Inputs | Description           |

admin.html

@@ -1,18 +1,58 @@
 <script type="text/javascript">
-    RED.nodes.registerType('admin',{
+    (function () 
-        category: 'whatsapp',
+    { 
-        color: '#25D366',
+        let qrImageWidth = "300";
-        defaults: {
+        RED.nodes.registerType('admin',{
-            name: {value:"whatsapp-admin"},
+            category: 'whatsapp',
-            whatsappLink: {value:"", type: "whatsappLink"}
+            color: '#25D366',
-        },
+            defaults: {
-        outputs:1,
+                name: {value:"WA Admin"},
-        inputs:1,
+                whatsappLink: {value:"", type: "whatsappLink"}
-        icon: 'whatsappLink.svg',
+            },
-        label: function() {
+            outputs:1,
-            return this.name||"admin";
+            inputs:1,
-        }
+            icon: 'whatsappLink.svg',
-    });
+            label: function() {
+                return this.name||"admin";
+            }
+        });
+
+        let removeQrCode = function(NodeID) {
+            let qrImageElement = document.getElementById("whatsappLink-QRcode-" + NodeID);
+            if(qrImageElement){
+                qrImageElement.remove();
+            }
+        };
+
+        var creatImageContainer = function(NodeID, qrImage) {
+            let img = document.getElementById("whatsappLink-QRcode-" + NodeID)
+            if (!img) {
+                const container = document.getElementById(NodeID)
+                if (!container) { return }
+                const img = document.createElementNS("http://www.w3.org/2000/svg", 'image')
+                img.setAttribute('id', "whatsappLink-QRcode-" + NodeID)
+                img.setAttribute('x', '0')
+                img.setAttribute('y', '45')
+                img.setAttribute('width', qrImageWidth)
+                container.insertBefore(img, container.lastChild.nextSibling)
+            }
+        };
+
+        var renderQrCode = function(id, qrCodeImage){
+            creatImageContainer(id, qrCodeImage)
+            let qrImage = document.getElementById("whatsappLink-QRcode-" + id);
+            qrImage.setAttribute('href', qrCodeImage)
+            qrImage.addEventListener("click", ()=> removeQrCode(id), {once:true})
+        };
+
+        RED.comms.subscribe("whatsappLinkQrCode", function (e, msg) {
+            if (msg.image === null){
+                removeQrCode(msg.id);
+            }
+            renderQrCode(msg.id, msg.image);   
+        });
+
+    })()
 </script>
 
 <script type="text/html" data-template-name="admin">
@@ -30,6 +70,9 @@
 <script type="text/markdown" data-help-name="admin">
 Node used for Admin related tasks of whatsapp.
 
+Node used for first time users to connect with whatsapp and other admin related tasks. </br>
+Admin Node generate QR Code just below the node for easy connection with whatsapp.
+
 | Inputs | Description           |
 |--------|--------------         |
 | test   | Checks the current status of whatsapp and output the same in `msg.payload`|

admin.js

@@ -60,20 +60,30 @@ module.exports = function(RED) {
 
         
         //whatsapp Status Parameters----
+        SetStatus("Connecting whatsapp...", "yellow");
+
         node.waClient.on('qr', (qr) => {
-            SetStatus("QR Code Generated", "yellow");
+            SetStatus("Scan QR code to connect.", "yellow");
             QRCode.toDataURL(qr, function(err, url){
                 msg = {payload : url};
                 node.send(msg);
+                let qrImageWithID = {};
+                qrImageWithID.id = node.id;
+                qrImageWithID.image = url;
+                RED.comms.publish("whatsappLinkQrCode", qrImageWithID);
             });
         });
         
         node.waClient.on('auth_failure', () => {
-            SetStatus('Not Connected','red');
+            SetStatus('Connection Fail.','red');
         });
                 
         node.waClient.on('loading_screen', () => {
             SetStatus('Connecting...','yellow');
+            let qrImageWithID = {};
+            qrImageWithID.id = node.id;
+            qrImageWithID.image = null;
+            RED.comms.publish("whatsappLinkQrCode", qrImageWithID);
         });
         
         node.waClient.on('ready', () => {

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "node-red-contrib-whatsapp-link",
-  "version": "0.1.201",
+  "version": "0.1.25",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "node-red-contrib-whatsapp-link",
-      "version": "0.1.201",
+      "version": "0.1.25",
       "license": "ISC",
       "dependencies": {
+        "puppeteer": "latest",
         "qrcode": "^1.5.1",
         "whatsapp-web.js": "^1.18.4"
       },

package.json

@@ -29,6 +29,7 @@
     }
   },
   "dependencies": {
+    "puppeteer": "latest",
     "qrcode": "^1.5.1",
     "whatsapp-web.js": "^1.18.4"
   },

whatsappLink.js

@@ -18,7 +18,6 @@ module.exports = function(RED) {
                 WAnode.log("Status : Initializing Whatsapp..");
             }
             catch(e) {
-                WAnode.log(`Error : ${e}`);
                 WAnode.log(`Error : Unable to start Whatsapp. Try Again..`);
             };
 
@@ -56,8 +55,7 @@ module.exports = function(RED) {
                 }
             }
             catch(e){
-                WAnode.log(`Error : ${e}`);
+                WAnode.log(`Error : Connection is slow...`);
-                WAnode.log(`Error : Need to restart the Node.`);
             }
         };
         let connectionSetupID = setInterval(connectionSetup, 10000);