Support User: Improve UI feedback while switching is in progress

This change disables the 'Change user' button while the switching is in progress. Part of this change includes waiting until the token has been successfully received and the user information has been updated before altering the UI (including Masterbar color) to show that support user is active.
Automattic · Jan 11, 2016 · efbcdf8 · efbcdf8
1 parent 5b88883
commit efbcdf8
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 20 deletions.
diff --git a/client/components/support-user/dialog.jsx b/client/components/support-user/dialog.jsx
@@ -36,11 +36,13 @@ const SupportUserDialog = React.createClass( {
 		buttons = [
 			<FormButton
 				key="supportuser"
+				disabled={ this.props.isBusy }
 				onClick={ this.onChangeUser }>
-					Change user
+					{ this.props.isBusy ? 'Switching...' : 'Change user' }
 			</FormButton>,
 			<FormButton
 				key="cancel"
+				type="button"
 				isPrimary={ false }
 				onClick={ this.props.onCloseDialog }>
 					Cancel
@@ -56,11 +58,13 @@ const SupportUserDialog = React.createClass( {
 		buttons = [
 			<FormButton
 				key="restoreuser"
+				disabled={ this.props.isBusy }
 				onClick={ this.props.onRestoreUser }>
 					Restore user
 			</FormButton>,
 			<FormButton
 				key="cancel"
+				type="button"
 				isPrimary={ false }
 				onClick={ this.props.onCloseDialog }>
 					Cancel

diff --git a/client/components/support-user/index.jsx b/client/components/support-user/index.jsx
@@ -56,6 +56,7 @@ const SupportUser = React.createClass( {
 		return (
 			<SupportUserDialog
 				isVisible={ this.props.showDialog }
+				isBusy={ this.props.isTransitioning }
 				errorMessage={ this.props.errorMessage }
 				user={ this.props.userData }
 				isLoggedIn={ this.props.isSupportUser }
@@ -71,6 +72,7 @@ const SupportUser = React.createClass( {
 const mapStateToProps = ( state ) => {
 	return {
 		isSupportUser: state.support.isSupportUser,
+		isTransitioning: state.support.isTransitioning,
 		userData: state.support.userData,
 		showDialog: state.support.showDialog,
 		errorMessage: state.support.errorMessage

diff --git a/client/lib/user/user.js b/client/lib/user/user.js
@@ -238,13 +238,16 @@ User.prototype.set = function( attributes ) {
 	return changed;
 };
 
-User.prototype.changeUser = function( username, password, tokenErrorCallback ) {
+User.prototype.changeUser = function( username, password, callback, fnTokenError ) {
 	if ( config.isEnabled( 'support-user' ) ) {
-		wpcom.changeUser( username, password, function( error ) {
-			if ( ! error ) {
+		wpcom.changeUser( username, password, ( error ) => {
+			if ( error ) {
+				callback( error );
+			} else {
+				this.once( 'change', () => callback() );
 				this.fetch();
 			}
-		}.bind( this ), tokenErrorCallback );
+		}, fnTokenError );
 	} else {
 		return false;
 	}

diff --git a/client/state/support/actions.js b/client/state/support/actions.js
@@ -10,10 +10,13 @@ import {
 
 import User from 'lib/user';
 
-export function toggleSupportUserDialog( showAction ) {
+/**
+ * Toggles the visibility of the support user dialog
+ * @return {object} The action object
+ */
+export function toggleSupportUserDialog() {
 	return {
-		type: TOGGLE_SUPPORT_USER_DIALOG,
-		showAction
+		type: TOGGLE_SUPPORT_USER_DIALOG
 	};
 }
 
@@ -32,17 +35,24 @@ export function toggleSupportUserDialog( showAction ) {
  		} );
 
  		if ( supportUser && supportPassword ) {
- 			let user = new User();
- 			let userData = Object.assign( {}, user.data );
+			let user = new User();
 
  			user.clear();
  			user.changeUser(
  				supportUser,
  				supportPassword,
- 				( error ) => dispatch( deactivateSupportUser( error.message ) )
+ 				( error ) => {
+ 					if ( error ) {
+	 					dispatch( deactivateSupportUser( error.message ) );
+ 					} else {
+			 			let userData = Object.assign( {}, user.data );
+			 			dispatch( activateSupportUser( userData ) );
+ 					}
+ 				},
+ 				( tokenError ) => {
+ 					dispatch( deactivateSupportUser( tokenError.message ) );
+ 				}
  			);
-
- 			dispatch( activateSupportUser( userData ) );
  		}
  	}
  }

diff --git a/client/state/support/reducer.js b/client/state/support/reducer.js
@@ -64,9 +64,28 @@ function errorMessage( state = null, action ) {
 	return state;
 }
 
+/**
+ * True if currently in transition between normal and support user
+ * @param  {Boolean} state
+ * @param  {object}  action
+ * @return {Boolean}
+ */
+function isTransitioning( state = false, action ) {
+	switch ( action.type ) {
+		case FETCH_SUPPORT_USER_TOKEN:
+			return true;
+		case ACTIVATE_SUPPORT_USER:
+		case DEACTIVATE_SUPPORT_USER:
+			return false;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	isSupportUser,
 	userData,
 	showDialog,
-	errorMessage
+	errorMessage,
+	isTransitioning
 } );
diff --git a/shared/lib/wp/support.js b/shared/lib/wp/support.js
@@ -108,7 +108,7 @@ export default function wpcomSupport( wpcom ) {
 	const put = wpcom.req.put.bind( wpcom.req );
 
 	return Object.assign( wpcom, {
-		changeUser: function( username, password, fn, fnTokenError ) {
+		changeUser: function( username, password, callback, fnTokenError ) {
 			var args = {
 				apiVersion: '1.1',
 				path: '/internal/support/' + username + '/grant'
@@ -126,11 +126,7 @@ export default function wpcomSupport( wpcom ) {
 					supportToken = response.token;
 				}
 
-				if ( error && error.error === ERROR_INCORRECT_SUPPORT_PASSWORD ) {
-					fnTokenError( error );
-				}
-
-				fn( error, response );
+				callback( error, response );
 			} );
 		},
 		restoreUser: function() {