{% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
{% block title %}{% trans %}Edit Profile{% endtrans %}{% endblock %}
{% block ogtitle %}{% trans %}Edit Profile{% endtrans %}{% endblock %}
{% block twtitle %}{% trans %}Edit Profile{% endtrans %}{% endblock %}
{% block tabHeader %}
<div class="uv-nav-bar uv-nav-tab">
<div class="uv-container">
<div class="uv-nav-bar-lt">
<ul class="uv-nav-tab-label">
<li><a href="#" for="profile" class="uv-nav-tab-active">{{ 'Profile'|trans }}</a></li>
</ul>
</div>
<div class="uv-nav-bar-rt">
<form method="get" action="{{path('helpdesk_customer_front_article_search')}}">
<input name="s" class="uv-nav-search" type="text" placeholder="{{ 'Search'|trans }}">
</form>
</div>
</div>
</div>
{% endblock %}
{% block body %}
<style>
.uv-nav-tab-view {
display: none;
}
.uv-nav-tab-view.uv-nav-tab-view-active {
display: block;
}
.uv-image-upload-wrapper {
padding: 5px 0px 10px 0px;
}
.uv-image-upload-wrapper .uv-image-upload-brick {
display: inline-block;
vertical-align: middle;
position: relative;
width: 100px;
height: 100px;
border-radius: 5px;
border: dashed 1px #B1B1AE;
overflow: hidden;
margin-right: 15px;
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.uv-image-upload-wrapper .uv-image-upload-brick input[type="file"] {
width: 100px;
height: 100px;
position: absolute;
opacity: 0;
z-index: 3;
}
.uv-image-upload-wrapper img {
width: 100px;
height: 100px;
position: absolute;
z-index: 2;
border-radius: 5px;
display: block;
border: solid 2px #FFFFFF;
}
.uv-image-upload-wrapper img:not([src]) {
display: none;
}
.uv-image-upload-wrapper .uv-image-upload-placeholder {
position: absolute;
width: 48px;
height: 32px;
left: 50%;
top: 50%;
margin-left: -24px;
margin-top: -16px;
z-index: 1;
}
.uv-image-upload-wrapper .uv-image-upload-brick-48 {
width: 48px;
height: 48px;
}
.uv-image-upload-wrapper .uv-image-upload-brick-48 input[type="file"] {
width: 48px;
height: 48px;
}
.uv-image-upload-wrapper .uv-image-upload-brick-48 img {
width: 48px;
height: auto;
}
.uv-image-upload-wrapper .uv-image-upload-brick-200 {
width: 200px;
height: 48px;
}
.uv-image-upload-wrapper .uv-image-upload-brick-200 input[type="file"] {
width: 200px;
height: 48px;
}
.uv-image-upload-wrapper .uv-image-upload-brick-200 img {
width: 200px;
height: auto;
}
.uv-image-upload-wrapper .uv-image-upload-placeholder svg path {
fill: #7C70F4;
}
.uv-image-upload-wrapper .uv-image-upload-brick:hover .uv-image-upload-placeholder svg path {
fill: #BA81F1;
}
.uv-image-upload-wrapper .uv-image-upload-brick .uv-image-upload-placeholder svg {
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.uv-image-upload-wrapper .uv-image-upload-brick:hover .uv-image-upload-placeholder svg {
transform: translateY(-2px);
}
.uv-image-upload-wrapper .uv-image-info-brick {
display: inline-block;
vertical-align: middle;
margin: 10px 0px;
}
.uv-image-upload-wrapper .uv-on-drag {
transform: scale(1.08);
border: dashed 1px #333333;
}
.uv-image-upload-wrapper .uv-on-drop-shadow {
box-shadow: 0px 0px 4.75px 0.25px rgba(0, 0, 0, 0.05), 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
}
.accounts-panel {
border: solid 1px #D3D3D3;
padding: 15px 15px 5px 15px;
border-radius: 3px;
margin: 25px 0px;
}
.social-accounts-table {
margin: 20px 0px 10px;
}
.social-accounts-table table {
border: solid 1px #D3D3D3;
}
.social-accounts-table table > tbody > tr > td {
border-bottom: dashed 1px #D3D3D3;
}
.social-accounts-table table > tbody > tr:last-child > td {
border-bottom: unset;
}
.social-accounts-table .social-accounts-pta {
text-align: right;
}
.social-accounts-table .social-accounts-pta > * {
text-align: left;
}
.social-account-banner {
min-width: 220px;
display: inline-block;
padding: 3px;
border-radius: 3px;
}
.social-account-banner > * {
display: inline-block;
vertical-align: middle;
}
.social-account-name {}
.social-account-img {
width: 40px;
height: 40px;
background-size: cover;
background-position: center;
margin-right: 10px;
}
</style>
<div class="uv-nav-tab-view uv-nav-tab-view-active" id="profile">
<h1>{{ 'Profile'|trans }}</h1>
{% set customerDetails = user_service.getCustomerDetailsById(user.id) %}
<!--Form-->
<form method="post" action="" id="user-form" enctype="multipart/form-data">
<!--Tab View-->
<div class="uv-tab-view uv-tab-view-active" id="profile">
<!-- Profile image -->
<div class="uv-image-upload-wrapper">
{% set isHaveImage = customerDetails and customerDetails.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('') }}{{ customerDetails.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>
<!-- //Profile image -->
{% 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 ?: customerDetails.firstName }}" />
</div>
</div>
<!-- //Field -->
<!-- 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 ?:customerDetails.lastName }}" />
</div>
</div>
<!-- //Field -->
<!-- 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 -->
<!-- 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="{{ customerDetails.contactNumber ?: customerDetails.contactNumber }}" />
</div>
</div>
<!-- //Field -->
<!-- Field -->
<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 user_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>
<!-- //Field -->
<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 timeformat"|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" value="" />
</div>
</div>
<!-- //Field -->
<!-- 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" value="" />
</div>
</div>
<!-- //Field -->
<!-- CSRF token Field -->
<!-- //CSRF token Field -->
<!--CTA-->
<input class="uv-btn" href="#" value="{{ 'Save Changes'|trans }}" type="submit">
<!--//CTA-->
</div>
<!--//Tab View-->
</form>
<!--//Form-->
</div>
{% endblock %}
{% block footer %}
{{ parent() }}
<script type="text/javascript">
$(function () {
var AccountLinkModel = Backbone.Model.extend({
validation: {
'merge_token': function(value) {
if (value != undefined && value !== '') {
if (value == this.attributes.presentToken) {
return "{% trans %}You can't merge an account with itself.{% endtrans %}";
}
} else {
return '{{ "This field is mandatory"|trans }}';
}
},
}
});
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: '{{ "Password must contain minimum 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-btn' : "saveUser",
'blur input, textarea': 'formChanegd',
'click a.select': 'selectAll',
'click a.deselect': 'deselectAll',
},
initialize : function() {
Backbone.Validation.bind(this);
var jsonContext = {};
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()
}
})
},
formChanegd: function(e) {
var fieldName = Backbone.$(e.currentTarget).attr('name');
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();
this.model.set(this.$el.serializeObject());
if(this.model.isValid(true)) {
this.$el.find('.uv-btn').attr('disabled', 'disabled');
this.$el.submit();
}
},
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);
},
});
var userForm = new UserForm({
el : $("#user-form"),
model : new UserModel()
});
var HelpdeskResourcesView = Backbone.View.extend({
el: '.uv-view',
events: {
'click .initiate-backup': 'initiateBackup',
},
initiateBackup: function(e) {
e.preventDefault();
$(e.target).attr('disabled', 'disabled');
$(e.target).closest('form').submit();
},
});
var helpdeskResources = new HelpdeskResourcesView();
$('.uv-nav-tab-label li a').on('click', function(e) {
e.preventDefault();
$('.uv-nav-tab-label li a').removeClass('uv-nav-tab-active');
$(this).addClass('uv-nav-tab-active');
$('.uv-nav-tab-view').removeClass('uv-nav-tab-view-active')
$('#' + $(this).attr('for')).addClass('uv-nav-tab-view-active')
});
});
</script>
{% endblock %}