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

Open in your IDE?
  2. <style>
  3.     #verifyOtpModal .otp_in
  4.     {
  5.         width: 24% !important;;
  6.         font-size: 3rem !important;
  7.         text-align: center !important;
  8.     }
  9.     /* Chrome, Safari, Edge, Opera */
  10.     #verifyOtpModal input::-webkit-outer-spin-button,
  11.     #verifyOtpModal input::-webkit-inner-spin-button {
  12.         -webkit-appearance: none;
  13.         margin: 0;
  14.     }
  16.     /* Firefox */
  17.     #verifyOtpModal input[type=number] {
  18.         -moz-appearance: textfield;
  19.     }
  20.     .otp_ajax_form_submit {
  21.         width: 100%;
  22.         margin-left: 0%;
  23.         border-radius: 4px;
  24.         font-size: 14px;
  25.         font-weight: 600;
  26.         background: #DDDDDD !important;
  27.         color: #737373 !important;
  28.         font-family: 'Poppins', sans-serif;
  29.         text-transform: initial !important;
  30.     }
  32.     .otp_ajax_form_submit.ready {
  33.         background: #1d5b9e !important;
  35.         color: white !important;;
  37.     }
  40. </style>
  41. <div class="modal fade" id="verifyOtpModal" tabindex="-1" aria-labelledby="exampleModalLabel"
  42.      aria-hidden="true">
  43.     <div class="modal-dialog modal-dialog-centered">
  44.         <div class="modal-content">
  46.             <div class="modal-body">
  49.                 <div class="row login-section">
  50.                     <div class="col-md-12 login-inputs-modal" style="padding:1rem 1rem;">
  52.                     <h2 style="text-align: center;
  53.                     color:#1D5B9E;font-size: 30px;font-weight: 600;">Enter OTP</h2>
  54.                     <p class="message_text" style="    margin: 0;
  56.     text-align: center;
  57.     color: #eb9f9f;"></p>
  58.                     <p style="    margin: 0; font-size: 13px;;
  60.     text-align: center;
  61.     ;">An OTP was sent to your email address.</p>
  65.                     {#<h6 style="margin: 40px 0 10px;color: #615A5A;">Login With:</h6>#}
  66.                     {#<h6 style="margin: 8px 0 10px;color: #615A5A;">An OTP was sent to your email address.</h6>#}
  68.                     <form action="" id="otp_ajax_form" method="post">
  69.                         {#<div class="email-input" style="margin-top: 10px">#}
  70.                             {#<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>#}
  73.                         {#</div>#}
  75.                         <div class="email-input" style="margin-top: 10px;display: flex;justify-content: space-between;">
  77.                             <input type="number" id="otp_in_1" name="otp_in_1" placeholder="" maxlength="1"  required data-prev-id="_NONE_" data-next-id="2"
  78.                                    class="otp_in otp_in_1">
  79.                             <input type="text" id="otp_in_2" name="otp_in_2" placeholder="" maxlength="1" required data-prev-id="1" data-next-id="3"
  80.                                    class="otp_in otp_in_2">
  81.                             <input type="text" id="otp_in_3" name="otp_in_3" placeholder="" maxlength="1"  required data-prev-id="2" data-next-id="4"
  82.                                    class="otp_in otp_in_3">
  83.                             <input type="text" id="otp_in_4" name="otp_in_4" placeholder="" maxlength="1" data-prev-id="3" data-next-id="_NONE_" required
  84.                                    class="otp_in otp_in_4">
  85.                             <input type="hidden" id="otp" name="otp" placeholder="otp"  required maxlength="4"
  86.                                    class="input_field">
  87.                             <div class="eye-onoff">
  88.                                 {#<p class=" small_error_text email">Pikachu</p>#}
  89.                                 <i class="fas fa-times small_error_icon email"></i>
  90.                             </div>
  91.                             <p class=" small_error_text email"></p>
  93.                         </div>
  94.                         {#<div class="email-input" style="margin-top: 10px">#}
  95.                         {#<div class="email-title"><label for="" style="margin-top: 38px;" >Email</label></div>#}
  96.                         {#<input type="text" id="username" name="username" placeholder="Username" data-field-type="username"#}
  97.                         {#required#}
  98.                         {#class="input_field username checkIfExists {{ errorField=='username'?'error_class':'' }}">#}
  99.                         {#<div class="eye-onoff">#}
  100.                         {#<i class="fas fa-check small_error_icon username"></i>#}
  101.                         {#</div>#}
  102.                         {#<p class=" small_error_text username"></p>#}
  104.                         {#</div>#}
  106.                         {#<div class="form-check" style="margin-top: 20px;">#}
  109.                         {#<a style="float: right;font-size: 14px;#}
  110.                         {#color: #615A5A;" href="">Forgot your password?</a>#}
  111.                         {#</div>#}
  112.                         <h6 style="    margin: 10px 0 10px;
  113.     color: #615A5A;
  114.     font-size:12px;
  115.     text-align: center;"><span id="otpExpireTextPrefix">The OTP will expire</span> <span style="" id="otpExpireText" class="  time convert_to_moment_time"
  116.                                                    data-moment-ts-format="_today_or_date_"
  117.                                                    data-moment-ts="0"></span> <a class="resend_otp_button" style="display: inline-block;"
  118.                                                                                                  href="#"> Resend OTP</a></h6>
  121.                         <button type="submit" class="otp_ajax_form_submit" style="">Proceed
  122.                         </button>
  123.                     </form>
  125.                     </div>
  127.                 </div>
  129.             </div>
  130.             {#<div class="modal-footer">#}
  132.             {#</div>#}
  133.         </div>
  134.     </div>
  135. </div>
  137. <script>
  138.     var otpModalInitiated=0;
  139.     var verifyOtpModal=0;
  140.     function initiateOtpModal(){
  142.         verifyOtpModal = new bootstrap.Modal(document.getElementById('verifyOtpModal'), {
  143.             keyboard: false
  144.         });
  145.         verifyOtpModal.show();
  147.         otpModalInitiated=1;
  148.     }
  150.     function triggerOtpVerification(options,callback)
  151.     {
  152.         options=options||{
  154.                 };
  155.         var data={
  157.         }
  159.         if(otpModalInitiated==0)
  160.                 initiateOtpModal();
  167.         callback(data);
  168.     }
  169. </script>