From 91429437f83fd75e995148fd6317c6147a573e3d Mon Sep 17 00:00:00 2001
From: Maxim Leshchenko <cnmaks90@gmail.com>
Date: Sun, 26 Dec 2021 14:24:15 +0200
Subject: [PATCH] Users: Make it easier to enter votes vouchers Automatically
 switch fields and fill all fields on paste

---
 Web/Presenters/templates/User/Settings.xml | 34 ++++++++++++++++++----
 Web/static/js/openvk.cls.js                | 18 ++++++++++++
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/Web/Presenters/templates/User/Settings.xml b/Web/Presenters/templates/User/Settings.xml
index daa7a0c3..f142a5e3 100644
--- a/Web/Presenters/templates/User/Settings.xml
+++ b/Web/Presenters/templates/User/Settings.xml
@@ -348,16 +348,40 @@
         {elseif $isFinanceTU}
         
         <p>{_voucher_explanation} {_voucher_explanation_ex}</p>
-        <form action="/settings?act=finance.top-up" method="POST" enctype="multipart/form-data">
-            <input type="text" name="key0" size="6" placeholder="123456" required="required" style="display: inline-block; width: 50px; text-align: center;" /> -
-            <input type="text" name="key1" size="6" placeholder="789012" required="required" style="display: inline-block; width: 50px; text-align: center;" /> -
-            <input type="text" name="key2" size="6" placeholder="345678" required="required" style="display: inline-block; width: 50px; text-align: center;" /> -
-            <input type="text" name="key3" size="6" placeholder="90ABCD" required="required" style="display: inline-block; width: 50px; text-align: center;" />
+        <form name="vouncher_form" action="/settings?act=finance.top-up" method="POST" enctype="multipart/form-data">
+            <input type="text" name="key0" class="vouncher_input" size="6" maxlength="6" placeholder="123456" required="required" oninput="autoTab(this, document.vouncher_form.key1, undefined)" style="display: inline-block; width: 50px; text-align: center;" /> -
+            <input type="text" name="key1" class="vouncher_input" size="6" maxlength="6" placeholder="789012" required="required" oninput="autoTab(this, document.vouncher_form.key2, document.vouncher_form.key0)" style="display: inline-block; width: 50px; text-align: center;" /> -
+            <input type="text" name="key2" class="vouncher_input" size="6" maxlength="6" placeholder="345678" required="required" oninput="autoTab(this, document.vouncher_form.key3, document.vouncher_form.key1)" style="display: inline-block; width: 50px; text-align: center;" /> -
+            <input type="text" name="key3" class="vouncher_input" size="6" maxlength="6" placeholder="90ABCD" required="required" oninput="autoTab(this, undefined, document.vouncher_form.key2)" style="display: inline-block; width: 50px; text-align: center;" />
             <br/><br/>
             
             <input type="hidden" name="hash" value="{$csrfToken}" />
             <input type="submit" value="{_redeem}" class="button" />
         </form>
+        <script>
+            u(".vouncher_input").on("paste", function(event) {
+                const vouncher = event.clipboardData.getData("text");
+
+                let segments;
+                if(vouncher.length === 27) {
+                    segments = vouncher.split("-");
+                    if(segments.length !== 4)
+                        segments = undefined;
+                } else if(vouncher.length === 24) {
+                    segments = chunkSubstr(vouncher, 6);
+                }
+
+                if(segments !== undefined) {
+                    document.vouncher_form.key0.value = segments[0];
+                    document.vouncher_form.key1.value = segments[1];
+                    document.vouncher_form.key2.value = segments[2];
+                    document.vouncher_form.key3.value = segments[3];
+                    document.vouncher_form.key3.focus();
+                }
+
+                event.preventDefault();
+            });
+        </script>
         
         {elseif $isInterface}
         
diff --git a/Web/static/js/openvk.cls.js b/Web/static/js/openvk.cls.js
index 974a8aca..9d819d6b 100644
--- a/Web/static/js/openvk.cls.js
+++ b/Web/static/js/openvk.cls.js
@@ -247,3 +247,21 @@ function showCoinsTransferDialog(coinsCount, hash) {
         Function.noop
     ]);
 }
+
+function chunkSubstr(string, size) {
+    const numChunks = Math.ceil(string.length / size);
+    const chunks = new Array(numChunks);
+
+    for (let i = 0, o = 0; i < numChunks; ++i, o += size) {
+        chunks[i] = string.substr(o, size);
+    }
+
+    return chunks;
+}
+
+function autoTab(original, next, previous) {
+    if(original.getAttribute && original.value.length == original.getAttribute("maxlength") && next !== undefined)
+        next.focus();
+    else if(original.value.length == 0 && previous !== undefined)
+        previous.focus();
+}