Merge branch 'demo-code-validation' into 'master'

Blokiraj Enter Code button na payment page-u dok se validacija ne zavrsi

See merge request kbr4/riskletpy!65

backend/core/templates/payment.html

@@ -26,6 +26,8 @@
       <button 
         type="submit" 
         class="w-full bg-accent text-primary hover:bg-yellow-400 font-bold py-3 px-8 rounded-lg shadow-lg text-lg transition-all duration-200 ease-in-out transform hover:scale-105"
+        id="submit-btn"
+        disabled      
       >
         Enter Code
       </button>
@@ -42,14 +44,31 @@ document.addEventListener('DOMContentLoaded', function() {
   const status = document.getElementById('code-status');
   const codeError = document.getElementById('code-error');
   const backendError = document.getElementById('backend-error');
+  const submitBtn = document.getElementById('submit-btn');
+
+  function disableBtn() {
+    submitBtn.disabled = true;
+    submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
+  }
+
+  function enableBtn() {
+    submitBtn.disabled = false;
+    submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+  }
+
+  disableBtn();
 
   input.addEventListener('input', function() {
     status.innerHTML = '';
     codeError.innerHTML = '';
     if (backendError) backendError.style.display = 'none';
     const code = input.value.trim();
-    if (code.length === 0) return;
-
+    if (code.length === 0) {
+      disableBtn();
+      return;
+    };
+    disableBtn();
+    
     status.innerHTML = `<svg class="animate-spin h-6 w-6 text-accent" xmlns="http://www.w3.org/2000/svg" fill="none" 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-8v8z"></path>
@@ -68,13 +87,16 @@ document.addEventListener('DOMContentLoaded', function() {
       status.innerHTML = '';
       if (data.valid) {
         codeError.innerHTML = '<span class="text-green-600">✅ Valid code</span>';
+        enableBtn();
       } else {
         codeError.innerHTML = '<span class="text-red-600">❌ Invalid code</span>';
+        disableBtn();
       }
     })
     .catch(() => {
       status.innerHTML = '';
       codeError.innerHTML = '<span class="text-red-600">❌ Error checking code</span>';
+      disableBtn();
     });
   });
 });