From ec856db10014075e0802464abfb22a14093ea7c6 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Sat, 27 Apr 2024 17:35:20 +0800
Subject: [PATCH] 1,441st Commit

---
 .../(library)/data-entry/input-mask/+page.vue | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/app/src/routes/(backstage)/(library)/data-entry/input-mask/+page.vue b/app/src/routes/(backstage)/(library)/data-entry/input-mask/+page.vue
index fef33e74..7e12af0b 100644
--- a/app/src/routes/(backstage)/(library)/data-entry/input-mask/+page.vue
+++ b/app/src/routes/(backstage)/(library)/data-entry/input-mask/+page.vue
@@ -14,6 +14,9 @@ const flux = reactive({
 
   usdMasked: '',
   usdUnmasked: '',
+
+  verificationCodeMasked: '',
+  verificationCodeUnmasked: undefined,
 });
 </script>
 
@@ -128,4 +131,25 @@ const flux = reactive({
       </div>
     </XCard>
   </section>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">One-time Password</h2>
+
+    <XCard>
+      <XInputMask
+        v-model:masked="flux.verificationCodeMasked"
+        v-model:unmasked="flux.verificationCodeUnmasked"
+        :mask="{ mask: '000 000' }"
+        label="Verification Code"
+      />
+
+      <div class="mt-1">
+        <div>Masked: {{ flux.verificationCodeMasked }}</div>
+        <div>
+          Unmasked: {{ flux.verificationCodeUnmasked }}
+          <XCode>{{ typeof flux.verificationCodeUnmasked }}</XCode>
+        </div>
+      </div>
+    </XCard>
+  </section>
 </template>