From ccdd26de876f6ce3f809a5339772e9be0eeddc8b Mon Sep 17 00:00:00 2001 From: dtinth on MBP M1 Date: Fri, 12 Apr 2024 19:03:55 +0700 Subject: [PATCH] implement NFC locking --- index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 72 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index a73724d..b7c0e4f 100644 --- a/index.html +++ b/index.html @@ -126,6 +126,10 @@ color: #fff; padding: 0.5rem 0.75rem; } + + .dangerous { + color: #e11; + } @@ -177,6 +181,9 @@

NFC onboarder

Onboarding tag...
+
+
Locking tag...
+
Tap your NFC tag...
@@ -194,6 +201,20 @@

NFC tag has been onboarded.

+
+
+
+ Tap your NFC tag
to make it read-only +
+ +
+
+
+
+

NFC tag has been locked.

+
Serial number:
+
+
Something went wrong!
@@ -205,6 +226,10 @@

NFC tag has been onboarded.

const $ = (selector) => document.querySelector(selector); const searchParams = new URLSearchParams(location.search); const url = searchParams.get("url") || ""; + + let lastExpectedUrl = ""; + let lockUrl = ""; + const setScreen = (id) => { document.querySelectorAll(".screen").forEach((screen) => { screen.dataset.showing = screen.id === id; @@ -242,6 +267,10 @@

NFC tag has been onboarded.

.map((b) => b.toString(16).padStart(2, "0")) .join(""); } + function showError(message) { + setScreen("error"); + $("#errorText").value = message; + } $("#scan").addEventListener("click", async () => { try { const reader = new NDEFReader(); @@ -293,12 +322,33 @@

NFC tag has been onboarded.

for (const snSpan of document.querySelectorAll(".sn")) { snSpan.textContent = serialNumber; } + lastExpectedUrl = expectedUrl; if ( message.records.length === 1 && message.records[0].recordType === "url" && new TextDecoder().decode(message.records[0].data) === expectedUrl ) { - setScreen("already"); + if (lockUrl === expectedUrl) { + lockUrl = ""; + setScreen("locking"); + try { + await reader.makeReadOnly(); + setScreen("locked"); + } catch (e) { + showError(`Unable to lock: ${e}`); + } + } else if (lockUrl) { + showError( + "The tag being locked is not the same as the tag being onboarded. Cancelling lock." + ); + } else { + setScreen("already"); + } + } else if (lockUrl) { + lockUrl = ""; + showError( + "The tag being locked is not the same as the tag being onboarded. Cancelling lock." + ); } else if ( message.records.length === 0 || (message.records.length === 1 && @@ -311,31 +361,42 @@

NFC tag has been onboarded.

}); setScreen("success"); } catch (e) { - setScreen("error"); - $("#errorText").value = `${e}`; + showError(`Unable to onboard: ${e}`); } } else { setScreen("error"); - $( - "#errorText" - ).value = `Non-empty tag scanned, refusing to replace. Please clear the tag first.`; + showError( + `Non-empty tag scanned, refusing to replace. Please clear the tag first.` + ); } }; } catch (error) { alert(`Unable to scan NFC: ${error}`); } }); + $("#cancelLock").addEventListener("click", () => { + lockUrl = ""; + setScreen("waiting"); + }); customElements.define( "success-warning-message", class extends HTMLElement { constructor() { super(); this.innerHTML = ` - - Note: This NFC tag is still writable. - To prevent writing, use the “NFC Tools” app to either permanently lock the tag or set a write password. - - `; +
+ + Note: This NFC tag may still be writable. + You can permanently lock this tag to prevent further writes, + or use the “NFC Tools” app to set up a write password. + + +
+ `; + this.querySelector(".js-lock-tag").addEventListener("click", () => { + setScreen("waitingLock"); + lockUrl = lastExpectedUrl; + }); } } );