templates/inscription/step_one.html.twig line 1

Open in your IDE?
  1. <div class="global" id="step-1">
  2.     <div class="steps mb-12">
  3.         <div class="step active">Étape 1</div>
  4.         <div class="step">Étape 2</div>
  5.         <div class="step">Étape 3</div>
  6.         <div class="step">Étape 4</div>
  7.     </div>
  8.     <p class="registration mb-4 mt-4">Prépare-toi à réinventer ton approche du travail en équipe. Finalise ton inscription en complétant ces quelques détails..</p>
  9.     
  10.     <div class="col-lg-12 mt-4 px-0">
  11.         <div class="d-flex flex-column">
  12.             <div class="form-group row ">
  13.                 {{ form_label(inscriptionForm.gender, null, {'label_attr':{'class':'col-xl-3 col-lg-12 col-form-label'}}) }}
  14.                 <div class="col-lg-12 col-xl-12">
  15.                     {{ form_widget(inscriptionForm.gender, {'attr':{'class':inscriptionForm.gender.vars.errors|length ? 'form-control is-invalid':'form-control'}}) }}
  17.                 </div>
  18.             </div>
  19.              <div class="form-group row ">
  20.                 {{ form_label(inscriptionForm.firstname, null, {'label_attr':{'class':'col-xl-3 col-lg-12 col-form-label'}}) }}
  21.                 <div class="col-lg-12 col-xl-12">
  22.                     {{ form_widget(inscriptionForm.firstname, {'attr':{'class':inscriptionForm.firstname.vars.errors|length ? 'form-control is-invalid':'form-control'}}) }}
  23.                 </div>
  25.             </div>
  26.              <div class="form-group row ">
  27.                 {{ form_label(inscriptionForm.lastname, null, {'label_attr':{'class':'col-xl-3 col-lg-12 col-form-label'}}) }}
  28.                 <div class="col-lg-12 col-xl-12">
  29.                     {{ form_widget(inscriptionForm.lastname, {'attr':{'class':inscriptionForm.lastname.vars.errors|length ? 'form-control is-invalid':'form-control'}}) }}
  31.                 </div>
  32.             </div>
  33.             <div class="form-group row ">
  34.                 {{ form_label(inscriptionForm.email, null, {'label_attr':{'class':'col-xl-3 col-lg-12 col-form-label'}}) }}
  35.                 <div class="col-lg-12 col-xl-12">
  36.                     {{ form_widget(inscriptionForm.email, {'attr':{'class':inscriptionForm.email.vars.errors|length ? 'form-control is-invalid':'form-control'}}) }}
  38.                 </div>
  39.                 {% if inscriptionForm.email.vars.errors|length > 0 %}
  40.                     <div>
  41.                         {{ form_errors(inscriptionForm.email) }}
  42.                     </div>
  43.                 {% endif %}
  44.             </div>
  45.              <div class="form-group row ">
  46.                 {{ form_label(inscriptionForm.cellPhone, null, {'label_attr':{'class':'col-xl-3 col-lg-12 col-form-label'}}) }}
  47.                 <div class="col-lg-12 col-xl-12">
  48.                     {{ form_widget(inscriptionForm.cellPhone, {'attr':{'class':inscriptionForm.cellPhone.vars.errors|length ? 'form-control is-invalid':'form-control'}}) }}
  49.                 </div>
  50.             </div>
  51.              <div class="form-group row ">
  52.                 {{ form_label(inscriptionForm.password, null, {'label_attr':{'class':'col-xl-3 col-lg-12 col-form-label'}}) }}
  53.                 <div class="col-lg-12 col-xl-12 position-relative">
  54.                     {{ form_widget(inscriptionForm.password, {'attr':{'class':inscriptionForm.password.vars.errors|length ? 'form-control is-invalid':'form-control'}}) }}
  55.                     <div class="toogle-view-password cursor"><img src="https://my-flow.fr/wp-content/themes/astra-child/assets/images/view-password.png"></div>
  56.                 </div>
  57.                 
  58.             </div>
  59.            <div class="form-group">
  60.                 {{ form_label(inscriptionForm.picture, null, {'label_attr':{'class':'col-xl-4 col-lg-4 col-form-label'}}) }}
  61.                 <div class="col-lg-8 col-xl-8">
  62.                     <div class="image-input image-input-empty" data-kt-image-input="true">
  63.                         <div class="image-input-wrapper w-150px h-150px"></div>
  64.                         <label class="w-150px h-150px label-upload" data-kt-image-input-action="change" data-bs-toggle="tooltip" data-bs-dismiss="click" title="Modifier la photo">
  65.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewbox="0 0 16 16">
  66.                                 <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
  67.                             </svg>
  69.                             {{ form_widget(inscriptionForm.picture) }}
  70.                             <input type="hidden" name="avatar_remove"/>
  71.                         </label>
  72.                         <span class="w-25px h-25px" data-kt-image-input-action="remove" data-bs-toggle="tooltip" data-bs-dismiss="click" title="Supprimer la photo">
  73.                             <i class="icn-greyhoverpink fa fa-trash" style="position: relative; right: -25px;"></i>
  74.                         </span>
  75.                     </div>
  77.                     {{ form_errors(inscriptionForm.picture) }}
  78.                 </div>
  79.                 <p><img src="https://my-flow.fr/wp-content/themes/astra-child/assets/images/bouclier.png" width="16" height="16">  Tous les fichiers déposés sont automatiquement analysés pour garantir un environnement sécurisé.</p>
  80.             </div>
  81.         </div>
  82.     </div>
  83.     <p id="element-error-message-1" style="color: rgb(185, 71, 71); font-size: 12px;">
  84.         
  85.     </p>
  86.     <input type="hidden" id="error-step-1" value="false">
  87.     <input type="hidden" id="error-mdp" value="false">
  88.  <p id="containt-verify-pass" style="color: #918f8f;font-size: 12px;">
  89.     Votre mot de passe doit être constitué de <span id="lengthpassword" class="invalid-check-password">12 caractères</span> et inclure quatre catégories de caractères distincts : <span id="upperpassword" class="invalid-check-password">lettres majuscules </span>, <span id="lowerpassword" class="invalid-check-password">lettres minuscules</span>,<span id="digitpassword" class="invalid-check-password"> chiffres</span>, ainsi que des signes de <span id="specialpassword" class="invalid-check-password">ponctuation ou des caractères spéciaux</span>.
  90.   </p>
  91.   <div id="all-btn-step-1">
  92.         <button id="btn-step-1" style="margin-right: 15px;" type="button" class="btn btn-primary-custom font-weight-bold" data-kt-stepper-action="submit" {{ stimulus_action('inscription--handle','nextStep','click') }}>
  93.             <span class="indicator-label">
  94.                 Suivant
  95.             </span>
  96.         </button>
  97.   </div>
  98. </div>
  99.