vendor/uvdesk/core-framework/Resources/views/login.html.twig line 5

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %}Login{% endblock %}
  5. {% set recaptchaDetail = recaptcha_service.getRecaptchaDetails() %}
  7. {% block templateCSS %}
  8. <style>
  9.     #loginForm h1 {
  10.         font-size: 28px;
  11.         color: #6F6F6F;
  12.         font-weight: 600;
  13.         margin: 0px 0px 10px 0px;
  14.     }
  16.     .forgot-password-cta {
  17.         position: absolute;
  18.         font-size: 15px !important;
  19.         right: 0px;
  20.         top: 0px;
  21.     }
  22. </style>
  23. {% endblock %}
  25. {% block pageWrapper %}
  26.     <div class="uv-large-box-plank">
  27.         <div class="uv-large-box-rt">
  28.             <div class="uv-center-box uv-text-center">
  29.                 <form action="" method="post" id="loginForm">
  30.                     <div class="uv-adjacent-center">
  31.                         <h1>{{ "Log in to your"|trans }} <span class="uv-brand">{{ website.name }}</span></h1>
  32.                         <p>{{ "Enter your credentials below to gain access to your helpdesk account."|trans }}</p>
  33.                         <div class="uv-adjacent-form">
  34.                             <div class="uv-adjacent-element-block">
  35.                                 <label>{{ "Email" |trans}}</label>
  36.                                 <div class="uv-max-field">
  37.                                     <input type="email" name="_username">
  38.                                 </div>
  39.                             </div>
  40.                             <div class="uv-adjacent-element-block" style="position: relative;">
  41.                                 <label>{{ "Password" |trans}}</label>
  42.                                 <div class="uv-max-field">
  43.                                     <a class="forgot-password-cta" href="{{ path('helpdesk_forgot_account_password') }}" tabindex="-1">{{ "Forgot Password?" |trans}}</a>
  44.                                     <input type="password"  name="_password">
  45.                                 </div>
  46.                             </div>
  48.                             <div class="uv-adjacent-element-block">
  49.                                 <label>
  50.                                     <div class="uv-checkbox">
  51.                                         <input type="checkbox" name="_remember_me" checked>
  52.                                         <span class="uv-checkbox-view"></span>
  53.                                     </div>
  54.                                     <span class="uv-checkbox-label">{{ "Keep me logged in" |trans}}</span>
  55.                                 </label>
  56.                             </div>
  57.                             <div class="uv-adjacent-element-block">
  58.                                 {% if recaptchaDetail and recaptchaDetail.isActive == true %}
  59.                                     <div class="clearfix"></div>
  60.                                     <div class="g-recaptcha" data-sitekey="{{ recaptchaDetail.siteKey }}"></div>
  61.                                     <div class="clearfix"></div>
  62.                                 {% else %}
  63.                                     <!-- Recaptcha will not support -->
  64.                                 {% endif %}
  65.                             </div>
  66.                             <button class="uv-btn">{{ 'Sign In'|trans }}</button>
  67.                         </div>
  68.                     </div>
  69.                 </div>
  70.             </form>
  71.         </div>
  73.         <div class="uv-large-box-lt">
  74.             <div class="uv-center-box uv-text-center">
  75.                 <a href="https://www.uvdesk.com">
  76.                     <img alt="UVdesk" title="UVdesk" src="{{ asset('bundles/uvdeskcoreframework/images/uvdesk-logo-symbol.svg') }}">
  77.                 </a>
  78.             </div>
  79.         </div>
  80.     </div>
  81. {% endblock %}
  83. {% block footer %}
  84.     {{ parent() }}
  86.     {% if recaptchaDetail and recaptchaDetail.isActive == true %}
  87.         <script src='https://www.google.com/recaptcha/api.js'></script>
  88.     {% endif %}
  90.     <script type="text/javascript">
  91.         $(function () {
  92.              _.extend(Backbone.Validation.callbacks, {
  93.                 valid : function (view, attr, selector) {
  94.                     var $el = view.$('[name="' + attr + '"]');
  95.                     $el.removeClass('uv-field-error');
  96.                     $el.parents('.uv-adjacent-element-block').find('.uv-field-message').remove();
  97.                 },
  98.                 invalid : function (view, attr, error, selector) {
  99.                     var $el = view.$('[name="' + attr + '"]');
  100.                     $el.addClass('uv-field-error');
  101.                     $el.parents('.uv-adjacent-element-block').find('.uv-field-message').remove();
  102.                     $el.parents('.uv-adjacent-element-block').append("<span class='uv-field-message'>" + error + "</span>");
  103.                 }
  104.             });
  106.             var LoginModel = Backbone.Model.extend({
  107.                 validation: {
  108.                     '_username': [{
  109.                         required: true,
  110.                         msg: '{{ "This field is mandatory"|trans }}'
  111.                     },{
  112.                         pattern: 'email',
  113.                         msg: '{{ "This is not a valid email address"|trans }}'
  114.                     }],
  115.                     '_password': [{
  116.                         required: true,
  117.                         msg: '{{"This field is mandatory"|trans }}'
  118.                     },{
  119.                         minLength: 8,
  120.                         msg: '{{"Password must contains 8 Characters"|trans }}'
  121.                     }],
  122.                     {% if recaptchaDetail and recaptchaDetail.isActive == true %}
  123.                         'g-recaptcha-response' : {
  124.                             fn: function(value) {
  125.                                 if(grecaptcha.getResponse().length > 0)
  126.                                     return false;
  127.                                 else
  128.                                     return true;
  129.                             },
  130.                             msg : '{{ "Please select CAPTCHA"|trans }}'
  131.                         }
  132.                     {% endif %}
  133.                 }
  134.             });
  136.             var LoginForm = Backbone.View.extend({
  137.                 events: {
  138.                     'click .uv-btn': 'submit',
  139.                     'blur input': 'formChanegd'
  140.                 },
  141.                 initialize: function () {
  142.                     Backbone.Validation.bind(this);
  143.                     {% if error.messageKey is defined %}
  144.                         app.appView.renderResponseAlert({'alertClass': 'danger', 'alertMessage': '{{ error.messageKey|trans}}'})
  145.                     {% endif %}
  146.                 },
  147.                 formChanegd: function(e) {
  148.                     this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
  149.                     this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
  150.                 },
  151.                 submit: function (e) {
  152.                     e.preventDefault();
  154.                     var data = this.$el.serializeObject();
  155.                     this.model.set(data);
  156.                     if(this.model.isValid(true)){
  157.                         this.$el.submit();
  158.                     }
  159.                 }
  160.             });
  162.             var Login = new LoginForm({
  163.                 el: $('#loginForm'),
  164.                 model: new LoginModel()
  165.             });
  166.         });
  167.     </script>
  168. {% endblock %}