From 26aa58b242dd30c50c42c25b795cdd56206dee67 Mon Sep 17 00:00:00 2001
From: Olga Brani <olgabrani@grnet.gr>
Date: Wed, 1 Jun 2016 15:48:03 +0300
Subject: [PATCH] admin-ui: Client-side validation for 'modify e-mail'

---
 .../synnefo_admin/admin/static/js/common.js   | 29 +++++++++++++++++--
 .../synnefo_admin/admin/static/js/details.js  |  4 +++
 .../synnefo_admin/admin/static/js/tables.js   |  4 +++
 .../admin/static/sass/_modals.scss            | 11 ++++++-
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/snf-admin-app/synnefo_admin/admin/static/js/common.js b/snf-admin-app/synnefo_admin/admin/static/js/common.js
index 88a2eb94e..ee647159f 100644
--- a/snf-admin-app/synnefo_admin/admin/static/js/common.js
+++ b/snf-admin-app/synnefo_admin/admin/static/js/common.js
@@ -167,6 +167,23 @@ snf = {
 			}
 			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) {
 			var $modal = $(modal);
 			$modal.find('input').each(function() {
@@ -179,7 +196,7 @@ snf = {
 		},
 		html: {
 			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>',
 			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>',
@@ -193,7 +210,7 @@ snf = {
 			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>',
 			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 = {
 		}
 	},
 	timer: 0,
-	ajaxdelay: 400
+	ajaxdelay: 400,
 };
 
 function setThemeIcon() {
@@ -331,3 +348,9 @@ $(document).ready(function(){
         }
     });
 });
+
+$('.modal').on('focusout', '.new-email', function(e){
+  var el = $(this);
+  snf.modals.toggleEmailErrorSign(el);
+});
+
diff --git a/snf-admin-app/synnefo_admin/admin/static/js/details.js b/snf-admin-app/synnefo_admin/admin/static/js/details.js
index 4e77ab020..ebe03cfb9 100644
--- a/snf-admin-app/synnefo_admin/admin/static/js/details.js
+++ b/snf-admin-app/synnefo_admin/admin/static/js/details.js
@@ -160,6 +160,10 @@ $(document).ready(function() {
 		if($modal.attr('data-type') === 'contact') {
 			noError = snf.modals.validateContactForm($modal);
 		}
+		if($modal.attr('data-type') === 'modify_email') {
+			var validForm = snf.modals.validateModifyEmailForm($modal);
+			noError = noError && validForm;
+		}
 		if(!noError) {
 			e.preventDefault();
 			e.stopPropagation();
diff --git a/snf-admin-app/synnefo_admin/admin/static/js/tables.js b/snf-admin-app/synnefo_admin/admin/static/js/tables.js
index c84f1b569..6ff6e0b06 100644
--- a/snf-admin-app/synnefo_admin/admin/static/js/tables.js
+++ b/snf-admin-app/synnefo_admin/admin/static/js/tables.js
@@ -713,6 +713,10 @@ $(document).ready(function() {
 			var validForm = snf.modals.validateContactForm($modal);
 			noError = noError && validForm;
 		}
+		if($modal.attr('data-type') === 'modify_email') {
+			var validForm = snf.modals.validateModifyEmailForm($modal);
+			noError = noError && validForm;
+		}
 		if(!noError) {
 			e.preventDefault();
 			e.stopPropagation();
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_modals.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_modals.scss
index 7207d8b67..dbea862c7 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_modals.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_modals.scss
@@ -73,7 +73,6 @@ p.progress-area {
 			border-color: $gray-dark;
 		}
 	}
-
 }
 
 .modal {
@@ -249,5 +248,15 @@ p.progress-area {
                 text-decoration: none;
             }
         }
+        .new-email {
+            &+.error-sign {
+                right: -25px;
+                top: 10px;
+            }
+        }
+
+    }
+    .info-list dd {
+        position: relative;
     }
 }
-- 
GitLab