[+] Check while typing

AquaNet/src/app.sass

@@ -112,6 +112,12 @@ input.error
   justify-content: center
   align-items: center
 
+
+.inline-flex-center
+  display: inline-flex
+  justify-content: center
+  align-items: center
+
 .clickable
   cursor: pointer
   user-select: none

AquaNet/src/components/BindCard.svelte

@@ -16,8 +16,15 @@
     inputAC = inputAC.slice(0, 24)
   }
 
+  function bindAC() {
+    if (inputACRegexFull.test(inputAC)) {
+      console.log("Binding access code", inputAC)
+      inputAC = ""
+    }
+  }
+
   const inputSNRegex = /^([0-9A-Fa-f]{0,2}:){0,7}[0-9A-Fa-f]{0,2}$/
-  const inputSNRegexFull = /^([0-9A-Fa-f]{2}:){7}[0-9A-Fa-f]{2}$/
+  const inputSNRegexFull = /^([0-9A-Fa-f]{2}:){4,7}[0-9A-Fa-f]{2}$/
   let inputSN = ""
 
   function inputSNChange(e: any) {
@@ -27,6 +34,13 @@
       inputSN += ":"
     inputSN = inputSN.toUpperCase().slice(0, 23)
   }
+  
+  function bindSN() {
+    if (inputSNRegexFull.test(inputSN)) {
+      console.log("Binding serial number", inputSN)
+      inputSN = ""
+    }
+  }
 </script>
 
 <div class="bind-card">
@@ -36,24 +50,35 @@
   <label>
     <!-- DO NOT change the order of bind:value and on:input. Their order determines the order of reactivity -->
     <input placeholder="e.g. 5200 1234 5678 9012 3456"
+           on:keydown={(e) => {
+             e.key === "Enter" && bindAC()
+             // Ensure key is numeric
+             if (e.key.length === 1 && !/[\d ]/.test(e.key)) e.preventDefault()
+           }}
            bind:value={inputAC}
            on:input={inputACChange}
            class={clz({error: (inputAC && !inputACRegex.test(inputAC))})}>
     {#if inputAC.length > 0}
-      <button transition:slide={{axis: 'x'}}>Bind</button>
+      <button transition:slide={{axis: 'x'}} on:click={bindAC}>Bind</button>
     {/if}
   </label>
   <p>2. Download the NFC Tools app on your phone
     (<a href="https://play.google.com/store/apps/details?id=com.wakdev.wdnfc">Android</a> /
-    <a href="https://apps.apple.com/us/app/nfc-tools/id1252962749">Apple</a>) and scan your card. Then, enter the Serial Number.
+    <a href="https://apps.apple.com/us/app/nfc-tools/id1252962749">Apple</a>) and scan your card.
+    Then, enter the Serial Number.
   </p>
   <label>
     <input placeholder="e.g. 01:2E:1A:2B:3C:4D:5E:6F"
+           on:keydown={(e) => {
+             e.key === "Enter" && bindSN()
+             // Ensure key is hex or colon
+             if (e.key.length === 1 && !/[0-9A-Fa-f:]/.test(e.key)) e.preventDefault()
+           }}
            bind:value={inputSN}
            on:input={inputSNChange}
            class={clz({error: (inputSN && !inputSNRegex.test(inputSN))})}>
     {#if inputSN.length > 0}
-      <button transition:slide={{axis: 'x'}}>Bind</button>
+      <button transition:slide={{axis: 'x'}} on:click={bindSN}>Bind</button>
     {/if}
   </label>
 </div>