templates/Security/login.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block body %}
  3. <style>
  4. .off-form {
  5.     display: grid;
  6.     background: white;
  7.     justify-content: center;
  8. }
  10. .off-form-i {
  11.     margin: 0;
  12.     padding: 10px;
  13.     display: grid;
  14.     gap: 20px;
  15.     grid-template-columns: repeat(5, 1fr);
  16.     max-width: 1400px;
  17. }
  19. .off-form-i a {
  20.     background-color: #0454A4;
  21.     display: grid;
  22.     color: white;
  23.     font-size: 36px;
  24.     text-align: center;
  25.     padding: 4px;
  26. }
  28. .off-form-i a span {
  29.     color: white;
  30.     font-size: 36px;
  31.     text-align: center;
  32.     align-self: center;
  33. }
  34. #password{
  35.     position: relative;
  36. }
  37. .passwordIcon{
  38.     position: absolute;
  39.     right: 11px;
  40.     top: 13px;
  41. }
  42. .passwordIcon svg{
  44. }
  45. .texte_login {
  46. font-size: 22px;
  47. color: #f4f22b;
  49.     margin-top: 15px !important;
  50.      padding: 10px 65px !important;
  51. }
  53. </style>
  54. <div class="middle--off" style="background-position: 50% 270px;">
  55.     <div class="off-entete" style="background:rgba(2,83,163,0.9) url({{ asset('ui/images/banner.png') }}) no-repeat 50% 50%;">
  56.         <div class="off-entete-i">
  57.             <div class="off-title">
  58.                 Bonjour, merci de vous connecter
  59.                 <div class="off-avatar"></div><!-- .off-avatar -->
  60.             </div><!-- .off-title -->
  61.  
  62.         </div><!-- .off-entete-i -->
  63.             <div class="off-intro off-intro-highlighted texte_login">
  64.                 {{ texte_login }}
  65.             </div>
  66.     </div><!-- .off-entete -->
  67.     <div class="off-form">
  68.         <form action="{{ path('login_check', {}) }}" name="form-connexion" id="form-connexion" method="post">
  69.             <div class="off-form-i">
  70.                 <a href="{{ url_aide }}" download="Notice_Utilisateur.pdf">
  71.                     <span>Notice utilisateur</span>
  72.                 </a>
  73.                 <a href="{{ path('ctsweb_front_retrieve_login') }}">
  74.                     <span>Identifiant perdu</span>
  75.                 </a>
  76.                 <div>
  77.                     <div class="form-error">
  78.                         {{ error }}
  79.                     </div><!-- .error -->
  80.                     <dl>
  81.                         <dt><label for="account">Compte de connexion</label></dt>
  82.                         <dd><input style="height:50px;" type="text" id="account" onchange="this.value = toUpperWithoutAccents(this.value);" name="_username" placeholder="Compte de connexion"></dd>
  83.                     </dl>
  84.                     <dl>
  85.                         <dt><label for="password">Mot de passe</label></dt>
  86.                         <dd><input style="height:50px;" type="password" id="password" name="_password" placeholder="Mot de passe"><i onclick="togglePassword()" class="passwordIcon "><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
  87.   <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
  88.   <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
  89. </svg></i></dd>
  90.                     </dl>
  91.                      <button type="submit" class="off-btn" name="connexionsubmit" id="connexionsubmit">Connexion</button>
  92.                 </div>
  93.                 <a href="{{ path('ctsweb_front_reinitialize_pwd') }}">
  94.                    <span>Mot de passe perdu</span>
  95.                 </a>
  96.                 <a href="mailto:{{ mail_contact }}">
  97.                    <span>Nous contacter</span>
  98.                 </a>
  99.             </div><!-- .off-form-i -->
  100.         </form>
  101.     </div><!-- .off-form -->
  102. </div><!-- .middle--off -->
  103. <script>sessionStorage.clear();localStorage.clear();
  104. function togglePassword() {
  105.   var pass = document.getElementById("password");
  106.   if (pass.type === "password") {
  107.     pass.type = "text";
  108.   } else {
  109.     pass.type = "password";
  110.   }
  111. };
  113. function toUpperWithoutAccents(s) {
  114.     return s.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toUpperCase();
  115. };
  117. </script>
  118. {% endblock %}