templates/usr/ajo.html.twig line 1

Open in your IDE?
  1. {% extends "usrajo_view.html.twig" %}
  3. {% block body %}
  5.     <div class="card-body" id="form_usrajo">      {# pour cibler le formulaire à valider #}
  6.         
  7.         {% form_theme form_ajo 'form/fields.html.twig' %}
  8.         {{ form_errors(form_ajo) }}
  9.         {{ form_start(form_ajo) }}
  11.             <div class="row" style="padding-top:30px;">
  12.                 <div class="col-1">&nbsp;</div>
  13.                 <div class="col-10 text-left" style="border-left: 1px solid #ff0000;">
  14.                     <span class="titre1-base">Créer un compte</span>
  15.                     <div class="texte2-base">
  16.                         <div style="min-height: 18px;">Votre compte sera validé par l'administrateur Rural Consult et vous recevrez un courriel de confirmation.</div>
  17.                         <div style="min-height: 18px;">Vous pourrez ensuite accéder aux outils d'analyse financière réalisés par Rural Consult.</div>
  18.                     </div>
  19.                     
  22.                     <div class="ibox-content">
  23.                         {% if errors|length > 0 %}
  24.                             <h5 class="text-danger" style="text-decoration: underline;">Des erreurs de saisie ont été relevées</h5>
  25.                             <ul class="text-warning">
  26.                                 {% for error in errors %}
  27.                                     <li>{{ error.message }}</li>
  28.                                 {% endfor %}
  29.                             </ul>
  30.                         {% endif %}
  31.                     
  32.                         <div class="row">
  33.                             <div class="col-3">
  34.                                 <div class="form-floating">
  35.                                     {# si à désactiver : 'disabled':'disabled' dans attr #}
  36.                                     {{ form_widget(form_ajo.catid, {'attr': {'class': 'form-select', 'placeholder': 'pasaffiche'}}) }}    
  37.                                     {{ form_label(form_ajo.catid) }}
  38.                                 </div>
  39.                             </div>
  40.                             <div class="col-6">
  41.                                 <div class="form-floating">
  42.                                     {{ form_widget(form_ajo.usrorg, {'attr': {'class': 'form-control',' placeholder': 'pasaffiche'}}) }}
  43.                                     {{ form_label(form_ajo.usrorg) }}
  44.                                 </div>
  45.                             </div>
  46.                             <div class="col-2">
  47.                                 <div class="form-floating">
  48.                                 {{ form_widget(form_ajo.usrcodpos, {'attr': {'class': 'form-control',' placeholder': 'pasaffiche'}}) }}
  49.                                 {{ form_label(form_ajo.usrcodpos) }}
  50.                                 </div>
  51.                             </div>
  52.                         </div>
  53.                         
  54.                         <div class="row" style="padding-top:6px;">
  55.                             <div class="col-3">
  56.                                 <div class="form-floating">
  57.                                     {{ form_widget(form_ajo.usrnom, {'attr': {'class': 'form-control',' placeholder': 'pasaffiche'}}) }}
  58.                                     {{ form_label(form_ajo.usrnom) }}
  59.                                 </div>
  60.                             </div>
  61.                             <div class="col-3 text-left">
  62.                                 <div class="form-floating">
  63.                                     {{ form_widget(form_ajo.usrpre, {'attr': {'class': 'form-control',' placeholder': 'pasaffiche'}}) }}
  64.                                     {{ form_label(form_ajo.usrpre) }}
  65.                                 </div>
  66.                             </div>
  67.                             <div class="col-5 text-left">
  68.                                 <div class="form-floating">
  69.                                     {{ form_widget(form_ajo.usremail, {'attr': {'class': 'form-control',' placeholder': 'pasaffiche'}}) }}
  70.                                     {{ form_label(form_ajo.usremail) }}
  71.                                 </div>
  72.                             </div>
  73.                         </div>
  74.                         
  75.                         <div class="row"style="padding-top:6px;">
  76.                             <div class="col-3">
  77.                                 <div class="form-floating">
  78.                                     {{ form_widget(form_ajo.username, {'attr': {'class': 'form-control',' placeholder': 'pasaffiche'}}) }}
  79.                                     {{ form_label(form_ajo.username) }}
  80.                                 </div>
  81.                             </div>
  82.                             <div class="col-3">
  83.                                 <div class="form-floating">
  84.                                     {{ form_widget(form_ajo.usrpwdajo, {'attr': {'class': 'form-control',' placeholder': 'pasaffiche'}}) }}
  85.                                     {{ form_label(form_ajo.usrpwdajo) }}
  86.                                 </div>
  87.                             </div>
  88.                             <div class="col-3">
  89.                                 <div class="form-floating">
  90.                                     {{ form_widget(form_ajo.usrpwdconf, {'attr': {'class': 'form-control',' placeholder': 'pasaffiche'}}) }}
  91.                                     {{ form_label(form_ajo.usrpwdconf) }}
  92.                                 </div>
  93.                             </div>
  94.                             <div class="col-1">
  95.                                 <div class="input-group">
  96.                                     <span class="input-group-text"><i class="bi-eye myeye" style="color:#6bbdae;" title="Afficher vos mots de passe"></i></span>
  97.                                 </div>
  98.                             </div>
  99.                         </div>
  101.                         <div class="row" style="padding-top:10px;">
  102.                             <div class="col-10 texte2-base">
  103.                                 <div style="min-height: 18px;">
  104.                                     Toutes les informations suivies d'une étoile (*) doivent être obligatoirement renseignées.
  105.                                 </div>
  106.                                 <div style="min-height: 18px;">
  107.                                     Déterminez vous-même votre identifiant ainsi que votre mot de passe en respectant les contraintes indiquées ci-dessous.
  108.                                 </div>
  109.                                 <div style="min-height: 18px;">
  110.                                     Pour limiter les risques d'usurpation d'identité, votre identifiant (login) doit être composé de 10 caractères au minimum et 20 au maximum.
  111.                                 </div>
  112.                                 <div style="min-height: 18px;">
  113.                                     Votre mot de passe doit être composé de 13 caractères au minimum et contenir au moins 2 minuscules, 2 majuscules, 2 chiffres et 2 caractères non alphanumériques.<br />
  114.                                     Exemple de mot de passe : <b>UnMotdepa45é;</b>
  115.                                 </div>
  116.                             </div>
  117.                         </div>
  118.                         
  119.                         <div class="row" style="padding-top:10px;">
  120.                             <div class="col-2" title="Acceptation des conditions générales d'utilisation des outils Collectiv'Finance">
  121.                                 <div class="form-check form-switch">                {# checked par défaut #}
  122.                                   <input class="form-check-input" type="checkbox" role="switch" id="usr_acccgu">
  123.                                   <label class="texte2-base" style="padding-top:5px;" for="usr_acccgu">Accepter les CGU</label>
  124.                                 </div>
  125.                             </div> 
  126.                             <div class="col-2 text-center" style="padding-top:5px;">
  127.                                     {{ form_widget(form_ajo.Enregistrer) }}
  128.                             </div>
  129.                             <div class="col-8 texte2-base">
  130.                                 <div style="min-height: 18px;">
  131.                                     En créant votre espace personnel, vous acceptez les 
  132.                                     <a href="https://www.banquedesterritoires.fr/conditions-generales-dutilisation-du-site-internet-banque-des-territoires" target="_blank">
  133.                                         conditions générales d’utilisation
  134.                                     </a>                                </div>
  135.                                 <div style="min-height: 18px;">
  136.                                     Ainsi que les conditions de collecte et de traitement de vos 
  137.                                     <a href="https://www.banquedesterritoires.fr/donnees-personnelles" target="_blank">
  138.                                         données à caractère personnel
  139.                                     </a>
  140.                                 </div>
  141.                             </div>
  142.                         </div>
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.         {{ form_end(form_ajo) }}
  147.     </div>
  150.     
  151.     <script>
  152.         $(document).ready(function(){
  153.             
  154.             initPlugins();
  156.             $('#usr_ajo_usrorg, #usr_ajo_usrnom').blur(function(){
  157.                 var str = $(this).val();
  158.                 if(str.length > 0){
  159.                    $(this).val(str.toUpperCase());
  160.                 }
  161.             });
  163.             $('#usr_ajo_usrpwdajo, #usr_ajo_usrpwdconf').blur(function(){
  164.                 var pwd = $(this).val();
  165.                 if(pwd.length != 0){
  166.                     verifmpwd(pwd);
  167.                 }
  168.             });
  170.             {# situation départ récup Ctrl #}
  171.             $('label[for="usr_acccgu"]').html('Accepter les CGU ?');
  172.             $('#usr_ajo_usracccgu').val('');
  173.             $('#usr_ajo_Enregistrer').prop("disabled",true);
  174.             $('#usr_ajo_Enregistrer').css('font-style', 'italic');
  176.             {# inclure ou non période si clic #}
  177.             $('#usr_acccgu').click(function(e){
  178.                 var usr_acccgu = $(this);
  179.                 if(usr_acccgu.prop("checked") == true){
  180.                     $('#usr_ajo_usracccgu').val('checked');
  181.                     $('label[for="usr_acccgu"]').html('J\'accepte les CGU');
  182.                     $('#usr_ajo_Enregistrer').prop("disabled",false);
  183.                     $('#usr_ajo_Enregistrer').css('font-style', 'normal');
  184.                 }else{
  185.                     $('#usr_ajo_usracccgu').val('');
  186.                     $('label[for="usr_acccgu"]').html('Accepter les CGU ?');
  187.                     $('#usr_ajo_Enregistrer').prop("disabled",true);
  188.                     $('#usr_ajo_Enregistrer').css('font-style', 'italic');
  189.                 }                
  190.             });
  191.             
  192.             $('.myeye').click(function(e){
  193.                 var zieodkf = $('#usr_ajo_usrpwdajo').attr('type') == 'password' ? true:false;
  194.                 if(zieodkf){
  195.                     $('#usr_ajo_usrpwdajo').attr('type', 'text'); 
  196.                     $('#usr_ajo_usrpwdconf').attr('type', 'text'); 
  197.                     $(this).attr('class', 'bi-eye-slash myeye');
  198.                     $(this).attr('style', 'color:#ff0000;font-size:15px;');
  199.                     $(this).attr('title', 'Cacher vos mots de passe');
  200.                 }else{
  201.                     $('#usr_ajo_usrpwdajo').attr('type', 'password'); 
  202.                     $('#usr_ajo_usrpwdconf').attr('type', 'password'); 
  203.                     $(this).attr('class', 'bi-eye myeye');
  204.                     $(this).attr('style', 'color:#4a9abd;font-size:15px;');
  205.                     $(this).attr('title', 'Afficher vos mots de passe');
  206.                 }
  207.             });
  208.             
  209.             $('#usr_ajo_Enregistrer').click(function(e) {    {# vérif saisies / modifs zones obligatoires #}
  210.                 e.preventDefault();
  211.                 var pasok=0;
  213.                 {# vérif saisie données obligatoires #}
  214.                 if(($('#usr_ajo_usrnom').val() == '')||($('#usr_ajo_usrpre').val() == '')||($('#usr_ajo_usrorg').val() == '')||($('#usr_ajo_username').val() == '')||($('#usr_ajo_usremail').val() == '')||($('#usr_ajo_usrcodpos').val() == '')){
  215.                     pasok=1;
  216.                     if($('#usr_ajo_usrnom').val() == ''){
  217.                         $('label[for^=usr_ajo_usrnom]').css({'color':'#ff0000'});
  218.                     }else{
  219.                         $('label[for^=usr_ajo_usrnom]').css({'color':'#000000'});
  220.                     }
  221.                     if($('#usr_ajo_usrpre').val() == ''){
  222.                         $('label[for^=usr_ajo_usrpre]').css({'color':'#ff0000'});
  223.                     }else{
  224.                         $('label[for^=usr_ajo_usrpre]').css({'color':'#000000'});
  225.                     }
  226.                     if($('#usr_ajo_usrorg').val() == ''){
  227.                         $('label[for^=usr_ajo_usrorg]').css({'color':'#ff0000'});
  228.                     }else{
  229.                         $('label[for^=usr_ajo_usrorg]').css({'color':'#000000'});
  230.                     }
  231.                     if($('#usr_ajo_username').val() == ''){
  232.                         $('label[for^=usr_ajo_username]').css({'color':'#ff0000'});
  233.                     }else{
  234.                         $('label[for^=usr_ajo_username]').css({'color':'#000000'});
  235.                     }
  236.                     if($('#usr_ajo_usremail').val() == ''){
  237.                         $('label[for^=usr_ajo_usremail]').css({'color':'#ff0000'});
  238.                     }else{
  239.                         $('label[for^=usr_ajo_usremail]').css({'color':'#000000'});
  240.                     }
  241.                     if($('#usr_ajo_usrcodpos').val() == ''){
  242.                         $('label[for^=usr_ajo_usrcodpos]').css({'color':'#ff0000'});
  243.                     }else{
  244.                         $('label[for^=usr_ajo_usrcodpos]').css({'color':'#000000'});
  245.                     }
  246.                     if($('#usr_ajo_usracccgu').is(':checked')){
  247.                         $('#usr_ajo_usracccgu').css({'color':'#000000'});
  248.                     }else{
  249.                         $('#usr_ajo_usracccgu').css({'color':'#ff0000'});
  250.                     }
  251.                     
  252.                     swal({
  253.                         title: "Erreur",
  254.                         text: "Veuillez renseigner toutes les informations\n suivies d'une étoile (*)",
  255.                         icon: "warning",
  256.                         button: "Compléter",
  257.                     });                    
  258.                 }
  260.                 
  261.                 {# vérif codpostal #}
  262.                 if(pasok==0){
  263.                     var codpos = $('#usr_ajo_usrcodpos').val();
  264.                     if(codpos.length != 5){
  265.                         pasok=1;
  266.                         swal({
  267.                             title: "Erreur",
  268.                             text: "Le code postal saisi ne contient pas que des chiffres",
  269.                             icon: "warning",
  270.                             button: "Corriger",
  271.                         });
  272.                     }else{
  273.                         var nombr=new Array('0','1','2','3','4','5','6','7','8','9');
  274.                         var nbr = 0;
  275.                         for (i=0; i<codpos.length;i++){
  276.                             for(j=0;j<10;j++) {if(nombr[j]==codpos[i]) {nbr++;}}
  277.                         }
  278.                         if(nbr<5){
  279.                             pasok=1;
  280.                             swal({
  281.                                 title: "Erreur",
  282.                                 text: "Le code postal saisi ne contient pas que des chiffres",
  283.                                 icon: "warning",
  284.                                 button: "Corriger",
  285.                             });
  286.                         }else{
  287.                             if(codpos.substring(0,2)=='00'){        {# dept 00 okbarr #}
  288.                                 pasok=1;
  289.                                 swal({
  290.                                     title: "Erreur",
  291.                                     text: "Le code postal saisi ne paraît pas correct",
  292.                                     icon: "warning",
  293.                                     button: "Corriger",
  294.                                 });
  295.                             }
  296.                         }
  297.                     }
  298.                 }
  299.                 
  300.                 {# vérif login #}
  301.                 if(pasok==0){
  302.                     if($('#usr_ajo_username').val() == ""){
  303.                         pasok=1;
  304.                         swal({
  305.                             title: "Erreur",
  306.                             text: "Vous devez saisir un Identifiant (login)",
  307.                             icon: "warning",
  308.                             button: "Compléter",
  309.                         });                    
  310.                     }else{
  311.                         var str = $('#usr_ajo_username').val();
  312.                         if((str.length<10)||(str.length>20)){
  313.                             pasok=1;
  314.                             swal({
  315.                                 title: "Erreur",
  316.                                 text: "Votre identifiant (login) doit être composé de 10 caractères au minimum, 20 au maximum",
  317.                                 icon: "warning",
  318.                                 button: "Corriger",
  319.                             });                    
  320.                         }
  321.                     }
  322.                 }
  323.                 
  324.                 {# vérif mots de passe #}
  325.                 if(pasok==0){
  326.                     if(($('#usr_ajo_usrpwdajo').val() == "")||($('#usr_ajo_usrpwdconf').val() == "")){
  327.                         pasok=1;
  328.                         swal({
  329.                             title: "Erreur",
  330.                             text: "Vous devez saisir un mot de passe, puis le confirmer",
  331.                             icon: "warning",
  332.                             button: "Compléter",
  333.                         });                    
  334.                     }else{
  335.                         if($('#usr_ajo_usrpwdajo').val() != $('#usr_ajo_usrpwdconf').val()){
  336.                             pasok=1;
  337.                             swal({
  338.                                 title: "Erreur",
  339.                                 text: "Les mots de passe saisis (mot de passe et confirmation)\n ne sont pas identiques",
  340.                                 icon: "warning",
  341.                                 button: "Corriger",
  342.                             });                    
  343.                         }else{
  344.                             var pwda = $('#usr_ajo_usrpwdajo').val();
  345.                             var pwdb = $('#usr_ajo_usrpwdconf').val();
  346.                             if((verifmpwd(pwda)==false)||(verifmpwd(pwdb)==false)){    {# into the main js yol #}
  347.                                 pasok=1;
  348.                             }
  349.                         }
  350.                     }
  351.                 }
  352.                 
  353.                 if(pasok==0) {      {# sans erreur #}
  354.                     showSaveLoading($('#'+this.id));                
  355.                     var form = $('#form_usrajo').find('form');       {# cible le formulaire à valider #}
  356.                     form.submit();
  357.                 }
  358.             });
  359.             
  360.         });
  363.         var showSaveLoading = function(el){
  364.             var label = el.html();
  365.             el.empty();
  366.             el.append('<i class="fa fa-cogs fa-spin"></i> Veuillez patienter...<span class="collapse">'+label+'</span>')
  367.             el.prop('disabled',true);
  368.         }
  369.         
  370.         var hideSaveLoading = function(el){
  371.             var label = el.find('.collapse').html();
  372.             el.empty().html(label);
  373.             el.prop('disabled',false);
  374.         }
  375.         
  376.         var initPlugins = function(){
  377.             // $('.footable').footable();
  378.         }        
  380.     </script>
  381. {% endblock body %}