templates/user/profile/profile_step1.html.twig line 1

Open in your IDE?
  1. {% extends 'user/profile/profile_layout.html.twig' %}
  2. {% use "user/profile/section_sidebar.html.twig" with javascript as javascript_sidebar, content as section_sidebar %}
  3. {% from "form/inputs.twig.html" import text_field, date_picker, dropdownlist, radio_group, check_box, textarea %}
  4. {% if app.user is not empty and 
  5.   constant('App\\Entity\\Role::USER') in app.user.getSubRoleNames() 
  6. %}
  7.   {% set mode = 'EDIT' %}
  8. {% else %}
  9.   {% set mode = 'NEW' %}
  10. {% endif %}
  11. {% block step %}
  12. <form autocomplete="off"
  13.   name="form-apply" id="form-profile-step1" 
  14.   action="{{ path('profile.step1_save') }}"
  15.   method="POST"
  16.   enctype="multipart/form-data"
  17.   class="form-outline {{ validated is defined ? 'was-validated' : ''  }} row"
  18. >
  19. {% if mode == 'EDIT' %}
  20.   <input type='hidden' name='_method' value='PUT'>
  21. {% endif %}
  22. <div class="col-lg-3">
  23.   {{ block('section_sidebar') }}
  24. </div>
  25. <div class="col-lg-9 pl-lg-5">
  26.   <div class="d-flex flex-md-row flex-column mb-4">
  27.     <div class="section-title text-left d-flex align-items-center pt-5 pt-lg-0 mb-0">
  28.       <span class="mr-2">/</span> {% trans %}Vos informations personnelles{% endtrans %}
  29.     </div>
  30.     <div class="ml-auto">
  31.       <span class="required-note text-orange ml-4 mb-0 d-lg-inline d-block text-right">
  32.         <small>{% trans %}Champs obligatoires{% endtrans %} *</small>
  33.       </span>
  34.     </div>
  35.   </div>
  36.   {{ radio_group(
  37.       'user[gender]', 
  38.       "Vous êtes" | trans, 
  39.       [
  40.         { value: 0, text: "Homme" | trans }, 
  41.         { value: 1, text: "Femme" | trans }, 
  42.       ], 
  43.       formData, 
  44.       { required: true, inline: true }
  45.     ) 
  46.   }}
  47.   <div class="form-row">
  48.     <div class="col-lg-4">
  49.       {{ text_field('user[lastName]', "Nom de famille" | trans, formData, { required: true }) }}
  50.     </div>
  51.     <div class="col-lg-4">
  52.       {{ text_field('user[firstName]', "Prénom" | trans, formData, { required: true }) }}
  53.     </div>
  54.     <div class="col-lg-4">
  55.       {{ date_picker(
  56.           'user[birthDay]', 
  57.           "Date de naissance" | trans, 
  58.           formData, 
  59.           { 
  60.             attributes: { 
  61.               "maxDate": "-16Y", 
  62.               "minDate": "-100Y"
  63.             },
  64.             required: true
  65.           }
  66.         ) 
  67.       }}
  68.     </div>
  69.   </div>
  70.   <div class="form-row">
  71.     <div class="col-lg-4">
  72.       {{ 
  73.         dropdownlist(
  74.           'user[country]', 
  75.           "Pays de naissance" | trans, 
  76.           countries, 
  77.           formData, 
  78.           { valueProperty: 'id', textProperty: 'name' }
  79.         ) 
  80.       }}
  81.     </div>
  82.     <div class="col-lg-4">
  83.       {{ 
  84.         dropdownlist(
  85.           'user[department]', 
  86.           "Département de naissance" | trans, 
  87.           departments, 
  88.           formData,
  89.           { 
  90.             attributes: { 
  91.               disabled: formData.inputValues and 
  92.                 formData.inputValues.user.country and 
  93.                 (
  94.                   formData.inputValues.user.country is object ? 
  95.                     formData.inputValues.user.country.id != 1 : 
  96.                     formData.inputValues.user.country != '1'
  97.                 ) 
  98.               } 
  99.           }
  100.         ) 
  101.       }}
  102.     </div>
  103.     <div class="col-lg-4">
  104.       {{ text_field('user[birthPlace]', "Ville de naissance" | trans, formData) }}
  105.     </div>
  106.   </div>
  107.   <div class="form-row">
  108.     <div class="col-lg-4">
  109.       {{ 
  110.         dropdownlist(
  111.           'user[nationality]', 
  112.           "Nationalité" | trans, 
  113.           countries, 
  114.           formData, 
  115.           { valueProperty: 'id', textProperty: 'nationality' }
  116.         ) 
  117.       }}
  118.     </div>
  119.     <div class="col-lg-4">
  120.       {{ text_field('user[email]', "Email" | trans, formData, { required: true, attributes: { disabled: mode == 'EDIT' } }) }}
  121.     </div>
  122.     <div class="col-lg-4">
  123.       {{ text_field('user[phone]', "Téléphone" | trans, formData, { required: true }) }}
  124.     </div>
  125.   </div>
  126.   <div class="form-row">
  127.     <div class="col-lg-4">
  128.       {{ text_field('information[address]', "Adresse" | trans, formData) }}
  129.     </div>
  130.     <div class="col-lg-4">
  131.       {{ text_field('information[postalCode]', "Code postal" | trans, formData) }}
  132.     </div>
  133.     <div class="col-lg-4">
  134.       {{ text_field('information[city]', "Ville" | trans, formData) }}
  135.     </div>
  136.   </div>
  137.   <div class="form-row">
  138.     <div class="col-lg-4">
  139.       {{ 
  140.         dropdownlist(
  141.           'information[country]', 
  142.           "Pays de résidence" | trans, 
  143.           countries, 
  144.           formData, 
  145.           { valueProperty: 'id', textProperty: 'name' }
  146.         ) 
  147.       }}
  148.     </div>
  149.     <div class="col-lg-4">
  150.       {{ text_field('information[socialSecutiryNumber]', "N° sécurité sociale" | trans, formData) }}
  151.     </div>
  152.   </div>
  153.   <div class="form-row">
  154.     <div class="col">
  155.       {{ check_box(
  156.           'isHandicap', 
  157.           "Êtes-vous en situation de handicap ?" | trans, 
  158.           1, 
  159.           formData, 
  160.           { 
  161.             labelClass: '', 
  162.             wrapperClass: 'mt-1', 
  163.             showIfChecked: textarea('handicapInfo', "Préciser les aménagements nécessaires au bon suivi de votre scolarité" | trans  ~ ' *', formData),
  164.             isBooleanCheck: true
  165.           }
  166.         ) 
  167.       }}
  168.     </div>
  169.   </div>
  170.   <div class="form-row">
  171.     <div class="col">
  172.       <div class="form-group agreefield">
  173.         <div class="custom-control custom-checkbox">
  174.           <input 
  175.             type="checkbox" class="custom-control-input" id="accept" required 
  176.             {{ validated is defined or mode == 'EDIT' ? 'checked' : ''  }} 
  177.           />
  178.           <label class="custom-control-label text-dark-purple" for="accept">
  179.             <small>
  180.               <b>{% trans %}J'accepte qu' ÉSTIAM utilise mes données personnelles dans le cadre du traitement de ma candidature.{% endtrans %}</b>
  181.               <br/>
  182.               <i>{% trans %}ÉSTIAM s'engage à ne pas communiquer vos données personnelles.
  183.               Conformément à la loi RGPD du 25 Mai 2018 :
  184.               Vous bénéficiez d'un droit d'accès, de rectification, de portabilité, d'effacement de celles-ci ou une limitation du traitement.
  185.               Vous pouvez vous opposer au traitement des données vous concernant et disposez du droit de retirer votre consentement à tout moment.
  186.               Vous avez la possibilité d'introduire une réclamation auprès d'une autorité de contrôle.{% endtrans %}</i>
  187.             </small>
  188.           </label>
  189.         </div>
  190.       </div>
  191.     </div>
  192.   </div>
  193.   {% if mode == 'NEW' and captcha_enabled %}
  194.     <div class="captcha-row mb-4 d-flex justify-content-center">
  195.         <div class="g-recaptcha animate__animated" data-sitekey="{{ captcha_key }}"></div>
  196.     </div>
  197.   {% endif %}
  198.   {% if valid_programs is defined %}
  199.     <div class="captcha-row mb-4 d-flex justify-content-center">
  200.       <p class="error text-red font-italic">{{ valid_programs }}</p>
  201.     </div>
  202.   {% endif %}
  203.   <div class="text-right form-submit mt-4">
  204.     <button type="submit" id="btn-submit" class="link-gradient d-block d-lg-inline-block">
  205.       <span>SUIVANT</span><i class="far fa-arrow-right"></i>
  206.     </button>
  207.   </div>
  208. </div>
  209. </form>
  210. {% endblock %}
  212. {% block custom_javascripts %}
  213. <script>
  214. $(document).ready(function(){
  215.   {% if mode == 'EDIT' %}
  216.   $([document.documentElement, document.body]).animate({
  217.       scrollTop: $(".section-apply-tabs").offset().top - 60
  218.   }, 400);
  219.   {% else %}
  220.     $('#form-profile-step1').on('submit', function (e) {
  221.         {% if captcha_enabled %}
  222.           if (grecaptcha.getResponse().length == 0) {
  223.               e.preventDefault();
  224.               $('.g-recaptcha').css({"box-shadow": "0px 0px 4px #ff0000b3"});
  225.               $('.preloader').fadeOut();              
  226.               return false;
  227.           }
  228.         {% endif %}
  229.     });
  230.   {% endif %}
  231.   $('[name="isHandicap"]').change(function() {
  232.     if ($(this).prop('checked')) {
  233.       $('[name="handicapInfo"]').prop('required', true)
  234.     } else {
  235.       $('[name="handicapInfo"]').prop('required', false)
  236.     }
  237.   })
  238.   $('[name="user[country]"]').change(function() {
  239.     console.log($(this).val())
  240.     if ($(this).val() === '1') {
  241.       console.log('france checked')
  242.       $('[name="user[department]"]').prop('disabled', false)
  243.     } else {
  244.       console.log('not france')
  245.       $('[name="user[department]"]').prop('disabled', true)
  246.       $('[name="user[department]"]').val('')
  247.       $('[name="user[department]"]').removeClass('active')
  248.     }
  249.   })
  250. })
  251. </script>
  252.   {{ block('javascript_sidebar') }}
  253. {% endblock %}