Send otp button issues fixed (#89)

* Send OTP button issue fixed

* Send OTP button issue fixed

---------

Co-authored-by: anuragsharma <anurag.s@gmail.com>

Author: anuragSharma1112

web-backend/src/main/java/com/statusneo/vms/service/OtpService.java

@@ -107,7 +107,7 @@ public VerificationResult generateOtp(Visit visit, boolean resetAttempts, boolea
              // Check cooldown (skip if bypassCooldown requested)
              if (!bypassCooldown && latestOtp.getCreatedAt().plusMinutes(RESEND_COOLDOWN_MINUTES).isAfter(LocalDateTime.now())) {
                  return new VerificationResult(false, true,
-                         "Please wait before requesting a new OTP.");
+                         "Incorrect OTP Check and try again");
              }
 
              // Check resend limit

web-backend/src/main/jte/index.jte

@@ -155,8 +155,7 @@
                 <div class="flex justify-center pt-4">
                     <button type="submit"
                             id="send-otp-btn"
-                            class="px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors min-w-48 text-lg relative flex items-center justify-center">
-                        <span class="htmx-indicator:hidden">Send OTP</span>
+                            disabled class="px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors min-w-48 text-lg relative flex items-center justify-center">                        <span class="htmx-indicator:hidden">Send OTP</span>
                         <span class="htmx-indicator absolute inset-0 flex items-center justify-center">
                             <svg class="inline animate-spin h-5 w-5 mr-2" 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>
@@ -179,22 +178,22 @@
 <!-- Removed a small duplicate autocomplete handler here in favor of the more complete handlers below -->
 
 <script>
-    // Form validation (host optional)
+    // Form validation (host is not mandatory)
     function validateForm() {
         const name = document.getElementById('name').value;
         const email = document.getElementById('email').value;
         const phone = document.getElementById('phone').value;
         const company = document.getElementById('company').value;
-        // host is optional, do not require hostId to enable send
 
         const isValid = name && email && phone && company;
         document.getElementById('send-otp-btn').disabled = !isValid;
     }
 
-    // Attach validation to all inputs that are required
     document.querySelectorAll('input[required]').forEach(input => {
         input.addEventListener('input', validateForm);
     });
+
+    validateForm();
 </script>
 
 <script>

web-backend/src/main/resources/templates/index-th.html

@@ -137,8 +137,8 @@ <h1 class="text-3xl font-bold text-gray-800 mb-2">Visitor Check-in</h1>
                 <!-- Submit Button -->
                 <div class="flex justify-center pt-4">
                     <button type="submit"
-                            class="px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors min-w-48 text-lg
-           flex items-center justify-center"> <span class="htmx-indicator:hidden">Send OTP</span>
+                            id="send-otp-btn" disabled class="px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors min-w-48 text-lg
+       flex items-center justify-center"> <span class="htmx-indicator:hidden">Send OTP</span>
                         <span class="htmx-indicator">
         </span>
                     </button>
@@ -178,6 +178,27 @@ <h1 class="text-3xl font-bold text-gray-800 mb-2">Visitor Check-in</h1>
         document.getElementById('host-results').classList.add('hidden');
     }
 </script>
+<script>
+    // Form validation (host is not mandatory)
+    function validateForm() {
+        const name = document.getElementById('name').value;
+        const email = document.getElementById('email').value;
+        const phone = document.getElementById('phone').value;
+        const company = document.getElementById('company').value;
+
+        const isValid = name && email && phone && company;
+        document.getElementById('send-otp-btn').disabled = !isValid;
+    }
+
+    document.querySelectorAll('input[required]').forEach(input => {
+        input.addEventListener('input', validateForm);
+    });
+
+    validateForm();
+</script>
+
+</body>
+</html>
 </body>
 </html>
 

web-backend/src/main/resources/templates/visitor.html

@@ -113,10 +113,11 @@ <h1 class="text-3xl font-bold text-gray-800 mb-2">Visitor Check-in</h1>
 
                     <!-- Submit Button -->
                     <div class="flex justify-center pt-4">
-                        <button type="submit"
-                            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-->
-                            flex items-center justify-center"> Send OTP
-                        </button>
+                        <button type="button"
+                                id="send-otp-btn"
+                                disabled onclick="handleSendOTP()"
+                                class="px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors min-w-48 text-lg relative flex items-center justify-center">
+                            Send OTP </button>
                     </div>
                 </div>
             </form>
@@ -160,6 +161,8 @@ <h1 class="text-3xl font-bold text-gray-800 mb-2">Visitor Check-in</h1>
             input.addEventListener('input', validateForm);
         });
 
+        validateForm();
+
         // Host search functionality
         const hostSearchInput = document.getElementById('host-search');
         const hostResults = document.getElementById('host-results');

web-backend/src/test/java/com/statusneo/vms/service/OtpServiceTest.java

@@ -109,7 +109,7 @@ void testGenerateOtpFailsDueToCooldown() {
         VerificationResult result = otpService.generateOtp(testVisit);
 
         assertFalse(result.success());
-        assertEquals("Please wait before requesting a new OTP.", result.message());
+        assertEquals("Incorrect OTP Check and try again", result.message());
         verify(emailService, never()).sendEmail(any());
     }