templates/Account/Register/_register_form.html.twig line 1

Open in your IDE?
  1. <div class="card my-4">
  2.     <div class="card-body">
  3.         <form id="registerForm">
  4.             <div class="row my-2">
  5.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  6.                     <label for="customerLastName"
  7.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.last_name' |trans }}
  8.                         *</label>
  9.                     <input placeholder="{{ 'sylius.ui.last_name'|trans }}*"
  10.                            name="customerLastName" type="text"
  11.                            id="customerLastName"
  12.                            class="form-control input-custom input-custom-grey"
  13.                            required>
  14.                 </div>
  15.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  16.                     <label for="customerFirstName"
  17.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.first_name'|trans }}
  18.                         *</label>
  19.                     <input placeholder="{{ 'app.ui.first_name'|trans }}*"
  20.                            name="customerFirstName" type="text"
  21.                            id="customerFirstName"
  22.                            class="form-control input-custom input-custom-grey"
  23.                            required>
  24.                 </div>
  25.             </div>
  26.             <div class="row my-3">
  27.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  28.                     <label for="customerEmail"
  29.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.email' |trans }}
  30.                         *</label>
  31.                     <input placeholder="{{ 'sylius.ui.email'|trans }}*"
  32.                            name="customerEmail" type="email"
  33.                            id="customerEmail"
  34.                            class="form-control input-custom input-custom-grey"
  35.                            required>
  36.                 </div>
  37.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  38.                     <label for="customerPhoneNumber"
  39.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.phone_number'|trans }}
  40.                         *</label>
  41.                     <input placeholder="{{ 'sylius.ui.phone_number'|trans }}*"
  42.                            name="customerPhoneNumber" type="text"
  43.                            id="customerPhoneNumber"
  44.                            class="form-control input-custom input-custom-grey"
  45.                            required>
  46.                 </div>
  47.             </div>
  48.             <div class="row my-3">
  49.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  50.                     <label for="customerPassword"
  51.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.password' |trans }}
  52.                         *</label>
  53.                     <input placeholder="{{ 'sylius.ui.password'|trans }}*"
  54.                            name="customerPassword" type="password"
  55.                            id="customerPassword"
  56.                            class="form-control input-custom input-custom-grey"
  57.                            required>
  58.                 </div>
  59.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  60.                     <label for="customerConfirmationPassword"
  61.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.repeat_new_password'|trans }}
  62.                         *</label>
  63.                     <input placeholder="{{ 'sylius.ui.repeat_new_password'|trans }}*"
  64.                            name="customerConfirmationPassword" type="password"
  65.                            id="customerConfirmationPassword"
  66.                            class="form-control input-custom input-custom-grey"
  67.                            required>
  68.                 </div>
  69.             </div>
  70.             <div class="row my-3">
  71.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  72.                     <label for="customerCountry"
  73.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.country'|trans }}
  74.                         *</label>
  75.                     <select name="customerCountry" id="customerCountry"
  76.                             class="form-control input-custom input-custom-grey input-country required-message-check-input" required>
  77.                         <option selected disabled hidden
  78.                                 value="">{{ 'app.ui.country'|trans }}</option>
  79.                         {% for country in countries|sort((a, b) => a.name <=> b.name) %}
  80.                             <option id="{{ country.id }}"
  81.                                     value="{{ country.code }}">{{ country }}</option>
  82.                         {% endfor %}
  83.                     </select>
  84.                 </div>
  85.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  86.                     <label for="customerCounty"
  87.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.county'|trans }}
  88.                         *</label>
  89.                     <select id="customerCounty" name="customerCounty"
  90.                             class="form-control input-custom input-custom-grey required-message-check-input" required>
  91.                         <option class="option-rca-custom" value="" selected disabled
  92.                                 hidden>{{ 'app.ui.please_select_a_county'|trans }}*
  93.                         </option>
  94.                     </select>
  95.                 </div>
  96.             </div>
  97.             <div class="row my-3">
  98.                 <div class="col-md-6 col-sm-12 mt-sm-2 city-block">
  99.                     <label for="customerCity"
  100.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.city'|trans }}
  101.                         *</label>
  102.                     <select id="customerCity" name="customerCity" type="text"
  103.                             class="form-control input-custom input-custom-grey required-message-check-input" required>
  104.                         <option class="option-rca-custom" value="" selected disabled
  105.                                 hidden>{{ 'app.ui.city'|trans }}*
  106.                         </option>
  107.                     </select>
  108.                 </div>
  109.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  110.                     <label for="customerStreet"
  111.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.street'|trans }}
  112.                         *</label>
  113.                     <input placeholder="{{ 'app.ui.street'|trans }}*"
  114.                            id="customerStreet"
  115.                            type="text" name="customerStreet"
  116.                            class="form-control input-custom input-custom-grey required-message-check-input" required>
  117.                 </div>
  118.             </div>
  119.             <div class="row my-3">
  120.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  121.                     <label for="customerStreetNumber"
  122.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.number'|trans }}
  123.                         *</label>
  124.                     <input placeholder="{{ 'app.ui.number'|trans }}*"
  125.                            name="customerStreetNumber" type="text"
  126.                            id="customerStreetNumber"
  127.                            class="form-control input-custom input-custom-grey required-message-check-input"
  128.                            required>
  129.                 </div>
  130.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  131.                     <label for="customerBuilding"
  132.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.building'|trans }}</label>
  133.                     <input placeholder="{{ 'app.ui.building'|trans }}"
  134.                            id="customerBuilding"
  135.                            type="text" name="customerBuilding"
  136.                            class="form-control input-custom input-custom-grey">
  137.                 </div>
  138.             </div>
  139.             <div class="row my-3">
  140.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  141.                     <label for="customerEntrance"
  142.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.entrance'|trans }}</label>
  143.                     <input placeholder="{{ 'app.ui.entrance'|trans }}"
  144.                            id="customerEntrance"
  145.                            type="text" name="customerEntrance"
  146.                            class="form-control input-custom input-custom-grey">
  147.                 </div>
  148.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  149.                     <label for="customerApartment"
  150.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.apartment'|trans }}</label>
  151.                     <input placeholder="{{ 'app.ui.apartment'|trans }}"
  152.                            id="customerApartment"
  153.                            type="text" name="customerApartment"
  154.                            class="form-control input-custom input-custom-grey">
  155.                 </div>
  156.             </div>
  157.             <div class="row">
  158.                 <div class="col-12">
  159.                     <div class="custom-control custom-checkbox mt-2 register-block">
  160.                         <input type="checkbox" name="subscribeToNewsletter" id="subscribeToNewsletter"
  161.                                class="custom-control-input">
  162.                         <label for="subscribeToNewsletter" class="custom-control-label">
  163.                             <a class="text-dark"
  164.                                style="letter-spacing: 0.01em;">{{ 'app.ui.newsletter_confirmation'|trans|raw }}</a>
  165.                         </label>
  166.                     </div>
  167.                 </div>
  168.             </div>
  169.             <div class="row my-3">
  170.                 <div class="col-6">
  171.                     <div class="custom-control custom-radio d-flex justify-content-center align-items-center align-content-center text-center"
  172.                          style="height: 40px;">
  173.                         <input type="radio" id="simpleCustomer" name="customerType"
  174.                                class="custom-control-input" value="0" required checked>
  175.                         <label class="custom-control-label" for="simpleCustomer"><h5
  176.                                     class="font-weight-normal">{{ 'app.ui.natural_person'|trans }}</h5>
  177.                         </label>
  178.                     </div>
  179.                 </div>
  180.                 <div class="col-6 mt-sm-2">
  181.                     <div
  182.                             class="custom-control custom-radio d-flex justify-content-center align-items-center align-content-center text-center"
  183.                             style="height: 40px;">
  184.                         <input type="radio" id="companyCustomer" name="customerType"
  185.                                class="custom-control-input" value="1">
  186.                         <label class="custom-control-label" for="companyCustomer"><h5
  187.                                     class="font-weight-normal">{{ 'app.ui.legal_person'|trans }}</h5>
  188.                         </label>
  189.                     </div>
  190.                 </div>
  191.             </div>
  192.             <div id="legalCustomerBlock" class="row my-3 d-none">
  193.                 <div class="col-6 mt-sm-2">
  194.                     <label for="cifCode"
  195.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.fiscal_code'|trans }}
  196.                         *</label>
  197.                     <input placeholder="{{ 'app.ui.fiscal_code'|trans }}*"
  198.                            id="cifCode"
  199.                            type="text" name="cifCode"
  200.                            class="form-control input-custom input-custom-grey input-cui required-message-check-input">
  201.                 </div>
  202.                 <div class="col-md-6 col-sm-12 mt-sm-2">
  203.                     <label for="companyName"
  204.                            class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.company_name'|trans }}
  205.                         *</label>
  206.                     <input placeholder="{{ 'app.ui.company_name'|trans }}*"
  207.                            id="companyName" type="text"
  208.                            name="companyName"
  209.                            class="form-control input-custom input-custom-grey input-company-name required-message-check-input">
  210.                 </div>
  211.             </div>
  212.             <div class="row my-3">
  213.                 <div class="col-12">
  214.                     <span id='errorContainer'></span>
  215.                     <div class="g-recaptcha" data-sitekey="6LdFcvYZAAAAAFln0jMic-l4YTds8EuC9gn0qiBs"
  216.                          data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired"></div>
  217.                 </div>
  218.             </div>
  219.             <div class="row">
  220.                 <div class="col-12">
  221.                     <div class="custom-control custom-checkbox mt-2" data-toggle='tooltip' data-placement='top' data-original-title="{{ 'app.ui.terms_already_accepted'|trans }}">
  222.                         <input type="checkbox" name="acceptTermsAndConditions" id="acceptTermsAndConditions"
  223.                                class="custom-control-input"
  224.                                data-title="1" required>
  225.                         <label for="acceptTermsAndConditions" class="custom-control-label">
  226.                             <a class="text-dark" style="font-size: 1em;">
  227.                                 {{ 'app.ui.terms_data_agreement'|trans({
  228.                                     '%termsAndConditions%': '<a href="' ~path('bitbag_sylius_cms_plugin_shop_page_show', {'slug' : 'termeni-si-conditii'}) ~ '" target="_blank">' ~ 'app.ui.terms_and_conditions'|trans ~ '</a>',
  229.                                     '%personalDataProtection%': '<a href="' ~path('bitbag_sylius_cms_plugin_shop_page_show', {'slug' : 'protectia-datelor'}) ~ '" target="_blank">' ~ 'app.ui.personal_data_protection'|trans ~ '</a>'
  230.                                 })|raw }}
  231.                             </a>
  232.                         </label>
  233.                     </div>
  234.                 </div>
  235.             </div>
  236.             <input type="text" id="recaptcha" class="input-hidden" value="" required>
  237.             <div class="row">
  238.                 <div id="preventSubmit" class="col-12">
  239.                     <button id="btnRcaVehicleDetailsSubmit" type="submit" class="btn btn-submit btn-primary-inactive w-100" style="height: 40px"><a>{{ 'sylius.ui.register'|trans }}</a></button>
  240.                 </div>
  241.             </div>
  242.         </form>
  243.     </div>
  244. </div>
  245. <script>
  246.     function recaptchaCallback(response) {
  247.         let gReCaptcha = $('#g-recaptcha-response');
  248.         if (gReCaptcha.length > 0 && gReCaptcha.val() === response) {
  249.             verifyCaptcha(response);
  250.         }
  251.     }
  252.     function recaptchaExpired()
  253.     {
  254.        $('#recaptcha').val('');
  255.        validateForm($('.btn-submit'));
  256.     }
  257.     function verifyCaptcha(response)
  258.     {
  259.         let result = false;
  260.         let url = Routing.generate('app_shop_verify_captcha');
  261.         $.ajax({
  262.             url: url,
  263.             data: {
  264.                 'captcha': response
  265.             },
  266.             type: 'POST',
  267.             async: false,
  268.             dataType: 'json',
  269.             success: function (data) {
  270.                 if (data === true) {
  271.                     $('#recaptcha').val('1');
  272.                     validateForm($('.btn-submit'));
  273.                 }
  274.             },
  275.             error: function () {
  276.             }
  277.         });
  278.         return result;
  279.     }
  280.     /**
  281.      * Duplicat deoarece recaptcha nu vede scriptul global
  282.      * @param submitButton
  283.      */
  284.     function validateForm(submitButton) {
  285.         let inputsAreInvalid = false;
  286.         let radioAndCheckboxAreInvalid = false;
  287.         $('form input, form select').each(
  288.             function(){
  289.                 if ($(this).val() === null ||  $(this).val() === '') {
  290.                     if ($(this).prop('required')) {
  291.                         inputsAreInvalid = true;
  292.                     }
  293.                 }
  294.             }
  295.         );
  296.         $('form input:radio,form input:checkbox').each(function () {
  297.             let name = $(this).attr('name');
  298.             if ($('input[name="'+ name + '"]:checked').length < 1) {
  299.                 if ($(this).prop('required')) {
  300.                     radioAndCheckboxAreInvalid = true;
  301.                 }
  302.             }
  303.         });
  304.         if (inputsAreInvalid || radioAndCheckboxAreInvalid) {
  305.             submitButton.addClass('btn-primary-inactive');
  306.             submitButton.removeClass('btn-primary');
  307.         } else {
  308.             submitButton.removeClass('btn-primary-inactive');
  309.             submitButton.addClass('btn-primary');
  310.             submitButton.removeAttr('disabled');
  311.         }
  312.     }
  313. </script>
  314. <style>
  315.     .input-hidden{
  316.         height:0;
  317.         width:0;
  318.         visibility: hidden;
  319.         padding:0;
  320.         margin:0;
  321.         float:right;
  322.     }
  323. </style>