templates/reset_password/request.html.twig line 1

Open in your IDE?
  1. {% extends 'login_base.html.twig' %}
  3. {% block title %}Mot de passe oublié{% endblock %}
  5. {% block canonical %}{{ path('app_forgot_password_request') }}{% endblock %}
  7. {% block stylesheets %}
  8.     {{ parent() }}
  9. {% endblock %}
  11. {% block body %}
  12.     <div class="login-content d-flex flex-column pt-lg-0 pt-12">
  13.         <!--begin::Logo-->
  14.         <a href="" class="login-logo pb-xl-20 pb-15">
  15.             <img src="{{ asset('/public/assets/bo/media/logo.png') }}" class="max-h-70px" alt="ZOE Business logo" />
  16.         </a>
  17.         <!--end::Logo-->
  18.         <!--begin::Signin-->
  19.         <div class="login-form">
  21.             {% for flash_error in app.flashes('reset_password_error') %}
  22.                 <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
  23.             {% endfor %}
  25.             <!--begin::Form-->
  26.             {{ form_start(requestForm, {'attr': {'class': 'form', 'id': 'kt_password_reset_form', 'novalidate': 'novalidate', 'data-kt-redirect-url': ''}}) }}
  27.                 <!--begin::Title-->
  28.                 <div class="pb-5 pb-lg-15">
  29.                     <h3 class="font-weight-bolder text-dark font-size-h2 font-size-h1-lg">Réinitialiser votre mot de passe</h3>
  30.                 </div>
  31.                 <!--begin::Title-->
  32.                 <!--begin::Form group-->
  33.                 <div class="form-group">
  34.                     {{ form_label(requestForm.email) }}
  35.                     {{ form_widget(requestForm.email) }}
  36.                     <div id="mail_error" class="text-danger mt-1 d-none">Adresse email invalide</div>
  37.                 </div>
  38.                 <!--begin::Action-->
  39.                 <div class="d-flex flex-wrap justify-content-center pb-lg-0">
  40.                     <button type="button" id="kt_password_reset_submit" class="btn btn-primary mr-4 font-weight-bolder font-size-h6">
  41.                         <span class="indicator-label">Soumettre</span>
  42.                     </button>
  43.                     <a href="{{ path('app_login') }}" class="btn btn-light font-weight-bolder font-size-h6">Retour</a>
  44.                 </div>
  45.                 <!--end::Action-->
  46.             {{ form_end(requestForm) }}
  47.             <!--end::Form-->
  48.         </div>
  49.         <!--end::Signin-->
  50.     </div>
  51. {% endblock %}
  53. {% block javascripts %}
  54.     {{ parent() }}
  56.     <script>
  57.         $(document).ready(function (){
  58.             function removeClass(element, _class){
  59.                 _class.map((row) => {
  60.                     element.removeClass(row)
  61.                 })
  62.             }
  64.             function addClass(element, _class){
  65.                 _class.map((row) => {
  66.                     element.addClass(row)
  67.                 })
  68.             }
  70.             let submitPasswordButton = $("#kt_password_reset_submit")
  71.             submitPasswordButton.prop("disabled",true)
  73.             let email = $("#reset_password_request_form_email")
  74.             let mail_error = $("#mail_error")
  75.             const mail_regex = new RegExp('^[a-zA-Z.-]+@[a-zA-Z]{1,6}(?:\.[a-zA-Z]{1,6}){0,2}\.[a-zA-Z]{2,3}$')
  77.             //RULE STATE
  78.             let validEmail = false
  79.             const isTrue = (currentValue) => currentValue === true;
  81.             function verifyAll(array) {
  82.                 console.log("IS TRUE==>", array)
  83.                 if(array.every(isTrue)){
  84.                     submitPasswordButton.prop("disabled",false)
  85.                 }else{
  86.                     submitPasswordButton.prop("disabled",true)
  87.                 }
  88.             }
  90.             email.tooltip({
  91.                 enable: true,
  92.                 template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
  93.             })
  94.             email.keyup(function (){
  95.                 let email = $(this).val()
  97.                 if (email.match(mail_regex)){
  98.                     removeClass(mail_error,["d-block"])
  99.                     addClass(mail_error,["d-none"])
  100.                     validEmail = true
  101.                 }else{
  102.                     removeClass(mail_error,["d-none"])
  103.                     addClass(mail_error,["d-block"])
  104.                     validEmail = false
  105.                 }
  107.                 verifyAll([validEmail])
  108.             })
  110.             document.addEventListener('keypress', function (e) {
  111.                 const arrays = [validEmail]
  112.                 if ((e.keyCode === 13 || e.which === 13)){
  113.                     if(!arrays.every(isTrue)){
  114.                         e.preventDefault()
  115.                     }else{
  116.                         $("#kt_password_reset_form").submit()
  117.                     }
  118.                 }
  119.             });
  120.         })
  121.     </script>
  122. {% endblock %}