src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/views/verify_otp_honeybee.html.twig line 1

Open in your IDE?
  1. {# {% include '@Application/inc/buddybee_new_header.html.twig' %} #}
  2. {% include '@Application/inc/central_header.html.twig' %}
  4. <style>
  5.     .email-input{
  6.         position: relative;
  7.     }
  9.     .otp_in{  }
  10.     /* Chrome, Safari, Edge, Opera */
  11.     input::-webkit-outer-spin-button,
  12.     input::-webkit-inner-spin-button {
  13.         -webkit-appearance: none;
  14.         margin: 0;
  15.     }
  17.     /* Firefox */
  18.     input[type=number] {
  19.         -moz-appearance: textfield;
  20.     }
  22. </style>
  24. {# honeybee otp verrify form section #}
  25. <section class="verification-code-page section"> 
  26.     <div class="container d-flex justify-content-center align-items-center">
  27.         <div class="card text-center login-inputs">
  28.             <h2 class="section-title">We've sent you a code to your email address </h2>
  29.             <p style="margin: 0; text-align: center; color: #eb9f9f;">{{ message==''?'':message }}</p>
  30.             <p>Please check your email and enter the code from there.</p>
  31.             {# form #}
  32.             <form action="" id="relevantForm" method="post"> 
  33.                 <div class="email-input d-flex justify-content-center " id="code-input">
  34.                     {# otp digit 1 #}
  35.                     <input type="number" id="otp_in_1" name="otp_in_1" placeholder="" maxlength="1" data-prev-id="_NONE_" data-next-id="2"  class="code-box mx-1 otp_in otp_in_1" required>
  36.                     {# otp digit 2 #}
  37.                     <input type="number" id="otp_in_2" name="otp_in_2" placeholder="" maxlength="1" data-prev-id="1"      data-next-id="3"  class="code-box mx-1 otp_in otp_in_2" required>
  38.                     {# otp digit 3 #}
  39.                     <input type="number" id="otp_in_3" name="otp_in_3" placeholder="" maxlength="1" data-prev-id="2"      data-next-id="4"  class="code-box mx-1 otp_in otp_in_3" required>
  40.                     {# otp digit 4 #}
  41.                     <input type="number" id="otp_in_4" name="otp_in_4" placeholder="" maxlength="1" data-prev-id="3"      data-next-id="_NONE_"  class="code-box mx-1 otp_in otp_in_4" required>
  43.                     <input type="hidden" id="otp" name="otp" placeholder="otp" maxlength="4" class="input_field" required>
  44.                     <div class="eye-onoff d-none">
  45.                         <i class="fas fa-times small_error_icon email"></i>
  46.                     </div>
  47.                     {# error message #}
  48.                     <p class="small_error_text email"></p>
  50.                 </div>
  51.                 
  52.                 
  53.                 <h6 class='mt-5' style="margin: 10px 0 10px;color: #615A5A;font-size:12px;text-align: center;"><span id="otpExpireTextPrefix">The OTP will expire</span> <span style="" id="otpExpireText" 
  54.                         class="time convert_to_moment_time" data-moment-ts-format="_today_or_date_"
  55.                         data-moment-ts="{{ otpExpireTs }}"></span> <a class="resend_otp_button" style="display: inline-block;" href="#"> Resend OTP</a>
  56.                 </h6>
  57.                 <button type="submit" class="honeybtn rel_form_submit mt-4">Confirm</button>
  59.             </form>
  60.             
  61.             <p class="mt-3"><small>Not you? </small><a href="{{ url('central_landing') }}" >Login with another account?</a></p>
  62.         </div>
  63.     </div>
  64. </section>
  66. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  68. {# {% include '@Application/footer/buddybee_new_footer.html.twig' %} #}
  69. <script type="text/javascript" src="{{ absolute_url(path('dashboard')) }}js/onscan.min.js"></script>
  70. {#<script type="text/javascript" src="{{ absolute_url(path('dashboard')) }}buddybee_assets/js/detect_autofill.js"></script>#}
  72. <script>
  73.     var fbt='';
  74.     var cndDwnInterval='';
  76.     $(document).ready(function () {
  77.         function ConvertToMomentTimeOtpExpire(elem) {
  78.             elem=elem||$('#otpExpireText');
  79.             var moment_time = moment.unix($(elem).attr('data-moment-ts'));
  80.             //    console.log($(elem).attr('data-moment-ts'));
  81.             $('#otpExpireTextPrefix').text('This OTP will Expire');
  83.             var format = $(elem).attr('data-moment-ts-format');
  84.             var toReplaceStr = '';
  85.             if ($(elem).attr('data-moment-ts') <= 0) {
  86.                 clearInterval(cndDwnInterval);
  87.                 toReplaceStr = ''
  88.             }
  89.             else {
  90.                 if (format == '_today_or_date_') {
  91.         //      toReplaceStr = moment_time.fromNow()
  92.                     if (moment() > moment_time) {
  93.         //      alert('here')
  94.                         $('#otpExpireTextPrefix').text('The OTP has Expired');
  95.                         toReplaceStr = ''
  96.                         clearInterval(cndDwnInterval);
  97.                     }
  98.                     else {
  99.                         toReplaceStr = moment_time.fromNow()
  100.                     }
  101.                 }
  102.                 else {
  103.                     toReplaceStr = moment_time.format(format)
  104.                 }
  105.             }
  106.             $(elem).text(toReplaceStr)
  108.         }
  109.         function resendOtp(options){
  110.             options=options||{
  111.                         {#userId:{{ session[UserConstants.USER_ID] is defined?session[UserConstants.USER_ID]:'0' }},#}
  112.                         userId:{{ session[UserConstants.USER_ID] is defined?session[UserConstants.USER_ID]:(userId is defined?userId:'0') }},
  113.                         userType:{{ session[UserConstants.USER_TYPE] is defined?session[UserConstants.USER_TYPE]:(userType is defined?userType:'0') }},
  114.                         userCategory:'{{ userCategory is defined?userCategory:'_BUDDYBEE_USER_' }}',
  115.                         otpActionId:'{{ otpActionId is defined?otpActionId:1 }}',
  116.                         otpExpireSecond:180,
  117.                         email:'{{ email is defined?email:'_NONE_' }}',
  119.                     }
  121.             $.post('{{ url('send_otp_ajax') }}', options)
  122.                     .done(function (data) {
  123.             //                        //    console.log(data);
  125.                         if (data.success == true) {
  126.                             $('#otpExpireText').attr('data-moment-ts',data.otpExpireTs);
  127.                             reset_otp()
  128.                             clearInterval(cndDwnInterval);
  129.                             cndDwnInterval = setInterval(ConvertToMomentTimeOtpExpire, 1000);
  132.                         } else {
  134.             //                            $('#barcode_selector_cont').waitMe('hide');
  136.                         }
  137.                     })
  138.                     .fail(function () {
  139.             //                        $('#barcode_selector_cont').waitMe('hide');
  141.                     });
  143.         }
  144.             //        cndDwnInterval = setInterval(ConvertToMomentTimeOtpExpire($('#otpExpireText')), 1000);
  145.         function paste_otp(curr_number){
  147.             $('.otp_in_1').val(Math.floor(curr_number/1000));curr_number=curr_number%1000;
  148.             $('.otp_in_2').val(Math.floor(curr_number/100));curr_number=curr_number%100;
  149.             $('.otp_in_3').val(Math.floor(curr_number/10));curr_number=curr_number%10;
  150.             $('.otp_in_4').val(Math.floor(curr_number/1));curr_number=curr_number%1;
  151.             update_otp_field()
  153.         }
  154.         function reset_otp(){
  155.             $('.otp_in_1').val('').focus();
  156.             $('.otp_in_2').val('');
  157.             $('.otp_in_3').val('');
  158.             $('.otp_in_4').val('');
  160.         }
  161.         function update_otp_field(){
  162.             $('#otp').val(
  163.                     1000*($('.otp_in_1').val())+
  164.                     100*($('.otp_in_2').val())+
  165.                     10*($('.otp_in_3').val())+
  166.                     1*($('.otp_in_4').val())
  167.             )
  168.             check_doc_and_submit(0); //check only not submit
  170.         }
  171. //        $('.otp_in').keydown(function(event){
  172. ////            alert('keydown')
  173. //            alert($(this).val())
  174. //SS
  175. //
  176. //
  177. //
  178. //        })
  179. //        $('.otp_in').keydown(function(event){
  180. ////            alert('blur')
  181. ////            alert($(this).val())
  182. //            if(1*$(this).val()>=1000) {
  183. //                alert($(this).val())
  184. //                paste_otp(1 * $(this).val())
  185. //
  186. //            }
  187. //
  188. //
  189. //
  190. //
  191. //        })
  193.         $('.otp_in_1').keydown(function(event){
  194. //            $('#enter_otp_title').text(
  195. //                    '_'+$(this).val()+'_'
  196. //            )
  197.             if($(this).val().length>=4)
  198.             paste_otp($(this).val())
  200.         })
  201. //        document.addEventListener('onautocomplete', function(e) {
  202. //            e.target.hasAttribute('autocompleted'); // true or false
  203. ////            alert(event.target.value)
  204. //            paste_otp(event.target.value)
  205. ////            e.preventDefault(); // prevent autocomplete
  206. //            // do you stuff...
  207. //        })
  210.         $('.otp_in').keyup(function(event){
  211.             var prev_data_id=$(this).data('prevId')
  212.             var next_data_id=$(this).data('nextId')
  213.            // alert(event.keyCode)
  215.             if ( event.which == 13 ) {
  216.                 event.preventDefault();
  217.             }
  218.             else if ( event.which == 8 ) {
  219.                 event.preventDefault();
  220.                 $(this).val('');
  221.                 if(prev_data_id!='_NONE_')
  222.                     $('.otp_in_'+prev_data_id).focus();
  223. //                $('.otp_in_'+prev_data_id).val('').focus();
  224.             }
  225.             else if ( event.which == 39 ) {
  226.                 event.preventDefault();
  227.                 if (next_data_id != '_NONE_') {
  228.                     $('.otp_in_' + next_data_id).focus();
  229.                 }
  230.             }
  231.             else if ( event.which == 37 ) {
  232.                 event.preventDefault();
  235.                 if(prev_data_id!='_NONE_')
  236.                     $('.otp_in_'+prev_data_id).focus();
  237.             }
  238.             else
  239.             {
  241.                 if(event.key >=0 && event.key<=9 ) {
  242. //                    alert(event.which)
  243. //                    alert(event.key)
  244. //                    alert(String.fromCharCode(event.which))
  245. //                    $(this).val(String.fromCharCode(event.which));
  246.                     $(this).val(event.key);
  247.                     if (next_data_id != '_NONE_') {
  248.                         $('.otp_in_' + next_data_id).focus();
  249.                     }
  250.                 }
  251. //                alert($(this).val())
  252. //                alert(isNaN($(this).val()))
  253.              if( isNaN($(this).val()))
  254.                  $(this).val('');
  257.             }
  258.             update_otp_field()
  262.         })
  263.         function attach_onscan() {
  264. //            alert('pika')
  265.             onScan.attachTo(document, {
  266.                 singleScanQty: 1,
  267.                 minLength:4,
  268.                 suffixKeyCodes: [13], // enter-key expected at the end of a scan
  269.                 reactToPaste: true, // Compatibility to built-in scanners in paste-mode (as opposed to keyboard-mode)
  270.                 onScan: function (sCode, iQty) { // Alternative to document.addEventListener('scan')
  271. //                    //    console.log('Scanned: ' + iQty + 'x ' + sCode);
  272. //
  273. //                    var foundIds = [];
  274. //
  275. ////                //    console.log('PIKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
  276. //                    //    console.log(sCode);
  277. //                    lastScanCrossMatched = 1;
  279.                     if (!isNaN(sCode)) {
  281.                         paste_otp(sCode)
  285.                     }
  288. ////                dynamic_product_selector.focus();
  289. //                //    console.log(dynamic_product_selector.currentResults.items);
  290. ////                dynamic_product_selector.setValue(dynamic_product_selector.currentResults.items[0].id);
  291. //                if(dynamic_product_selector.currentResults.items.length>=1) {
  292. ////                    alert(dynamic_product_selector.currentResults.items.length+','+dynamic_product_selector.currentResults.items[0].id)
  293. //                    dynamic_product_selector.setValue(dynamic_product_selector.currentResults.items[0].id);
  294. //                    ////    console.log(this.currentResults.items.length);
  295. //
  296. //                    dynamic_product_selector.focus();
  297. //                }
  299.                 },
  300. //            onKeyDetect: function(iKeyCode){ // output all potentially relevant key events - great for debugging!
  301. //                //    console.log('Pressed: ' + iKeyCode);
  302. //            }
  303.             });
  305.         }
  307.         function detach_onscan() {
  308.             onScan.detachFrom(document);
  310.         }
  313. //        $('#deliveryInfoModal').on('hidden.bs.modal', function (e) {
  314. //            attach_onscan();
  315. //        })
  316. //        $('#deliveryInfoModal').on('shown.bs.modal', function (e) {
  317. //            detach_onscan();
  318. //        })
  319.         attach_onscan();
  320.         $('.otp_in_'+1).focus();
  321.         $('.resend_otp_button').click(function(e){
  322.             e.preventDefault();
  323.            {# console.log("resend clicked")   #}
  324.             resendOtp();
  325.         })
  327.         $('.login-inputs input').focus(function () {
  328. //            if()
  329. //            $('.login-inputs input').removeClass('error_class');
  330.             $(this).removeClass('error_class');
  331.         })
  333.         $('.login-inputs input').change(function () {
  334. //            if()
  335. //            $('.login-inputs input').removeClass('error_class');
  336.             if($(this).hasClass('checkIfExists'))
  337.             {
  338.                 check_field_validity($(this).attr('data-field-type'))
  339.             }
  341.             check_doc_and_submit(0); //check only not submit
  342.         })
  343.         function  check_field_validity(fieldType)
  344.         {
  345.             fieldType = fieldType || 'email';
  347.             $('.small_error_text.' + fieldType).text('')
  348.             $('.small_error_text.' + fieldType).hide()
  350.             $('.small_error_icon.' + fieldType).removeClass('success').removeClass('error');
  351.             $('.small_error_icon.' + fieldType).removeClass('fa-check').removeClass('fa-times');
  352.             $('.small_error_icon.' + fieldType).addClass('fa-spinner');
  353.             $('.small_error_icon.' + fieldType).show()
  355. //            $.post( "example.php", function() {
  356. //                        alert( "success" );
  357. //                    })
  358. //                    .done(function() {
  359. //                        alert( "second success" );
  360. //                    })
  361. //                    .fail(function() {
  362. //                        alert( "error" );
  363. //                    })
  364. //                    .always(function() {
  365. //                        alert( "finished" );
  366. //                    });
  368.             //{#//    console.log({#}
  369.             //{# fieldType: fieldType,#}
  370.             //{#fieldValue: $('.input_field.' + fieldType).val(),#}
  371.             //{#signUpUserType: {{ signUpUserType }},#}
  374.             //{#}) #}
  376.             if(fieldType=='password')
  377.             {
  378. //                if($('#password2').val()=='')
  379. //                        return;
  381.                 if($('#password').val()!==$('#password2').val())
  382.                     //                if(0)
  383.                 {
  384.                     $('.small_error_text.' + fieldType).text('Passwords do not Match')
  385.                     $('.small_error_text.' + fieldType).show()
  387.                     $('.small_error_icon.' + fieldType).removeClass('fa-spinner').removeClass('success');
  388.                     $('.small_error_icon.' + fieldType).addClass('fa-times').addClass('error');
  390.                     $('.small_error_icon.' + fieldType).show()
  392.                 }
  393.                 else {
  396.                     $('.small_error_text.' + fieldType).text('')
  397.                     $('.small_error_text.' + fieldType).hide()
  399.                     $('.small_error_icon.' + fieldType).removeClass('fa-spinner').removeClass('error');
  400.                     $('.small_error_icon.' + fieldType).addClass('fa-check').addClass('success');
  402.                     $('.small_error_icon.' + fieldType).show()
  404.                 }
  406.                 return;
  407.             }
  411.             $.post('{{ url('check_if_email_exists_already') }}', {
  412.                         fieldType: fieldType,
  413.                         fieldValue: $('.input_field.' + fieldType).val(),
  414.                         signUpUserType: {{ userType }},
  417.                     })
  418.                     .done(function (data) {
  419.                                 //sales.clearItemTable()
  420.                                 fieldType=data.fieldType;
  421.                                 if (data.alreadyExists != true) {
  424.                                     $('.small_error_text.' + fieldType).text('Couldnot find your email')
  425.                                     $('.small_error_text.' + fieldType).show()
  427.                                     $('.small_error_icon.' + fieldType).removeClass('fa-spinner').removeClass('success');
  428.                                     $('.small_error_icon.' + fieldType).addClass('fa-times').addClass('error');
  430.                                     $('.small_error_icon.' + fieldType).show()
  432.                                 }
  433.                                 else {
  436.                                     $('.small_error_text.' + fieldType).text('')
  438.                                     $('.small_error_text.' + fieldType).hide()
  440.                                     $('.small_error_icon.' + fieldType).removeClass('fa-spinner').removeClass('error');
  441.                                     $('.small_error_icon.' + fieldType).addClass('fa-check').addClass('success');
  443.                                     $('.small_error_icon.' + fieldType).show()
  445.                                 }
  446.                             }
  447.                     );
  449.         }
  453.         function check_doc_and_submit(submitFlag) {
  455.             var checkFailed = 0;
  456.             submitFlag=submitFlag||0
  457.             ///check if any checking needed here
  458.             $('.login-inputs input').each(function(ind,elem){
  459.                 if($(this).prop('required')){
  460.                     if($(this).val()=='' )
  461.                         checkFailed=1;
  462.                     //    console.log("REQ");
  464.                 } else {
  465.                    //    console.log("NREQ");
  466.                 }
  467.             });
  469.             $('.small_error_text').each(function(ind,elem)
  470.             {
  471.                 if($(elem).text()!='')
  472.                     checkFailed=1;
  473.             })
  474.             $('.small_error_text').each(function(ind,elem)
  475.             {
  476.                 if($(elem).text()!='')
  477.                     checkFailed=1;
  478.             })
  480.             if(checkFailed==0)
  481.                 $('.rel_form_submit').addClass('ready');
  482.             else
  483.             {
  484.                 $('.rel_form_submit').removeClass('ready');
  485.             }
  487.             if (checkFailed == 0 && submitFlag==1) {
  489.                 $('.rel_form_submit').removeClass('ready');
  490.                 $('.rel_form_submit').hide();
  491.                 $('#relevantForm').submit();
  492.             }
  494.         }
  496.         //For save action
  497.         $('input[type="submit"], button[type="submit"], .rel_form_submit').click(function (event) {
  498.             event.preventDefault();
  499.             check_doc_and_submit(1);
  500.         })
  501.         $('.convert_to_moment_time').each(function (ind, elem) {
  502.             ConvertToMomentTimeOtpExpire(elem);
  504.         });
  506.         cndDwnInterval = setInterval(ConvertToMomentTimeOtpExpire, 1000);
  508.         check_doc_and_submit(0)
  509.     })
  512. </script>