templates/security/inscription.html.twig line 1

Open in your IDE?
  1. {% extends 'base_login.html.twig' %}
  2. {% block stylesheets %}
  3. {{ parent() }}
  4.         <link rel="stylesheet" href="/intl-tel-input/css/intlTelInput.css">
  5. {% endblock %}
  6. {% block title %}Connexion{% endblock %}
  8. {% block notification %}
  9.     {% for message in app.session.flashbag.get('user_inscription_fail') %}
  10.         <div class="alert alert-primary">
  11.             <i class="fa fa-info"></i>{{ message }}
  12.             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  13.                 <span aria-hidden="true" class="text-primary">&times;</span>
  14.             </button>
  15.         </div>
  16.     {% endfor %}
  17. {% endblock %}
  20. {% block body %}
  21. <div class="row">
  22.     <div class="col-sm-6 card bg-white border border-white ml-auto mr-auto"
  23.         style="padding-bottom: 10px; margin-bottom :15px;">
  24.         <div class="card-body">
  25.             <div class="text-center mb-4">
  26.                 <a class="h1 text-info font-weight-bold text-center text-decoration-none" href="/">
  27.                     <img src="/assets/icon/favicon/ma-ico-180x180.png" width="70px" class="avatar rounded-circle shadow-sm mr-2" alt="app">
  28.                 </a>
  29.             </div>
  30.             
  31.             <div class="card-app bg-white border-0 mb-4">
  32.                 <div class="card-body pl-5 pr-5">
  33.                     <div class="row mt-4" style="margin-bottom:20px;">
  34.                         <div class="col-sm-6 text-left">
  35.                             <div class="h5 font-bold text-dark">
  36.                                 Inscrivez-vous
  37.                             </div>
  38.                         </div>
  39.                         <div class="col-sm-6 text-right">
  40.                             <div class="h5 text-dark">
  42.                                     <p class="" style="font-size:14px;color : rgba(40, 58, 90, 0.9);"> ou 
  43.                                         <a class="font-semi-bold" href="{{ path('app_user_login')}}">  connectez-vous</a></p>
  44.                             </div>
  45.                         </div>
  46.                     </div>
  47.         
  48.                     <div class="row">
  49.                         <div class="col-sm-12">
  50.         
  51.                             {{ form_start(form) }}
  52.                             {{ form_row(form.username) }}
  53.                             {{ form_row(form.login) }}
  54.                             {{ form_row(form.mail) }}
  55.                             {{ form_row(form.telephone,{'attr': {'style': 'width:100%'}}) }}
  56.                             {% if form.password is defined %}
  57.                             {{ form_row(form.password) }}
  58.                             {% endif %}
  59.                              {{ form_row(form.verificationMode) }}
  60.                         
  61.                             <br />
  62.                             {% if form.termsAccepted is defined %}
  63.                             {{ form_row(form.termsAccepted) }}. <a href="{{ path('app_cgu_cgv') }}" target="_blank">Conditions
  64.                                 générales d'utilisation</a>
  65.                             <hr />
  66.                             {% endif %}
  67.         
  68.                             <div class="text-right">
  69.                                 <button type="submit" class="font-semi-bold btn btn-primary-app btn-sm  pt-3 pb-3"
  70.                                     style="width:100%; font-size:15px;">
  71.                                     S'inscrire
  72.                                 </button>
  73.                                 
  74.                             </div>
  75.                             {{ form_end(form) }}
  76.                             <br />
  77.                             
  78.                         </div>
  79.         
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.             
  84.         </div>
  85.     </div>
  86. </div>
  88. <div class="modal fade" id="information" tabindex="-1" role="dialog" aria-labelledby="confirmationTitle"
  89.     aria-hidden="true">
  90.     <div class="modal-dialog modal-dialog-centered" role="document">
  91.         <div class="modal-content">
  92.             <div class="modal-header">
  93.                 <h5 class="modal-title" id="exampleModalLongTitle">
  94.                     <strong>Information</strong>
  95.                 </h5>
  96.             </div>
  97.             <div class="modal-body">
  98.                 <p>
  99.                     <strong id="divInfo">Veuillez renseigner toutes les informations!</strong>
  100.                 </p>
  101.             </div>
  102.             <div class="modal-footer">
  103.                 <button type="button" class="btn btn-primary-app pr-5 pl-5 btn-sm" data-dismiss="modal"
  104.                     aria-label="Close">OK</button>
  105.             </div>
  106.         </div>
  107.     </div>
  108. </div>
  109. {% endblock %}
  111. {% block javascripts %}
  112. {{ parent() }}
  113. <script src="/intl-tel-input/js/intlTelInput-jquery.js"></script>
  114. <script src="/intl-tel-input/js/intlTelInput.js"></script>
  115. <script src="/intl-tel-input/js/data.js"></script>
  116. <script src="/intl-tel-input/js/utils.js"></script>
  117. <script>
  118.     const inputTelephone = $('#user_iscription_telephone');
  119.     var initError="";
  120.     if (inputTelephone.length) {
  122.             var input = document.querySelector('#user_iscription_telephone');
  123.             var iti = intlTelInput(input, {
  124.                 initialCountry: "cd",
  125.                 utilsScript: "intl-tel-input/build/js/utils.js",
  126.                 preferredCountries: ["cd"],
  127.                 formatOnDisplay: false,
  128.             });
  130.             inputTelephone.on('blur', function (event) {
  131.                 const num = iti.getNumber().substring(1);
  132.                 const code      =   iti.selectedCountryData.dialCode;
  134.                 if (!iti.isValidNumber()) {
  135.                     inputTelephone.addClass('is-invalid');
  136.                     
  137.                     if (!initError) {
  138.                             initError = true;
  139.                     }
  141.                 } else {
  142.                      inputTelephone.removeClass('is-invalid');
  143.                 }
  144.                 $(this).val(num);
  145.             })
  146.     }
  148.     $('#btnSave').on('click', function () {
  149.         if ($("#security_login").val() == null ||
  150.             $("#security_login").val() == '' ||
  151.             $("#security_username").val() == null ||
  152.             $("#security_username").val() == '' ||
  153.             $("#security_level").val() == null ||
  154.             $("#security_level").val() == '') {
  155.             $("#information").modal("show");
  156.         } else {
  157.             var level = $("#security_level").val();
  158.             if (level == 'STRUCTURE') {
  159.                 if ($("#security_organization").val() == null ||
  160.                     $("#security_organization").val() == '') {
  162.                     $('#divInfo').empty();
  163.                     $('#divInfo').append("Veuillez sélectionner la structure d'appartenance");
  164.                     $("#information").modal("show");
  165.                     return;
  166.                 }
  167.             } else {
  168.                 if ($("#security_pcode").val() == null ||
  169.                     $("#security_pcode").val() == '') {
  171.                     $('#divInfo').empty();
  172.                     $('#divInfo').append("Veuillez sélectionner l'entité d'appartenance");
  173.                     $("#information").modal("show");
  174.                     return;
  175.                 }
  176.             }
  177.             $("#confirmation").modal("show");
  178.         }
  179.     });
  180. </script>
  181. {% endblock %}