templates/security/register.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  4. {% block stylesheets %}
  5.     {{ parent() }}
  6.     <style>
  8.         h4 {margin: 0;}
  9.         #send_verification_sms {
  10.             background-color: #337ab7;
  11.             border-color: #2e6da4;
  12.         }
  13.         #send_verification_sms:hover {color: #fff;}
  14.         #register_btn {display: none}
  15.         .errorCaptcha{ border: 1px solid #FF0000 }
  16.         .errorCaptchaMsg {color: #FF0000}
  17.          .tooltip-inner {color: #f00; border: 1px solid #f00}
  20.          input:invalid {color: #f00; border: 1px solid #f00}
  21.          input[type="text"]:valid {color: #008000; border: 1px solid #008000}
  22.          .red-bg{ background: #f6b3b3; color: #000 !important;}
  23.         /*input,
  24.         input:valid {
  25.             border-color: #ccc;
  26.         }*/
  27. /*
  28.         input{color: #f00; border: 1px solid #f00}
  29. */
  31.     </style>
  32. {% endblock %}
  35. {% block page_title %}{{ 'register new account' | trans({}, 'clients') }}{% endblock %}
  37. {% block flash_messages %}
  38.     {{ parent() }}
  39.     {# this is to display form global validation messages #}
  40.     {% if form_errors(form) is not empty %}
  41.         <div class="alert alert-danger" role="alert">
  42.             {{ form_errors(form) }}
  43.         </div>
  44.     {% endif %}
  45. {% endblock %}
  47. {% block body %}
  48.     <section class="section-padding error-page pattern-bg0 ">
  49.         <!-- Main Container -->
  50.         <div class="container">
  51.             <!-- Row -->
  52.             <div class="row">
  53.                 <!-- Middle Content Area -->
  54.                 <div class="col-md-12 col-sm-12 col-xs-12">
  55.                     <div class="form-grid required">{{ 'registration announcement message' | trans({'%{newline}':"<br />"}, 'clients')|raw }}</div>
  56.                     <br />
  57.                     <!--  Form -->
  58.                     <div class="form-grid">
  59.                         {{ form_start(form, {'attr': {'id': 'register_form'}} ) }}
  60.                             <div class="row">
  61.                                 <div class="form-group col-md-4 col-xs-12">
  62.                                     {{ form_label(form.userIdentityInfo.firstnameAr, null, {'label_attr' : {'class': 'black'} }) }} <span class='required'>*</span>
  63.                                     {{ form_widget(form.userIdentityInfo.firstnameAr) }}
  64.                                     {{ form_errors(form.userIdentityInfo.firstnameAr) }}
  65.                                 </div>
  66.                                 <div class="form-group col-md-4 col-xs-12">
  67.                                     {{ form_label(form.userIdentityInfo.fourthnameAr, null, {'label_attr' : {'class': 'black'} }) }} <span class='required'>*</span>
  68.                                     {{ form_widget(form.userIdentityInfo.fourthnameAr) }}
  69.                                     {{ form_errors(form.userIdentityInfo.fourthnameAr) }}
  70.                                 </div>
  71.                                 <div class="form-group col-md-4 col-xs-12" id="id_num_div">
  72.                                     {{ form_label(form.userIdentityInfo.identificationNumber, null, {'label_attr' : {'class': 'black'} }) }} <span class='required'>*</span>
  73.                                     {{ form_widget(form.userIdentityInfo.identificationNumber) }}
  74.                                     {{ form_errors(form.userIdentityInfo.identificationNumber) }}
  75.                                 </div>
  76.                             </div>
  77.                             <div class="row">
  78.                                 <div class="col-md-4 col-xs-12">
  79.                                     <div class="form-group col-md-6 col-xs-6">
  80.                                         <label>{{ 'enter the captcha code' | trans({}, 'clients') }}: <span class="required">*</span></label>
  81.                                         <input type="text" class="form-control {% if errorCaptcha %}{{ errorCaptcha }} {% endif %}" name="userCaptcha" id="userCaptcha" required="required" maxlength="4" validate-msg="{{ 'you should enter the captcha code' | trans({}, 'validators') }}" />
  82.                                             <span class="errorCaptchaMsg" style="font-size:12px;color:#e74c3c;display: {% if errorCaptcha %}{{ 'block' }} {% else %} {{ 'none' }} {% endif %}"> {{ 'captcha code is wrong' | trans({}, 'validators') }} </span>
  83.                                     </div>
  84.                                     <div class="form-group col-md-4 col-xs-4">
  85.                                         <label>&nbsp;</label>
  86.                                         <img id="captcha" src="{{ builder.inline }}" style="height: 50px !important; width: 115px !important;">
  87.                                     </div>
  88.                                     <div class="form-group col-md-2 col-xs-2">
  89.                                         <label>&nbsp;</label>
  90.                                         <p class="btn btn-light" id="refresh" style="padding:8px !important; margin-top:8px;">
  91.                                             <i class="fa fa-undo" style="font-size:14px" ></i>
  92.                                         </p>
  93.                                     </div>
  94.                                 </div>
  95.                                 <div class="form-group col-md-4 col-xs-12" id="mobile_num_div">
  96.                                     {{ form_label(form.mobileNumber, null, {'label_attr' : {'class': 'black'} }) }} <span class='required'>*</span>
  97.                                     <div class="input-group">
  98.                                         {{ form_widget(form.mobileNumber) }}
  99.                                         <div class="input-group-btn">
  100.                                             <input type="button" name="send_verification_sms" id="send_verification_sms" value="{{ 'send verification' | trans({}, 'clients') }}" class="form-control btn btn-light">
  101.                                         </div>
  102.                                     </div>
  103.                                     {{ form_errors(form.mobileNumber) }}
  104.                                 </div>
  105.                                 <div class="form-group col-md-4 col-xs-12" id="verification_code" style="display: none">
  106.                                     <label>{{ 'enter verification code' | trans({}, 'clients') }}: <span class="required">*</span></label>
  107.                                     <input type="text" name="sms_code" id="sms_code" required maxlength="3" minlength="3" validate-msg="{{ 'you should enter the verification code' | trans({}, 'validators') }}" class="form-control">
  108.                                 </div>
  109.                             </div>
  111.                             <div class="row">
  112.                                 <div class="col-md-3 col-xs-12 pull-right">
  113.                                     <input type="submit" value="{{ 'register' | trans({}, 'clients') }}" id="register_btn"  class="btn btn-theme btn-lg btn-block" style="width: 50% !important; margin: auto">
  114.                                 </div>
  115.                             </div>
  117.                         {{ form_end(form) }}
  118.                     </div>
  119.                     <!-- Form -->
  120.                 </div>
  123.                 <!-- Middle Content Area  End -->
  124.             </div>
  125.             <!-- Row End -->
  126.         </div>
  127.         <!-- Main Container End -->
  128.     </section>
  131.     <div class="footer-area">
  132.         <div class="footer-copyright">
  133.             <div class="">
  134.                 <a href="https://wa.me/966559661234" target="_blank" style="color: white;">
  135.                     <div dir="ltr" style="direction: ltr;">
  136.                         {{ 'support whatsapp contact' | trans}}
  137.                         <br /><img src="{{ asset('w1.png')}}" width="40" />
  138.                         +966-55-966-1234
  139.                     </div>
  140.                 </a>
  141.             </div>
  142.         </div>
  143.     </div>
  144. {% endblock %}
  147. {% block javascripts %}
  148.     
  149.     {{ parent() }}
  150.     <script type="text/javascript">
  151.         $(function(){
  152.             //loop on all form input fields to set validation messages according to validate-msg attribute
  153.             $("form :input").each(function(){
  154.                 var input = $(this);
  155.                 var msg   = input.attr('validate-msg');
  156.                 input.on('change invalid input', function(){
  157.                     input[0].setCustomValidity('');
  158.                     if (! input[0].validity.valid) {
  159.                         input[0].setCustomValidity(msg);
  160.                     }
  161.                 });
  162.             });
  164.             $('#send_verification_sms').click(function() {
  165.                 $("#appbundle_users_registration_mobileNumber,#appbundle_users_registration_userIdentityInfo_identificationNumber,#userCaptcha").removeClass("red-bg");
  167.                 //manually validating (on demand validation) form fields, except the sms_code field, before requesting a verification code on mobile
  168.                 var block_send_sms= false;
  169.                 $("form :input").not( "#sms_code" ).each(function(){
  170.                     var input = $(this);
  171.                     if (!input[0].checkValidity()) {
  172.                         var msg = input.attr('validate-msg');
  173.                         //manually marking the form field as invalid and immediately show validation message
  174.                         input[0].reportValidity(msg);
  175.                         block_send_sms= true;
  176.                     }
  177.                 });
  178.                 //dont proceed if even a single field validation failed
  179.                 if(block_send_sms){
  180.                     return;
  181.                 }
  183.                 // clear error messages in order not to confused with the current sending verification SMS result
  184.                 $("#mobile_num_div ul li").text( "" );
  185.                 $("#id_num_div ul li").text( "" );
  186.                 var mobileField = $('#appbundle_users_registration_mobileNumber');
  188.                 if (mobileField[0].checkValidity()) {
  189.                     // show remaining seconds count-down inside verification code button
  190.                     var counter = 30;
  191.                     var couterIntervalId = setInterval(function() {
  192.                         counter--;
  193.                         if (counter >= 0) {
  194.                             $('#send_verification_sms').prop('value', "{{ 'send verification' | trans({}, 'clients') }}"+' ('+counter+')');
  195.                         }
  196.                         if (counter === 0) {
  197.                             clearInterval(counter);
  198.                             $('#send_verification_sms').prop('value', "{{ 'send verification' | trans({}, 'clients') }}");
  199.                             btn.prop('disabled', false);
  200.                         }
  202.                     }, 1000); // end counter
  204.                     var mobileNumber = mobileField.val();
  205.                     var btn = $(this);
  206.                     check_ajax = false ;
  207.                     captchaPhrase = '{{ app.session.get('captchaPhrase') }}';
  208.                     btn.prop('disabled', true);
  210.                     var request = $.ajax({
  211.                         url:'{{ path('send_code_sms') }}',
  212.                         type: "POST",
  213.                         dataType: "json",
  214.                         data: {
  215.                             "mobileNumber": mobileNumber,
  216.                             "identification": $("#appbundle_users_registration_userIdentityInfo_identificationNumber").val(),
  217.                             "captchaPhrase": $("#userCaptcha").val()
  218.                     },
  219.                         async: true
  220.                     });
  222.                     request.done( function ( response ){
  223.                         // check SMS Delivery Status
  224.                         GetDeliveryStatus(response.mobileNumber,response.MessageID,couterIntervalId );
  225.                         $("#verification_code").css("display", "block");
  226.                         $("#register_btn").css("display", "block");
  227.                         $("#appbundle_users_registration_mobileNumber,#appbundle_users_registration_userIdentityInfo_identificationNumber,#userCaptcha").removeClass("red-bg");
  228.                         $(".errorCaptchaMsg").css("display",'none');
  229.                     });
  231.                     request.fail( function ( jqXHR ) {
  232.                         //create a validation message container for mobile number field if none exist
  233.                         if( $("#mobile_num_div ul li").length === 0){
  234.                             $("#mobile_num_div").append('<ul><li></li></ul>');
  235.                         }
  236.                         //create a validation message container for id number (username) field if none exist
  237.                         if( $("#id_num_div ul li").length === 0){
  238.                             $("#id_num_div").append('<ul><li></li></ul>');
  239.                         }
  240.                         var mobile_validation_container= $("#mobile_num_div ul li");
  241.                         var id_validation_container= $("#id_num_div ul li");
  242.                         if (jqXHR.responseText == "illegal access") {
  243.                             mobile_validation_container.text( "{{ 'illegal access' | trans({}, 'clients') }}" );
  244.                         }
  245.                         else if (jqXHR.responseText == "server error") {
  246.                             mobile_validation_container.text( "{{ 'server error' | trans({}, 'clients') }}" );
  247.                         }
  248.                         else if (jqXHR.responseText == "invalid mobile number") {
  249.                             mobile_validation_container.text( "{{ 'invalid mobile number' | trans({}, 'clients') }}" );
  250.                             $("#appbundle_users_registration_mobileNumber").addClass("red-bg");
  251.                         }
  252.                         else if (jqXHR.responseText == "mobile number already registered") {
  253.                             mobile_validation_container.html( "{{ 'mobile number already registered. click %{start_link}here%{end_link} to recover your password' | trans({'%{start_link}': '<a href=\'' ~ path("forgot_password") ~ '\'>', '%{end_link}': '</a>'}, 'clients')| raw }}" );
  254.                             $("#appbundle_users_registration_mobileNumber").addClass("red-bg");
  255.                         }
  256.                         else if (jqXHR.responseText == "identification number already registered") {
  257.                             id_validation_container.html( "{{ 'identification number already registered. click %{start_link}here%{end_link} to recover your password' | trans({'%{start_link}': '<a href=\'' ~ path("forgot_password") ~ '\'>', '%{end_link}': '</a>'}, 'clients')| raw }}" );
  258.                             $("#appbundle_users_registration_userIdentityInfo_identificationNumber").addClass("red-bg");
  260.                         }else if (jqXHR.responseText == "Error in captcha Phrase") {
  261.                             $(".errorCaptchaMsg").css("display",'block');
  262.                             $("#userCaptcha").addClass("red-bg");
  263.                         }
  264.                         else if (jqXHR.status == 403 || jqXHR.status == 404 ) {
  265.                             //handle other unexpected errors
  266.                             mobile_validation_container.text( "{{ 'error occured while sending verification code' | trans({}, 'clients') }}" );
  267.                         }
  269.                         clearInterval(couterIntervalId); //stop the send verification sms button counter
  270.                         $('#send_verification_sms').prop('value', "{{ 'send verification' | trans({}, 'clients') }}"); //reset send verification sms button label
  271.                         btn.prop('disabled', false);
  272.                     });
  273.                 } else {
  274.                     var msg = mobileField.attr('validate-msg');
  275.                     mobileField[0].reportValidity(msg);
  276.                 }
  277.             });
  278.         });
  280.         function GetDeliveryStatus(mobileNumber,MessageID,couterIntervalId) {
  281.             $.ajax({
  282.                 url: '{{ path('get_sms_status') }}',
  283.                 type: "POST",
  284.                 dataType: "json",
  285.                 data: {
  286.                     "mobileNumber": mobileNumber,
  287.                     "MessageID"   : MessageID,
  288.                 },
  289.                 success: function(result)
  290.                 {
  291.                     if(result == false){
  292.                         setTimeout(function(){
  293.                             GetDeliveryStatus(mobileNumber,MessageID,couterIntervalId)
  294.                         }, 3000);
  296.                     }else {
  297.                         clearInterval(couterIntervalId); //stop the send verification sms button counter
  298.                         $('#send_verification_sms').prop('value', "{{ 'verification code sent' | trans({}, 'clients') }}"); //set new label for send verification sms button
  299.                     }
  300.                 },
  301.                 error: function(jqXHR) {
  302.                     //create a validation container for mobile number field if none exist
  303.                     if( $("#mobile_num_div ul li").length === 0){
  304.                         $("#mobile_num_div").append('<ul><li></li></ul>');
  305.                     }
  306.                     var mobile_validation_container= $("#mobile_num_div ul li");
  307.                     if (jqXHR.responseText == "invalid mobile number") {
  308.                         mobile_validation_container.text( "{{ 'invalid mobile number' | trans({}, 'clients') }}" );
  309.                         clearInterval(couterIntervalId); //stop the send verification sms button counter
  310.                         $('#send_verification_sms').prop('value', "{{ 'send verification' | trans({}, 'clients') }}"); //reset send verification sms button label
  311.                         btn.prop('disabled', false);
  312.                     }
  313.                     else if (jqXHR.responseText == "sms not delivered") {
  314.                         mobile_validation_container.text( "{{ 'sms not delivered' | trans({}, 'clients') }}" );
  315.                     }
  316.                     clearInterval(couterIntervalId); //stop the send verification sms button counter
  317.                     $('#send_verification_sms').prop('value', "{{ 'send verification' | trans({}, 'clients') }}"); //reset send verification sms button label
  318.                     btn.prop('disabled', false);
  320.                 }
  321.             });
  322.         }
  324.         $('#refresh').click(function() {
  325.             $.ajax({
  326.                 url:'{{ (path('get_captcha_ajax')) }}',
  327.                 type: "POST",
  328.                 dataType: "json",
  329.                 async: true,
  330.                 success: function (data)
  331.                 {
  332.                   $("#captcha").attr('src',data.builder);
  333.                 }
  334.             });
  335.         });
  336.     </script>
  337. {% endblock %}