templates/frontend/security/login.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block title %}
  4.     Login
  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.5a613b4c.svg') }});
  14.             background-size: cover;
  15.             background-position: center;
  16.             display: flex;
  17.             justify-content: center;
  18.             align-items: center;
  19.         }
  21.         .mon-form > ul {
  22.             list-style: initial;
  23.             padding-left: 15px;
  24.         }
  26.         .mon-form > ul > li {
  27.             color: red;
  28.             font-weight: 700;
  29.         }
  31.     </style>
  32. {% endblock %}
  34. {% block body %}
  35.     <main>
  36.         <div class="container">
  37.             <div class="row d-flex justify-content-center">
  38.                 <div class="col-md-11 col-xxl-9 mt-5 mb-5">
  39.                     <div class="card p-4" style="box-shadow: 5px 5px 5px 3px #8a8a8a;">
  40.                         <h3 class="" style="color: #bd2879 !important; font-weight: 700">Connexion</h3>
  41.                         <div class="row mt-3">
  42.                             <div class="col-md-6 mon-form">
  43.                                 <form action="{{ path('app_login') }}" method="POST">
  44.                                     <div class="row mb-3">
  45. {#                                        <div class="col-6">#}
  46. {#                                            <a href="{{ path('connect_facebook_start') }}" class="btn w-100" style="background-color: #0a53be; color: white;"><i class="fab fa-facebook"></i> Facebook</a>#}
  47. {#                                        </div>#}
  48.                                         <div class="col-6 offset-3">
  49.                                             <a href="{{ path('connect_google_start') }}" class="btn btn-primary w-100" style="background-color: #ff8000 !important; border: 1px solid #ff8000 !important;"><i class="fab fa-google"></i> Google</a>
  50.                                         </div>
  51.                                         <h5 class="text-center mt-3">-OU-</h5>
  52.                                     </div>
  53.                                     <div class="mb-3">
  54.                                         <label for=""> Email </label>
  55.                                         <input type="email" name="email" class="form-control" placeholder="E-mail">
  56.                                     </div>
  57.                                     <div class="mb-3">
  58.                                         <label for="">Mot de passe </label>
  59.                                         <input type="password" name="password" class="form-control" required="" id="id_password">
  60.                                         <i class="bi bi-eye-slash" id="togglePassword" onclick="cacherMotDePasse()" style="margin-right: 15px; margin-top: -34px; cursor: pointer; float: right; z-index: 10;"></i>
  61.                                     </div>
  62.                                     <button type="submit" class="btn btn-success w-100 mb-3">Se connecter</button>
  63.                                 </form>
  64.                                 <p>Vous n'avez pas encore de compte? <a href="{{ path('app_register') }}">S'inscrire</a>.</p>
  65.                                 <a href="{{ path('app_reset_password') }}">Mot de passe oublié</a>
  66.                             </div>
  67.                             <div class="col-md-6">
  68.                                 <div class="image-container"></div>
  69.                             </div>
  70.                         </div>
  71.                     </div>
  72.                 </div>
  73.             </div>
  74.         </div>
  75.     </main>
  76.     <!--/main-->
  77.     <script>
  78.         // Récupérer les éléments HTML
  79.         const passwordInput = document.getElementById('id_password');
  80.         const togglePassword = document.getElementById('togglePassword');
  81.         console.log(togglePassword);
  83.         // Ajouter un gestionnaire d'événement au clic sur l'icône d'œil
  84.         function cacherMotDePasse() {
  85.             console.log(passwordInput.type);
  86.             // Vérifier le type de l'input
  87.             if (passwordInput.type === 'password') {
  88.                 // Si le type est "password", le changer en "text" pour afficher le mot de passe
  89.                 passwordInput.type = 'text';
  90.                 togglePassword.classList.remove('bi-eye-slash');
  91.                 togglePassword.classList.add('bi-eye');
  92.             } else {
  93.                 // Sinon, le changer en "password" pour masquer le mot de passe
  94.                 passwordInput.type = 'password';
  95.                 togglePassword.classList.remove('bi-eye');
  96.                 togglePassword.classList.add('bi-eye-slash');
  97.             }
  98.         }
  100.     </script>
  101. {% endblock %}