templates/frontend/manufacturers/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.                     Business 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="manufacturer-name" id="manufacturer_name" class="form-control" placeholder="Company Name*">
  24.                 <div class="hidden_msg" id="error_manufacturer_name">
  25.                     Required Field
  26.                 </div>
  27.             </div>
  29.             <div class="col-12 col-sm-6">
  30.                 <label>Logo <span class="text-danger">*</span></label>
  31.                 <input type="file" name="logo" id="logo" class="form-control" placeholder="Business Logo*">
  32.                 <div class="hidden_msg" id="error_logo">
  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>Business 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>Business 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="manufacturer_iso_code" value="">
  70.                 <input type="hidden" name="intl-code" id="manufacturer_intl_code" value="">
  71.                 <div class="hidden_msg" id="error_telephone">
  72.                     Required Field
  73.                 </div>
  74.             </div>
  75.         </div>
  77.         <div class="row">
  78.             <div class="col-12 ps-0 pe-0">
  79.                 <button id="form_save" type="submit" class="btn btn-primary float-end w-100">CREATE ACCOUNT</button>
  80.             </div>
  81.         </div>
  82.     </div>
  83. </form>
  84. {% endblock %}
  86. {% block javascripts %}
  87.     {{ parent() }}
  89.     <script>
  91.         $(document).ready(function (){
  93.             // International Numbers
  94.             let input = document.querySelector('#telephone');
  95.             iti = window.intlTelInput(input, {
  96.                 initialCountry: "auto",
  97.                 geoIpLookup: function(success, failure) {
  98.                     $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
  99.                         var countryCode = (resp && resp.country) ? resp.country : "ae";
  100.                         success(countryCode);
  101.                     });
  102.                 },
  103.                 preferredCountries: ['ae','qa', 'bh', 'om', 'sa'],
  104.                 autoPlaceholder: "polite",
  105.                 nationalMode: true,
  106.                 utilsScript: "{{ asset('js/utils.min.js') }}", // just for formatting/placeholders etc
  107.                 separateDialCode: true,
  108.                 utilsScript: "/js/utils.js",
  109.             });
  111.             let handleChange = function() {
  112.                 let mobile = $('#mobile_no');
  113.                 let mobile_number = (iti.isValidNumber()) ? iti.getNumber() : false;
  114.                 let textNode = document.createTextNode(mobile_number);
  116.                 if(mobile_number != false){
  118.                     let iso_code = iti.getSelectedCountryData().iso2;
  119.                     let intl_code = iti.getSelectedCountryData().dialCode;
  121.                     mobile.val(mobile_number.substring(1));
  122.                     $('#manufacturer_iso_code').val(iso_code);
  123.                     $('#manufacturer_intl_code').val(intl_code);
  125.                 }
  126.             };
  128.             // listen to "keyup", but also "change" to update when the user selects a country
  129.             input.addEventListener('change', handleChange);
  130.             input.addEventListener('keyup', handleChange);
  132.             $(document).on('change', '#email', function (){
  134.                 let email = $('#email').val();
  135.                 let errorEmail = $('#error_email');
  137.                 errorEmail.hide();
  139.                 $.ajax({
  140.                     url: "{{ path('manufacturer_check_email') }}",
  141.                     type: 'POST',
  142.                     dataType: 'json',
  143.                     data: {
  144.                         email: email
  145.                     },
  146.                     complete: function(e, xhr, settings)
  147.                     {
  148.                         if(e.status === 500){
  149.                             window.location.href = '{{ path('clinic_error_500') }}';
  150.                         }
  151.                     },
  152.                     success: function (response)
  153.                     {
  155.                         if(response.restricted)
  156.                         {
  157.                             errorEmail.empty().append('Domain name is not allowed').show();
  159.                         } else if(response.duplicate)
  160.                         {
  161.                             errorEmail.empty().append('Domain name is associated with another account').show();
  163.                         } else if(response.inValid)
  164.                         {
  165.                             errorEmail.empty().append('Email address is invalid').show();
  166.                         }
  167.                     }
  168.                 });
  169.             });
  171.             $(document).on('submit','#register_form', function (e){
  173.                 e.preventDefault();
  175.                 let is_valid = true;
  176.                 let manufacturerName = $('#manufacturer_name').val();
  177.                 let logo = $('#logo').val();
  178.                 let firstName = $('#first_name').val();
  179.                 let lastName = $('#last_name').val();
  180.                 let email = $('#email').val();
  181.                 let telephone = $('#mobile_no').val();
  182.                 let errorManufacturerName = $('#error_manufacturer_name');
  183.                 let errorLogo = $('#error_logo');
  184.                 let errorFirstName = $('#error_first_name');
  185.                 let errorLastName = $('#error_last_name');
  186.                 let errorEmail = $('#error_email');
  187.                 let errorTelephone = $('#error_telephone');
  189.                 errorManufacturerName.hide();
  190.                 errorLogo.hide();
  191.                 errorFirstName.hide();
  192.                 errorLastName.hide();
  193.                 errorEmail.hide();
  194.                 errorTelephone.hide();
  196.                 if(manufacturerName == '' || manufacturerName == 'undefined'){
  198.                     errorManufacturerName.show();
  199.                     is_valid = false;
  200.                 }
  202.                 if(logo == '' || logo == 'undefined'){
  204.                     errorLogo.show();
  205.                     is_valid = false;
  206.                 }
  208.                 if(firstName == '' || firstName == 'undefined'){
  210.                     errorFirstName.show();
  211.                     is_valid = false;
  212.                 }
  214.                 if(lastName == '' || lastName == 'undefined'){
  216.                     errorLastName.show();
  217.                     is_valid = false;
  218.                 }
  220.                 if(email == '' || email == 'undefined'){
  222.                     errorEmail.empty().append('Required Field').show();
  223.                     is_valid = false;
  224.                 }
  226.                 if(telephone == '' || telephone == 'undefined'){
  228.                     errorTelephone.show();
  229.                     is_valid = false;
  230.                 }
  232.                 if(is_valid == true){
  234.                     let data = new FormData(this);
  236.                     $.ajax({
  237.                         url: "{{ path('manufacturer_create') }}",
  238.                         type: 'POST',
  239.                         contentType: false,
  240.                         processData: false,
  241.                         cache: false,
  242.                         timeout: 600000,
  243.                         dataType: 'json',
  244.                         data: data,
  245.                         success: function (response) {
  247.                             $('#register_form').empty();
  248.                             $('#register_form').append(response);
  249.                         }
  250.                     });
  251.                 }
  252.             });
  254.         });
  256.     </script>
  257. {% endblock %}