src/webkul/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="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ websiteConfiguration.website.logo }}" alt="{{ websiteConfiguration.website.name}}">
  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 %}