Support User: Add SupportUser component.

assets/stylesheets/_components.scss

@@ -65,6 +65,7 @@
 @import 'components/sites-dropdown/style';
 @import 'components/sites-popover/style';
 @import 'components/spinner/style';
+@import 'components/support-user/style';
 @import 'components/stat-update-indicator/style';
 @import 'components/sticky-panel/style';
 @import 'components/theme/style';

client/components/support-user/README.md

@@ -0,0 +1,3 @@
+Support User
+=============
+This component is used to provide user support. 

client/components/support-user/dialog.jsx

@@ -0,0 +1,147 @@
+/**
+ * External Dependencies
+ */
+import React from 'react';
+import LinkedStateMixin from 'react-addons-linked-state-mixin';
+
+/**
+ * Internal Dependencies
+ */
+import Dialog from 'components/dialog';
+import FormButton from 'components/forms/form-button';
+import FormFieldset from 'components/forms/form-fieldset';
+import FormLabel from 'components/forms/form-label';
+import FormTextInput from 'components/forms/form-text-input';
+import FormPasswordInput from 'components/forms/form-password-input';
+import Gravatar from 'components/gravatar';
+
+const SupportUserDialog = React.createClass( {
+
+	mixins: [ LinkedStateMixin ],
+
+	getInitialState() {
+		return {
+			supportUser: '',
+			supportPassword: ''
+		}
+	},
+
+	onChangeUser() {
+		this.props.onChangeUser( this.state.supportUser, this.state.supportPassword );
+	},
+
+	getButtonsLoggedOut() {
+		var buttons;
+
+		buttons = [
+			<FormButton
+				key="supportuser"
+				disabled={ this.props.isBusy }
+				onClick={ this.onChangeUser }>
+					{ this.props.isBusy ? 'Switching...' : 'Change user' }
+			</FormButton>,
+			<FormButton
+				key="cancel"
+				type="button"
+				isPrimary={ false }
+				onClick={ this.props.onCloseDialog }>
+					Cancel
+			</FormButton>
+		];
+
+		return buttons;
+	},
+
+	getButtonsLoggedIn() {
+		var buttons;
+
+		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
+			</FormButton>
+		];
+
+		return buttons;
+	},
+
+	/**
+	 * The logged in dialog shows a button to log out (restore user)
+	 */
+	renderLoggedIn() {
+		return (
+			<Dialog
+				isVisible={ this.props.isVisible }
+				onClose={ this.onCloseDialog }
+				buttons={ this.getButtonsLoggedIn() }
+				additionalClassNames="support-user__dialog"
+			>
+				<FormFieldset>
+				<div className="support-user__people-profile">
+					<div className="support-user__gravatar">
+						<Gravatar user={ this.props.user } size={ 96 } />
+					</div>
+					<div className="support-user__detail">
+						<div className="support-user__username">
+							{ this.props.user && this.props.user.display_name }
+						</div>
+						<div className="support-user__login">
+							<span>@{ this.props.user && this.props.user.username }</span>
+						</div>
+					</div>
+				</div>
+				</FormFieldset>
+			</Dialog>
+		);
+	},
+
+	/**
+	 * The logged out dialog shows a log in form
+	 */
+	renderLoggedOut() {
+		return (
+			<Dialog
+				isVisible={ this.props.isVisible }
+				onClose={ this.props.onCloseDialog }
+				buttons={ this.getButtonsLoggedOut() }
+				additionalClassNames="support-user__dialog">
+				<h2 className="support-user__heading">Support user</h2>
+				{ this.props.errorMessage &&
+					<h3 className="support-user__error">{ this.props.errorMessage }</h3>
+				}
+				<FormFieldset>
+					<FormLabel>
+						<span>Username</span>
+						<FormTextInput
+							name="supportUser"
+							id="supportUser"
+							valueLink={ this.linkState( 'supportUser' ) } />
+					</FormLabel>
+
+					<FormLabel>
+						<span>User support password</span>
+						<FormPasswordInput
+							name="supportPassword"
+							id="supportPassword"
+							valueLink={ this.linkState( 'supportPassword' ) } />
+					</FormLabel>
+				</FormFieldset>
+			</Dialog>
+		);
+	},
+
+	render() {
+		return ( this.props.isLoggedIn ? this.renderLoggedIn() : this.renderLoggedOut() );
+	}
+} );
+
+export default SupportUserDialog;

