templates/registration/register.html.twig line 1

Open in your IDE?
  1. <!doctype html>
  2. <html lang="fr">
  4. <head>
  6.     <meta charset="utf-8"/>
  7.     <title>Register | Octo - Delsart</title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <!-- App favicon -->
  10.     <link rel="shortcut icon" href="assets/images/delsart_logo.jpg">
  12.     <!-- Bootstrap Css -->
  13.     <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css"/>
  14.     <!-- Icons Css -->
  15.     <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css"/>
  16.     <!-- App Css-->
  17.     <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css"/>
  19. </head>
  21. <body>
  22. <div class="account-pages my-5 pt-sm-5">
  23.     <div class="container">
  24.         <div class="row justify-content-center">
  25.             <div class="col-md-8 col-lg-6 col-xl-5">
  26.                 <div class="card overflow-hidden">
  27.                     <div class="card-body pt-0">
  28.                         <div>
  29.                             <div class="mb-4">
  30.                                         <span class="">
  31.                                             <img src="assets/images/delsart_logo.jpg" alt=""
  32.                                                  class="align-self-sm-start">
  33.                                         </span>
  34.                             </div>
  35.                         </div>
  36.                         <div class="p-2">
  37.                             <div class="form-horizontal">
  38.                                 <div class="mt-3 d-grid" id="buttonEstablishment">
  39.                                     <button class="btn btn-dark waves-effect waves-light" type="button" id="buttonClient" onclick="toggleForm(true)">
  40.                                         Je suis déjà client Delsart
  41.                                     </button>
  42.                                     <button class="btn btn-light waves-effect waves-light mt-2" type="button" id="buttonNewClient" onclick="toggleForm(false)">
  43.                                         Je ne suis pas encore client Delsart
  44.                                     </button>
  45.                                 </div>
  46.                                 <div class="mt-4 text-center">
  47.                                     <span><a href="/login" class="text-muted"><i class="mdi mdi-lock me-1"></i>Déjà inscrit ?</a></span>
  48.                                 </div>
  49.                             </div>
  50.                             {% if app.flashes('error') %}
  51.                                 <div class="alert alert-danger">
  52.                                     <span>Erreur dans les données introduites</span>
  53.                                 </div>
  54.                             {% endif %}
  55.                         </div>
  56.                         <div id="clientCarousel" class="carousel slide" data-bs-interval="false" style="display:none;">
  57.                             <div class="carousel-inner">
  58.                                 <!-- Section pour nouveau client avec choix d'établissement -->
  59.                                 <div class="carousel-item" id="newClient">
  60.                                     <h4>Choisissez une option</h4>
  61.                                     <div class="mt-3 d-grid" id="buttonEstablishment">
  62.                                         <button class="btn btn-dark waves-effect waves-light" type="button" id="buttonExistingEstablishment" onclick="showForm(true)">
  63.                                             Établissement existant
  64.                                         </button>
  65.                                         <button class="btn btn-light waves-effect waves-light mt-2" type="button" id="buttonProjectInProgress" onclick="showForm(false)">
  66.                                             Projet en cours
  67.                                         </button>
  68.                                     </div>
  69.                                 </div>
  71.                                 <div class="carousel-item active" id="existingClient">
  72.                                     <h4>Créez votre compte client pour un établissement existant</h4>
  73.                                     {{ form_start(registrationForm) }}
  74.                                     <form id="registrationForm" method="post">
  75.                                         <input type="hidden" id="isExistingEstablishment" name="isExistingEstablishment" value="false">
  76.                                         <div class="row">
  77.                                             <div class="col-lg-6">
  78.                                                 {{form_label(registrationForm.firstname, 'Prénom' ,{'attr': {'class': 'form-label'}}) }}
  79.                                                 {{form_widget(registrationForm.firstname, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre prénom'}})}}
  80.                                             </div>
  81.                                             <div class="col-lg-6">
  82.                                                 {{form_label(registrationForm.lastname, 'Nom' ,{'attr': {'class': 'form-label'}}) }}
  83.                                                 {{form_widget(registrationForm.lastname, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre nom'}})}}
  84.                                             </div>
  85.                                         </div>
  86.                                         <div class="col-lg-12 mt-2">
  87.                                             {{form_label(registrationForm.email, 'Email' ,{'attr': {'class': 'form-label'}}) }}
  88.                                             {{form_widget(registrationForm.email, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre email'}})}}
  89.                                             {{form_label(registrationForm.numberPhone, 'Numéro de téléphone' ,{'attr': {'class': 'form-label'}}) }}
  90.                                             {{ form_widget(registrationForm.numberPhone, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre numéro de téléphone'}}) }}
  91.                                             {{ form_label(registrationForm.plainPassword.first, 'Mot de Passe*', {'attr': {'class': 'form-label'}}) }}
  92.                                             {{ form_errors(registrationForm.plainPassword.first, {'attr': {'class': 'text-danger'}}) }}
  94.                                             <div class="input-group show-hide-password mb-3">
  95.                                                 {{ form_widget(registrationForm.plainPassword.first, {'attr': {'class': 'form-control', 'placeholder': 'Entrez votre mot de passe', 'id': 'passwordField'}}) }}
  96.                                                 <span class="input-group-text btn-yellow" id="password-addon" onclick="togglePasswordVisibility('registration_form_plainPassword_first', 'eyeIconFirst')">
  97.         <i class="mdi mdi-eye-outline" id="eyeIconFirst" aria-hidden="true" style="cursor: pointer;"></i>
  98.     </span>
  99.                                             </div>
  101.                                             {{ form_label(registrationForm.plainPassword.second, 'Confirmation*', {'attr': {'class': 'form-label'}}) }}
  102.                                             {{ form_errors(registrationForm.plainPassword.second, {'attr': {'class': 'text-danger'}}) }}
  104.                                             <div class="input-group show-hide-password mb-3">
  105.                                                 {{ form_widget(registrationForm.plainPassword.second, {'attr': {'class': 'form-control', 'placeholder': 'Confirmez votre mot de passe', 'id': 'confirmPasswordField'}}) }}
  106.                                                 <span class="input-group-text btn-yellow" id="password-addon" onclick="togglePasswordVisibility('registration_form_plainPassword_second', 'eyeIconSecond')">
  107.         <i class="mdi mdi-eye-outline" id="eyeIconSecond" aria-hidden="true" style="cursor: pointer;"></i>
  108.     </span>
  109.                                             </div>
  110.                                             {{form_label(registrationForm.tvaNumber, 'Numéro de tva' ,{'attr': {'class': 'form-label'}}) }}
  111.                                             {{form_widget(registrationForm.tvaNumber, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre numéro de tva'}})}}
  112.                                             {{ form_label(registrationForm.tvaStatus, 'Statut TVA', {'attr': {'class': 'form-label'}}) }}
  113.                                             {{ form_widget(registrationForm.tvaStatus, {'attr': {'class': 'form-control'}}) }}
  114.                                             {{ form_errors(registrationForm.tvaStatus) }}
  115.                                                 <label class="form-check-label mt-2" for="establishments">Mon (mes) établissement(s)</label>
  116.                                                 <textarea class="form-control" name="establishments" id="establishments"></textarea>
  117.                                                 <div style="display:none" id="newEstablishmentAddress">
  118.                                                     <label class="form-check-label mt-2" for="establishmentsAddress">Adresse(s) de mon (mes) établissement(s)</label>
  119.                                                     <textarea class="form-control" name="establishmentsAddress" id="establishmentsAddress"></textarea>
  120.                                                 </div>
  121.                                                 <div style="display:none" id="projectDescribe">
  123.                                                     <label class="form-check-label mt-2" for="description">Décrivez votre projet / type d'établissement</label>
  124.                                                     <textarea class="form-control" name="description" id="description"></textarea>
  125.                                                 </div>
  126.                                         </div>
  127.                                         <div class="col-lg-12 mt-4">
  128.                                             <div class="form-group">
  129.                                                 <div class="d-flex mt-2">
  130.                                                     {{ form_widget(registrationForm.cgvAccepted) }}
  131.                                                     <sub class="ml-2">
  132.                                                         J'accepte les <a href="/docs/privacy_policy.pdf" target="_blank" style="cursor:pointer; color: orangered">Conditions générales de ventes de Delsart</a> &
  133.                                                         <a href="/docs/disclaimer.pdf" target="_blank" style="cursor:pointer; color: orangered">Disclaimer</a>
  134.                                                     </sub>
  135.                                                 </div>
  136.                                             </div>
  137.                                         </div>
  138.                                         <div class="d-grid mt-3">
  139.                                             <button class="btn btn-dark waves-effect waves-light" id="submitButtonExisting" type="submit">Valider</button>
  140.                                         </div>
  141.                                         {{ form_end(registrationForm) }}
  142.                                     </form>
  143.                                 </div>
  144.                             </div>
  145.                         </div>
  146.                     </div>
  147.                 </div>
  150.             </div>
  151.         </div>
  152.     </div>
  153. </div>
  154. <!-- end account-pages -->
  156. <script src="assets/libs/jquery/jquery.min.js"></script>
  157. <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
  158. <script src="assets/libs/metismenu/metisMenu.min.js"></script>
  159. <script src="assets/libs/simplebar/simplebar.min.js"></script>
  160. <script src="assets/libs/node-waves/waves.min.js"></script>
  162. <!-- App js -->
  163. <script src="assets/js/app.js"></script>
  164. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
  165. <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
  166. <script>
  167.     function toggleForm(isExistingClient) {
  168.         $('#clientCarousel').show(); // Affiche le carrousel
  169.         $("#newEstablishmentAddress").hide();
  170.         $("#projectDescribe").hide();
  172.         if (isExistingClient) {
  173.             $('#existingClient').addClass('active').show(); // Affiche la section client existant
  174.             $('#newClient').removeClass('active').hide(); // Masque la section nouveau client
  175.         } else {
  176.             $('#existingClient').removeClass('active').hide(); // Masque la section client existant
  177.             $('#newClient').addClass('active').show(); // Affiche la section nouveau client
  178.         }
  180.     }
  182.     function showForm(exist) {
  183.         $('#isExistingEstablishment').val(exist);
  184.         $("#newEstablishmentAddress").hide();
  185.         $("#projectDescribe").hide();
  186.         $('#existingClient').addClass('active').show(); // Affiche la section client existant
  187.         $('#newClient').removeClass('active').hide(); // Masque la section nouveau client
  189.         if(exist){
  190.             $("#newEstablishmentAddress").hide();
  191.             $("#projectDescribe").hide();
  192.             $("#newEstablishmentAddress").show();
  193.         }
  194.         else{
  195.             $("#newEstablishmentAddress").show();
  196.             $("#projectDescribe").show();
  197.         }
  198.     }
  199.     $(document).ready(function() {
  200.         window.togglePasswordVisibility = function(fieldId, eyeIconId) {
  201.             // Sélectionne le champ de mot de passe
  202.             var $passwordField = $('#' + fieldId);
  203.             var $eyeIcon = $('#' + eyeIconId);
  205.             // Vérifie si le champ de mot de passe existe
  206.             if ($passwordField.length) {
  207.                 if ($passwordField.attr('type') === 'password') {
  208.                     $passwordField.attr('type', 'text'); // Affiche le mot de passe
  209.                     $eyeIcon.removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline'); // Change l'icône
  210.                 } else {
  211.                     $passwordField.attr('type', 'password'); // Cache le mot de passe
  212.                     $eyeIcon.removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline'); // Rechange l'icône
  213.                 }
  214.             } else {
  215.                 console.error("Element not found: " + fieldId);
  216.             }
  217.         };
  218.     });
  219. </script>
  220. <!-- App js -->
  221. <script src="assets/js/app.js"></script>
  222. </body>
  223. </html>