templates/frontend/registration/register.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block title %}
  4.     Register
  5. {% endblock %}
  7. {% block stylesheet %}
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
  9.     <style>
  10.         .image-container {
  11.             width: 100%;
  12.             height: 100%;
  13.             background-image: url({{ asset('build/images/signupcage.b60947f4.svg') }});
  14.             background-size: cover;
  15.             background-position: center;
  16.             display: flex;
  17.             justify-content: center;
  18.             align-items: center;
  19.         }
  20.        .mon-form > ul{
  21.             list-style: initial;
  22.             padding-left: 15px;
  23.         }
  24.         .mon-form > ul>li{
  25.             color: red;
  26.             font-weight: 700;
  27.         }
  29.     </style>
  30. {% endblock %}
  32. {% block body %}
  33.     <main>
  34.         <div class="container">
  35.             <div class="row d-flex justify-content-center">
  36.                 <div class="col-md-11 col-xxl-9 mt-5 mb-5">
  37.                     <div class="card p-4" style="box-shadow: 5px 5px 5px 3px #8a8a8a;">
  38.                         <h3 class="" style="color: #bd2879 !important; font-weight: 700">Inscription</h3>
  39.                         <div class="row">
  40.                             <div class="col-md-6 mon-form">
  41.                                 {{ form_start(form)}}
  42.                                     <div class="mb-3">
  43.                                         {{ form_label(form.lastname) }}
  44.                                         {{ form_widget(form.lastname) }}
  45.                                         {% if form_errors(form.lastname) %}
  46.                                             <span class="text-danger" style="color: red !important; font-weight: 700">{{ form_errors(form.lastname) }}</span>
  47.                                         {% endif %}
  48.                                     </div>
  49.                                     <div class="mb-3">
  50.                                         {{ form_label(form.firstname) }}
  51.                                         {{ form_widget(form.firstname) }}
  52.                                         {% if form_errors(form.firstname) %}
  53.                                             <span class="text-danger" style="color: red !important; font-weight: 700">{{ form_errors(form.firstname) }}</span>
  54.                                         {% endif %}
  55.                                     </div>
  56.                                     <div class="mb-3">
  57.                                         {{ form_label(form.email) }}
  58.                                         {{ form_widget(form.email) }}
  59.                                         {% if form_errors(form.email) %}
  60.                                             <span class="text-danger" style="color: red !important; font-weight: 700">{{ form_errors(form.email) }}</span>
  61.                                         {% endif %}
  62.                                     </div>
  63.                                     <div class="mb-3 motDePasse">
  64.                                         {{ form_label(form.password.first) }}
  65.                                         {{ form_widget(form.password.first, {'id':'id_password'}) }}
  66.                                         <i class="bi bi-eye-slash" id="togglePassword" onclick="cacherMotDePasse()" style="margin-right: 15px; margin-top: -50px; cursor: pointer; float: right; z-index: 10;"></i>
  67.                                         {% if form_errors(form.password.first) %}
  68.                                             <span class="" style="color: red !important; font-weight: 700">{{ form_errors(form.password.first) }}</span>
  69.                                         {% endif %}
  70.                                     </div>
  71.                                     <div class="mb-3 motDePasse">
  72.                                         {{ form_label(form.password.second) }}
  73.                                         {{ form_widget(form.password.second, {'id':'id_password_password'}) }}
  74.                                         <i class="bi bi-eye-slash" id="togglePasswordConfirm" onclick="cacherMotDePasseConfirm()" style="margin-right: 15px; margin-top: -34px; cursor: pointer; float: right; z-index: 10;"></i>
  75.                                         {% if form_errors(form.password.second) %}
  76.                                             <div class="alert alert-danger">{{ form_errors(form.password.second) }}</div>
  77.                                         {% endif %}
  78.                                     </div>
  79.                                     <button type="submit" class="btn btn-success w-100 mb-3">S'inscrire</button>
  80.                                 {{ form_end(form) }}
  81.                                 <p>Déja inscrit ? <a href="#">Creer un compte</a>.</p>
  82.                             </div>
  83.                             <div class="col-md-6">
  84.                                 <div class="image-container"></div>
  85.                             </div>
  86.                         </div>
  87.                     </div>
  88.                 </div>
  89.             </div>
  90.         </div>
  91.     </main>
  92.     <!--/main-->
  93.     <script>
  94.         // Récupérer les éléments HTML
  95.         const passwordInput = document.getElementById('id_password');
  96.         const togglePassword = document.getElementById('togglePassword');
  98.         const passwordInputConfirm = document.getElementById('id_password_password');
  99.         const togglePasswordConfirm = document.getElementById('togglePasswordConfirm');
  100.         // Ajouter un gestionnaire d'événement au clic sur l'icône d'œil
  101.         function cacherMotDePasse() {
  102.             // Vérifier le type de l'input
  103.             if (passwordInput.type === 'password') {
  104.                 // Si le type est "password", le changer en "text" pour afficher le mot de passe
  105.                 passwordInput.type = 'text';
  106.                 togglePassword.classList.remove('bi-eye-slash');
  107.                 togglePassword.classList.add('bi-eye');
  108.             } else {
  109.                 // Sinon, le changer en "password" pour masquer le mot de passe
  110.                 passwordInput.type = 'password';
  111.                 togglePassword.classList.remove('bi-eye');
  112.                 togglePassword.classList.add('bi-eye-slash');
  113.             }
  114.         }
  116.         function cacherMotDePasseConfirm() {
  117.             // Vérifier le type de l'input
  118.             if (passwordInputConfirm.type === 'password') {
  119.                 // Si le type est "password", le changer en "text" pour afficher le mot de passe
  120.                 passwordInputConfirm.type = 'text';
  121.                 togglePasswordConfirm.classList.remove('bi-eye-slash');
  122.                 togglePasswordConfirm.classList.add('bi-eye');
  123.             } else {
  124.                 // Sinon, le changer en "password" pour masquer le mot de passe
  125.                 passwordInputConfirm.type = 'password';
  126.                 togglePasswordConfirm.classList.remove('bi-eye');
  127.                 togglePasswordConfirm.classList.add('bi-eye-slash');
  128.             }
  129.         }
  131.     </script>
  132. {% endblock %}