reolve the issue in service request button.

Author: MalharBhatt-dev

app/static/js/service_requests.js

@@ -131,26 +131,23 @@ fields.innerHTML = "";
 switch(queryType){
 
 case "CHANGE_PIN":
-
-fields.innerHTML = `
-<input type="password" id="new_pin" placeholder=" " class="peer w-full bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-2xl px-5 pt-7 pb-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all font-medium">
-<label class="absolute left-5 top-2.5 text-gray-500 dark:text-gray-400 text-xs font-semibold uppercase tracking-wider transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-placeholder-shown:normal-case peer-placeholder-shown:tracking-normal peer-focus:top-2.5 peer-focus:text-xs peer-focus:uppercase peer-focus:tracking-wider peer-focus:text-cyan-500">New PIN</label>
-<button type="button" id="toggleIcon" onclick="togglePin()" class="absolute right-5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-xl">👁️</button>
-`;
-
-button.onclick("submitRequest('CHANGE_PIN')");
-
-break;
+    fields.innerHTML = `
+    <input type="password" id="new_pin" placeholder=" " class="peer w-full bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-2xl px-5 pt-7 pb-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all font-medium">
+    <label class="absolute left-5 top-2.5 text-gray-500 dark:text-gray-400 text-xs font-semibold uppercase tracking-wider transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-placeholder-shown:normal-case peer-placeholder-shown:tracking-normal peer-focus:top-2.5 peer-focus:text-xs peer-focus:uppercase peer-focus:tracking-wider peer-focus:text-cyan-500">New PIN</label>
+    <button type="button" id="toggleIcon" onclick="togglePin()" class="absolute right-5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-xl">👁️</button>
+    `;
+    button.addEventListener(onclick,submitRequest('CHANGE_PIN'));
+    
+    break;
 
 case "CHANGE_ACCOUNT_NAME":
-
-fields.innerHTML = `
-<input type="text" id="new_name" class="peer w-full bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-2xl px-5 pt-7 pb-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all font-medium">
-<label class="absolute left-5 top-2.5 text-gray-500 dark:text-gray-400 text-xs font-semibold uppercase tracking-wider transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-placeholder-shown:normal-case peer-placeholder-shown:tracking-normal peer-focus:top-2.5 peer-focus:text-xs peer-focus:uppercase peer-focus:tracking-wider peer-focus:text-cyan-500">New Account Name</label>
-`;
-button.onclick("submitRequest('CHANGE_ACCOUNT_NAME')");
-
-break;
+    fields.innerHTML = `
+    <input type="text" id="new_name" class="peer w-full bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-2xl px-5 pt-7 pb-3 focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all font-medium">
+    <label class="absolute left-5 top-2.5 text-gray-500 dark:text-gray-400 text-xs font-semibold uppercase tracking-wider transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-placeholder-shown:normal-case peer-placeholder-shown:tracking-normal peer-focus:top-2.5 peer-focus:text-xs peer-focus:uppercase peer-focus:tracking-wider peer-focus:text-cyan-500">New Account Name</label>
+    `;
+    button.addEventListener(onclick,submitRequest('CHANGE_ACCOUNT_NAME'));
+    
+    break;
 
 //NOTE : //h future request query implementation :
 // case "UPDATE_CONTACT":
@@ -214,7 +211,9 @@ break;
 }
 
 async function submitRequest(query_type){
-
+    document.getElementById("dynamic_submit_button").disabled = true;
+    document.getElementById("btnText").textContent = "Logging in...";
+    document.getElementById("spinner").classList.remove("hidden");
 const fields = document.querySelectorAll("#dynamic_form_fields input, #dynamic_form_fields textarea");
 
 const payload = {};

app/templates/service_requests.html

@@ -277,19 +277,21 @@ <h2 class="text-xl font-bold text-gray-900 dark:text-white">My Requests</h2>
                             </table>
                         </div>
                     </div>
-                    <!-- Dynamic Request Form -->
-                    <div id="request_form_container" class="hidden fixed inset-0 bg-gray-900/60 dark:bg-gray-950/80 backdrop-blur-xl items-center justify-center z-50 transition-opacity p-4">
-                        <div class="bg-white dark:bg-gray-900 p-8 rounded-[2rem] shadow-2xl w-full max-w-md relative border border-gray-200 dark:border-gray-700 animate-[fadeIn_0.3s_ease-out] dark:shadow-black/50">
-                            <button onclick="closeLoginModal()" class="close-modal absolute top-5 right-5 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-colors">
-                                ✕
-                            </button>
-                            <div class="mb-8">
-                                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">Complete Request</h2>
-                                <p class="text-gray-500 dark:text-gray-400 text-sm">Sign in to your dashboard</p>
-                            </div>
-                            <form class="flex flex-col gap-5">
-                                <div id="dynamic_form_fields" class="relative group"></div>
-                                <button id="dynamic_submit_button" class="btn-glow w-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white py-4 rounded-2xl font-bold text-lg hover:from-blue-700 hover:to-cyan-600 active:scale-[0.98] transition-all duration-200 shadow-md flex items-center justify-center gap-2 mt-2">
+                </div>
+            </div>
+            <!-- Dynamic Request Form -->
+            <div id="request_form_container" class="hidden fixed inset-0 bg-gray-900/60 dark:bg-gray-950/80 backdrop-blur-xl items-center justify-center z-50 transition-opacity p-4">
+                <div class="bg-white dark:bg-gray-900 p-8 rounded-[2rem] shadow-2xl w-full max-w-md relative border border-gray-200 dark:border-gray-700 animate-[fadeIn_0.3s_ease-out] dark:shadow-black/50">
+                    <button onclick="closeLoginModal()" class="close-modal absolute top-5 right-5 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-colors">
+                        ✕
+                    </button>
+                    <div class="mb-8">
+                        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">Complete Request</h2>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm">Sign in to your dashboard</p>
+                    </div>
+                    <form class="flex flex-col gap-5">
+                        <div id="dynamic_form_fields" class="relative group"></div>
+                        <button id="dynamic_submit_button" class="btn-glow w-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white py-4 rounded-2xl font-bold text-lg hover:from-blue-700 hover:to-cyan-600 active:scale-[0.98] transition-all duration-200 shadow-md flex items-center justify-center gap-2 mt-2">
                                     <span id="btnText">Submit →</span>
                                     <svg id="spinner" class="hidden w-5 h-5 animate-spin" viewBox="0 0 24 24">
                                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
@@ -298,19 +300,11 @@ <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">Complete
                                     </svg>
                                 </button>
                                 <button onclick="location.reload()" class="btn-glow w-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white py-4 rounded-2xl font-bold text-lg hover:from-blue-700 hover:to-cyan-600 active:scale-[0.98] transition-all duration-200 shadow-md flex items-center justify-center gap-2 mt-2">
-                                    <span id="btnText">Cancel →</span>
-                                    <svg id="spinner" class="hidden w-5 h-5 animate-spin" viewBox="0 0 24 24">
-                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
-
-                                        </circle>
-                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 00-4 4H4z"></path>
-                                    </svg>
+                                    Cancel →
                                 </button>
                             </form>
                         </div>
                     </div>
-                </div>
-            </div>
         </div>
     </main>