templates/frontend/clinics/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 name="register_form" id="register_form" method="post" autocomplete="off">
  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>
  16.         <div class="row pb-3 bg-light border-left border-right border-top pt-3" id="row_1">
  17.             <input type="checkbox" name="call_back_form[contact_me_by_fax_only]" value="1" tabindex="-1" class="hidden" autocomplete="off">
  18.             {# First Name #}
  19.             <div class="col-12 col-sm-6">
  20.                 <label>First Name <span class="text-danger">*</span></label>
  21.                 <input type="text" name="firstName" id="first_name" class="form-control" placeholder="First Name">
  22.                 <div class="hidden_msg" id="error_first_name">
  23.                     Required Field
  24.                 </div>
  25.             </div>
  27.             {# Last Name #}
  28.             <div class="col-12 col-sm-6">
  29.                 <label>Last Name <span class="text-danger">*</span></label>
  30.                 <input type="text" name="lastName" id="last_name" class="form-control" placeholder="Last Name">
  31.                 <div class="hidden_msg" id="error_last_name">
  32.                     Required Field
  33.                 </div>
  34.             </div>
  35.         </div>
  36.         <div class="row pb-3 bg-light border-left border-right" id="row_2">
  37.             {# Postionn #}
  38.             <div class="col-12 col-sm-6">
  39.                 <label>Your Position <span class="text-danger">*</span></label>
  40.                 <input type="text" name="position" id="position" class="form-control" placeholder="Veterinarian, Office Manager, Inventory Manager .etc">
  41.                 <div class="hidden_msg" id="error_position">
  42.                     Required Field
  43.                 </div>
  44.             </div>
  46.             {# Country #}
  47.             <div class="col-12 col-sm-6">
  48.                 <label>Located In <span class="text-danger">*</span></label>
  49.                 <select name="country" style="color:#b1abb0 !important" id="country" class="form-control">
  50.                     <option value="">Country</option>
  51.                     {% for country in countries %}
  52.                         <option value="{{ country.id }}">{{ country.name }}</option>
  53.                     {% endfor %}
  54.                 </select>
  55.                 <div class="hidden_msg" id="error_country">
  56.                     Required Field
  57.                 </div>
  58.             </div>
  59.         </div>
  60.         <div class="row pb-3 bg-light border-left border-right" id="row_3">
  62.             {# Email #}
  63.             <div class="col-12 col-sm-6">
  64.                 <label>Business Email <span class="text-danger">*</span></label>
  65.                 <input type="text" name="email" id="email" class="form-control" placeholder="Email Address" autocomplete="off">
  66.                 <div class="hidden_msg" id="error_email">
  67.                     Required Field
  68.                 </div>
  69.             </div>
  71.             {# Telephone #}
  72.             <div class="col-12 col-sm-6">
  73.                 <label>Business Telephone <span class="text-danger">*</span></label>
  74.                 <input type="text" name="mobile" id="mobile" class="form-control" placeholder="Telephone" autocomplete="off">
  75.                 <input type="hidden" value="0" name="user-telephone" id="user_telephone">
  76.                 <input type="hidden" name="user-iso-code" id="user_iso_code" value="">
  77.                 <input type="hidden" name="user-intl-code" id="user_intl_code" value="">
  78.                 <div class="hidden_msg" id="error_telephone">
  79.                     Required Field
  80.                 </div>
  81.             </div>
  82.         </div>
  83.         <div class="row mb-3 bg-light border-left border-right border-bottom" id="row_4">
  84.             {# Clinic Name #}
  85.             <div class="col-12 col-sm-6">
  86.                 <label>Business Name <span class="text-danger">*</span></label>
  87.                 <input type="text" name="clinicName" id="clinic_name" class="form-control" placeholder="Clinic Name">
  88.                 <div class="hidden_msg" id="error_clinic_name">
  89.                     Required Field
  90.                 </div>
  91.             </div>
  92.             {# Telephone #}
  93.             <div class="col-12 col-sm-6 pb-3">
  94.                 <label>Business Phone Number <span class="text-danger">*</span></label>
  95.                 <input type="text" name="mobile_clinic" id="mobile_clinic" class="form-control" placeholder="Clinic Phone Number">
  96.                 <input type="hidden" value="0" name="clinic-telephone" id="clinic_telephone">
  97.                 <input type="hidden" name="clinic-iso-code" id="clinic_iso_code" value="">
  98.                 <input type="hidden" name="clinic-intl-code" id="clinic_intl_code" value="">
  99.                 <div class="hidden_msg" id="error_clinic_telephone">
  100.                     Required Field
  101.                 </div>
  102.             </div>
  103.         </div>
  104.         <div class="row" id="row_5">
  105.             <div class="col-12 ps-0 pe-0">
  106.                 <button id="form_save" type="submit" class="btn btn-primary w-100">CREATE ACCOUNT</button>
  107.             </div>
  108.         </div>
  109.     </div>
  110. </form>
  111. <div class="overlay"></div>
  112. <div class="spanner">
  113.     <div class="loader"></div>
  114.     <p class="text-light fw-bold" style="font-size: 36px;">Loading...</p>
  115. </div>
  116. {% endblock %}
  118. {% block javascripts %}
  119.     {{ parent() }}
  121.     <script>
  123.         $(document).ready(function (){
  125.             // International Numbers Personal
  126.             let input = document.querySelector('#mobile');
  127.             iti = window.intlTelInput(input, {
  128.                 initialCountry: "auto",
  129.                 geoIpLookup: function(success, failure) {
  130.                     $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
  131.                         var countryCode = (resp && resp.country) ? resp.country : "ae";
  132.                         success(countryCode);
  133.                     });
  134.                 },
  135.                 preferredCountries: ['ae','qa', 'bh', 'om', 'sa'],
  136.                 autoPlaceholder: "polite",
  137.                 nationalMode: true,
  138.                 utilsScript: "{{ asset('js/utils.min.js') }}", // just for formatting/placeholders etc
  139.                 separateDialCode: true,
  140.                 utilsScript: "/js/utils.js",
  141.             });
  143.             $(document).on('change keyup', '#mobile', function (){
  145.                 let handleChange = function() {
  146.                     let mobile = $('#user_telephone');
  147.                     let mobile_number = (iti.isValidNumber()) ? iti.getNumber() : false;
  148.                     let textNode = document.createTextNode(mobile_number);
  150.                     if(mobile_number != false){
  152.                         let iso_code = iti.getSelectedCountryData().iso2;
  153.                         let intl_code = iti.getSelectedCountryData().dialCode;
  155.                         mobile.val(mobile_number.substring(1));
  156.                         $('#user_iso_code').val(iso_code);
  157.                         $('#user_intl_code').val(intl_code);
  159.                     }
  160.                 };
  162.                 // listen to "keyup", but also "change" to update when the user selects a country
  163.                 input.addEventListener('change', handleChange);
  164.                 input.addEventListener('keyup', handleChange);
  165.             });
  167.             // International Numbers Personal
  168.             let input_clinic = document.querySelector('#mobile_clinic');
  169.             iti_clinic = window.intlTelInput(input_clinic, {
  170.                 initialCountry: "auto",
  171.                 geoIpLookup: function(success, failure) {
  172.                     $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
  173.                         var countryCode = (resp && resp.country) ? resp.country : "ae";
  174.                         success(countryCode);
  175.                     });
  176.                 },
  177.                 preferredCountries: ['ae','qa', 'bh', 'om', 'sa'],
  178.                 autoPlaceholder: "polite",
  179.                 nationalMode: true,
  180.                 utilsScript: "{{ asset('js/utils.min.js') }}", // just for formatting/placeholders etc
  181.                 separateDialCode: true,
  182.                 utilsScript: "/js/utils.js",
  183.             });
  185.             $(document).on('change keyup', '#mobile_clinic', function (){
  187.                 let handleChange = function() {
  188.                     let mobile = $('#clinic_telephone');
  189.                     let mobile_number = (iti_clinic.isValidNumber()) ? iti_clinic.getNumber() : false;
  190.                     let textNode = document.createTextNode(mobile_number);
  192.                     if(mobile_number != false){
  194.                         let iso_code = iti.getSelectedCountryData().iso2;
  195.                         let intl_code = iti.getSelectedCountryData().dialCode;
  197.                         mobile.val(mobile_number.substring(1));
  198.                         $('#clinic_iso_code').val(iso_code);
  199.                         $('#clinic_intl_code').val(intl_code);
  201.                     }
  202.                 };
  204.                 // listen to "keyup", but also "change" to update when the user selects a country
  205.                 input_clinic.addEventListener('change', handleChange);
  206.                 input_clinic.addEventListener('keyup', handleChange);
  207.             });
  209.             $(document).on('change', '#email', function (){
  211.                 let email = $('#email').val();
  212.                 let errorEmail = $('#error_email');
  214.                 errorEmail.hide();
  216.                 $.ajax({
  217.                     url: "{{ path('clinic_check_email') }}",
  218.                     type: 'POST',
  219.                     dataType: 'json',
  220.                     data: {
  221.                         email: email
  222.                     },
  223.                     complete: function(e, xhr, settings){
  224.                         if(e.status === 500){
  225.                             window.location.href = '{{ path('clinic_error_500') }}';
  226.                         }
  227.                     },
  228.                     success: function (response) {
  230.                         if(!response.response)
  231.                         {
  232.                             if(response.restricted)
  233.                             {
  234.                                 errorEmail.empty().append('Domain name is not allowed').show();
  236.                             } else
  237.                             {
  238.                                 errorEmail.empty().append('Your business is already registered, please contact '+ response.firstName).show();
  239.                             }
  241.                             $('#email').val('');
  242.                         }
  243.                     }
  244.                 });
  245.             });
  246.             $('#register_form').submit(function(e){
  248.                 e.preventDefault();
  250.                 var is_valid = true;
  251.                 var position = $('#position').val();
  252.                 var first_name = $('#first_name').val();
  253.                 var last_name = $('#last_name').val();
  254.                 var email = $('#email').val();
  255.                 var telephone = $('#telephone').val();
  256.                 var clinic_name = $('#clinic_name').val();
  257.                 var clinic_telephone = $('#clinic_telephone').val();
  258.                 var error_position = $('#error_position');
  259.                 var error_first_name = $('#error_first_name');
  260.                 var error_last_name = $('#error_last_name');
  261.                 var error_email = $('#error_email');
  262.                 var error_telephone = $('#error_telephone');
  263.                 var error_clinic_name = $('#error_clinic_name');
  264.                 var error_clinic_telephone = $('#error_clinic_telephone')
  266.                 error_position.hide();
  267.                 error_first_name.hide();
  268.                 error_last_name.hide();
  269.                 error_email.hide();
  270.                 error_telephone.hide();
  271.                 error_clinic_name.hide();
  272.                 error_clinic_telephone.hide();
  274.                 if(position == '' || position == 'undefined'){
  276.                     error_position.show();
  277.                     is_valid = false;
  278.                 }
  280.                 if(first_name == '' || first_name == 'undefined'){
  282.                     error_first_name.show();
  283.                     is_valid = false;
  284.                 }
  286.                 if(last_name == '' || last_name == 'undefined'){
  288.                     error_last_name.show();
  289.                     is_valid = false;
  290.                 }
  292.                 if(email == '' || email == 'undefined'){
  294.                     error_email.empty().append('Required Field');
  295.                     error_email.show();
  296.                     is_valid = false;
  297.                 }
  299.                 if(telephone == '' || telephone == 'undefined' || telephone == 0){
  301.                     error_telephone.show();
  302.                     is_valid = false;
  303.                 }
  305.                 if(clinic_name == '' || clinic_name == 'undefined'){
  307.                     error_clinic_name.show();
  308.                     is_valid = false;
  309.                 }
  311.                 if(clinic_telephone == '' || clinic_telephone == 'undefined'){
  313.                     error_clinic_telephone.show();
  314.                     is_valid = false;
  315.                 }
  317.                 if(is_valid == true){
  319.                     let data = new FormData(this);
  321.                     $.ajax({
  322.                         url: "{{ path('clinic_create') }}",
  323.                         type: 'POST',
  324.                         contentType: false,
  325.                         processData: false,
  326.                         cache: false,
  327.                         timeout: 600000,
  328.                         dataType: 'json',
  329.                         data: data,
  330.                         beforeSend: function (){
  331.                             isLoading(true);
  332.                         },
  333.                         complete: function(e, xhr, settings){
  334.                             if(e.status === 500){
  335.                                 //window.location.href = '{{ path('clinic_error_500') }}';
  336.                             }
  337.                         },
  338.                         success: function (response) {
  339.                             $('#row_1').empty().addClass('border-bottom');
  340.                             $('#row_2').remove();
  341.                             $('#row_3').remove();
  342.                             $('#row_4').remove();
  343.                             $('#row_5').remove();
  344.                             $('#row_1').append('<div class="col-12 text-center text-primary pt-3 pb-3">'+response+'</div>');
  345.                             $('#error_email').hide();
  346.                             isLoading(false);
  347.                         }
  348.                     });
  349.                 }
  350.             });
  352.             function isLoading(status){
  354.                 if(status) {
  356.                     $("div.spanner").addClass("show");
  357.                     $("div.overlay").addClass("show");
  359.                 } else {
  361.                     $("div.spanner").removeClass("show");
  362.                     $("div.overlay").removeClass("show");
  363.                 }
  364.             }
  366.         });
  368.     </script>
  369. {% endblock %}