From aa2b008577fa9526bc3a041e10e36c8f1c27eb4e Mon Sep 17 00:00:00 2001
From: Morris Jobke <hey@morrisjobke.de>
Date: Mon, 20 Apr 2015 14:27:58 +0200
Subject: [PATCH] Add loading feedback for email change in user management

* show loading indicator while the request is running
* change value after the request succeed - not before and
  undo maybe wrong changes
* move markup to HTML template
* show notification temporarily
---
 settings/css/settings.css                  |  8 ++++++
 settings/js/users/users.js                 | 33 ++++++++++++++++------
 settings/templates/users/part.userlist.php |  2 +-
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 2e7b6d213a..edc4939d2d 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -194,6 +194,14 @@ span.usersLastLoginTooltip { white-space: nowrap; }
 	color: #000000;
 }
 
+#userlist .mailAddress .loading-small {
+	width: 16px;
+	height: 16px;
+	margin-left: -26px;
+	position: relative;
+	top: 3px;
+}
+
 tr:hover>td.password>span, tr:hover>td.displayName>span { margin:0; cursor:pointer; }
 tr:hover>td.remove>a, tr:hover>td.password>img,tr:hover>td.displayName>img, tr:hover>td.quota>img { visibility:visible; cursor:pointer; }
 td.remove {
diff --git a/settings/js/users/users.js b/settings/js/users/users.js
index 261d9a8eb5..9706ac9fbc 100644
--- a/settings/js/users/users.js
+++ b/settings/js/users/users.js
@@ -728,31 +728,46 @@ $(document).ready(function () {
 		var mailAddress = escapeHTML(UserList.getMailAddress($td));
 		var $input = $('<input type="text">').val(mailAddress);
 		$td.children('span').replaceWith($input);
+		$td.find('img').hide();
 		$input
 			.focus()
 			.keypress(function (event) {
 				if (event.keyCode === 13) {
-					$tr.data('mailAddress', $input.val());
-					$input.blur();
+					// enter key
+
+					var mailAddress = $input.val();
+					$td.find('.loading-small').css('display', 'inline-block');
+					$input.css('padding-right', '26px');
+					$input.attr('disabled', 'disabled');
 					$.ajax({
 						type: 'PUT',
 						url: OC.generateUrl('/settings/users/{id}/mailAddress', {id: uid}),
 						data: {
 							mailAddress: $(this).val()
 						}
-					}).fail(function (result) {
-						OC.Notification.show(result.responseJSON.data.message);
-						// reset the values
+					}).success(function () {
+						// set data attribute to new value
+						// will in blur() be used to show the text instead of the input field
 						$tr.data('mailAddress', mailAddress);
-						$tr.children('.mailAddress').children('span').text(mailAddress);
+						$td.find('.loading-small').css('display', '');
+						$input.removeAttr('disabled')
+							.triggerHandler('blur'); // needed instead of $input.blur() for Firefox
+					}).fail(function (result) {
+						OC.Notification.showTemporary(result.responseJSON.data.message);
+						$td.find('.loading-small').css('display', '');
+						$input.removeAttr('disabled')
+							.css('padding-right', '6px');
 					});
 				}
 			})
 			.blur(function () {
-				var mailAddress = $tr.data('mailAddress');
-				var $span = $('<span>').text(mailAddress);
-				$tr.data('mailAddress', mailAddress);
+				if($td.find('.loading-small').css('display') === 'inline-block') {
+					// in Chrome the blur event is fired too early by the browser - even if the request is still running
+					return;
+				}
+				var $span = $('<span>').text($tr.data('mailAddress'));
 				$input.replaceWith($span);
+				$td.find('img').show();
 			});
 	});
 
diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php
index 15b7cb4abd..697d0f3f14 100644
--- a/settings/templates/users/part.userlist.php
+++ b/settings/templates/users/part.userlist.php
@@ -34,7 +34,7 @@
 				src="<?php print_unescaped(image_path('core', 'actions/rename.svg'))?>"
 				alt="<?php p($l->t("set new password"))?>" title="<?php p($l->t("set new password"))?>"/>
 			</td>
-			<td class="mailAddress"><span></span> <img class="svg action"
+			<td class="mailAddress"><span></span><div class="loading-small hidden"></div> <img class="svg action"
 				src="<?php p(image_path('core', 'actions/rename.svg'))?>"
 				alt="<?php p($l->t('change email address'))?>" title="<?php p($l->t('change email address'))?>"/>
 			</td>