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");

core/templates/core/widgets/nfc.jinja

@@ -1,5 +1,6 @@
 <script-once src="{{ statics.js }}" defer></script-once>
+<link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
 
-<span>
-  <nfc-input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}></nfc-input>
-</span>
+  <span>
+    <nfc-input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}></nfc-input>
+  </span>

core/views/forms.py

@@ -76,7 +76,8 @@ class NFCTextInput(TextInput):
     def get_context(self, name, value, attrs):
         context = super().get_context(name, value, attrs)
         context["statics"] = {
-            "js": staticfiles_storage.url("webpack/core/components/nfc-input-index.ts")
+            "js": staticfiles_storage.url("webpack/core/components/nfc-input-index.ts"),
+            "css": staticfiles_storage.url("core/components/nfc-input.scss"),
         }
         return context