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

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %}
  4.     {{ 'Profile'|trans }}
  5. {% endblock %}
  7. {% set recaptchaDetail = recaptcha_service.getRecaptchaDetails() %}
  9. {% block templateCSS %}
  10.     <style>
  11.         span.uv-app-list-flag-active {
  12.         font-size: 15px;
  13.         color: #FFFFFF;
  14.         background-color: #2ED04C;
  15.         display: inline-block;
  16.         padding: 0px 7px 1px 7px;
  17.         margin-bottom: 2px;
  18.         border-radius: 3px;
  19.         }
  20.         span.uv-app-list-flag-inactive {
  21.         font-size: 15px;
  22.         color: #FFFFFF;
  23.         background-color: #FF5656;
  24.         display: inline-block;
  25.         padding: 0px 7px 1px 7px;
  26.         margin-bottom: 2px;
  27.         border-radius: 3px;
  28.         }
  29.         .token-list {
  30.             padding-left: 20px;
  31.         }
  32.         .add-token {
  33.             position: absolute;
  34.             right: 10px;
  35.         }
  36.         .token-item .uv-hr {
  37.             margin: 25px 0 15px -20px;
  38.         }
  39.         .token-name {
  40.             margin-right: 5px;
  41.         }
  42.         .mar-right-5 {
  43.             margin-right: 5px;
  44.         }
  45.     </style>  
  46. {% endblock %}
  48. {% block pageContent %}
  49.     <div class="uv-inner-section">
  50.         {# Append Panel Aside #}
  51.         {% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
  52.         {% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Account' %}
  54.         {{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
  56.         <div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
  57.             <h1>Profile</h1>
  58.             {%  set agentDetails = user_service.getAgentDetailById(user.id) %}
  59.            
  60.             <div class="uv-tabs">
  61.                 <ul>
  62.                     <li for="profile" class="uv-tab-active">Edit Profile</li>
  63.                     {% if user_service.isAccessAuthorized('ROLE_ADMIN') %}
  64.                         <li for="recaptcha" class="uv-tab">{{ 'reCAPTCHA Setting'|trans }}</li>
  65.                     {% endif %}
  66.                 </ul>
  67.             </div>
  68.             {% for message in app.flashes('warning') %}
  69.                 <div class="flash-notice">
  70.                     {{ message }}
  71.                 </div>
  72.             {% endfor %}
  73.             {% for message in app.flashes('success') %}
  74.                 <div class="flash-notice">
  75.                     {{ message }}
  76.                 </div>
  77.             {% endfor %}
  78.             <!--Form-->
  79.             <form method="post" action="" id="user-form" enctype="multipart/form-data">
  80.                 <div class="uv-tab-view uv-tab-view-active" id="profile">
  81.                     <!-- Profile image -->
  82.                      <div class="uv-image-upload-wrapper">
  83.                         {% set isHaveImage =  agentDetails and agentDetails.profileImagePath ? 1 : 0 %}
  84.                         <div class="uv-image-upload-brick {% if isHaveImage %}uv-on-drop-shadow{% endif %}" {% if isHaveImage %}style="border-color: transparent;"{% endif %}>
  85.                             <input type="file" name="user_form[profileImage]" id="uv-upload-profile">
  86.                             <div class="uv-image-upload-placeholder">
  87.                                 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="32px">
  88.                                 <path fill-rule="evenodd" d="M28.026,26.003 L19.964,26.003 L19.964,17.962 L13.964,17.962 L23.995,8.050 L34.025,17.962 L28.026,17.962 L28.026,26.003 ZM33.557,3.421 C30.806,1.146 27.619,0.008 23.995,0.008 C21.182,0.008 18.588,0.756 16.214,2.252 C13.838,3.749 11.996,5.712 10.683,8.143 C7.683,8.456 5.152,9.749 3.090,12.024 C1.027,14.300 -0.004,16.965 -0.004,20.019 C-0.004,23.324 1.168,26.144 3.512,28.481 C5.855,30.819 8.682,31.988 11.996,31.988 L37.963,31.988 C40.712,31.988 43.072,31.006 45.040,29.042 C47.009,27.079 47.993,24.726 47.993,21.983 C47.993,19.364 47.087,17.106 45.275,15.203 C43.461,13.302 41.275,12.258 38.713,12.071 C38.024,8.580 36.306,5.698 33.557,3.421 Z"></path>
  89.                                 </svg>
  90.                             </div>
  91.                             <img id="dynamic-image-upload" {% if isHaveImage %}src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ agentDetails.profileImagePath }}"{% endif %}>
  92.                         </div>
  93.                         <div class="uv-image-info-brick">
  94.                             <span class="uv-field-info">{{ 'Upload a Profile Image (100px x 100px)<br> in PNG or JPG Format'|trans|raw }}</span>
  95.                         </div>
  96.                     </div>
  98.                     <!-- Field -->
  99.                     <div class="uv-element-block">
  100.                         <label class="uv-field-label">{{ 'First Name'|trans }}</label>
  101.                         <div class="uv-field-block">
  102.                             <input type="text" name="user_form[firstName]"  class="uv-field" value="{{ user.firstName ?: agentDetails.firstName }}" />
  103.                         </div>
  104.                     </div>
  106.                     <!-- Field -->
  107.                     <div class="uv-element-block">
  108.                         <label class="uv-field-label">{{ 'Last Name'|trans }}</label>
  109.                         <div class="uv-field-block">
  110.                             <input type="text" name="user_form[lastName]" class="uv-field" value="{{ user.lastName ?:agentDetails.lastName }}" />
  111.                         </div>
  112.                     </div>
  114.                     <!-- Field -->
  115.                     <div class="uv-element-block">
  116.                         <label class="uv-field-label">{{ 'Email'|trans }}</label>
  117.                         <div class="uv-field-block">
  118.                             <input type="text" name="user_form[email]" class="uv-field" value="{{ user.email}}" />
  119.                         </div>
  120.                     </div>
  122.                     <!-- Field -->
  123.                     <div class="uv-element-block">
  124.                         <label class="uv-field-label">{{ 'Contact Number'|trans }}</label>
  125.                         <div class="uv-field-block">
  126.                             <input type="text" name="user_form[contactNumber]" class="uv-field" value="{{ agentDetails.contactNumber ?: agentDetails.contactNumber }}" />
  127.                         </div>
  128.                     </div>
  129.                    
  130.                     <div class="uv-element-block">
  131.                         <label class="uv-field-label">{{ 'Timezone'|trans }}</label>
  132.                         <div class="uv-field-block">
  133.                             <select name="user_form[timezone]" class="uv-select">
  134.                                 {% for timezone in uvdesk_service.getTimezones() %}
  135.                                     <option value="{{ timezone }}" {% if user.timezone == timezone %}selected{% endif %}>{{ timezone }}</option>
  136.                                 {% endfor %}
  137.                             </select>
  138.                         </div>
  139.                         <span class="uv-field-info">{{ "Choose your default timezone"|trans }}</span>
  140.                     </div>
  142.                     <div class="uv-element-block">
  143.                         <label class="uv-field-label">{{ 'Time Format'|trans }}</label>
  144.                         <div class="uv-field-block">
  145.                             <select name="user_form[timeformat]" class="uv-select">
  146.                                 {% for key, timeformat in uvdesk_service.getTimeFormats() %}   
  147.                                     <option value="{{ key }}" {% if user.timeformat == key %}selected{% endif %}>{{ timeformat }}</option>
  148.                                 {% endfor %}
  149.                             </select>
  150.                         </div>
  151.                         <span class="uv-field-info">{{ "Choose your default timezone"|trans }}</span>
  152.                     </div>
  154.                     <!-- Field -->
  155.                     <div class="uv-element-block">
  156.                         <label class="uv-field-label">{{ 'Signature'|trans }}</label>
  157.                         <div class="uv-field-block" style="max-width: 900px;">
  158.                             <textarea name="user_form[signature]" id="user-signature" class="uv-field uv-signature-editor" style="width: 100%;">{{ agentDetails.signature ?: agentDetails.signature }}</textarea>
  159.                         </div>
  160.                         <span class="uv-field-info">{{ 'User signature will be append at the bottom of ticket reply box'|trans }}</span>
  161.                     </div>
  163.                     <!-- Field -->
  164.                     <div class="uv-element-block">
  165.                         <label class="uv-field-label">{{ 'Password'|trans }}</label>
  166.                         <div class="uv-field-block">
  167.                             <input type="password" name="user_form[password][first]" class="uv-field"  />
  168.                             <span class="uv-field-info">{{ 'Password will remain same if you are not entering something in this field'|trans }}</span>
  169.                         </div>
  170.                     </div>
  172.                     <!-- Field -->
  173.                     <div class="uv-element-block">
  174.                         <label class="uv-field-label">{{ 'Confirm Password'|trans }}</label>
  175.                         <div class="uv-field-block">
  176.                             <input type="password" name="user_form[password][second]" class="uv-field"  />
  177.                         </div>
  178.                     </div>
  180.                     <!-- CSRF token Field -->
  181.                     <input type="hidden" name="user_form[_token]" value="{{ uvdesk_service.generateCsrfToken('user_form') }}"/>
  182.                     <!-- //CSRF token Field -->
  185.                 </div>
  187.                 {% if user_service.isAccessAuthorized('ROLE_ADMIN') %}
  188.                     <!--Tab View Recaptcha-->
  189.                     <div class="uv-tab-view" id="recaptcha">
  190.                         <div class="uv-element-block">
  191.                             <label class="uv-field-label">{{ 'reCAPTCHA Site Key'|trans }}</label>
  192.                             <div class="uv-field-block">
  193.                                 <input name="user_form[recaptcha_site_key]" class="uv-field grammarly-fix-broadcast" value="{{ recaptchaDetail ? recaptchaDetail.siteKey : '' }}">
  194.                             </div>
  195.                         </div>
  196.                         <div class="uv-element-block">
  197.                             <label class="uv-field-label">{{ 'reCAPTCHA Secret key'|trans }}</label>
  198.                             <div class="uv-field-block">
  199.                                 <input name="user_form[recaptcha_secret_key]" class="uv-field grammarly-fix-broadcast" value="{{ recaptchaDetail ? recaptchaDetail.secretKey : ''}}">
  200.                             </div>
  201.                         </div>
  202.                         <div class="uv-element-block">
  203.                             <label class="uv-field-label">{{'reCAPTCHA Status'|trans}}</label>
  204.                             <div class="uv-element-block">
  205.                                 <label>
  206.                                     <div class="uv-checkbox">
  207.                                         <input type="checkbox" name="user_form[recaptcha_status]" value="{{ recaptchaDetail is not empty and recaptchaDetail.isActive ? 1 : 0 }}" {{ recaptchaDetail is not empty and recaptchaDetail.isActive ? 'checked' : '' }}>
  208.                                         <span class="uv-checkbox-view"></span>
  209.                                     </div>
  210.                                     <span class="uv-checkbox-label">{{'reCAPTCHA is Active'|trans}}</span>
  211.                                 </label>
  212.                             </div>
  213.                         </div>
  214.                     </div>
  215.                     <!--//Tab View Recaptcha-->
  216.                 {% endif %}
  219.                 <div class="uv-pop-up-overlay" id="confirm-password">
  220.                     <div class="uv-pop-up-box uv-pop-up-slim">
  221.                         <span class="uv-pop-up-close"></span>
  222.                         <p>{{ 'Enter your current Password to continue'|trans }}</p>
  223.                         <div class="uv-element-block">
  224.                             <input type="password" name="user_form[oldPassword]" class="uv-field uv-margin-0">
  225.                         </div>
  226.                         <div class="uv-pop-up-actions">
  227.                             <a href="#" class="uv-btn proceed">{{ 'Continue'|trans }}</a>
  228.                         </div>
  229.                     </div>
  230.                 </div>
  231.                 <!--Tab View Recaptcha-->
  233.                 <input class="uv-btn" id="uv-save-profile" href="#" value="{{ 'Save Changes'|trans }}" type="submit">
  234.                 
  235.             </form>
  237.             
  239.         </div>
  240.     </div>
  241.     
  242. {% endblock %}
  243. {% block footer %}
  244.     {{ parent() }}
  245.     {{ include("@UVDeskCoreFramework/Templates/tinyMCE.html.twig") }}
  246.     <script type="text/javascript">
  247.         $(function () {
  248.             var UserModel = Backbone.Model.extend({
  249.                 validation: {
  250.                     'user_form[firstName]': {
  251.                         required: true,
  252.                         msg: '{{ "This field is mandatory"|trans }}'
  253.                     },
  254.                     'user_form[lastName]': function(value) {
  255.                         if(value != undefined && value !== '') {
  256.                             [{
  257.                                 pattern: /^[A-Za-z][A-Za-z]*[\sA-Za-z]*$/,
  258.                                 msg: 'This field must have characters only'
  259.                             },{
  260.                                 maxLength:40,
  261.                                 msg:'Maximum character length is 40'
  262.                             }]
  263.                         }
  264.                     },
  265.                     'user_form[email]': [{
  266.                         required: true,
  267.                         msg: '{{ "This field is mandatory"|trans }}'
  268.                     },{
  269.                         pattern: 'email',
  270.                         msg: '{{ "Email address is invalid"|trans }}'
  271.                     }],
  272.                     'user_form[contactNumber]': function(value) {
  273.                         if(value != undefined && value !== '') {
  274.                             if(!value.match('^\\s*(?:\\+?(\\d{1,3}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})(?: *x(\\d+))?\\s*$'))
  275.                                 return '{{ "Contact number is invalid"|trans }}';
  276.                         }
  277.                     },
  278.                     'user_form[password][first]' : function(value) { 
  279.                         if(value != undefined && value !== '') {
  280.                              if(value.length < 8)
  281.                             return '{{ "Password must contains 8 Characters"|trans }}';
  282.                         }                      
  283.                     },
  284.                     'user_form[password][second]': {
  285.                         equalTo: 'user_form[password][first]',
  286.                         msg: '{{ "The passwords does not match"|trans }}'
  287.                     }
  288.                 }
  289.             });
  291.             var UserForm = Backbone.View.extend({
  292.                 events : {
  293.                     'click #uv-save-profile' : "saveUser",
  294.                     'blur input, textarea': 'formChanged',
  295.                     'click a.select': 'selectAll',
  296.                     'click a.deselect': 'deselectAll',
  297.                     'click #confirm-password .proceed': 'confirmChange',
  298.                 },
  299.               
  300.                 initialize : function() {
  301.                     Backbone.Validation.bind(this);
  302.                     var jsonContext = JSON.parse('{{ errors|raw }}');
  303.                     for (var field in jsonContext) {
  304.                         if(field == 'first') {
  305.                             Backbone.Validation.callbacks.invalid(this, "user_form[password][" + field + "]", jsonContext[field], 'input');
  306.                         } else {
  307.                             Backbone.Validation.callbacks.invalid(this, "user_form[" + field + "]", jsonContext[field], 'input');
  308.                         }
  309.                     }
  311.                     $('#notifications .uv-scroll-plank .uv-scroll-block').each(function() {
  312.                         if(!$(this).find('.uv-element-block').length) {
  313.                             $(this).parents('.uv-scroll-plank').remove()
  314.                         }
  315.                     })
  316.                 },
  317.                 confirmChange: function(e) {
  318.                     var target = $('#confirm-password input[name="user_form[oldPassword]"]');
  319.                     var oldPass = target.val();
  320.                     var that = this;
  321.                     if(oldPass && oldPass.length > 7) {
  322.                         $('#confirm-password .uv-pop-up-close,#uv-save-profile').trigger('click');
  323.                         target.next('.uv-field-message').remove();
  324.                     } else {                    
  325.                         target.addClass('uv-field-error');
  326.                         if(!(target.next() && target.next().hasClass('uv-field-message')) ) {
  327.                             target.after('<span class="uv-field-message">'+ '{{ "Password must contains 8 Characters"|trans }}'+ '</span>');
  328.                         }
  329.                     }
  330.                 },
  331.                 formChanged: function(e) {
  332.                     var fieldName = Backbone.$(e.currentTarget).attr('name');
  333.                     if(fieldName == 'user_form[password][second]') {
  334.                         if($("input[name='user_form[password][first]']").val().length) {
  335.                             this.model.set(fieldName, Backbone.$(e.currentTarget).val())
  336.                             this.model.isValid([fieldName])
  337.                         } else {
  338.                             if($("input[name='user_form[password][second]']").val().length) {
  339.                                 this.model.set(fieldName, Backbone.$(e.currentTarget).val())
  340.                                 this.model.isValid([fieldName])
  341.                             } else {
  342.                                 Backbone.Validation.callbacks.valid(this, fieldName, 'input');
  343.                             }
  344.                         }
  345.                     } else {
  346.                         this.model.set(fieldName, Backbone.$(e.currentTarget).val())
  347.                         this.model.isValid([fieldName])
  348.                         if(fieldName == 'user_form[password][first]' && !$("input[name='user_form[password][second]']").val().length) {
  349.                             Backbone.Validation.callbacks.valid(this, 'user_form[password][second]', 'input');
  350.                         }
  351.                     }
  352.                 },
  353.                 saveUser : function (e) {
  354.                     e.preventDefault();
  355.                     
  356.                     // Update TinyMCE content to textarea before serializing
  357.                     if (typeof tinymce !== 'undefined') {
  358.                         var signatureEditor = tinymce.get('user-signature');
  359.                         if (signatureEditor) {
  360.                             signatureEditor.save();
  361.                         }
  362.                     }
  363.                     
  364.                     var data = this.$el.serializeObject();
  365.                     this.model.set(data);
  367.                     if (this.model.isValid(true)) {
  368.                         this.$el.find('.uv-btn').attr('disabled', 'disabled');
  369.                         this.$el.submit();
  370.                     }
  371.                 },
  372.                 selectAll: function (e) {
  373.                     e.preventDefault();
  374.                     this.$(e.currentTarget).parents('.uv-scroll-plank')
  375.                             .find('input')
  376.                             .prop('checked', true)
  377.                 },
  378.                 deselectAll: function (e) {
  379.                     e.preventDefault();
  380.                     this.$(e.currentTarget).parents('.uv-scroll-plank')
  381.                             .find('input')
  382.                             .prop('checked', false);
  383.                 },
  384.             });
  386.             userForm = new UserForm({
  387.                 el : $("#user-form"),
  388.                 model : new UserModel()
  389.             });
  390.             
  391.             // Initialize TinyMCE for Signature field
  392.             if (typeof sfTinyMce !== 'undefined') {
  393.                 // Override sendFile function for profile context
  394.                 var originalSendFile = window.sendFile;
  395.                 window.sendFile = function(files) {
  396.                     var data = new FormData();
  397.                     var nonEmptyFlag;
  398.                     $.each(files, function(key, file){
  399.                         var patt = new RegExp("(image/)(?!tif)");
  400.                         if(file.type && patt.test(file.type)) {
  401.                             data.append("attachments[]", file);
  402.                             nonEmptyFlag = true;
  403.                         }
  404.                     });
  405.                     if(nonEmptyFlag) {
  406.                         return $.ajax({
  407.                             data: data,
  408.                             type: "POST",
  409.                             enctype: 'multipart/form-data',
  410.                             url: "{{ path('ajax_file_upload') }}",
  411.                             processData: false,
  412.                             contentType: false,
  413.                             cache: false,
  414.                         });
  415.                     } else {
  416.                         if(typeof app !== 'undefined' && app.appView) {
  417.                             app.appView.renderResponseAlert({'alertClass': 'danger', 'alertMessage': '{{ "Warning! Select valid image file."|trans }}' });
  418.                         }
  419.                     }
  420.                 };
  421.                 
  422.                 sfTinyMce.init({
  423.                     selector: '#user-signature',
  424.                     height: 450,
  425.                     width: '100%',
  426.                     menubar: false,
  427.                     toolbar: 'undo redo | bold italic underline | fontselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | image | removeformat',
  428.                     plugins: 'textcolor paste image imagetools lists',
  429.                     paste_data_images: true,
  430.                     image_advtab: true,
  431.                     content_style: 'body { font-family:Poppins,sans-serif; font-size:14px }',
  432.                     font_formats: 'Poppins=Poppins, sans-serif; Arial=Arial, sans-serif; Verdana=Verdana, sans-serif; Times New Roman=Times New Roman, serif; Courier New=Courier New, monospace;',
  433.                     setup: function(editor) {
  434.                         sfTinyMce.initImageUpload(editor);
  435.                     }
  436.                 });
  437.             }
  438.         });
  439.     </script>
  440. {% endblock %}