templates/user/register.html.twig line 16

Open in your IDE?
  1. {% extends "base_security.html.twig" %}
  3. {% block fos_user_title %}
  4.   <h4 class="auth-header">{{ 'title.new_user_account' | trans }}</h4>
  5. {% endblock fos_user_title %}
  7. {% block fos_user_content %}
  8.     {%  if app.session.flashBag.has('danger') == true %}
  9.         <div class="alert alert-danger" role="alert" stype="font-size: 10px">
  10.             {% for message in app.session.flashbag.get('danger') %}
  11.                 <p class="text-center w-100 mb-0">{{ message }}</p>
  12.             {% endfor %}
  13.         </div>
  14.     {% endif %}
  16.     <div class="help-block form-text with-errors text-danger form-control-feedback">{{ form_errors(form) | raw }}</div>
  17.     <form id="form-register" action="{{ path('register_create_account') }}" method="post">
  18.       {{ form_widget(form._token) }}
  19.       <div class="form-group">
  20.         <label for="">{{ "menu.user_type" | trans }}</label>
  21.         {{ form_widget(form.typePerson) }}
  22.       </div>
  23.       <div id="diaspora" class="form-group">
  24.         <div class="col-sm-12 form-check diaspora d-flex justify-content-end">
  25.           <label for="">diaspora: </label>
  26.           {{ form_widget(form.diaspora) }}
  27.           <div class="slider round">
  28.             <span class="non">{{ 'menu.no' | trans }}</span>
  29.             <span class="oui">{{ 'menu.yes' | trans }}</span>
  30.           </div>
  31.           <div class="help-block form-text with-errors form-control-feedback">{{ form_errors(form.diaspora) }}</div>
  32.         </div>
  33.       </div>
  34.       <div class="form-group">
  35.         {% if struct_province_country_city == "true" %}
  36.           <label for="">   {{ 'menu.region' | trans }} </label>
  38.           {{ create_translated_select(form.region) }}
  39. {#          {{ form_widget(form.region) }}#}
  40.           <div class="pre-icon os-icon os-icon-user-male-circle"></div>
  41.           <div class="help-block form-text with-errors text-danger form-control-feedback">{{ form_errors(form.region) }}</div>
  43.         {% else %}
  44.           <label for="">   {{ 'menu.country' | trans }} </label>
  45.           {{ create_translated_select(form.country) }}
  46. {#          {{ form_widget(form.country) }}#}
  47.           <div class="pre-icon os-icon os-icon-user-male-circle"></div>
  48.           <div class="help-block form-text with-errors text-danger form-control-feedback">{{ form_errors(form.country) }}</div>
  50.         {% endif %}
  51.       </div>
  52.       <div id="residenceCountry" class="form-group" style="display: none">
  53.         <label for="">   {{ 'menu.residence_country' | trans }} </label>
  54.         {% if struct_province_country_city == "true" %}
  55.           {{ create_translated_select(form.residenceRegion) }}
  56. {#          {{ form_widget(form.residenceRegion) }}#}
  57.           <div class="pre-icon os-icon os-icon-user-male-circle"></div>
  58.           <div class="help-block form-text with-errors text-danger form-control-feedback">{{ form_errors(form.region) }}</div>
  59.         {% else %}
  60.           {{ create_translated_select(form.residenceCountry) }}
  61. {#          {{ form_widget(form.residenceCountry) }}#}
  62.           <div class="pre-icon os-icon os-icon-user-male-circle"></div>
  63.           <div class="help-block form-text with-errors text-danger form-control-feedback">{{ form_errors(form.country) }}</div>
  64.         {% endif %}
  65.       </div>
  66.       <div class="form-group">
  67.         <label for=""> {{ 'menu.phone' | trans }} : {{ 'menu.phone_indicator' | trans }} (<span id="phone_code"></span> ) + N°</label>
  68.         {{ form_widget(form.phone) }}
  69.         <div class="pre-icon os-icon os-icon-user-male-circle"></div>
  70.         <div class="help-block form-text with-errors text-danger form-control-feedback">{{ form_errors(form.phone) }}</div>
  71.       </div>
  72.       <div class="form-group" style="display: none">
  73.         <label for=""> Pseudo (Optionnel)</label>
  74.         {{ form_widget(form.username) }}
  75.         <div class="pre-icon os-icon os-icon-user-male-circle"></div>
  76.       </div>
  77.       <div class="form-group" style="display: none">
  78.         <label for=""> Email address (Optionnel)</label>
  79.         {{ form_widget(form.email) }}
  80.         <div class="pre-icon os-icon os-icon-email-2-at2"></div>
  81.       </div>
  82.       <div class="row">
  83.         <div class="col-sm-6">
  84.           <div class="form-group">
  85.             <label for=""> {{ "menu.password" | trans }}</label>
  86.             {{ form_widget(form.plainPassword.first) }}
  87.             <div class="pre-icon os-icon os-icon-fingerprint"></div>
  88.           </div>
  89.         </div>
  90.         <div class="col-sm-6">
  91.           <div class="form-group">
  92.             <label for="">{{ "menu.confirm" | trans }}</label>
  93.             {{ form_widget(form.plainPassword.second) }}
  94.           </div>
  95.         </div>
  96.       </div>
  97.     {#</form>#}
  98.       <div class="row form-group">
  99.         <div class="col-xs-6 buttons-w">
  100.           <button class="btn btn-primary" id="submitRegister"> {{ 'menu.validate' | trans }} </button>
  101.         </div>
  102.         <div class="col-xs-6 buttons-w">
  103.           <a class="btn btn-primary" href="{{ path('logout') }}">{{ 'menu.cancel' | trans }}</a>
  104.         </div>
  105.       </div>
  106.       <div class="row form-group footer_register">
  107.         <span>{{ "footer.dev_by" | trans }}</span>
  108.         <p><a target="_blank" href="https://ifef.francophonie.org/"><img style="width: 80px; height: auto" id="logo_ifef" src="{{ asset('build/images/pinsuprem/logo_ifef.jpg') }}"></a></p>
  109.         <p><a target="_blank" href="https://www.francophonie.org/"><img style="width: 80px; height: auto"  id="logo_oif" src="{{ asset('build/images/pinsuprem/logo_oif.jpg') }}"></a></p>
  110.       </div>
  111.     </form>
  112.     <select hidden id="indTel">
  113.       {% for country in allCountries %}
  114.         <option value="{{ country.id }}">{{ country.phoneCode }}</option>
  115.       {% endfor %}
  116.     </select>
  117. {% endblock fos_user_content %}
  118. {% block fos_user_script %}
  119. <script>
  120.    $( document ).ready(function() {
  121.       $('#diaspora').hide();
  122.       if ($('#userbundle_user_typePerson option:selected').val() == 'ROLE_DIPLOME' ) {
  123.          $('#diaspora').show();
  124.          showResidenceCountry ();
  125.       }
  126.    })
  127.    // $(idSelect).removeAttr('required');
  128.    $('userbundle_user_residenceCountry').prop("required", false);
  129.    $('userbundle_user_residenceRegion').prop("required", false);
  130.    // console.log("test", $('userbundle_user_residenceCountry').attr("required"))
  131.    $('#userbundle_user_typePerson').on('change', function (e) {
  132.       if ($('#userbundle_user_typePerson option:selected').val() != 'ROLE_DIPLOME' ) {
  133.          $('#userbundle_user_diaspora').prop('checked',false);
  134.          $('#diaspora').hide();
  135.          showResidenceCountry ();
  136.       } else {
  137.          $('#diaspora').show();
  138.       }
  139.    })
  141.    $('#userbundle_user_diaspora').on('change', function (e) {
  142.       showResidenceCountry ();
  143.       let selectedCountry = null;
  144.       if($('#userbundle_user_diaspora').is(':checked')) {
  145.          selectedCountry = $('#userbundle_user_residenceCountry option:selected').val();
  146.       } else {
  147.          selectedCountry = $('#userbundle_user_country option:selected').val();
  148.       }
  149.       getIndTel(selectedCountry);
  150.    })
  152.    function showResidenceCountry () {
  153.       if ($('#userbundle_user_diaspora').is(':checked')) {
  154.          $('#residenceCountry').show();
  155.       } else {
  156.          $('#residenceCountry').hide();
  157.       }
  158.    }
  159.    // $(document).ready(function () {
  160.    // const allCountryOptions = $('#userbundle_user_country').html();
  161.    $('#userbundle_user_country').on('change', function (e) {
  162.       let selectedCountry = null;
  163.       if($('#userbundle_user_diaspora').is(':checked')) {
  164.          selectedCountry = $('#userbundle_user_residenceCountry option:selected').val();
  166.          // Supprimer le pays selectionné dans la liste des pays de residence
  167.          // $("#userbundle_user_residenceCountry").html(allCountryOptions);
  168.          $("#userbundle_user_residenceCountry").find("option").each(function() {
  169.             const optionValue = $(this).val();
  170.             if (optionValue === e.target.value) {
  171.                $(this).remove();
  172.             }
  173.          });
  175.       } else {
  176.          selectedCountry = $('#userbundle_user_country option:selected').val();
  177.       }
  178.       getIndTel(selectedCountry);
  179.    })
  181.    $('#userbundle_user_residenceCountry').on('change', function (e) {
  182.       let selectedCountry = $('#userbundle_user_residenceCountry option:selected').val();
  183.       getIndTel(selectedCountry);
  184.    })
  186.    // adaptation for DBTA
  187.    $('#userbundle_user_region').on('change', function (e) {
  188.       let selectedCountry = null;
  189.       if($('#userbundle_user_diaspora').is(':checked')) {
  190.          selectedCountry = $('#userbundle_user_residenceRegion option:selected').val();
  192.           // Supprimer le pays selectionné dans la liste des pays de residence
  193.           $("#userbundle_user_residenceRegion").find("option").each(function() {
  194.               const optionValue = $(this).val();
  195.               if (optionValue === e.target.value) {
  196.                   $(this).remove();
  197.               }
  198.           });
  200.       } else {
  201.          selectedCountry = $('#userbundle_user_region option:selected').val();
  202.       }
  203.       getIndTel(selectedCountry);
  204.    })
  206.    $('#userbundle_user_residenceRegion').on('change', function (e) {
  207.       let selectedCountry = $('#userbundle_user_residenceRegion option:selected').val();
  208.       getIndTel(selectedCountry);
  209.    })
  210.    //Fin adaptation DBTA
  212.    function getIndTel(selectedCountry) {
  213.       if (selectedCountry) {
  214.           let phoneCode = '+' + $('#indTel option[value=' +selectedCountry+ ']').text();
  216.           $('#phone_code').html('+' + $('#indTel option[value=' +selectedCountry+ ']').text());
  217.           $('#userbundle_user_phone').attr('placeholder', phoneCode  + '  + Numéro de Téléphone' );
  218.           $('#userbundle_user_phone').val(phoneCode);
  219.       }
  220.    }
  222.    // $('#submitRegister').on('click', function (e) {
  223.    //    e.preventDefault();
  224.    //
  225.    //    // setTimeout(function() {
  226.    //    $('form').submit()
  227.    //    // , 5000});
  228.    //
  229.    // })
  230.    // })
  231. </script>
  232. {% endblock fos_user_script %}