templates/acoa/security/login.html.twig line 74

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Inscription{% endblock %}
  3. {% block content %}
  4. <div id="maininscription">
  5.    <!-- CONTAINER -->
  6.    <div class="w-full pt-16 pb-6">
  7.       <div id="boxincription" class="bg-white maxWidthM w-11/12 mt-10 mb-16 ml-auto mr-auto text-white">
  8.          <!-- box left -->
  9.          <div id="boxleft" class="h-fit float-left pt-16 pl-4 pr-4 lg:pl-10 lg:pr-10 bg-header-lgblue Poppins">
  10.             <!--<div id="toptitle" class="text-xl font-bold">ACOA</div>-->
  11.             <!--<div class="mb-12 text-xs">Votre partenaire Conseil et Formation en Guadeloupe, Martinique et Guyane</div>-->
  12.             <div class="text-xl font-bold">Authentification</div>
  13.             <div class="text-xs mb-12">Vous avez déjà un compte, authentifiez vous</div>
  14.             <div id="loginForm" class="boxLogin boxIpuntM mb-10">
  15.                <form method="post">
  16.                   <div class="heightForm">
  17.                      {% for message in app.flashes('success') %}
  18.                      <div class="bg-green-100 border border-green-400 text-green-700 text-sm px-4 py-3 rounded relative" role="alert">
  19.                         <span class="block sm:inline">{{ message }}</span>
  20.                      </div>
  21.                      {% endfor %}
  22.                      <div class="blockHeight">
  23.                         <label for="inputEmail">Email utilisateur*</label> <br />
  24.                         {% if _email is not null  and exist==1 %}
  25.                         <input class="border pl-2 rounded-lg w-full h-6" placeholder="Email utilisateur"
  26.                            type="email" value="{{ _email }}" name="email" id="inputEmail"
  27.                            class="form-control" autocomplete="email" required autofocus readonly>
  28.                         {% else %}
  29.                         <input class="border pl-2 rounded-lg w-full h-6" placeholder="Email utilisateur"
  30.                            type="email" value="{{ last_username }}" name="email" id="inputEmail"
  31.                            class="form-control" autocomplete="email" required autofocus>
  32.                         {% endif %}
  33.                      </div>
  34.                      <div class="mt-4 text-xs">
  35.                         <label for="inputPassword">Mot de passe*</label>
  36.                         <div class="input-eye relative">
  37.                            <input class="border pl-2 rounded-lg w-full h-6" placeholder="Mot de passe"
  38.                               type="password" name="password" id="inputPassword" class="form-control"
  39.                               autocomplete="current-password" required>
  40.                            <i class="fa-solid fa-eye"></i>
  41.                         </div>
  42.                         <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  43.                      </div>
  44.                      {% if error %}
  45.                      <div class="bg-red-100 border border-red-400 text-red-700 text-sm px-4 py-3 rounded relative" role="alert">
  46.                         <span class="block sm:inline">{{ error.messageKey|trans(error.messageData, 'security') }}</span>
  47.                      </div>
  48.                      {% endif %}
  49.                      {% for message in app.flashes('alert') %}
  50.                      <div class="bg-red-100 border border-red-400 text-red-700 text-sm px-4 py-3 rounded relative" role="alert">
  51.                         <span class="block sm:inline">{{ message }}</span>
  52.                      </div>
  53.                      {% endfor %}
  54.                   </div>
  55.                   <div class="button mt-16">
  56.                      <button class="buttonM rounded-full text-center font-bold text-white pt-2 pb-2 w-full text-sm"
  57.                         type="submit">Authentifier</button>
  58.                   </div>
  59.                   <div class="mt-4">
  60.                      <a class="text-xs aHover" href="{{ path('forgot_password') }}"><span>Mot de passe oublié ?</span></a>
  61.                   </div>
  62.                   <label>
  63.                   <input type="checkbox" class="mt-4 checkboxM" name="_remember_me"/>
  64.                   Se souvenir de moi
  65.                   </label>
  66.                </form>
  67.             </div>
  68.          </div>
  69.          <!-- box Right -->
  70.          <div id="boxright" class="h-full float-right pt-16 pl-4 pr-4 lg:pl-10 lg:pr-10 relative text-black text-sm Poppins">
  71.             <div id="toptitle" class="text-xl font-bold">Inscription</div>
  72.             <div class="text-xs mb-12">Inscrivez-vous pour commencer</div>
  73.             <div class="w-full boxIpuntM">
  74.                {{ render(controller(
  75.                'App\\Controller\\RegistrationController::register'
  76.                )) }}
  77.             </div>
  78.          </div>
  79.          <div class="clear-both"></div>
  80.       </div>
  81.    </div>
  82. </div>
  83. {% endblock %}
  84. {% block javascripts %}
  85. {{ parent()}}
  86. <script type="application/javascript">
  87.    document.querySelector("#alert-pwd-length").hidden = true;
  88.    document.querySelector("#alert-pwd-not-same").hidden = true;
  89.    
  90.    var isSubmitable = true;
  91.    
  92.    /**
  93.     * Vérifie la longueur du 1er mot de passe et affiche un message d'erreur si < 6 caractères.
  94.     */
  95.    const checkLength = (e) => {
  96.        
  97.        if(e.currentTarget.value.length < 6) {
  98.            document.querySelector("#alert-pwd-length").hidden = false;
  99.            isSubmitable = false;
  100.        }
  101.        else {
  102.            document.querySelector("#alert-pwd-length").hidden = true;
  103.            isSubmitable = true;
  104.        }
  105.    };
  106.    
  107.    /**
  108.     * Vérifie si le formulaire est correct :
  109.     * Compare les 2 mots de passe et bloque le submit si différent.
  110.     * Bloque la validation si erreur.
  111.     */
  112.    const checkFormRegister = (e) => {
  113.        
  114.        document.querySelector("#alert-pwd-not-same").hidden = true;
  115.    
  116.        let pass1 = document.querySelector("#registration_form_plainPassword").value;
  117.        let pass2 = document.querySelector("#registration_form_plainPasswordConfirm").value;
  118.    
  119.        if(pass1 != pass2 ) {
  120.            e.preventDefault();
  121.            document.querySelector("#alert-pwd-not-same").hidden = false;
  122.        }
  123.    
  124.        if(!isSubmitable) {
  125.            e.preventDefault();
  126.        }
  127.    };
  128.    
  129.    document
  130.        .querySelector("#registration_form_plainPassword")
  131.        .addEventListener("keyup", checkLength);
  132.    
  133.    document
  134.        .querySelector("#form-register")
  135.        .addEventListener("submit", checkFormRegister);
  136.    
  137. </script>
  138. {% endblock %}