From f3b06ac0a6aecff1e483dc60f53026c18f4965d5 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 21 Feb 2024 13:47:58 -0500
Subject: [PATCH] [+] Input validation for card SN

---
 AquaNet/src/components/BindCard.svelte | 27 ++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/AquaNet/src/components/BindCard.svelte b/AquaNet/src/components/BindCard.svelte
index cc0df88a..f2af48a2 100644
--- a/AquaNet/src/components/BindCard.svelte
+++ b/AquaNet/src/components/BindCard.svelte
@@ -7,14 +7,25 @@
   const inputACRegex = /^(\d{4} ){0,4}\d{0,4}$/
   const inputACRegexFull = /^(\d{4} ){4}\d{4}$/
   let inputAC = ""
-  let inputSN = ""
 
   function inputACChange(e: any) {
     e = e as InputEvent
     // Add spaces to the input
-    if (e.inputType === "insertText" && inputAC.length % 5 === 4 && inputAC.length < 20) {
+    if (e.inputType === "insertText" && inputAC.length % 5 === 4 && inputAC.length < 24)
       inputAC += " "
-    }
+    inputAC = inputAC.slice(0, 24)
+  }
+
+  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}$/
+  let inputSN = ""
+
+  function inputSNChange(e: any) {
+    e = e as InputEvent
+    // Add colons to the input
+    if (e.inputType === "insertText" && inputSN.length % 3 === 2 && inputSN.length < 23)
+      inputSN += ":"
+    inputSN = inputSN.toUpperCase().slice(0, 23)
   }
 </script>
 
@@ -36,7 +47,15 @@
     (<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.
   </p>
-  <input placeholder="e.g. 01:2E:XX:XX:XX:XX:XX:XX" bind:value={inputSN}>
+  <label>
+    <input placeholder="e.g. 01:2E:1A:2B:3C:4D:5E:6F"
+           bind:value={inputSN}
+           on:input={inputSNChange}
+           class={clz({error: (inputSN && !inputSNRegex.test(inputSN))})}>
+    {#if inputSN.length > 0}
+      <button transition:slide={{axis: 'x'}}>Bind</button>
+    {/if}
+  </label>
 </div>
 
 <style lang="sass">