From 76582013c4ae1ac91cf47ece8684ce1829df1954 Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Sun, 27 Jul 2025 19:48:30 -0300
Subject: [PATCH] arreglado autotab en el pin input

---
 Front/src/Componentes/LoginPanel.svelte | 77 ++++++++-----------------
 1 file changed, 24 insertions(+), 53 deletions(-)

diff --git a/Front/src/Componentes/LoginPanel.svelte b/Front/src/Componentes/LoginPanel.svelte
index 0425889..d0a764f 100644
--- a/Front/src/Componentes/LoginPanel.svelte
+++ b/Front/src/Componentes/LoginPanel.svelte
@@ -88,7 +88,6 @@
         e.preventDefault();
 
         const inputs = document.querySelectorAll(".otp-input");
-
         let otppin = "";
 
         inputs.forEach((x) => {
@@ -119,6 +118,16 @@
             modaldata = "Fallo al hacer la request";
         }
     }
+
+    function handleInput(index) {
+        const otpInputs = document.querySelectorAll(".otp-input");
+
+        console.log(otpInputs);
+        if (index === 5) return;
+
+        otpInputs[index+1].focus();
+    }
+
 </script>
 
 {#if modaldata}
@@ -190,59 +199,21 @@
                 <form onsubmit={submitf2a}>
                     <div class="modal-body">
                         <div class="mb-3">
-                            <label for="f2a" class="form-label"
-                                >Ingrese el codigo que tendria que haber llegado
-                                a su email</label
-                            >
+                            <label for="f2a" class="form-label">
+                                Ingrese el codigo que tendria que haber llegado a su email
+                            </label>
                             <div class="d-flex gap-2 justify-content-center">
-                                <input
-                                    type="text"
-                                    class="form-control text-center otp-input"
-                                    maxlength="1"
-                                    inputmode="numeric"
-                                    pattern="[0-9]*"
-                                    style="width: 3rem;"
-                                />
-                                <input
-                                    type="text"
-                                    class="form-control text-center otp-input"
-                                    maxlength="1"
-                                    inputmode="numeric"
-                                    pattern="[0-9]*"
-                                    style="width: 3rem;"
-                                />
-                                <input
-                                    type="text"
-                                    class="form-control text-center otp-input"
-                                    maxlength="1"
-                                    inputmode="numeric"
-                                    pattern="[0-9]*"
-                                    style="width: 3rem;"
-                                />
-                                <input
-                                    type="text"
-                                    class="form-control text-center otp-input"
-                                    maxlength="1"
-                                    inputmode="numeric"
-                                    pattern="[0-9]*"
-                                    style="width: 3rem;"
-                                />
-                                <input
-                                    type="text"
-                                    class="form-control text-center otp-input"
-                                    maxlength="1"
-                                    inputmode="numeric"
-                                    pattern="[0-9]*"
-                                    style="width: 3rem;"
-                                />
-                                <input
-                                    type="text"
-                                    class="form-control text-center otp-input"
-                                    maxlength="1"
-                                    inputmode="numeric"
-                                    pattern="[0-9]*"
-                                    style="width: 3rem;"
-                                />
+                                {#each Array(6) as _, i}
+                                    <input
+                                        type="text"
+                                        class="form-control text-center otp-input"
+                                        maxlength="1"
+                                        inputmode="numeric"
+                                        pattern="[0-9]*"
+                                        style="width: 3rem;"
+                                        oninput={()=> handleInput(i)}
+                                    />
+                                {/each}
                             </div>
                         </div>
                     </div>