Commit 26aa58b2 authored by Olga Brani's avatar Olga Brani Committed by Giorgos Korfiatis

admin-ui: Client-side validation for 'modify e-mail'

parent d713e890
...@@ -167,6 +167,23 @@ snf = { ...@@ -167,6 +167,23 @@ snf = {
} }
return noError; return noError;
}, },
toggleEmailErrorSign: function(el){
var val = el.val();
var errorSign = el.siblings('.error-sign');
var isValid = snf.modals.validateEmail(val);
if (!isValid) {
errorSign.show();
} else {
errorSign.hide();
}
},
validateModifyEmailForm: function(modal) {
var $modal = $(modal);
$modal.find('.new-email').each(function(i, el){
snf.modals.toggleEmailErrorSign($(el));
});
return $modal.find('.error-sign:visible').length >0 ? false: true ;
},
resetInputs: function(modal) { resetInputs: function(modal) {
var $modal = $(modal); var $modal = $(modal);
$modal.find('input').each(function() { $modal.find('input').each(function() {
...@@ -179,7 +196,7 @@ snf = { ...@@ -179,7 +196,7 @@ snf = {
}, },
html: { html: {
singleItemInfo: '<dl class="dl-horizontal info-list"><dt>Name:</dt><dd><%= name %></dd><dt>ID:</dt><dd><%= id %></dd><dl>', singleItemInfo: '<dl class="dl-horizontal info-list"><dt>Name:</dt><dd><%= name %></dd><dt>ID:</dt><dd><%= id %></dd><dl>',
singleItemInfoWithEmailInput: '<dl class="dl-horizontal info-list"><dt>Name:</dt><dd><%= name %></dd><dt>ID:</dt><dd><%= id %></dd><dt>New e-mail:</dt><dd><input placeholder="new e-mail"></dd><dl>', singleItemInfoWithEmailInput: '<dl class="dl-horizontal info-list"><dt>Name:</dt><dd><%= name %></dd><dt>ID:</dt><dd><%= id %></dd><dt>New e-mail:</dt><dd><input placeholder ="new e-mail" class="new-email"><a data-error="invalid-email" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Invalid e&#8209mail address."></a></dd><dl>',
removeLogLine: '<a href="" class="remove-icon remove-log" title="Remove this line">X</a>', removeLogLine: '<a href="" class="remove-icon remove-log" title="Remove this line">X</a>',
notifyPending: '<p class="log" id="<%= logID %>"><span class="pending state-icon snf-font-admin snf-exclamation-sign"></span>Action <b>"<%= actionName %>"</b><% if (itemsCount==1) { %> for <%= itemsCount %> item <% } else if (itemsCount>0) { %> for <%= itemsCount %> items <% } %> is <b class="pending">pending</b>.<%= removeBtn %></p>', notifyPending: '<p class="log" id="<%= logID %>"><span class="pending state-icon snf-font-admin snf-exclamation-sign"></span>Action <b>"<%= actionName %>"</b><% if (itemsCount==1) { %> for <%= itemsCount %> item <% } else if (itemsCount>0) { %> for <%= itemsCount %> items <% } %> is <b class="pending">pending</b>.<%= removeBtn %></p>',
notifySuccess: '<p class="log"><span class="success state-icon snf-font-admin snf-ok"></span>Action <b>"<%= actionName %>"</b><% if (itemsCount==1) { %> for <%= itemsCount %> item <% } else if (itemsCount>0) { %> for <%= itemsCount %> items <% } %> <b class="succeed">succeeded</b>.<%= removeBtn %></p>', notifySuccess: '<p class="log"><span class="success state-icon snf-font-admin snf-ok"></span>Action <b>"<%= actionName %>"</b><% if (itemsCount==1) { %> for <%= itemsCount %> item <% } else if (itemsCount>0) { %> for <%= itemsCount %> items <% } %> <b class="succeed">succeeded</b>.<%= removeBtn %></p>',
...@@ -193,7 +210,7 @@ snf = { ...@@ -193,7 +210,7 @@ snf = {
warningDuplicates: '<p class="warning-duplicate">Duplicate accounts have been detected.</p>', warningDuplicates: '<p class="warning-duplicate">Duplicate accounts have been detected.</p>',
commonRow: '<tr data-itemid=<%= itemID %> <% if(hidden) { %> class="hidden-row" <% } %> ><td class="item-name"><%= itemName %></td><td class="item-id"><%= itemID %></td><td class="owner-name"><%= ownerName %></td><td class="owner-email"><div class="wrap"><a class="remove" title="Remove item from selection">X</a><%= ownerEmail %></div></td></tr>', commonRow: '<tr data-itemid=<%= itemID %> <% if(hidden) { %> class="hidden-row" <% } %> ><td class="item-name"><%= itemName %></td><td class="item-id"><%= itemID %></td><td class="owner-name"><%= ownerName %></td><td class="owner-email"><div class="wrap"><a class="remove" title="Remove item from selection">X</a><%= ownerEmail %></div></td></tr>',
contactRow: '<tr <% if(showAssociations) { %> title="related with: <%= associations %>" <% } %> data-itemid=<%= itemID %> <% if(hidden) { %> class="hidden-row" <% } %> ><td class="full-name"><%= fullName %></td><td class="email"><div class="wrap"><a class="remove" title="Remove item from selection">X</a><%= email %></div></td></tr>', contactRow: '<tr <% if(showAssociations) { %> title="related with: <%= associations %>" <% } %> data-itemid=<%= itemID %> <% if(hidden) { %> class="hidden-row" <% } %> ><td class="full-name"><%= fullName %></td><td class="email"><div class="wrap"><a class="remove" title="Remove item from selection">X</a><%= email %></div></td></tr>',
modifyEmailRow: '<tr data-itemid=<%= itemID %> <% if(hidden) { %> class="hidden-row" <% } %> ><td class="full-name"><%= fullName %></td><td class="email"><div class="wrap"><%= email %></div></td><td class="wrap td-with-input"><input placeholder="new e-mail"><a class="remove" title="Remove item from selection">X</a></td></tr>', modifyEmailRow: '<tr data-itemid=<%= itemID %> <% if(hidden) { %> class="hidden-row" <% } %> ><td class="full-name"><%= fullName %></td><td class="email"><div class="wrap"><%= email %></div></td><td class="wrap td-with-input"><input placeholder="new e-mail" class="new-email"><a data-error="invalid-email" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Invalid e&#8209mail address."></a><a class="remove" title="Remove item from selection">X</a></td></tr>',
} }
}, },
...@@ -214,7 +231,7 @@ snf = { ...@@ -214,7 +231,7 @@ snf = {
} }
}, },
timer: 0, timer: 0,
ajaxdelay: 400 ajaxdelay: 400,
}; };
function setThemeIcon() { function setThemeIcon() {
...@@ -331,3 +348,9 @@ $(document).ready(function(){ ...@@ -331,3 +348,9 @@ $(document).ready(function(){
} }
}); });
}); });
$('.modal').on('focusout', '.new-email', function(e){
var el = $(this);
snf.modals.toggleEmailErrorSign(el);
});
...@@ -160,6 +160,10 @@ $(document).ready(function() { ...@@ -160,6 +160,10 @@ $(document).ready(function() {
if($modal.attr('data-type') === 'contact') { if($modal.attr('data-type') === 'contact') {
noError = snf.modals.validateContactForm($modal); noError = snf.modals.validateContactForm($modal);
} }
if($modal.attr('data-type') === 'modify_email') {
var validForm = snf.modals.validateModifyEmailForm($modal);
noError = noError && validForm;
}
if(!noError) { if(!noError) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
......
...@@ -713,6 +713,10 @@ $(document).ready(function() { ...@@ -713,6 +713,10 @@ $(document).ready(function() {
var validForm = snf.modals.validateContactForm($modal); var validForm = snf.modals.validateContactForm($modal);
noError = noError && validForm; noError = noError && validForm;
} }
if($modal.attr('data-type') === 'modify_email') {
var validForm = snf.modals.validateModifyEmailForm($modal);
noError = noError && validForm;
}
if(!noError) { if(!noError) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
......
...@@ -73,7 +73,6 @@ p.progress-area { ...@@ -73,7 +73,6 @@ p.progress-area {
border-color: $gray-dark; border-color: $gray-dark;
} }
} }
} }
.modal { .modal {
...@@ -249,5 +248,15 @@ p.progress-area { ...@@ -249,5 +248,15 @@ p.progress-area {
text-decoration: none; text-decoration: none;
} }
} }
.new-email {
&+.error-sign {
right: -25px;
top: 10px;
}
}
}
.info-list dd {
position: relative;
} }
} }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment