From 701d7acd5e4015bb38c0b3410b1d293dfce3abb7 Mon Sep 17 00:00:00 2001
From: rawee <ravimishra91@gmail.com>
Date: Sun, 25 Dec 2022 00:59:07 +0530
Subject: [PATCH] QR code avilable at admin node

---
 README.md         | 17 +++++++-----
 admin.html        | 71 +++++++++++++++++++++++++++++++++++++----------
 admin.js          | 14 ++++++++--
 package-lock.json |  5 ++--
 package.json      |  1 +
 whatsappLink.js   |  4 +--
 6 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 0f1a50b..1db3ecb 100644
--- a/README.md
+++ b/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           |
diff --git a/admin.html b/admin.html
index 94e5c98..d3eadfa 100644
--- a/admin.html
+++ b/admin.html
@@ -1,18 +1,58 @@
 <script type="text/javascript">
-    RED.nodes.registerType('admin',{
-        category: 'whatsapp',
-        color: '#25D366',
-        defaults: {
-            name: {value:"whatsapp-admin"},
-            whatsappLink: {value:"", type: "whatsappLink"}
-        },
-        outputs:1,
-        inputs:1,
-        icon: 'whatsappLink.svg',
-        label: function() {
-            return this.name||"admin";
-        }
-    });
+    (function () 
+    { 
+        let qrImageWidth = "300";
+        RED.nodes.registerType('admin',{
+            category: 'whatsapp',
+            color: '#25D366',
+            defaults: {
+                name: {value:"WA Admin"},
+                whatsappLink: {value:"", type: "whatsappLink"}
+            },
+            outputs:1,
+            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`|
diff --git a/admin.js b/admin.js
index d42922d..dd25e42 100644
--- a/admin.js
+++ b/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', () => {
diff --git a/package-lock.json b/package-lock.json
index 6c7c22a..2616981 100644
--- a/package-lock.json
+++ b/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"
       },
diff --git a/package.json b/package.json
index cd8b3c6..20aafae 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     }
   },
   "dependencies": {
+    "puppeteer": "latest",
     "qrcode": "^1.5.1",
     "whatsapp-web.js": "^1.18.4"
   },
diff --git a/whatsappLink.js b/whatsappLink.js
index f6e44f6..e8de747 100644
--- a/whatsappLink.js
+++ b/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 : Need to restart the Node.`);
+                WAnode.log(`Error : Connection is slow...`);
             }
         };
         let connectionSetupID = setInterval(connectionSetup, 10000);