Refactoring

This commit is contained in:
Dennis Reimann
2023-06-26 16:45:34 +02:00
committed by Andrew Camilleri
parent a618f901fc
commit acae3b8753
2 changed files with 41 additions and 48 deletions

View File

@@ -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';
}
}
});

View File

@@ -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
};
})();