client/components/support-user/index.jsx

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import observe from 'lib/mixins/data-observe';
+import userSettings from 'lib/user-settings';
+import KeyboardShortcuts from 'lib/keyboard-shortcuts';
+import SupportUserDialog from './dialog';
+
+import { 
+	activateSupportUser, 
+	deactivateSupportUser,
+	fetchSupportUserToken,
+	restoreSupportUser,
+	toggleSupportUserDialog
+} from 'state/support/actions';
+
+const SupportUser = React.createClass( {
+	displayName: 'SupportUser',
+
+	mixins: [ observe( 'userSettings' ) ],
+
+	componentDidMount: function() {
+		KeyboardShortcuts.on( 'open-support-user', this.toggleShowDialog );
+	},
+
+	componentWillUnmount: function() {
+		KeyboardShortcuts.off( 'open-support-user', this.toggleShowDialog );
+	},
+
+	isEnabled: function() {
+		if ( this.props.isSupportUser ) {
+			return true;
+		}
+
+		if ( ! userSettings.hasSettings() ) {
+			userSettings.fetchSettings();
+			return false;
+		}
+		return ! userSettings.getSetting( 'user_login_can_be_changed' );
+	},
+
+	toggleShowDialog: function() {
+		if ( this.isEnabled() ) {
+			this.props.toggleSupportUserDialog();
+		}
+	},
+
+	render: function() {
+		return (
+			<SupportUserDialog
+				isVisible={ this.props.showDialog }
+				isBusy={ this.props.isTransitioning }
+				errorMessage={ this.props.errorMessage }
+				user={ this.props.userData }
+				isLoggedIn={ this.props.isSupportUser }
+
+				onCloseDialog={ this.props.toggleSupportUserDialog }
+				onChangeUser={ this.props.fetchSupportUserToken }
+				onRestoreUser={ this.props.restoreSupportUser }
+			/>
+		);
+	}
+} );
+
+const mapStateToProps = ( state ) => {
+	return {
+		isSupportUser: state.support.isSupportUser,
+		isTransitioning: state.support.isTransitioning,
+		userData: state.support.userData,
+		showDialog: state.support.showDialog,
+		errorMessage: state.support.errorMessage
+	}
+}
+
+const mapDispatchToProps = ( dispatch ) => {
+	return {
+		activateSupportUser: compose( dispatch, activateSupportUser ),
+		deactivateSupportUser: compose( dispatch, deactivateSupportUser ),
+		fetchSupportUserToken: compose( dispatch, fetchSupportUserToken ),
+		restoreSupportUser: compose( dispatch, restoreSupportUser ),
+		toggleSupportUserDialog: compose( dispatch, toggleSupportUserDialog ),
+	}
+}
+
+export default connect( mapStateToProps, mapDispatchToProps )( SupportUser );

client/components/support-user/style.scss

@@ -0,0 +1,47 @@
+.support-user__dialog.dialog.card {
+	min-width: 380px;
+}
+.support-user__heading {
+	font-size: 21px;
+	font-weight: 300;
+	line-height: 32px;
+	margin-bottom: 15px;
+}
+
+.support-user__people-profile {
+	position: relative;
+	margin-top: -8px;
+	padding-bottom: 16px;
+	@include clear-fix;
+}
+
+.support-user__gravatar {
+	float: left;
+}
+
+.support-user__gravatar .gravatar {
+	width: 72px !important;
+	height: 72px !important;
+	display: block;
+}
+
+.support-user__detail {
+	margin-left: 96px;
+	padding-top: 12px;
+}
+
+.support-user__username {
+	font-family: $serif;
+	color: $gray-dark;
+	font-size: 21px;
+	font-weight: 700;
+	white-space: pre;
+	text-overflow: clip;
+	overflow: hidden;
+}
+
+.support-user__login {
+	color: $gray-dark;
+	font-size: 15px;
+	margin-top: -3px;
+}

