From ed3dc374b4ae1df43d67b4215c4534db8121fb4a Mon Sep 17 00:00:00 2001
From: 1234cas <1263313934@qq.com>
Date: Sun, 3 Oct 2021 12:42:05 +0800
Subject: [PATCH] first

---
 verify-account-ui/script.js | 24 ++++++++++++++++++++----
 verify-account-ui/style.css |  8 +++++++-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/verify-account-ui/script.js b/verify-account-ui/script.js
index 6df6bf0..89c2b80 100644
--- a/verify-account-ui/script.js
+++ b/verify-account-ui/script.js
@@ -1,14 +1,30 @@
 const codes = document.querySelectorAll('.code')
+const info = document.querySelector('.info')
+let notice = ''
 
 codes[0].focus()
 
 codes.forEach((code, idx) => {
     code.addEventListener('keydown', (e) => {
-        if(e.key >= 0 && e.key <=9) {
+
+        if (e.keyCode == '32') {
+            if (idx != 0) setTimeout(() => codes[idx - 1].focus(), 10)
+        } else if (e.key >= 0 && e.key <= 9) {
             codes[idx].value = ''
-            setTimeout(() => codes[idx + 1].focus(), 10)
-        } else if(e.key === 'Backspace') {
-            setTimeout(() => codes[idx - 1].focus(), 10)
+            if (idx < codes.length - 1) setTimeout(() => codes[idx + 1].focus(), 10)
+        } else {
+            console.log(e.key);
+            //Block input if it's not a number
+            e.preventDefault();
+            info.classList.add('error');
+            info.innerHTML = 'You can only enter numbers!'
+
+            //If you do not clear the timer, holding it down will cause too many timers to start
+            clearTimeout(notice)
+            notice = setTimeout(() => {
+                info.classList.remove('error');
+                info.innerHTML = `'This is design only. We didn't actually send you an email as we don't have your email, right?'`
+            }, 1000)
         }
     })
 })
\ No newline at end of file
diff --git a/verify-account-ui/style.css b/verify-account-ui/style.css
index 71308d9..6e947c6 100644
--- a/verify-account-ui/style.css
+++ b/verify-account-ui/style.css
@@ -65,6 +65,12 @@ body {
   border-radius: 5px;
 }
 
+.error{
+ color:red;
+ line-height: 40px;
+ font-weight: 700;
+}
+
 @media (max-width: 600px) {
   .code-container {
     flex-wrap: wrap;
@@ -75,4 +81,4 @@ body {
     height: 80px;
     max-width: 70px;
   }
-}
+}
\ No newline at end of file