templates/security/login.html.twig line 1

Open in your IDE?
  1. {% extends 'layout_web.html.twig' %}
  4. {% block title %}{{ 'login.title'|trans }} | {{parent()}}{% endblock %}
  6. {% block body %}
  8.     <div class="page">
  9.       <div class="page-single">
  10.         <div class="container">              
  12.           <div class="row">
  14.             <div class="col col-md-5 mx-auto">
  16.                 <div class="text-center mb-6">
  17.                   <img src="{{ asset('/images/logo-pbn-200x100.png')}}" alt="{{appname}}">                    
  18.                 </div>
  20.                 {% if app.user %}
  21.                 <div class="text-center">
  22.                     <h4>{{ 'login.alreadylogin'|trans }} {{ app.user.username }}</h4> 
  23.                     <p><a href="{{ path('app_logout') }}">{{ 'login.logout'|trans }}</a></p>
  24.                 </div>
  25.                 {% else %}
  27.                 
  28.                 {% if error %}
  29.                     <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  30.                 {% endif %}
  32.                 {% for flash in app.flashes('success') %}
  33.                     <div class="alert alert-success" role="alert">{{ flash }}</div>
  34.                 {% endfor %}
  36.                 {% for flash in app.flashes('error') %}
  37.                     <div class="alert alert-danger" role="alert">{{ flash }}</div>
  38.                 {% endfor %}
  40.               <form class="card" action="" method="post">
  41.             
  42.                 <div class="card-body p-6">
  43.                  <div class="float-right">
  44.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': ''})) }}"><span class="flag flag-fr mr-3"></span></a>
  45.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'en'})) }}"><span class="flag flag-gb"></span></a>
  46.                 </div>
  48.                   <div class="card-title">{{ 'login.title'|trans }}</div>                 
  50.                   <div class="form-group">
  51.                     <label for="inputEmail" class="form-label">{{ 'login.email'|trans }}</label>
  52.                     <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control" autocomplete="email" required autofocus>
  53.                   </div>
  55.                   <div class="form-group">
  57.                   <label for="inputPassword" class="form-label">
  58.                   {{ 'login.password'|trans }}
  59.                   <a href="{{ path('app_forgot_password_request') }}" class="float-right small">{{ 'login.resetpassword'|trans }}</a>
  60.                   </label>
  61.                   <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>
  62.                   <i class="fe fe-eye-off" id="togglePassword"></i>
  63.                   </div>
  65.                   <div class="form-group">
  66.                     <label class="custom-control custom-checkbox">
  67.                     <input type="checkbox" name="_remember_me" class="custom-control-input"> <span class="custom-control-label">{{ 'login.remember'|trans }}</span>
  68.                     </label>
  69.                   </div>
  71.                   <div class="form-footer">
  72.                     <button type="submit" class="btn btn-primary btn-block"> {{ 'login.signin'|trans }}</button>
  73.                   </div>
  74.                 </div>
  76.                 <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" >
  78.               </form>
  80.               <div class="text-center text-muted">
  81.                 <a href="{{ path('app_register') }}">{{ 'login.newaccount'|trans }}</a>
  82.               </div>
  84.             </div>
  85.           </div>
  86.         </div>
  87.       </div>
  88.     </div>
  90. {% endif %}
  92. <style>
  93.     #togglePassword {
  94.     position: absolute;
  95.     right: 1.5em;
  96.     cursor: pointer;
  97.     margin-right: 25px;
  98.     margin-top: -27px;
  99. }
  100. </style>
  102. <script>
  103.         const togglePassword = document.querySelector("#togglePassword");
  104.         const password = document.querySelector("#inputPassword");
  106.         togglePassword.addEventListener("click", function () {
  107.             // toggle the type attribute
  108.             const type = password.getAttribute("type") === "password" ? "text" : "password";
  109.             password.setAttribute("type", type);            
  110.             // toggle the icon
  111.             if (type == "text") {
  112.             this.classList.remove("fe-eye-off");
  113.             this.classList.add("fe-eye");
  114.             }
  115.             if (type == "password") {
  116.             this.classList.remove("fe-eye");
  117.             this.classList.add("fe-eye-off");
  118.             }
  119.         });
  120. </script>
  122. {% endblock %}