templates/frontend/distributors/register.html.twig line 1

Open in your IDE?
  1. {% extends 'layout.html.twig' %}
  3. {% block title %}Hello DistributorsController!{% endblock %}
  5. {% block body %}
  6. <form method="post" id="register_form">
  7.     <div class="container mb-5">
  8.         <div class="row pt-3">
  9.             <div class="col-12 text-center mt-1 pt-3 pb-3" id="order_header">
  10.                 <h4 class="text-primary">Let's Create Your Account.</h4>
  11.                 <span class="text-primary">
  12.                     Signing up for your Fluid is fast and free - be up and running in under a minute.
  13.                 </span>
  14.             </div>
  15.         </div>
  17.         <div class="row pb-3 pt-3 bg-light border-left border-right border-top">
  18.             <div class="col-12 col-sm-6">
  19.                 <label>
  20.                     Company Name <span class="text-danger">*</span>
  21.                 </label>
  22.                 <input type="checkbox" name="contact_me_by_fax_only" value="1" tabindex="-1" class="hidden" autocomplete="off">
  23.                 <input type="text" name="distributor-name" id="distributor_name" class="form-control" placeholder="Distributor Name*">
  24.                 <div class="hidden_msg" id="error_distributor_name">
  25.                     Required Field
  26.                 </div>
  27.             </div>
  29.             <div class="col-12 col-sm-6">
  30.                 <label>Your Position <span class="text-danger">*</span></label>
  31.                 <input type="text" name="position" id="position" class="form-control" placeholder="Position*">
  32.                 <div class="hidden_msg" id="error_position">
  33.                     Required Field
  34.                 </div>
  35.             </div>
  36.         </div>
  38.         <div class="row pb-3 bg-light border-left border-right">
  39.             <div class="col-12 col-sm-6">
  40.                 <label>First Name <span class="text-danger">*</span></label>
  41.                 <input type="text" name="first-name" id="first_name" class="form-control" placeholder="First Name*">
  42.                 <div class="hidden_msg" id="error_first_name">
  43.                     Required Field
  44.                 </div>
  45.             </div>
  47.             <div class="col-12 col-sm-6">
  48.                 <label>Last Name <span class="text-danger">*</span></label>
  49.                 <input type="text" name="last-name" id="last_name" class="form-control" placeholder="Last Name*">
  50.                 <div class="hidden_msg" id="error_last_name">
  51.                     Required Field
  52.                 </div>
  53.             </div>
  54.         </div>
  56.         <div class="row pb-3 bg-light border-left border-right">
  57.             <div class="col-12 col-sm-6">
  58.                 <label>Your Email <span class="text-danger">*</span></label>
  59.                 <input type="text" name="email" id="email" class="form-control" placeholder="Email*">
  60.                 <div class="hidden_msg" id="error_email">
  61.                     Required Field
  62.                 </div>
  63.             </div>
  65.             <div class="col-12 col-sm-6">
  66.                 <label>Your Telephone <span class="text-danger">*</span></label>
  67.                 <input type="text" name="telephone" id="telephone" class="form-control" placeholder="Telephone*">
  68.                 <input type="hidden" value="0" name="mobile-no" id="mobile_no">
  69.                 <input type="hidden" name="iso-code" id="distributor_iso_code" value="">
  70.                 <input type="hidden" name="intl-code" id="distributor_intl_code" value="">
  71.                 <div class="hidden_msg" id="error_telephone">
  72.                     Required Field
  73.                 </div>
  74.             </div>
  75.         </div>
  77.         <div class="row pb-3 mb-3 bg-light border-left border-right border-bottom pb-3">
  78.             <div class="col-12 col-sm-6">
  79.                 <label>Located In <span class="text-danger">*</span></label>
  80.                 <select name="country" style="color:#b1abb0 !important" id="country" class="form-control">
  81.                     <option value="">Country</option>
  82.                     {% for country in countries %}
  83.                         <option value="{{ country.id }}">{{ country.name }}</option>
  84.                     {% endfor %}
  85.                 </select>
  86.                 <div class="hidden_msg" id="error_country">
  87.                     Required Field
  88.                 </div>
  89.             </div>
  90.         </div>
  91.         <div class="row">
  92.             <div class="col-12 ps-0 pe-0">
  93.                 <button id="form_save" type="submit" class="btn btn-primary float-end w-100">CREATE ACCOUNT</button>
  94.             </div>
  95.         </div>
  96.     </div>
  97. </form>
  98. <div class="overlay"></div>
  99. <div class="spanner">
  100.     <div class="loader"></div>
  101.     <p class="text-light fw-bold" style="font-size: 36px;">Loading...</p>
  102. </div>
  103. {% endblock %}
  105. {% block javascripts %}
  106.     {{ parent() }}
  108.     <script>
  110.         $(document).ready(function (){
  112.             // International Numbers
  113.             let input = document.querySelector('#telephone');
  114.             iti = window.intlTelInput(input, {
  115.                 initialCountry: "auto",
  116.                 geoIpLookup: function(success, failure) {
  117.                     $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
  118.                         var countryCode = (resp && resp.country) ? resp.country : "ae";
  119.                         success(countryCode);
  120.                     });
  121.                 },
  122.                 preferredCountries: ['ae','qa', 'bh', 'om', 'sa'],
  123.                 autoPlaceholder: "polite",
  124.                 nationalMode: true,
  125.                 utilsScript: "{{ asset('js/utils.min.js') }}", // just for formatting/placeholders etc
  126.                 separateDialCode: true,
  127.                 utilsScript: "/js/utils.js",
  128.             });
  130.             let handleChange = function() {
  131.                 let mobile = $('#mobile_no');
  132.                 let mobile_number = (iti.isValidNumber()) ? iti.getNumber() : false;
  133.                 let textNode = document.createTextNode(mobile_number);
  135.                 if(mobile_number != false){
  137.                     let iso_code = iti.getSelectedCountryData().iso2;
  138.                     let intl_code = iti.getSelectedCountryData().dialCode;
  140.                     mobile.val(mobile_number.substring(1));
  141.                     $('#distributor_iso_code').val(iso_code);
  142.                     $('#distributor_intl_code').val(intl_code);
  144.                 }
  145.             };
  147.             // listen to "keyup", but also "change" to update when the user selects a country
  148.             input.addEventListener('change', handleChange);
  149.             input.addEventListener('keyup', handleChange);
  151.             $(document).on('change', '#email', function (){
  153.                 let email = $('#email').val();
  154.                 let errorEmail = $('#error_email');
  156.                 errorEmail.hide();
  158.                 $.ajax({
  159.                     url: "{{ path('distributor_check_email') }}",
  160.                     type: 'POST',
  161.                     dataType: 'json',
  162.                     data: {
  163.                         'email': email
  164.                     },
  165.                     complete: function(e, xhr, settings)
  166.                     {
  167.                         if(e.status === 500){
  168.                             window.location.href = '{{ path('clinic_error_500') }}';
  169.                         }
  170.                     },
  171.                     success: function (response)
  172.                     {
  173.                         if(!response.response)
  174.                         {
  175.                             if(response.restricted)
  176.                             {
  177.                                 errorEmail.empty().append('Domain name is not allowed').show();
  179.                             } else
  180.                             {
  181.                                 errorEmail.empty().append('Your business is already registered, please contact '+ response.firstName).show();
  182.                             }
  184.                             $('#email').val('');
  185.                         }
  186.                     }
  187.                 });
  188.             });
  190.             $(document).on('submit','#register_form', function (e){
  192.                 e.preventDefault();
  194.                 let is_valid = true;
  195.                 let distributorName = $('#distributor_name').val();
  196.                 let position = $('#position').val();
  197.                 let firstName = $('#first_name').val();
  198.                 let lastName = $('#last_name').val();
  199.                 let email = $('#email').val();
  200.                 let telephone = $('#mobile_no').val();
  201.                 let country = $('#country').val();
  202.                 let errorDistributorName = $('#error_distributor_name');
  203.                 let errorPosition = $('#error_position');
  204.                 let errorFirstName = $('#error_first_name');
  205.                 let errorLastName = $('#error_last_name');
  206.                 let errorEmail = $('#error_email');
  207.                 let errorTelephone = $('#error_telephone');
  208.                 let errorCountry = $('#error_country');
  210.                 errorDistributorName.hide();
  211.                 errorPosition.hide();
  212.                 errorFirstName.hide();
  213.                 errorLastName.hide();
  214.                 errorEmail.hide();
  215.                 errorTelephone.hide();
  217.                 if(distributorName == '' || distributorName == 'undefined'){
  219.                     errorDistributorName.show();
  220.                     is_valid = false;
  221.                 }
  223.                 if(position == '' || position == 'undefined'){
  225.                     errorPosition.show();
  226.                     is_valid = false;
  227.                 }
  229.                 if(firstName == '' || firstName == 'undefined'){
  231.                     errorFirstName.show();
  232.                     is_valid = false;
  233.                 }
  235.                 if(lastName == '' || lastName == 'undefined'){
  237.                     errorLastName.show();
  238.                     is_valid = false;
  239.                 }
  241.                 if(email == '' || email == 'undefined'){
  243.                     errorEmail.empty().append('Required Field').show();
  244.                     is_valid = false;
  245.                 }
  247.                 if(telephone == '' || telephone == 'undefined'){
  249.                     errorTelephone.show();
  250.                     is_valid = false;
  251.                 }
  253.                 if(country == '' || country == 'undefined'){
  255.                     errorCountry.show();
  256.                     is_valid = false;
  257.                 }
  259.                 if(is_valid == true){
  261.                     let data = new FormData(this);
  263.                     $.ajax({
  264.                         url: "{{ path('distributor_create') }}",
  265.                         type: 'POST',
  266.                         contentType: false,
  267.                         processData: false,
  268.                         cache: false,
  269.                         timeout: 600000,
  270.                         dataType: 'json',
  271.                         data: data,
  272.                         beforeSend: function () {
  273.                             isLoading(true);
  274.                         },
  275.                         success: function (response) {
  277.                             $('#register_form').empty();
  278.                             $('#register_form').append(response);
  279.                             isLoading(false);
  280.                         }
  281.                     });
  282.                 }
  283.             });
  285.             function isLoading(status){
  287.                 if(status) {
  289.                     $("div.spanner").addClass("show");
  290.                     $("div.overlay").addClass("show");
  292.                 } else {
  294.                     $("div.spanner").removeClass("show");
  295.                     $("div.overlay").removeClass("show");
  296.                 }
  297.             }
  299.         });
  301.     </script>
  302. {% endblock %}