client/layout/index.jsx

@@ -26,12 +26,17 @@ var MasterbarLoggedIn = require( 'layout/masterbar/logged-in' ),
 	SitesListNotices = require( 'lib/sites-list/notices' ),
 	PollerPool = require( 'lib/data-poller' ),
 	KeyboardShortcutsMenu,
+	SupportUser,
 	Layout;
 
 if ( config.isEnabled( 'keyboard-shortcuts' ) ) {
 	KeyboardShortcutsMenu = require( 'lib/keyboard-shortcuts/menu' );
 }
 
+if ( config.isEnabled( 'support-user' ) ) {
+	SupportUser = require( 'components/support-user' );
+}
+
 Layout = React.createClass( {
 	displayName: 'Layout',
 
@@ -95,7 +100,12 @@ Layout = React.createClass( {
 		return (
 			<div className={ sectionClass }>
 				{ config.isEnabled( 'keyboard-shortcuts' ) ? <KeyboardShortcutsMenu /> : null }
-				<MasterbarLoggedIn user={ this.props.user } section={ this.props.section } sites={ this.props.sites } />
+				{ config.isEnabled( 'support-user' ) ? <SupportUser /> : null }
+				<MasterbarLoggedIn
+					user={ this.props.user }
+					section={ this.props.section }
+					sites={ this.props.sites }
+					isSupportUser={ config.isEnabled( 'support-user' ) && this.props.isSupportUser } />
 				<div className={ loadingClass } ><PulsingDot active={ this.props.isLoading } /></div>
 				<div id="content" className="wp-content">
 					<Welcome isVisible={ showWelcome } closeAction={ this.closeWelcome } additionalClassName="NuxWelcome">
@@ -119,6 +129,8 @@ Layout = React.createClass( {
 export default connect(
 	( state ) => {
 		const { isLoading, section, hasSidebar } = state.ui;
-		return { isLoading, section, hasSidebar };
+		const isSupportUser = state.support.isSupportUser;
+
+		return { isLoading, section, hasSidebar, isSupportUser };
 	}
 )( Layout );

client/layout/masterbar/logged-in.jsx

@@ -60,7 +60,7 @@ export default React.createClass( {
 
 	render() {
 		return (
-			<Masterbar>
+			<Masterbar className={ this.props.isSupportUser ? 'masterbar__support-user' : null }>
 				<Stats
 					icon={ this.wordpressIcon() }
 					onClick={ this.clickMySites }

client/layout/masterbar/masterbar.jsx

@@ -4,9 +4,10 @@
  * External dependencies
  */
 import React from 'react';
+import classNames from 'classnames';
 
-const Masterbar = ( { children } ) => (
-	<header id="header" className="masterbar">
+const Masterbar = ( { children, className } ) => (
+	<header id="header" className={ classNames( 'masterbar', className ) }>
 		{ children }
 	</header>
 );

client/layout/masterbar/style.scss

@@ -188,6 +188,14 @@ $autobar-height: 20px;
 	}
 }
 
+.masterbar__support-user {
+	background-color: $orange-jazzy;
+
+	.masterbar__item.is-active {
+		background-color: darken( $orange-jazzy, 10% );
+	}
+}
+
 @keyframes bubble-unread-indication {
 	30% {
 		transform: scale(1.5);

client/lib/keyboard-shortcuts/key-bindings.js

@@ -126,6 +126,14 @@ KeyBindings.prototype.get = function() {
 					keys: [ 'n' ],
 					text: i18n.translate( 'Open Notifications' )
 				}
+			},
+			{
+				eventName: 'open-support-user',
+				keys: [ 's', 'u' ],
+				description: {
+					keys: [],
+					text: '',
+				}
 			}
 		],