templates/default/inscription.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello DefaultController!{% endblock %}
  5. {% block body %}
  6. <style type="text/css">
  7.     .txt-inscription,
  8.     label {
  9.         color: #adb9ca;
  10.     }
  12.     .select2-container--default .select2-selection--single {
  13.   background-color: #fff;
  14.   border: none !important;
  15.   border-radius: 4px;
  16. }
  18. .select2-container--default .select2-selection--single .select2-selection__arrow {
  19.   height: 26px;
  20.   position: absolute;
  21.   top: 1px;
  22.   right: 1px;
  23.   width: 20px;
  24.   display: none;
  25. }
  28.     button {
  29.         background-color: #adb9ca !important;
  30.         color: white !important;
  31.     }
  33.     button:hover {
  34.         background-color: #0073CD !important;
  35.         color: white !important;
  36.     }
  38.     .btn-logo {
  39.         width: 0.1px;
  40.         opacity: 0;
  41.     }
  43.     .style-choix-logo {
  44.         background-color: #adb9ca;
  45.         color: white;
  46.         padding: 0.5em;
  47.         border-radius: 5px;
  48.     }
  50.     
  52. #part form
  53.     {
  54.           display: block;
  55.   border: solid #B0DB82;
  56.   border-radius: 10px;
  57.   padding: 15px;
  58.   margin-bottom: 10px;
  59.   margin-top: 10px;
  61.     }
  63.     #part label{
  64.         color:#B0DB82;
  65.     }
  67.      #part button:hover {
  68.   background-color: #00B050 !important;
  69.   color: white !important;
  70. }
  72.     #part button {
  73.   background-color: #B0DB82 !important;
  74.   color: white !important;
  75. }
  77.     #pro form
  78.     {
  79.           display: block;
  80.   border: solid #ADB9CA ;
  81.   border-radius: 10px;
  82.   padding: 15px;
  83.   margin-bottom: 10px;
  84.   margin-top: 10px;
  86.     }
  88.       #pro label{
  89.         color:#ADB9CA;
  90.     }
  92. </style>
  94. <div class="container mx-auto" style="margin : 150px 0 ;" id="{{ app.request.get('type')}}" >
  95.         <a style="font-size:24px;">Je m'inscris en tant que {% if app.request.get('type') == 'pro' %} professionnel {% else %} particulier {% endif %} :</a>
  96.    {{form_start(form)}}
  97.         
  99. {% if app.request.get('erreur') %}
  100.         <div class="alert alert-danger"><b>Erreur :</b> un compte existe déjà cette adresse e-mail !</div>
  101.         {% endif %}
  102.         {% if app.request.get('type') == 'pro' %}
  103.         <div class="form-row">
  104.             <div class="form-group col-md-6">
  105.                 <label for="raisonSociale">Raison sociale</label>
  106.                 {{ form_row(form.raisonSociale,{'attr': {'class': 'form-control','placeholder': 'Entrer votre raison sociale'}}) }}
  107.             </div>
  108.             <div class="form-group col-md-6">
  109.                 <label for="siret">SIRET</label>
  110.                 {{ form_row(form.siret,{'attr': {'class': 'form-control','placeholder': 'Entrer votre numéro de siret'}}) }}
  111.             </div>
  112.         </div>
  113.         <div class="form-group">
  114.             <label for="tva">Nº TVA </label>
  115.            {{ form_row(form.tva,{'attr': {'class': 'form-control','placeholder': 'Entrer votre numéro de tva'}}) }}
  116.         </div>
  117.         <div class="form-group">
  118.             <p class="txt-inscription"> Logo de l'entreprise </p>
  119.            
  120.              {{ form_row(form.logo,{'attr': {'class': 'form-control','placeholder': 'Entrer votre mot de passe'}}) }}
  121.         </div>
  122.         {% endif %}
  123.         <div class="form-group">
  124.             <label for="genre">Civilité</label>
  125.             <select class="form-control" name="genre" id="genre" required>
  126.                 <option selected value="">Choisissez...</option>
  127.                 <option value="M">Homme</option>
  128.                 <option value="Mme">Femme</option>
  129.                 
  130.             </select>
  131.         </div>
  132.         <div class="form-row">
  133.             <div class="form-group col-md-6">
  134.                 <label for="nom">Nom</label>
  135.                   {{ form_row(form.nom,{'attr': {'class': 'form-control','placeholder': 'Entrer votre nom'}}) }}
  136.             </div>
  137.             <div class="form-group col-md-6">
  138.                 <label for="prenom">Prénom</label>
  139.                {{ form_row(form.prenom,{'attr': {'class': 'form-control','placeholder': 'Entrer votre prénom'}}) }}
  140.             </div>
  142.         </div>
  143.         {% if app.request.get('type') == 'pro' %}
  144.         
  145.         {% endif %}
  147.         <div class="form-group">
  148.             <label for="adresse">Adresse</label>
  149.            {{ form_row(form.adresse,{'attr': {'class': 'form-control','placeholder': 'Entrer votre adresse'}}) }}
  150.         </div>
  151.         <div class="form-row">
  152.             <div class="form-group col-md-6">
  153.                 <label for="codePostal">Code postal</label>
  154.                 {{ form_row(form.codePostal,{'attr': {'class': 'form-control','placeholder': 'Entrer votre code postal'}}) }}
  155.             </div>
  156.             <div class="form-group col-md-6">
  157.                 <label for="ville">Ville</label>
  158.                   <select class="input-search js-data-example-ajax" name="ville" style="width:100%" >
  159.                                         
  160.   
  161.                   </select>
  162.             </div>
  163.         </div>
  164.         <div class="form-row">
  165.             <div class="form-group col-md-6">
  166.                 <label for="pays">Pays</label>
  167.                 <select name="pays" class="form-control" name="pays">
  168.                 {% for res in pays %}
  169.                 <option value="{{res.id}}">{{res.libelle}}</option>
  170.                 {% endfor %}
  171.                 </select>
  172.             </div>
  173.             <div class="form-group col-md-6">
  174.                 <label for="telephone">Numéro de téléphone</label>
  175.                 {{ form_row(form.telephone,{'attr': {'class': 'form-control','placeholder': 'Entrer votre numéro de téléphone'}}) }}
  176.             </div>
  177.         </div>
  178.         <div class="form-group">
  179.             <label for="email">Adresse e-mail</label>
  180.             {{ form_row(form.email,{'attr': {'class': 'form-control','placeholder': 'Entrer votre adresse email'}}) }}
  181.         </div>
  182.         <div class="form-group">
  183.             <label for="confirmEmail">Confirmation de l'adresse e-mail</label>
  184.             <input type="email" class="form-control" id="confirmEmail" placeholder="Confirmez votre adresse email">
  185.         </div>
  186.         <div class="form-group">
  187.             <label for="password">Mot de passe</label>
  188.              {{ form_row(form.password,{'attr': {'class': 'form-control','placeholder': 'Entrer votre mot de passe'}}) }}
  189.         </div>
  190.         <div class="form-group">
  191.             <label for="confirmPassword">Confirmation de mot de passe</label>
  192.             <input type="password" class="form-control" id="confirmPassword" placeholder="Confirmez votre mot de passe">
  193.         </div>
  194.         
  195.     
  196.         <div class="row d-flex justify-content-center">
  197.             <button type="submit" class="btn">S'INSCRIRE</button>
  198.         </div>
  199.     </form>
  200. </div>
  202. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  203. <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  204. <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
  205. <script>
  207. $(document).ready(function() {
  208.   var data = []; // Variable pour stocker les données JSON
  210.   // Charger les données JSON depuis l'URL
  211.   $.getJSON("https://modixom.fr/villes.json", function(response) {
  212.     data = response.results;
  213.     
  214.     // Ajouter un élément vide pour le placeholder
  215.     data.unshift({ id: "", text: "" });
  218.     // Fonction pour calculer la distance de Levenshtein entre deux chaînes de caractères
  219.     function levenshteinDistance(a, b) {
  220.       if (a.length === 0) return b.length;
  221.       if (b.length === 0) return a.length;
  223.       var matrix = [];
  225.       // Initialise la première ligne et la première colonne de la matrice
  226.       for (var i = 0; i <= b.length; i++) {
  227.         matrix[i] = [i];
  228.       }
  229.       for (var j = 0; j <= a.length; j++) {
  230.         matrix[0][j] = j;
  231.       }
  233.       // Calculer la distance de Levenshtein
  234.       for (var i = 1; i <= b.length; i++) {
  235.         for (var j = 1; j <= a.length; j++) {
  236.           if (b.charAt(i - 1) === a.charAt(j - 1)) {
  237.             matrix[i][j] = matrix[i - 1][j - 1];
  238.           } else {
  239.             matrix[i][j] = Math.min(
  240.               matrix[i - 1][j - 1] + 1, // Substitution
  241.               matrix[i][j - 1] + 1, // Insertion
  242.               matrix[i - 1][j] + 1 // Suppression
  243.             );
  244.           }
  245.         }
  246.       }
  248.       return matrix[b.length][a.length];
  249.     }
  252.     // Initialiser Select2 avec les données chargées
  253.     $('.js-data-example-ajax').select2({
  254.       placeholder: 'Choisir une ville',
  255.       language: {
  256.   // You can find all of the options in the language files provided in the
  257.   // build. They all must be functions that return the string that should be
  258.   // displayed.
  259.   inputTooShort: function () {
  260.     return "Saisir minimum 3 caractères";
  261.   }
  262. },
  263.       
  264.       selectOnClose: false,
  265.       tags: false,
  266.       tokenSeparators: [',', ' '],
  267.       data: data, // Utiliser les données chargées pour Select2
  268.       templateResult: function(result) {
  269.         return result.text;
  270.       },
  271.       dropdownAutoWidth: true, // Ajuster automatiquement la largeur du menu déroulant
  272.       minimumInputLength: 3, // Requiert au moins 1 caractère pour effectuer une recherche
  273.       sorter: function(data) {
  274.         // Obtenir la valeur de recherche
  275.         var term = $('.js-data-example-ajax').val().toLowerCase();
  277.         // Trier les données en fonction de la pertinence
  278.         return data.sort(function(a, b) {
  279.           var distanceA = levenshteinDistance(term, a.text.toLowerCase());
  280.           var distanceB = levenshteinDistance(term, b.text.toLowerCase());
  282.           return distanceA - distanceB;
  283.         });
  284.       }
  285.     });
  286.    var villed = $('#villeSelect').val()
  290.     
  292.   });
  293. });
  294. </script>
  295. {% endblock %}