File: /home/cafsindia/help.cafsindia.com/vendor/uvdesk/core-framework/Resources/views/profile.html.twig
{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
{% block title %}
{{ 'Profile'|trans }}
{% endblock %}
{% set recaptchaDetail = recaptcha_service.getRecaptchaDetails() %}
{% block templateCSS %}
<style>
span.uv-app-list-flag-active {
font-size: 15px;
color: #FFFFFF;
background-color: #2ED04C;
display: inline-block;
padding: 0px 7px 1px 7px;
margin-bottom: 2px;
border-radius: 3px;
}
.uv-tab-error {
border-bottom: 3px solid #FF5656 !important;
}
span.uv-app-list-flag-inactive {
font-size: 15px;
color: #FFFFFF;
background-color: #FF5656;
display: inline-block;
padding: 0px 7px 1px 7px;
margin-bottom: 2px;
border-radius: 3px;
}
.token-list {
padding-left: 20px;
}
.add-token {
position: absolute;
right: 10px;
}
.token-item .uv-hr {
margin: 25px 0 15px -20px;
}
.token-name {
margin-right: 5px;
}
.mar-right-5 {
margin-right: 5px;
}
</style>
{% endblock %}
{% block pageContent %}
<div class="uv-inner-section">
{# Append Panel Aside #}
{% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
{% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Account' %}
{{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
<h1>{{ 'Profile'|trans }}</h1>
{% set agentDetails = user_service.getAgentDetailById(user.id) %}
<div class="uv-tabs">
<ul>
<li for="profile" class="uv-tab-active">{{ 'Edit Profile'|trans }}</li>
{% if user_service.isAccessAuthorized('ROLE_ADMIN') %}
<li for="recaptcha" class="uv-tab">{{ 'reCAPTCHA Setting'|trans }}</li>
{% endif %}
</ul>
</div>
{% for message in app.flashes('warning') %}
<div class="flash-notice">
{{ message }}
</div>
{% endfor %}
{% for message in app.flashes('success') %}
<div class="flash-notice">
{{ message }}
</div>
{% endfor %}
<!--Form-->
<!--Form-->
<form method="post" action="" id="user-form" enctype="multipart/form-data">
<div class="uv-tab-view uv-tab-view-active" id="profile">
<!-- Profile image -->
<div class="uv-image-upload-wrapper">
{% set isHaveImage = agentDetails and agentDetails.profileImagePath ? 1 : 0 %}
<div class="uv-image-upload-brick {% if isHaveImage %}uv-on-drop-shadow{% endif %}" {% if isHaveImage %}style="border-color: transparent;"{% endif %}>
<input type="file" name="user_form[profileImage]" id="uv-upload-profile">
<div class="uv-image-upload-placeholder">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="32px">
<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>
</svg>
</div>
<img id="dynamic-image-upload" {% if isHaveImage %}src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ agentDetails.profileImagePath }}"{% endif %}>
</div>
<div class="uv-image-info-brick">
<span class="uv-field-info">{{ 'Upload a Profile Image (100px x 100px)<br> in PNG or JPG Format'|trans|raw }}</span>
</div>
</div>
{% if isHaveImage %}
<div class="uv-element-block">
<label>
<div class="uv-checkbox">
<input name="removeImage" id="removeImage" type="checkbox">
<span class="uv-checkbox-view"></span>
</div><span class="uv-checkbox-label">{{ 'Remove profile picture'|trans }}</span>
</label>
</div>
{% endif %}
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label">{{ 'First Name'|trans }}</label>
<div class="uv-field-block">
<input type="text" name="user_form[firstName]" class="uv-field" value="{{ user.firstName ?: agentDetails.firstName }}" />
</div>
</div>
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Last Name'|trans }}</label>
<div class="uv-field-block">
<input type="text" name="user_form[lastName]" class="uv-field" value="{{ user.lastName ?:agentDetails.lastName }}" />
</div>
</div>
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Email'|trans }}</label>
<div class="uv-field-block">
<input type="text" name="user_form[email]" class="uv-field" value="{{ user.email}}" />
</div>
</div>
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Contact Number'|trans }}</label>
<div class="uv-field-block">
<input type="text" name="user_form[contactNumber]" class="uv-field" value="{{ agentDetails.contactNumber ?: agentDetails.contactNumber }}" />
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Timezone'|trans }}</label>
<div class="uv-field-block">
<select name="user_form[timezone]" class="uv-select">
{% for timezone in uvdesk_service.getTimezones() %}
<option value="{{ timezone }}" {% if user.timezone == timezone %}selected{% endif %}>{{ timezone }}</option>
{% endfor %}
</select>
</div>
<span class="uv-field-info">{{ "Choose your default timezone"|trans }}</span>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Time Format'|trans }}</label>
<div class="uv-field-block">
<select name="user_form[timeformat]" class="uv-select">
{% for key, timeformat in uvdesk_service.getTimeFormats() %}
<option value="{{ key }}" {% if user.timeformat == key %}selected{% endif %}>{{ timeformat }}</option>
{% endfor %}
</select>
</div>
<span class="uv-field-info">{{ "Choose your default timezone"|trans }}</span>
</div>
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Signature'|trans }}</label>
<div class="uv-field-block">
<textarea name="user_form[signature]" class="uv-field">{{ agentDetails.signature ?: agentDetails.signature }}</textarea>
</div>
<span class="uv-field-info">{{ 'User signature will be append at the bottom of ticket reply box'|trans }}</span>
</div>
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Password'|trans }}</label>
<div class="uv-field-block">
<input type="password" name="user_form[password][first]" class="uv-field" />
<span class="uv-field-info">{{ 'Password will remain same if you are not entering something in this field'|trans }}</span>
</div>
</div>
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Confirm Password'|trans }}</label>
<div class="uv-field-block">
<input type="password" name="user_form[password][second]" class="uv-field" />
</div>
</div>
<!-- CSRF token Field -->
<input type="hidden" name="user_form[_token]" value="{{ uvdesk_service.generateCsrfToken('user_form') }}"/>
<!-- //CSRF token Field -->
</div>
{% if user_service.isAccessAuthorized('ROLE_ADMIN') %}
<!--Tab View Recaptcha-->
<div class="uv-tab-view" id="recaptcha">
<div class="uv-element-block">
<label class="uv-field-label">{{ 'reCAPTCHA Site Key'|trans }}</label>
<div class="uv-field-block">
<input name="user_form[recaptcha_site_key]" class="uv-field grammarly-fix-broadcast" value="{{ recaptchaDetail ? recaptchaDetail.siteKey : '' }}">
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'reCAPTCHA Secret key'|trans }}</label>
<div class="uv-field-block">
<input name="user_form[recaptcha_secret_key]" class="uv-field grammarly-fix-broadcast" value="{{ recaptchaDetail ? recaptchaDetail.secretKey : ''}}">
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{'reCAPTCHA Status'|trans}}</label>
<div class="uv-element-block">
<label>
<div class="uv-checkbox">
<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' : '' }}>
<span class="uv-checkbox-view"></span>
</div>
<span class="uv-checkbox-label">{{'reCAPTCHA is Active'|trans}}</span>
</label>
</div>
</div>
</div>
<!--//Tab View Recaptcha-->
{% endif %}
<div class="uv-pop-up-overlay" id="confirm-password">
<div class="uv-pop-up-box uv-pop-up-slim">
<span class="uv-pop-up-close"></span>
<p>{{ 'Enter your current Password to continue'|trans }}</p>
<div class="uv-element-block">
<input type="password" name="user_form[oldPassword]" class="uv-field uv-margin-0">
</div>
<div class="uv-pop-up-actions">
<a href="#" class="uv-btn proceed">{{ 'Continue'|trans }}</a>
</div>
</div>
</div>
<!--Tab View Recaptcha-->
<input class="uv-btn" id="uv-save-profile" href="#" value="{{ 'Save Changes'|trans }}" type="submit">
</form>
</div>
</div>
{% endblock %}
{% block footer %}
{{ parent() }}
<script type="text/javascript">
$(function () {
var UserModel = Backbone.Model.extend({
validation: {
'user_form[firstName]': {
required: true,
msg: '{{ "This field is mandatory"|trans }}'
},
'user_form[lastName]': function(value) {
if(value != undefined && value !== '') {
[{
pattern: /^[A-Za-z][A-Za-z]*[\sA-Za-z]*$/,
msg: '{{ "This field must have characters only"|trans }}'
},{
maxLength:40,
msg: '{{ "Maximum character length is 40"|trans }}'
}]
}
},
'user_form[email]': [{
required: true,
msg: '{{ "This field is mandatory"|trans }}'
},{
pattern: 'email',
msg: '{{ "Email address is invalid"|trans }}'
}],
'user_form[contactNumber]': function(value) {
if(value != undefined && value !== '') {
if(!value.match('^\\s*(?:\\+?(\\d{1,3}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})(?: *x(\\d+))?\\s*$'))
return '{{ "Contact number is invalid"|trans }}';
}
},
'user_form[password][first]': [{
required: true,
msg: '{{ "This field is mandatory"|trans }}'
},{
pattern: /^(?=(.*[a-zA-Z].*){2,})(?=.*\d.*)(?=.*\W.*)[a-zA-Z0-9\S]{8,}$/,
msg: '{{ "passwords must contain maximum 8 character length, at least two letters (not case sensitive), one number, one special character(space is not allowed.)"|trans }}'
}],
'user_form[password][second]': {
equalTo: 'user_form[password][first]',
msg: '{{ "The passwords does not match"|trans }}'
}
}
});
var UserForm = Backbone.View.extend({
events : {
'click #uv-save-profile' : "saveUser",
'blur input, textarea': 'formChanged',
'click a.select': 'selectAll',
'click a.deselect': 'deselectAll',
'click #confirm-password .proceed': 'confirmChange',
},
initialize : function() {
Backbone.Validation.bind(this);
var jsonContext = JSON.parse('{{ errors|raw }}');
for (var field in jsonContext) {
if(field == 'first') {
Backbone.Validation.callbacks.invalid(this, "user_form[password][" + field + "]", jsonContext[field], 'input');
} else {
Backbone.Validation.callbacks.invalid(this, "user_form[" + field + "]", jsonContext[field], 'input');
}
}
$('#notifications .uv-scroll-plank .uv-scroll-block').each(function() {
if(!$(this).find('.uv-element-block').length) {
$(this).parents('.uv-scroll-plank').remove()
}
})
},
confirmChange: function(e) {
var target = $('#confirm-password input[name="user_form[oldPassword]"]');
var oldPass = target.val();
var that = this;
if(oldPass && oldPass.length > 7) {
$('#confirm-password .uv-pop-up-close,#uv-save-profile').trigger('click');
target.next('.uv-field-message').remove();
} else {
target.addClass('uv-field-error');
if(!(target.next() && target.next().hasClass('uv-field-message')) ) {
target.after('<span class="uv-field-message">'+ '{{ "Password must contains 8 Characters"|trans }}'+ '</span>');
}
}
},
formChanged: function(e) {
var fieldName = Backbone.$(e.currentTarget).attr('name');
$(".uv-tabs li.uv-tab-active").removeClass('uv-tab-error')
if(fieldName == 'user_form[password][second]') {
if($("input[name='user_form[password][first]']").val().length) {
this.model.set(fieldName, Backbone.$(e.currentTarget).val())
this.model.isValid([fieldName])
} else {
if($("input[name='user_form[password][second]']").val().length) {
this.model.set(fieldName, Backbone.$(e.currentTarget).val())
this.model.isValid([fieldName])
} else {
Backbone.Validation.callbacks.valid(this, fieldName, 'input');
}
}
} else {
this.model.set(fieldName, Backbone.$(e.currentTarget).val())
this.model.isValid([fieldName])
if(fieldName == 'user_form[password][first]' && !$("input[name='user_form[password][second]']").val().length) {
Backbone.Validation.callbacks.valid(this, 'user_form[password][second]', 'input');
}
}
},
saveUser : function (e) {
e.preventDefault();
var data = this.$el.serializeObject();
this.model.set(data);
if (this.model.isValid(true)) {
this.$el.find('.uv-btn').attr('disabled', 'disabled');
this.$el.submit();
} else {
$('.uv-field-message').each(function(e) {
$(".uv-tabs li[for='" + $(this).parents('.uv-tab-view').attr('id') + "']:not(.uv-tab-active)").addClass('uv-tab-error')
if($(".uv-tabs li[for='" + $(this).parents('.uv-tab-view').attr('id') + "']:not(.uv-tab-active)").length ) {
$('.uv-view').animate({
scrollTop: 0
}, 'slow');
}
});
}
},
selectAll: function (e) {
e.preventDefault();
this.$(e.currentTarget).parents('.uv-scroll-plank')
.find('input')
.prop('checked', true)
},
deselectAll: function (e) {
e.preventDefault();
this.$(e.currentTarget).parents('.uv-scroll-plank')
.find('input')
.prop('checked', false);
},
});
userForm = new UserForm({
el : $("#user-form"),
model : new UserModel()
});
});
</script>
{% endblock %}