Create nice animation when scanning nfc cards

core/static/core/components/nfc-input.scss

@@ -0,0 +1,34 @@
+nfc-input[scan="active"]::before {
+  content: "";
+  position: relative;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background: #18c89b;
+  box-shadow: 0 0 70px 20px #18c89b;
+  clip-path: inset(0);
+  animation:
+  x 1s ease-in-out infinite alternate,
+  y 2s ease-in-out infinite;
+}
+
+@keyframes x {
+  to {
+    transform: translateX(-100%);
+    left: 100%;
+  }
+}
+
+@keyframes y {
+  33% {
+    clip-path: inset(0 0 0 -100px);
+  }
+
+  50% {
+    clip-path: inset(0 0 0 0);
+  }
+
+  83% {
+    clip-path: inset(0 -100px 0 0);
+  }
+}

core/static/webpack/core/components/nfc-input-index.ts

@@ -19,13 +19,16 @@ export class NfcInput extends inheritHtmlElement("input") {
     button.addEventListener("click", async () => {
       // biome-ignore lint/correctness/noUndeclaredVariables: browser API
       const ndef = new NDEFReader();
+      this.setAttribute("scan", "active");
       await ndef.scan();
       ndef.addEventListener("readingerror", () => {
+        this.removeAttribute("scan");
         window.alert(gettext("Unsupported NFC card"));
       });
 
       // biome-ignore lint/correctness/noUndeclaredVariables: browser API
       ndef.addEventListener("reading", (event: NDEFReadingEvent) => {
+        this.removeAttribute("scan");
         this.node.value = event.serialNumber.replace(/:/g, "").toUpperCase();
         /* Auto submit form, we need another button to not trigger our previously defined click event */
         const submit = document.createElement("button");