vendor/uvdesk/core-framework/Resources/views/forgotPassword.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %}Forgot Password{% endblock %}
  5. {% block templateCSS %}
  6.     <style>
  7.     
  9.         /* Ajustes para vista móvil */
  10.         @media screen and (max-width: 1200px) {
  11.              /* Ajustes generales */
  12.         #loginForm h1 {
  13.             font-size: 5vw; /* Usar vw para adaptarse al ancho de la pantalla */
  14.             color: #6F6F6F;
  15.             font-weight: 600;
  16.             margin: 0 0 10px 0;
  17.         }
  19.         .uv-element-block p {
  20.             font-size: 3vw; /* Usar vw para el párrafo */
  21.             color: #6F6F6F; 
  22.             margin: 10px 0; 
  23.         }
  25.         .uv-adjacent-element-block label {
  26.             font-size: 3vw; /* Usar vw para la etiqueta */
  27.             color: #6F6F6F; 
  28.         }
  30.         .uv-field {
  31.             height: 60px; /* Altura fija para el input */
  32.             padding: 15px; 
  33.             font-size: 3.5vw; /* Usar vw para el input */
  34.         }
  36.         .uv-btn {
  37.             font-size: 4vw; /* Usar vw para el botón */
  38.             padding: 15px; 
  39.             height: 60px; 
  40.             background-color: #fa832d; 
  41.             border: none;
  42.             color: white;
  43.             cursor: pointer;
  44.             margin-top: 10px;
  45.         }
  47.         /* Ajustes para vista móvil */
  48.         @media screen and (max-width: 1200px) {
  49.             #loginForm h1 {
  50.                 font-size: 6vw !important; /* Aumentar tamaño del título */
  51.                 margin: 0 0 15px 0;
  52.             }
  54.             .uv-element-block p {
  55.                 font-size: 4vw !important; /* Aumentar tamaño del párrafo */
  56.             }
  58.             .uv-adjacent-element-block label {
  59.                 font-size: 3.5vw !important; /* Aumentar tamaño de la etiqueta */
  60.             }
  62.             .uv-field {
  63.                 height: 60px !important; 
  64.                 padding: 15px !important; 
  65.                 font-size: 4vw !important; /* Aumentar tamaño de fuente del input */
  66.             }
  68.             .uv-btn {
  69.                 font-size: 3vw !important; /* Aumentar tamaño del botón */
  70.                 padding: 15px !important; 
  71.                 height: 100px !important; 
  72.             }
  74.             .forgot-password-cta {
  75.                 position: absolute;
  76.                 font-size: 3.5vw !important; /* Aumentar tamaño del enlace */
  77.                 right: 10px; 
  78.                 top: 10px; 
  79.             }
  81.             .uv-max-field input {
  82.                 height: 100px !important; 
  83.                 font-size: 4vw !important; /* Aumentar tamaño de fuente del input */
  84.                 color: #333333;
  85.                 width: 100%; 
  86.                 border-radius: 3px;
  87.                 border: solid 1px #D3D3D3;
  88.                 padding: 15px; 
  89.                 transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  90.             }
  91.         }
  92.         }
  93.     </style>
  94. {% endblock %}
  96. {% block pageWrapper %}
  97.     <div class="uv-large-box-plank">
  98.         <div class="uv-large-box-rt">
  99.             <div class="uv-center-box uv-text-center">
  100.                 <form action="" method="post" id="loginForm">
  101.                     <div class="uv-adjacent-center">
  102.                         <h1>{{ 'Forgot Password'|trans }}</h1>
  103.                         <div class="uv-element-block">
  104.                             <p>{{ 'Enter your email address and we will send you an email with instructions to update your login credentials.'|trans }}</p>
  105.                         </div>
  106.                         
  107.                         <div class="uv-adjacent-form">
  108.                             <div class="uv-adjacent-element-block">
  109.                                 <label>Email</label>
  110.                                 <div class="uv-max-field">
  111.                                     <input class="uv-field" type="email" name="forgot_password_form[email]">
  112.                                 </div>
  113.                             </div>
  115.                             <button class="uv-btn">{{ 'Send Mail'|trans }}</button>
  116.                         </div>
  117.                     </div>
  118.                 </div>
  119.             </form>
  120.         </div>
  122.         <div class="uv-large-box-lt">
  123.             <div class="uv-center-box uv-text-center">
  124.                 <a href="https://softguard.com">
  125.                     <img alt="UVdesk" title="UVdesk" src="{{ asset('bundles/uvdeskcoreframework/images/uvdesk-logo-symbol.png') }}">
  126.                 </a>
  127.             </div>
  128.         </div>
  129.     </div>
  130. {% endblock %}
  132. {% block footer %}
  133.     {{ parent() }}
  134.     <script type="text/javascript">
  135.         $(function () {
  136.              _.extend(Backbone.Validation.callbacks, {
  137.                 valid : function (view, attr, selector) {
  138.                     var $el = view.$('[name="' + attr + '"]');
  139.                     $el.removeClass('uv-field-error');
  140.                     $el.parents('.uv-adjacent-element-block').find('.uv-field-message').remove();
  141.                 },
  142.                 invalid : function (view, attr, error, selector) {
  143.                     var $el = view.$('[name="' + attr + '"]');
  144.                     $el.addClass('uv-field-error');
  145.                     $el.parents('.uv-adjacent-element-block').find('.uv-field-message').remove();
  146.                     $el.parents('.uv-adjacent-element-block').append("<span class='uv-field-message'>" + error + "</span>");
  147.                 }
  148.             });
  149.             
  150.             var LoginModel = Backbone.Model.extend({
  151.                 validation: {
  152.                     'forgot_password_form[email]': [{
  153.                         required: true,
  154.                         msg: '{{ "This field is mandatory"|trans }}'
  155.                     },{
  156.                         pattern: 'email',
  157.                         msg: "This is not a valid email address"
  158.                     }]
  159.                 }
  160.             });
  162.             var LoginForm = Backbone.View.extend({
  163.                 el: 'form',
  164.                 events: {
  165.                     'blur input': 'formChanged',
  166.                     'click .uv-btn': 'submit'
  167.                 },
  168.                 initialize: function () {
  169.                     this.model = new LoginModel();
  170.                     Backbone.Validation.bind(this);
  171.                 },
  172.                 formChanged: function(e) {
  173.                     this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
  174.                     this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
  175.                 },
  176.                 submit: function (e) {
  177.                     e.preventDefault();
  178.                     var data = this.$el.serializeObject();
  180.                     this.model.set(data);
  181.                     if(this.model.isValid(true)){
  182.                         this.$el.submit();
  183.                     }
  184.                 }
  185.             });
  187.             new LoginForm();
  188.         });
  189.     </script>
  190. {% endblock %}