src/ApplicationBundle/Resources/views/modals/input_forms/verify_otp_modal.html.twig line 1

Open in your IDE?
  2. {% include '@Application/framework/_verifyotpmodal_css.html.twig' %}
  3. <div class="modal fade" id="verifyOtpModal" tabindex="-1" aria-labelledby="exampleModalLabel"
  4.      aria-hidden="true">
  5.     <div class="modal-dialog modal-dialog-centered">
  6.         <div class="modal-content">
  8.             <div class="modal-body">
  11.                 <div class="row login-section">
  12.                     <div class="col-md-12 login-inputs-modal" style="padding:1rem 1rem;">
  14.                     <h2 style="text-align: center;
  15.                     color:#1D5B9E;font-size: 30px;font-weight: 600;">Enter OTP</h2>
  16.                     <p class="message_text" style="    margin: 0;
  18.     text-align: center;
  19.     color: #eb9f9f;"></p>
  20.                     <p style="    margin: 0; font-size: 13px;;
  22.     text-align: center;
  23.     ;">An OTP was sent to your email address.</p>
  27.                     {#<h6 style="margin: 40px 0 10px;color: #615A5A;">Login With:</h6>#}
  28.                     {#<h6 style="margin: 8px 0 10px;color: #615A5A;">An OTP was sent to your email address.</h6>#}
  30.                     <form action="" id="otp_ajax_form" method="post">
  31.                         {#<div class="email-input" style="margin-top: 10px">#}
  32.                             {#<div class="email-title" style="text-align: center;"><label for="" style="margin-top: 0px;position: inherit;background: white; font-size: 1.5rem;" >Enter OTP</label></div>#}
  35.                         {#</div>#}
  37.                         <div class="email-input" style="margin-top: 10px;display: flex;justify-content: space-between;">
  39.                             <input type="number" id="otp_in_1" name="otp_in_1" placeholder="" maxlength="1"  required data-prev-id="_NONE_" data-next-id="2"
  40.                                    class="otp_in otp_in_1">
  41.                             <input type="text" id="otp_in_2" name="otp_in_2" placeholder="" maxlength="1" required data-prev-id="1" data-next-id="3"
  42.                                    class="otp_in otp_in_2">
  43.                             <input type="text" id="otp_in_3" name="otp_in_3" placeholder="" maxlength="1"  required data-prev-id="2" data-next-id="4"
  44.                                    class="otp_in otp_in_3">
  45.                             <input type="text" id="otp_in_4" name="otp_in_4" placeholder="" maxlength="1" data-prev-id="3" data-next-id="_NONE_" required
  46.                                    class="otp_in otp_in_4">
  47.                             <input type="hidden" id="otp" name="otp" placeholder="otp"  required maxlength="4"
  48.                                    class="input_field">
  49.                             <div class="eye-onoff">
  50.                                 {#<p class=" small_error_text email">Pikachu</p>#}
  51.                                 <i class="fas fa-times small_error_icon email"></i>
  52.                             </div>
  53.                             <p class=" small_error_text email"></p>
  55.                         </div>
  56.                         {#<div class="email-input" style="margin-top: 10px">#}
  57.                         {#<div class="email-title"><label for="" style="margin-top: 38px;" >Email</label></div>#}
  58.                         {#<input type="text" id="username" name="username" placeholder="Username" data-field-type="username"#}
  59.                         {#required#}
  60.                         {#class="input_field username checkIfExists {{ errorField=='username'?'error_class':'' }}">#}
  61.                         {#<div class="eye-onoff">#}
  62.                         {#<i class="fas fa-check small_error_icon username"></i>#}
  63.                         {#</div>#}
  64.                         {#<p class=" small_error_text username"></p>#}
  66.                         {#</div>#}
  68.                         {#<div class="form-check" style="margin-top: 20px;">#}
  71.                         {#<a style="float: right;font-size: 14px;#}
  72.                         {#color: #615A5A;" href="">Forgot your password?</a>#}
  73.                         {#</div>#}
  74.                         <h6 style="    margin: 10px 0 10px;
  75.     color: #615A5A;
  76.     font-size:12px;
  77.     text-align: center;"><span id="otpExpireTextPrefix">The OTP will expire</span> <span style="" id="otpExpireText" class="  time convert_to_moment_time"
  78.                                                    data-moment-ts-format="_today_or_date_"
  79.                                                    data-moment-ts="0"></span> <a class="resend_otp_button" style="display: inline-block;"
  80.                                                                                                  href="#"> Resend OTP</a></h6>
  83.                         <button type="submit" class="otp_ajax_form_submit" style="">Proceed
  84.                         </button>
  85.                     </form>
  87.                     </div>
  89.                 </div>
  91.             </div>
  92.             {#<div class="modal-footer">#}
  94.             {#</div>#}
  95.         </div>
  96.     </div>
  97. </div>
  99. <script>
  100.     var otpModalInitiated=0;
  101.     var verifyOtpModal=0;
  102.     function initiateOtpModal(){
  104.         verifyOtpModal = new bootstrap.Modal(document.getElementById('verifyOtpModal'), {
  105.             keyboard: false
  106.         });
  107.         verifyOtpModal.show();
  109.         otpModalInitiated=1;
  110.     }
  112.     function triggerOtpVerification(options,callback)
  113.     {
  114.         options=options||{
  116.                 };
  117.         var data={
  119.         }
  121.         if(otpModalInitiated==0)
  122.                 initiateOtpModal();
  129.         callback(data);
  130.     }
  131. </script>