From acae3b87534dc060e7c04ee7f4e17d842c09800d Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 26 Jun 2023 16:45:34 +0200
Subject: [PATCH] Refactoring

---
 .../Views/Shared/NFC/CheckoutEnd.cshtml       | 58 ++++++++++---------
 BTCPayServer/wwwroot/modal/btcpay.js          | 31 ++++------
 2 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml b/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml
index 368ec900c..babec183f 100644
--- a/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml
+++ b/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml
@@ -21,39 +21,23 @@
         </div>
     </template>
 </template>
-<script type="text/javascript">
+<script>
 class NDEFReaderWrapper {
     constructor() {
         this.onreading = null;
         this.onreadingerror = null;
     }
 
-    async scan( opts) {
-        
+    async scan(opts) {
         if (opts && opts.signal){
-            opts.signal.addEventListener("abort", () => {
-                window.parent.postMessage("abortNfc", "*");
+            opts.signal.addEventListener('abort', () => {
+                window.parent.postMessage('nfc:abort', '*');
             });
         }
-        window.parent.postMessage("startNfcScan", "*");
+        window.parent.postMessage('nfc:startScan', '*');
     }
 }
 
-window.addEventListener("message", (event) => {
-    const { action, data } = event.data;
-    if (action === "nfcData") {
-        if (ndef.onreading) {
-            ndef.onreading({ message: { records: [{ data }] } });
-        }
-    } else if (action === "nfcError") {
-        if (ndef.onreadingerror) {
-            ndef.onreadingerror();
-        }
-    }
-});
-
-
-
 Vue.component("lnurl-withdraw-checkout", {
     template: "#lnurl-withdraw-template",
     props: {
@@ -100,7 +84,7 @@ Vue.component("lnurl-withdraw-checkout", {
     data () {
         return {
             url: @Safe.Json(Context.Request.GetAbsoluteUri(Url.Action("SubmitLNURLWithdrawForInvoice", "NFC"))),
-            supported: 'NDEFReader' in window ,
+            supported: 'NDEFReader' in window,
             scanning: false,
             submitting: false,
             permissionGranted: false,
@@ -166,7 +150,8 @@ Vue.component("lnurl-withdraw-checkout", {
             this.submitting = false;
             this.scanning = true;
             try {
-                const ndef = window.self === window.top?  new NDEFReader() : new NDEFReaderWrapper();
+                const inModal = window.self !== window.top;
+                const ndef = inModal ? new NDEFReaderWrapper() : new NDEFReader();
                 this.readerAbortController = new AbortController()
                 this.readerAbortController.signal.onabort = () => {
                     this.scanning = false;
@@ -174,17 +159,33 @@ Vue.component("lnurl-withdraw-checkout", {
                 
                 await ndef.scan({ signal: this.readerAbortController.signal })
 
-                ndef.onreadingerror = () => {
-                    this.errorMessage = "Could not read NFC tag";
-                }
+                ndef.onreadingerror = this.reportNfcError
 
-                ndef.onreading = async ({ message, serialNumber }) => {
+                ndef.onreading = async ({ message }) => {
                     const record = message.records[0]
                     const textDecoder = new TextDecoder('utf-8')
                     const lnurl = textDecoder.decode(record.data)
                     await this.sendData(lnurl)
                 }
                 
+                if (inModal) {
+                    // receive messages from iframe
+                    window.addEventListener('message', async event => {
+                        // deny messages from other origins
+                        if (event.origin !== window.location.origin) return
+                        
+                        const { action, data } = event.data
+                        switch (action) {
+                            case 'nfc:data':
+                                await this.sendData(data)
+                                break;
+                            case 'nfc:error':
+                                this.reportNfcError()
+                                break;
+                        }
+                    });
+                }
+                
                 // we came here, so the user must have allowed NFC access
                 this.permissionGranted = true;
             } catch (error) {
@@ -213,6 +214,9 @@ Vue.component("lnurl-withdraw-checkout", {
                 this.errorMessage = error;
             }
             this.submitting = false;
+        },
+        reportNfcError() {
+            this.errorMessage = 'Could not read NFC tag';    
         }
     }
 });
diff --git a/BTCPayServer/wwwroot/modal/btcpay.js b/BTCPayServer/wwwroot/modal/btcpay.js
index 63310d9a3..753e52ef3 100644
--- a/BTCPayServer/wwwroot/modal/btcpay.js
+++ b/BTCPayServer/wwwroot/modal/btcpay.js
@@ -62,7 +62,6 @@
     var onModalWillLeaveMethod = function () { };
     var onModalReceiveMessageMethod = function (event) { };
 
-    var nfcSupportAvailable = "NDEFReader" in window;
     function showFrame() {
         if (window.document.getElementsByName('btcpay').length === 0) {
             window.document.body.appendChild(iframe);
@@ -97,35 +96,28 @@
         readerAbortController.signal.onabort = () => {
             this.scanning = false;
         };
-        ndef.scan({signal:readerAbortController.signal}).then(() => {
-            console.log("> Scan started successfully.");
-            ndef.onreading = (event) => {
+        ndef.scan({ signal:readerAbortController.signal }).then(() => {
+            ndef.onreading = event => {
                 const message = event.message;
                 const record = message.records[0];
                 const textDecoder = new TextDecoder('utf-8');
-                const lnurl = textDecoder.decode(record.data);
+                const data = textDecoder.decode(record.data);
 
                 // Send NFC data back to the iframe
                 if (iframe) {
-                    iframe.contentWindow.postMessage({ action: "nfcData", data: lnurl }, "*");
+                    iframe.contentWindow.postMessage({ action: 'nfc:data', data }, '*');
                 }
             };
-            ndef.onerror = () => {
-                console.log("Error! Cannot read data from the NFC tag. Try another one.");
-
+            ndef.onreadingerror = () => {
                 // Send error message back to the iframe
                 if (iframe) {
-                    iframe.contentWindow.postMessage({ action: "nfcError" }, "*");
+                    iframe.contentWindow.postMessage({ action: 'nfc:error' }, '*');
                 }
             };
-        }).catch(error => {
-            console.log(`Argh! ${error}`);
-        });
+        }).catch(console.error);
     }
     
     function receiveMessage(event) {
-        var uri;
-
         if (!origin.startsWith(event.origin) || !showingInvoice) {
             return;
         }
@@ -133,16 +125,14 @@
             hideFrame();
         } else if (event.data === 'loaded') {
             showFrame();
-        }
-        else if(event.data === "startNfcScan") {
+        } else if (event.data === 'nfc:startScan') {
             startNfcScan();
-        }
-        else if(event.data === "abortNfc") {
+        } else if (event.data === 'nfc:abort') {
             if (readerAbortController) {
                 readerAbortController.abort()
             }
         } else if (event.data && event.data.open) {
-            uri = event.data.open;
+            const uri = event.data.open;
             if (uri.indexOf('bitcoin:') === 0) {
                 window.location = uri;
             }
@@ -191,5 +181,4 @@
         setApiUrlPrefix: setApiUrlPrefix,
         onModalReceiveMessage: onModalReceiveMessage
     };
-
 })();