Merge pull request #63 from karthik-tarento/patch-33

Added timer for Resend OTP functionality
sunbird-cb · Nov 14, 2022 · d078b6f · d078b6f
2 parents da90f32 + 72f535b
commit d078b6f
Showing 1 changed file with 37 additions and 2 deletions.
diff --git a/ansible/artifacts/sunbird/login/sms-input-otp.ftl b/ansible/artifacts/sunbird/login/sms-input-otp.ftl
@@ -41,7 +41,13 @@
                         <form id="kc-totp-login-form" class="${properties.kcFormClass!} ui form pre-signin" action="${url.loginAction}" method="post">
 			                <input type="hidden" name="page_type" value="sms_otp_resend_page" />
                             <div class="field">
-                                <button onclick="javascript:makeDivUnclickable()" class="ui fluid submit button" name="login" id="login" type="submit" value="${msg("doLogIn")}">${msg("doResendOTP")}</button>
+                                <div class="ui text textCenter" id="timer-container">
+                                    <span>Resend OTP after </span><span id="js-timeout"></span>
+                                </div>
+                                <button onclick="javascript:makeDivUnclickable()" class="ui fluid submit button mt-8" 
+                                name="resendOTP" id="resendOTP" type="submit" value="${msg("doLogIn")}" disabled>
+                                    ${msg("doResendOTP")}
+                                </button>
                             </div>
                         </form>
                         <#if client?? && client.baseUrl?has_content>
@@ -60,5 +66,34 @@
         </div>
     </div>
     </#if>
-</@layout.registrationLayout>
+    <script>
+        var interval
+        function countdown() {
+            document.getElementById("js-timeout").innerHTML = "3:00";
+        // Update the count down every 1 second
+        interval = setInterval( function() {
+            var timer = document.getElementById("js-timeout").innerHTML;
+            timer = timer.split(':');
+            var minutes = timer[0];
+            var seconds = timer[1];
+            seconds -= 1;
+            if (minutes < 0) return;
+            else if (seconds < 0 && minutes != 0) {
+                minutes -= 1;
+                seconds = 59;
+            }
+            else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;
+
+             document.getElementById("js-timeout").innerHTML = minutes + ':' + seconds;
 
+            if (minutes == 0 && seconds == 0) {
+              clearInterval(interval);
+              document.getElementById("resendOTP").removeAttribute('disabled')
+              document.getElementById("timer-container").setAttribute("hidden", true);
+            }
+        }, 1000);
+      }
+
+      countdown()
+    </script>
+</@layout.registrationLayout>