templates/security/forgot_password.html.twig line 1

  1. {% extends 'base.html.twig' %}
  4. {% block stylesheets %}
  5.     {{ parent() }}
  6.     <style>
  8.         #captchaImg {
  9.             height: auto !important;
  10.             width: 115px !important;
  11.            /* margin-top: -10px;*/
  12.         }
  13.     </style>
  14. {% endblock %}
  17. {% block page_title %}{{ 'forgot password' | trans({}, 'clients') }}{% endblock %}
  19. {% block body %}
  20.     <section class="section-padding error-page pattern-bg0 ">
  21.         <!-- Main Container -->
  22.         <div class="container">
  23.             <!-- Row -->
  24.             <div class="row">
  25.                 <!-- Middle Content Area -->
  26.                 <div class="col-md-5 col-md-push-4 col-sm-6 col-sm-push-3 col-xs-12">
  27.                     {% if errorCode is not empty %}
  28.                         <div class="alert alert-warning" role="alert">
  29.                             {{ errorCode }}
  30.                         </div>
  31.                     {% endif %}
  32.                     <!--  Form -->
  33.                     <div class="form-grid">
  35.                         <form id="forgotPassForm" method="post" action="{{ path('forgot_password') }}">
  36.                             <div class="form-group">
  37.                                 <label for="mobile">{{ 'Mobile Number' | trans }}</label> <span class="required">*</span>
  38.                                 <input type="tel" id="mobileNumber" name="mobileNumber" class="form-control" value="{{ mobileNumber }}" required placeholder="5xxxxxxxx" maxlength="10" minlength="9" pattern="^(0)?5[0-9]{8}$" validate-msg="{{ 'you should add your mobile number' | trans({}, 'validators') }}">
  39.                             </div>
  40.                             <div class="row form-group">
  41.                                 <div class="col-md-6">
  42.                                     <label>{{ 'enter the captcha code' | trans({}, 'clients') }} </label> <span  class="required">*</span>
  43.                                     <input type="text" class="form-control" name="userCaptcha" id="userCaptcha" required maxlength="4" minlength="4" validate-msg="{{ 'you should enter the captcha code' | trans({}, 'validators') }}">
  44.                                 </div>
  46.                                 <div class="col-md-4  col-xs-6">
  47.                                     <label>&nbsp;     </label>
  48.                                     <img src="{{ builder.inline }}" id="captchaImg" >
  49.                                 </div>
  50.                                 <div class="form-group col-md-2  col-xs-6">
  51.                                     <label>&nbsp;</label>
  52.                                     <p class="btn btn-light" id="refresh" style="padding:8px !important; margin-top:8px;">
  53.                                         <i class="fa fa-undo" style="font-size:14px" ></i>
  54.                                     </p>
  55.                                 </div>
  56.                             </div>
  57.                             <button type="submit" class="btn btn-theme btn-lg btn-block">{{ 'send code' | trans({}, 'clients') }}</button>
  58.                         </form>
  60.                     </div>
  61.                     <!-- Form -->
  62.                 </div>
  63.                 <!-- Middle Content Area  End -->
  64.             </div>
  65.             <!-- Row End -->
  66.         </div>
  68.     </section>
  69.     <div class="footer-area">
  70.         <div class="footer-copyright">
  71.             <div class="">
  72.                 <a href="https://wa.me/966559661234" target="_blank" style="color: white;">
  73.                     <div dir="ltr" style="direction: ltr;">
  74.                         {{ 'support whatsapp contact' | trans}}
  75.                         <br /><img src="{{ asset('w1.png')}}" width="40" />
  76.                         +966-55-966-1234
  77.                     </div>
  78.                 </a>
  79.             </div>
  80.         </div>
  81.     </div>
  82. {% endblock %}
  84. {% block javascripts %}
  86.     {{ parent() }}
  87.     <script type="text/javascript">
  88.         $(function(){
  89.             $("form#forgotPassForm :input").each(function(){
  90.                 var input = $(this);
  91.                 var msg   = input.attr('validate-msg');
  92.                 input.on('change invalid input', function(){
  93.                     input[0].setCustomValidity('');
  94.                     if (! input[0].validity.valid) {
  95.                         input[0].setCustomValidity(msg);
  96.                     }
  97.                 });
  98.             });
  99.             $('#refresh').click(function() {
  100.                 $.ajax({
  101.                     url:'{{ (path('get_captcha_forgot_ajax')) }}',
  102.                     type: "POST",
  103.                     dataType: "json",
  104.                     async: true,
  105.                     success: function (data)
  106.                     {
  107.                         $("#captchaImg").attr('src',data.builder);
  108.                     }
  109.                 });
  110.             });
  111.         });
  112.     </script>
  114. {% endblock %}