Merging from master

26 files changed, 460 insertions, 314 deletions

diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 74d6c64e3..2c944913f 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -81,6 +81,7 @@ export default class ActivityLogModal extends React.Component {
             const currentSession = this.state.sessions[i];
             const lastAccessTime = new Date(currentSession.last_activity_at);
             const firstAccessTime = new Date(currentSession.create_at);
+            let devicePlatform = currentSession.props.platform;
             let devicePicture = '';
 
             if (currentSession.props.platform === 'Windows') {
@@ -88,7 +89,12 @@ export default class ActivityLogModal extends React.Component {
             } else if (currentSession.props.platform === 'Macintosh' || currentSession.props.platform === 'iPhone') {
                 devicePicture = 'fa fa-apple';
             } else if (currentSession.props.platform === 'Linux') {
-                devicePicture = 'fa fa-linux';
+                if (currentSession.props.os.indexOf('Android') >= 0) {
+                    devicePlatform = 'Android';
+                    devicePicture = 'fa fa-android';
+                } else {
+                    devicePicture = 'fa fa-linux';
+                }
             }
 
             let moreInfo;
@@ -119,7 +125,7 @@ export default class ActivityLogModal extends React.Component {
                     className='activity-log__table'
                 >
                     <div className='activity-log__report'>
-                        <div className='report__platform'><i className={devicePicture} />{currentSession.props.platform}</div>
+                        <div className='report__platform'><i className={devicePicture} />{devicePlatform}</div>
                         <div className='report__info'>
                             <div>{`Last activity: ${lastAccessTime.toDateString()}, ${lastAccessTime.toLocaleTimeString()}`}</div>
                             {moreInfo}
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx
index f2fb8ac78..f770d166c 100644
--- a/web/react/components/admin_console/admin_controller.jsx
+++ b/web/react/components/admin_console/admin_controller.jsx
@@ -40,9 +40,13 @@ export default class AdminController extends React.Component {
             config: AdminStore.getConfig(),
             teams: AdminStore.getAllTeams(),
             selectedTeams,
-            selected: 'service_settings',
-            selectedTeam: null
+            selected: props.tab || 'service_settings',
+            selectedTeam: props.teamId || null
         };
+
+        if (!props.tab) {
+            history.replaceState(null, null, `/admin_console/${this.state.selected}`);
+        }
     }
 
     componentDidMount() {
@@ -142,7 +146,9 @@ export default class AdminController extends React.Component {
             } else if (this.state.selected === 'service_settings') {
                 tab = <ServiceSettingsTab config={this.state.config} />;
             } else if (this.state.selected === 'team_users') {
-                tab = <TeamUsersTab team={this.state.teams[this.state.selectedTeam]} />;
+                if (this.state.teams) {
+                    tab = <TeamUsersTab team={this.state.teams[this.state.selectedTeam]} />;
+                }
             }
         }
 
diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx
index 4c2a473b6..b0e01ff17 100644
--- a/web/react/components/admin_console/admin_sidebar.jsx
+++ b/web/react/components/admin_console/admin_sidebar.jsx
@@ -24,6 +24,7 @@ export default class AdminSidebar extends React.Component {
     handleClick(name, teamId, e) {
         e.preventDefault();
         this.props.selectTab(name, teamId);
+        history.pushState({name: name, teamId: teamId}, null, `/admin_console/${name}/${teamId || ''}`);
     }
 
     isSelected(name, teamId) {
@@ -53,6 +54,9 @@ export default class AdminSidebar extends React.Component {
     }
 
     componentDidMount() {
+        if ($(window).width() > 768) {
+            $('.nav-pills__container').perfectScrollbar();
+        }
     }
 
     showTeamSelect(e) {
diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx
index 01759b222..40e00ff04 100644
--- a/web/react/components/admin_console/email_settings.jsx
+++ b/web/react/components/admin_console/email_settings.jsx
@@ -440,9 +440,11 @@ export default class EmailSettings extends React.Component {
                                     className='table table-bordered'
                                     cellPadding='5'
                                 >
-                                    <tr><td className='help-text'>{'None'}</td><td className='help-text'>{'Mattermost will send email over an unsecure connection.'}</td></tr>
-                                    <tr><td className='help-text'>{'TLS'}</td><td className='help-text'>{'Encrypts the communication between Mattermost and your email server.'}</td></tr>
-                                    <tr><td className='help-text'>{'STARTTLS'}</td><td className='help-text'>{'Takes an existing insecure connection and attempts to upgrade it to a secure connection using TLS.'}</td></tr>
+                                    <tbody>
+                                        <tr><td className='help-text'>{'None'}</td><td className='help-text'>{'Mattermost will send email over an unsecure connection.'}</td></tr>
+                                        <tr><td className='help-text'>{'TLS'}</td><td className='help-text'>{'Encrypts the communication between Mattermost and your email server.'}</td></tr>
+                                        <tr><td className='help-text'>{'STARTTLS'}</td><td className='help-text'>{'Takes an existing insecure connection and attempts to upgrade it to a secure connection using TLS.'}</td></tr>
+                                    </tbody>
                                 </table>
                             </div>
                             <div className='help-text'>
diff --git a/web/react/components/admin_console/log_settings.jsx b/web/react/components/admin_console/log_settings.jsx
index 931818bb8..7e9eda89b 100644
--- a/web/react/components/admin_console/log_settings.jsx
+++ b/web/react/components/admin_console/log_settings.jsx
@@ -249,22 +249,24 @@ export default class LogSettings extends React.Component {
                                 onChange={this.handleChange}
                                 disabled={!this.state.fileEnable}
                             />
-                            <p className='help-text'>
+                            <div className='help-text'>
                                 {'Format of log message output. If blank will be set to "[%D %T] [%L] %M", where:'}
                                 <div className='help-text'>
                                     <table
                                         className='table table-bordered'
                                         cellPadding='5'
                                     >
-                                        <tr><td className='help-text'>{'%T'}</td><td className='help-text'>{'Time (15:04:05 MST)'}</td></tr>
-                                        <tr><td className='help-text'>{'%D'}</td><td className='help-text'>{'Date (2006/01/02)'}</td></tr>
-                                        <tr><td className='help-text'>{'%d'}</td><td className='help-text'>{'Date (01/02/06)'}</td></tr>
-                                        <tr><td className='help-text'>{'%L'}</td><td className='help-text'>{'Level (DEBG, INFO, EROR)'}</td></tr>
-                                        <tr><td className='help-text'>{'%S'}</td><td className='help-text'>{'Source'}</td></tr>
-                                        <tr><td className='help-text'>{'%M'}</td><td className='help-text'>{'Message'}</td></tr>
+                                        <tbody>
+                                            <tr><td className='help-text'>{'%T'}</td><td className='help-text'>{'Time (15:04:05 MST)'}</td></tr>
+                                            <tr><td className='help-text'>{'%D'}</td><td className='help-text'>{'Date (2006/01/02)'}</td></tr>
+                                            <tr><td className='help-text'>{'%d'}</td><td className='help-text'>{'Date (01/02/06)'}</td></tr>
+                                            <tr><td className='help-text'>{'%L'}</td><td className='help-text'>{'Level (DEBG, INFO, EROR)'}</td></tr>
+                                            <tr><td className='help-text'>{'%S'}</td><td className='help-text'>{'Source'}</td></tr>
+                                            <tr><td className='help-text'>{'%M'}</td><td className='help-text'>{'Message'}</td></tr>
+                                        </tbody>
                                     </table>
                                 </div>
-                            </p>
+                            </div>
                         </div>
                     </div>
 
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index 7582de6c4..1b709336f 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -4,7 +4,6 @@
 const ChannelStore = require('../stores/channel_store.jsx');
 const UserStore = require('../stores/user_store.jsx');
 const PostStore = require('../stores/post_store.jsx');
-const SocketStore = require('../stores/socket_store.jsx');
 const NavbarSearchBox = require('./search_bar.jsx');
 const AsyncClient = require('../utils/async_client.jsx');
 const Client = require('../utils/client.jsx');
@@ -25,7 +24,6 @@ export default class ChannelHeader extends React.Component {
         super(props);
 
         this.onListenerChange = this.onListenerChange.bind(this);
-        this.onSocketChange = this.onSocketChange.bind(this);
         this.handleLeave = this.handleLeave.bind(this);
         this.searchMentions = this.searchMentions.bind(this);
 
@@ -45,7 +43,6 @@ export default class ChannelHeader extends React.Component {
         ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
         PostStore.addSearchChangeListener(this.onListenerChange);
         UserStore.addChangeListener(this.onListenerChange);
-        SocketStore.addChangeListener(this.onSocketChange);
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onListenerChange);
@@ -60,16 +57,9 @@ export default class ChannelHeader extends React.Component {
         }
         $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}});
     }
-    onSocketChange(msg) {
-        if (msg.action === 'new_user' ||
-            msg.action === 'user_added' ||
-            (msg.action === 'user_removed' && msg.user_id !== UserStore.getCurrentId())) {
-            AsyncClient.getChannelExtraInfo(true);
-        }
-    }
     handleLeave() {
         Client.leaveChannel(this.state.channel.id,
-            function handleLeaveSuccess() {
+            () => {
                 AppDispatcher.handleViewAction({
                     type: ActionTypes.LEAVE_CHANNEL,
                     id: this.state.channel.id
@@ -77,8 +67,8 @@ export default class ChannelHeader extends React.Component {
 
                 const townsquare = ChannelStore.getByName('town-square');
                 Utils.switchChannel(townsquare);
-            }.bind(this),
-            function handleLeaveError(err) {
+            },
+            (err) => {
                 AsyncClient.dispatchError(err, 'handleLeave');
             }
         );
diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx
index 90d9696e7..b259b3c18 100644
--- a/web/react/components/edit_post_modal.jsx
+++ b/web/react/components/edit_post_modal.jsx
@@ -70,7 +70,7 @@ export default class EditPostModal extends React.Component {
             refocusId: options.refocusId || ''
         });
 
-        $(React.findDOMNode(this.refs.modal)).modal('show');
+        $(ReactDOM.findDOMNode(this.refs.modal)).modal('show');
     }
     componentDidMount() {
         var self = this;
@@ -92,7 +92,7 @@ export default class EditPostModal extends React.Component {
             $('#edit_textbox').get(0).focus();
         });
 
-        $(React.findDOMNode(this.refs.modal)).on('hide.bs.modal', function onShown() {
+        $(ReactDOM.findDOMNode(this.refs.modal)).on('hide.bs.modal', function onShown() {
             if (self.state.refocusId !== '') {
                 setTimeout(() => {
                     $(self.state.refocusId).get(0).focus();
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index a20c5cad5..a0084ad30 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -83,7 +83,7 @@ export default class MoreChannels extends React.Component {
                 moreChannels = <LoadingScreen />;
             } else if (channels.length) {
                 moreChannels = (
-                    <table className='more-channel-table table'>
+                    <table className='more-table table'>
                         <tbody>
                             {channels.map(function cMap(channel, index) {
                                 var joinButton;
@@ -108,8 +108,8 @@ export default class MoreChannels extends React.Component {
                                 return (
                                     <tr key={channel.id}>
                                         <td>
-                                            <p className='more-channel-name'>{channel.display_name}</p>
-                                            <p className='more-channel-description'>{channel.description}</p>
+                                            <p className='more-name'>{channel.display_name}</p>
+                                            <p className='more-description'>{channel.description}</p>
                                         </td>
                                         <td className='td--action'>
                                             {joinButton}
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 08b64de8b..105199035 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -140,12 +140,12 @@ export default class MoreDirectChannels extends React.Component {
         if (user.nickname) {
             const separator = fullName ? ' - ' : '';
             details.push(
-                <span
+                <p
                     key={`${user.nickname}__nickname`}
-                    className='nickname'
+                    className='more-description'
                 >
                     {separator + user.nickname}
-                </span>
+                </p>
             );
         }
 
@@ -170,31 +170,38 @@ export default class MoreDirectChannels extends React.Component {
         }
 
         return (
-            <li
-                key={user.id}
-                className='direct-channel'
-            >
-                <div className='col-xs-1 image-div'>
+            <tr>
+                <td
+                    key={user.id}
+                    className='direct-channel'
+                >
                     <img
-                        className='profile-image'
+                        className='profile-img pull-left'
+                        width='38'
+                        height='38'
                         src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
                     />
-                </div>
-                <div className='col-xs-9'>
-                    <div className='username'>
+                    <div className='more-name'>
                         {user.username}
                     </div>
-                    <div>
-                        {details}
-                    </div>
-                </div>
-                <div className='col-xs-2 btn-div'>
+                    {details}
+                </td>
+                <td className='td--action lg'>
                     {joinButton}
-                </div>
-            </li>
+                </td>
+            </tr>
         );
     }
 
+    componentDidUpdate(prevProps) {
+        if (!prevProps.show && this.props.show) {
+            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
+            if ($(window).width() > 768) {
+                $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
+            }
+        }
+    }
+
     render() {
         if (!this.props.show) {
             return null;
@@ -213,7 +220,7 @@ export default class MoreDirectChannels extends React.Component {
         const userEntries = users.map(this.createRowForUser);
 
         if (userEntries.length === 0) {
-            userEntries.push(<li key='no-users-found'>{'No users found :('}</li>);
+            userEntries.push(<tr key='no-users-found'><td>{'No users found :('}</td></tr>);
         }
 
         let memberString = 'Member';
@@ -232,26 +239,35 @@ export default class MoreDirectChannels extends React.Component {
             <Modal
                 className='modal-direct-channels'
                 show={this.props.show}
-                bsSize='large'
                 onHide={this.handleHide}
             >
                 <Modal.Header closeButton={true}>
-                    <Modal.Title>{'More Direct Messages'}</Modal.Title>
+                    <Modal.Title>{'Team Directory'}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <div>
-                        <input
-                            ref='filter'
-                            className='form-control filter-textbox'
-                            placeholder='Search members'
-                            onInput={this.handleFilterChange}
-                            style={{width: '200px', display: 'inline'}}
-                        />
-                        <span className='member-count pull-right'>{count}</span>
+                    <div className='row filter-row'>
+                        <div className='col-sm-6'>
+                            <input
+                                ref='filter'
+                                className='form-control filter-textbox'
+                                placeholder='Search members'
+                                onInput={this.handleFilterChange}
+                            />
+                        </div>
+                        <div className='col-sm-6'>
+                            <span className='member-count'>{count}</span>
+                        </div>
+                    </div>
+                    <div
+                        ref='userList'
+                        className='user-list'
+                    >
+                        <table className='more-table table'>
+                            <tbody>
+                                {userEntries}
+                            </tbody>
+                        </table>
                     </div>
-                    <ul className='user-list'>
-                        {userEntries}
-                    </ul>
                 </Modal.Body>
                 <Modal.Footer>
                     <button
diff --git a/web/react/components/msg_typing.jsx b/web/react/components/msg_typing.jsx
index 569942390..1bd23c55c 100644
--- a/web/react/components/msg_typing.jsx
+++ b/web/react/components/msg_typing.jsx
@@ -1,8 +1,11 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var SocketStore = require('../stores/socket_store.jsx');
-var UserStore = require('../stores/user_store.jsx');
+const SocketStore = require('../stores/socket_store.jsx');
+const UserStore = require('../stores/user_store.jsx');
+
+const Constants = require('../utils/constants.jsx');
+const SocketEvents = Constants.SocketEvents;
 
 export default class MsgTyping extends React.Component {
     constructor(props) {
@@ -33,9 +36,9 @@ export default class MsgTyping extends React.Component {
     }
 
     onChange(msg) {
-        if (msg.action === 'typing' &&
-            this.props.channelId === msg.channel_id &&
-            this.props.parentId === msg.props.parent_id) {
+        if (msg.action === SocketEvents.TYPING &&
+                this.props.channelId === msg.channel_id &&
+                this.props.parentId === msg.props.parent_id) {
             this.lastTime = new Date().getTime();
 
             var username = 'Someone';
@@ -52,7 +55,7 @@ export default class MsgTyping extends React.Component {
                     }
                 }.bind(this), 3000);
             }
-        } else if (msg.action === 'posted' && msg.channel_id === this.props.channelId) {
+        } else if (msg.action === SocketEvents.POSTED && msg.channel_id === this.props.channelId) {
             this.setState({text: ''});
         }
     }
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 16ae693fa..155e88600 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -35,13 +35,20 @@ export default class PopoverListMembers extends React.Component {
         const teamMembers = UserStore.getProfilesUsernameMap();
 
         if (members && teamMembers) {
-            members.sort(function compareByLocal(a, b) {
+            members.sort((a, b) => {
                 return a.username.localeCompare(b.username);
             });
 
-            members.forEach(function addMemberElement(m) {
+            members.forEach((m, i) => {
                 if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) {
-                    popoverHtml.push(<div className='text--nowrap'>{m.username}</div>);
+                    popoverHtml.push(
+                        <div
+                            className='text--nowrap'
+                            key={'popover-member-' + i}
+                        >
+                            {m.username}
+                        </div>
+                    );
                     count++;
                 }
             });
@@ -57,8 +64,15 @@ export default class PopoverListMembers extends React.Component {
             <OverlayTrigger
                 trigger='click'
                 placement='bottom'
-                rootClose='true'
-                overlay={<Popover title='Members'>{popoverHtml}</Popover>}
+                rootClose={true}
+                overlay={
+                    <Popover
+                        title='Members'
+                        id='member-list-popover'
+                    >
+                        {popoverHtml}
+                    </Popover>
+                }
             >
             <div id='member_popover'>
                 <div>
diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index 3a82ff9bc..ae94bd42e 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -116,7 +116,7 @@ export default class PostBody extends React.Component {
             }
             var metadata = data.items[0].snippet;
             this.receivedYoutubeData = true;
-            this.setState({youtubeUploader: metadata.channelTitle, youtubeTitle: metadata.title});
+            this.setState({youtubeTitle: metadata.title});
         }
 
         if (global.window.mm_config.GoogleDeveloperKey && !this.receivedYoutubeData) {
@@ -134,18 +134,12 @@ export default class PostBody extends React.Component {
             header = header + ' - ';
         }
 
-        let uploader = this.state.youtubeUploader;
-        if (!uploader) {
-            uploader = 'unknown';
-        }
-
         return (
             <div className='post-comment'>
                 <h4>
                     <span className='video-type'>{header}</span>
                     <span className='video-title'><a href={link}>{this.state.youtubeTitle}</a></span>
                 </h4>
-                <h4 className='video-uploader'>{uploader}</h4>
                 <div
                     className='video-div embed-responsive-item'
                     id={youtubeId}
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index a95095ff6..36260d77c 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -150,7 +150,7 @@ export default class PostInfo extends React.Component {
             <ul className='post-header post-info'>
                 <li className='post-header-col'>
                     <OverlayTrigger
-                        delayShow='500'
+                        delayShow={500}
                         container={this}
                         placement='top'
                         overlay={tooltip}
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 29728d368..4402745e1 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -1,20 +1,24 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var PostStore = require('../stores/post_store.jsx');
-var ChannelStore = require('../stores/channel_store.jsx');
-var UserStore = require('../stores/user_store.jsx');
-var PreferenceStore = require('../stores/preference_store.jsx');
-var UserProfile = require('./user_profile.jsx');
-var AsyncClient = require('../utils/async_client.jsx');
-var Post = require('./post.jsx');
-var LoadingScreen = require('./loading_screen.jsx');
-var SocketStore = require('../stores/socket_store.jsx');
-var utils = require('../utils/utils.jsx');
-var Client = require('../utils/client.jsx');
-var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
-var Constants = require('../utils/constants.jsx');
-var ActionTypes = Constants.ActionTypes;
+const Post = require('./post.jsx');
+const UserProfile = require('./user_profile.jsx');
+const AsyncClient = require('../utils/async_client.jsx');
+const LoadingScreen = require('./loading_screen.jsx');
+
+const PostStore = require('../stores/post_store.jsx');
+const ChannelStore = require('../stores/channel_store.jsx');
+const UserStore = require('../stores/user_store.jsx');
+const SocketStore = require('../stores/socket_store.jsx');
+const PreferenceStore = require('../stores/preference_store.jsx');
+
+const utils = require('../utils/utils.jsx');
+const Client = require('../utils/client.jsx');
+const Constants = require('../utils/constants.jsx');
+const ActionTypes = Constants.ActionTypes;
+const SocketEvents = Constants.SocketEvents;
+
+const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 
 export default class PostList extends React.Component {
     constructor(props) {
@@ -58,7 +62,7 @@ export default class PostList extends React.Component {
                     }
                 }
 
-                postList.order.sort(function postSort(a, b) {
+                postList.order.sort((a, b) => {
                     if (postList.posts[a].create_at > postList.posts[b].create_at) {
                         return -1;
                     }
@@ -82,7 +86,7 @@ export default class PostList extends React.Component {
         }
 
         return {
-            postList: postList
+            postList
         };
     }
     componentDidMount() {
@@ -263,14 +267,14 @@ export default class PostList extends React.Component {
         Client.getPosts(
             id,
             PostStore.getLatestUpdate(id),
-            function success() {
+            () => {
                 this.loadInProgress = false;
                 this.setState({isFirstLoadComplete: true});
-            }.bind(this),
-            function fail() {
+            },
+            () => {
                 this.loadInProgress = false;
                 this.setState({isFirstLoadComplete: true});
-            }.bind(this)
+            }
         );
     }
     onChange() {
@@ -281,28 +285,16 @@ export default class PostList extends React.Component {
         }
     }
     onSocketChange(msg) {
-        var post;
-        if (msg.action === 'posted' || msg.action === 'post_edited') {
-            post = JSON.parse(msg.props.post);
-            PostStore.storePost(post);
-        } else if (msg.action === 'post_deleted') {
+        if (msg.action === SocketEvents.POST_DELETED) {
             var activeRoot = $(document.activeElement).closest('.comment-create-body')[0];
             var activeRootPostId = '';
             if (activeRoot && activeRoot.id.length > 0) {
                 activeRootPostId = activeRoot.id;
             }
 
-            post = JSON.parse(msg.props.post);
-
-            PostStore.storeUnseenDeletedPost(post);
-            PostStore.removePost(post, true);
-            PostStore.emitChange();
-
             if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() !== msg.user_id) {
                 $('#post_deleted').modal('show');
             }
-        } else if (msg.action === 'new_user') {
-            AsyncClient.getProfiles();
         }
     }
     onTimeChange() {
@@ -352,7 +344,7 @@ export default class PostList extends React.Component {
                         data-title={channel.display_name}
                         data-channelid={channel.id}
                     >
-                        <i className='fa fa-pencil'></i>Set a description
+                        <i className='fa fa-pencil'></i>{'Set a description'}
                     </a>
                 </div>
             );
diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx
index 402e64080..d3a4cfaeb 100644
--- a/web/react/components/rhs_comment.jsx
+++ b/web/react/components/rhs_comment.jsx
@@ -29,7 +29,7 @@ export default class RhsComment extends React.Component {
 
         var post = this.props.post;
         Client.createPost(post, post.channel_id,
-            function success(data) {
+            (data) => {
                 AsyncClient.getPosts(post.channel_id);
 
                 var channel = ChannelStore.get(post.channel_id);
@@ -43,11 +43,11 @@ export default class RhsComment extends React.Component {
                     post: data
                 });
             },
-            function fail() {
+            () => {
                 post.state = Constants.POST_FAILED;
                 PostStore.updatePendingPost(post);
                 this.forceUpdate();
-            }.bind(this)
+            }
         );
 
         post.state = Constants.POST_LOADING;
@@ -84,7 +84,10 @@ export default class RhsComment extends React.Component {
 
         if (isOwner) {
             dropdownContents.push(
-                <li role='presentation'>
+                <li
+                    role='presentation'
+                    key='edit-button'
+                >
                     <a
                         href='#'
                         role='menuitem'
@@ -95,7 +98,7 @@ export default class RhsComment extends React.Component {
                         data-postid={post.id}
                         data-channelid={post.channel_id}
                     >
-                        Edit
+                        {'Edit'}
                     </a>
                 </li>
             );
@@ -103,7 +106,10 @@ export default class RhsComment extends React.Component {
 
         if (isOwner || isAdmin) {
             dropdownContents.push(
-                <li role='presentation'>
+                <li
+                    role='presentation'
+                    key='delete-button'
+                >
                     <a
                         href='#'
                         role='menuitem'
@@ -114,7 +120,7 @@ export default class RhsComment extends React.Component {
                         data-channelid={post.channel_id}
                         data-comments={0}
                     >
-                        Delete
+                        {'Delete'}
                     </a>
                 </li>
             );
@@ -162,7 +168,7 @@ export default class RhsComment extends React.Component {
                     href='#'
                     onClick={this.retryComment}
                 >
-                    Retry
+                    {'Retry'}
                 </a>
             );
         } else if (post.state === Constants.POST_LOADING) {
@@ -213,14 +219,14 @@ export default class RhsComment extends React.Component {
                         </li>
                     </ul>
                     <div className='post-body'>
-                        <p className={postClass}>
+                        <div className={postClass}>
                             {loading}
                             <div
                                 ref='message_holder'
                                 onClick={TextFormatting.handleClick}
                                 dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}}
                             />
-                        </p>
+                        </div>
                         {fileAttachment}
                     </div>
                 </div>
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 2c98db7f3..14868985b 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -2,7 +2,6 @@
 // See License.txt for license information.
 
 const AsyncClient = require('../utils/async_client.jsx');
-const BrowserStore = require('../stores/browser_store.jsx');
 const ChannelStore = require('../stores/channel_store.jsx');
 const Client = require('../utils/client.jsx');
 const Constants = require('../utils/constants.jsx');
@@ -11,7 +10,6 @@ const NewChannelFlow = require('./new_channel_flow.jsx');
 const MoreDirectChannels = require('./more_direct_channels.jsx');
 const SearchBox = require('./search_bar.jsx');
 const SidebarHeader = require('./sidebar_header.jsx');
-const SocketStore = require('../stores/socket_store.jsx');
 const TeamStore = require('../stores/team_store.jsx');
 const UnreadChannelIndicator = require('./unread_channel_indicator.jsx');
 const UserStore = require('../stores/user_store.jsx');
@@ -46,7 +44,7 @@ export default class Sidebar extends React.Component {
 
         const state = this.getStateFromStores();
         state.newChannelModalType = '';
-        state.showMoreDirectChannelsModal = false;
+        state.showDirectChannelsModal = false;
         state.loadingDMChannel = -1;
 
         this.state = state;
@@ -129,10 +127,11 @@ export default class Sidebar extends React.Component {
         UserStore.addChangeListener(this.onChange);
         UserStore.addStatusesChangeListener(this.onChange);
         TeamStore.addChangeListener(this.onChange);
-        SocketStore.addChangeListener(this.onSocketChange);
         PreferenceStore.addChangeListener(this.onChange);
 
-        $('.nav-pills__container').perfectScrollbar();
+        if ($(window).width() > 768) {
+            $('.nav-pills__container').perfectScrollbar();
+        }
 
         this.updateTitle();
         this.updateUnreadIndicators();
@@ -160,7 +159,6 @@ export default class Sidebar extends React.Component {
         UserStore.removeChangeListener(this.onChange);
         UserStore.removeStatusesChangeListener(this.onChange);
         TeamStore.removeChangeListener(this.onChange);
-        SocketStore.removeChangeListener(this.onSocketChange);
         PreferenceStore.removeChangeListener(this.onChange);
     }
     onChange() {
@@ -169,94 +167,6 @@ export default class Sidebar extends React.Component {
             this.setState(newState);
         }
     }
-    onSocketChange(msg) {
-        if (msg.action === 'posted') {
-            if (ChannelStore.getCurrentId() === msg.channel_id) {
-                if (window.isActive) {
-                    AsyncClient.updateLastViewedAt();
-                }
-            } else {
-                AsyncClient.getChannels();
-            }
-
-            if (UserStore.getCurrentId() !== msg.user_id) {
-                var mentions = [];
-                if (msg.props.mentions) {
-                    mentions = JSON.parse(msg.props.mentions);
-                }
-                var channel = ChannelStore.get(msg.channel_id);
-
-                const user = UserStore.getCurrentUser();
-                const member = ChannelStore.getMember(msg.channel_id);
-
-                var notifyLevel = member && member.notify_props ? member.notify_props.desktop : 'default';
-                if (notifyLevel === 'default') {
-                    notifyLevel = user.notify_props.desktop;
-                }
-
-                if (notifyLevel === 'none') {
-                    return;
-                } else if (notifyLevel === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== 'D') {
-                    return;
-                }
-
-                var username = 'Someone';
-                if (UserStore.hasProfile(msg.user_id)) {
-                    username = UserStore.getProfile(msg.user_id).username;
-                }
-
-                var title = 'Posted';
-                if (channel) {
-                    title = channel.display_name;
-                }
-
-                var repRegex = new RegExp('<br>', 'g');
-                var post = JSON.parse(msg.props.post);
-                var msgProps = msg.props;
-                var notifyText = post.message.replace(repRegex, '\n').replace(/\n+/g, ' ').replace('<mention>', '').replace('</mention>', '');
-
-                if (notifyText.length > 50) {
-                    notifyText = notifyText.substring(0, 49) + '...';
-                }
-
-                if (notifyText.length === 0) {
-                    if (msgProps.image) {
-                        Utils.notifyMe(title, username + ' uploaded an image', channel);
-                    } else if (msgProps.otherFile) {
-                        Utils.notifyMe(title, username + ' uploaded a file', channel);
-                    } else {
-                        Utils.notifyMe(title, username + ' did something new', channel);
-                    }
-                } else {
-                    Utils.notifyMe(title, username + ' wrote: ' + notifyText, channel);
-                }
-                if (!user.notify_props || user.notify_props.desktop_sound === 'true') {
-                    Utils.ding();
-                }
-            }
-        } else if (msg.action === 'viewed') {
-            if (ChannelStore.getCurrentId() !== msg.channel_id && UserStore.getCurrentId() === msg.user_id) {
-                AsyncClient.getChannel(msg.channel_id);
-            }
-        } else if (msg.action === 'user_added') {
-            if (UserStore.getCurrentId() === msg.user_id) {
-                AsyncClient.getChannel(msg.channel_id);
-            }
-        } else if (msg.action === 'user_removed') {
-            if (msg.user_id === UserStore.getCurrentId()) {
-                AsyncClient.getChannels(true);
-
-                if (msg.props.remover !== msg.user_id && msg.props.channel_id === ChannelStore.getCurrentId() && $('#removed_from_channel').length > 0) {
-                    var sentState = {};
-                    sentState.channelName = ChannelStore.getCurrent().display_name;
-                    sentState.remover = UserStore.getProfile(msg.props.remover).username;
-
-                    BrowserStore.setItem('channel-removed-state', sentState);
-                    $('#removed_from_channel').modal('show');
-                }
-            }
-        }
-    }
     updateTitle() {
         const channel = ChannelStore.getCurrent();
         if (channel) {
@@ -471,11 +381,13 @@ export default class Sidebar extends React.Component {
         }
 
         let closeButton = null;
-        const removeTooltip = <Tooltip>{'Remove from list'}</Tooltip>;
+        const removeTooltip = (
+            <Tooltip id='remove-dm-tooltip'>{'Remove from list'}</Tooltip>
+        );
         if (handleClose && !badge) {
             closeButton = (
                 <OverlayTrigger
-                    delayShow='1000'
+                    delayShow={1000}
                     placement='top'
                     overlay={removeTooltip}
                 >
@@ -564,8 +476,12 @@ export default class Sidebar extends React.Component {
             showChannelModal = true;
         }
 
-        const createChannelTootlip = <Tooltip>{'Create new channel'}</Tooltip>;
-        const createGroupTootlip = <Tooltip>{'Create new group'}</Tooltip>;
+        const createChannelTootlip = (
+            <Tooltip id='new-channel-tooltip' >{'Create new channel'}</Tooltip>
+        );
+        const createGroupTootlip = (
+            <Tooltip id='new-group-tooltip'>{'Create new group'}</Tooltip>
+        );
 
         return (
             <div>
@@ -607,7 +523,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 {'Channels'}
                                 <OverlayTrigger
-                                    delayShow='500'
+                                    delayShow={500}
                                     placement='top'
                                     overlay={createChannelTootlip}
                                 >
@@ -640,7 +556,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 {'Private Groups'}
                                 <OverlayTrigger
-                                    delayShow='500'
+                                    delayShow={500}
                                     placement='top'
                                     overlay={createGroupTootlip}
                                 >
diff --git a/web/react/components/team_signup_username_page.jsx b/web/react/components/team_signup_username_page.jsx
index fa8a031a0..21e76e2b8 100644
--- a/web/react/components/team_signup_username_page.jsx
+++ b/web/react/components/team_signup_username_page.jsx
@@ -15,7 +15,12 @@ export default class TeamSignupUsernamePage extends React.Component {
     }
     submitBack(e) {
         e.preventDefault();
-        this.props.state.wizard = 'send_invites';
+        if (global.window.config.SendEmailNotifications === 'true') {
+            this.props.state.wizard = 'send_invites';
+        } else {
+            this.props.state.wizard = 'team_url';
+        }
+
         this.props.updateParent(this.props.state);
     }
     submitNext(e) {
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index e731fb92c..4a759bb21 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -65,22 +65,33 @@ export default class UserProfile extends React.Component {
 
         var dataContent = [];
         dataContent.push(
-            <img className='user-popover__image'
+            <img
+                className='user-popover__image'
                 src={'/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at}
                 height='128'
                 width='128'
+                key='user-popover-image'
             />
         );
+        
         if (!global.window.mm_config.ShowEmailAddress === 'true') {
-            dataContent.push(<div className='text-nowrap'>{'Email not shared'}</div>);
+            dataContent.push(
+                <div
+                    className='text-nowrap'
+                    key='user-popover-no-email'
+                >
+                    {'Email not shared'}
+                </div>
+            );
         } else {
             dataContent.push(
                 <div
                     data-toggle='tooltip'
-                    title="' + this.state.profile.email + '"
+                    title={this.state.profile.email}
+                    key='user-popover-email'
                 >
                     <a
-                        href="mailto:' + this.state.profile.email + '"
+                        href={'mailto:' + this.state.profile.email}
                         className='text-nowrap text-lowercase user-popover__email'
                     >
                         {this.state.profile.email}
@@ -93,15 +104,22 @@ export default class UserProfile extends React.Component {
             <OverlayTrigger
                 trigger='click'
                 placement='right'
-                rootClose='true'
-                overlay={<Popover title={this.state.profile.username}>{dataContent}</Popover>}
-            >
-            <div
-                className='user-popover'
-                id={'profile_' + this.uniqueId}
+                rootClose={true}
+                overlay={
+                    <Popover
+                        title={this.state.profile.username}
+                        id='user-profile-popover'
+                    >
+                        {dataContent}
+                    </Popover>
+                }
             >
-                {name}
-            </div>
+                <div
+                    className='user-popover'
+                    id={'profile_' + this.uniqueId}
+                >
+                    {name}
+                </div>
             </OverlayTrigger>
         );
     }
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index 7f363e92e..8c62a189d 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/web/react/components/user_settings/user_settings_appearance.jsx
@@ -152,9 +152,8 @@ export default class UserSettingsAppearance extends React.Component {
                             <input type='radio'
                                 checked={!displayCustom}
                                 onChange={this.updateType.bind(this, 'premade')}
-                            >
-                                {'Theme Colors'}
-                            </input>
+                            />
+                            {'Theme Colors'}
                         </label>
                         <br/>
                     </div>
@@ -164,9 +163,8 @@ export default class UserSettingsAppearance extends React.Component {
                             <input type='radio'
                                 checked={displayCustom}
                                 onChange={this.updateType.bind(this, 'custom')}
-                            >
-                                {'Custom Theme'}
-                            </input>
+                            />
+                            {'Custom Theme'}
                         </label>
                         <br/>
                     </div>
diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index ec209c218..22a62273c 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import { savePreferences } from '../../utils/client.jsx';
+import {savePreferences} from '../../utils/client.jsx';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import Constants from '../../utils/constants.jsx';
@@ -38,7 +38,7 @@ export default class UserSettingsDisplay extends React.Component {
         );
     }
     handleClockRadio(militaryTime) {
-        this.setState({militaryTime: militaryTime});
+        this.setState({militaryTime});
     }
     updateSection(section) {
         this.setState(getDisplayStateFromStores());
@@ -57,7 +57,7 @@ export default class UserSettingsDisplay extends React.Component {
         const serverError = this.state.serverError || null;
         let clockSection;
         if (this.props.activeSection === 'clock') {
-            let clockFormat = [false, false];
+            const clockFormat = [false, false];
             if (this.state.militaryTime === 'true') {
                 clockFormat[1] = true;
             } else {
@@ -77,9 +77,8 @@ export default class UserSettingsDisplay extends React.Component {
                                 type='radio'
                                 checked={clockFormat[0]}
                                 onChange={this.handleClockRadio.bind(this, 'false')}
-                            >
-                                12-hour clock (example: 4:00 PM)
-                            </input>
+                            />
+                            {'12-hour clock (example: 4:00 PM)'}
                         </label>
                         <br/>
                     </div>
@@ -89,9 +88,8 @@ export default class UserSettingsDisplay extends React.Component {
                                 type='radio'
                                 checked={clockFormat[1]}
                                 onChange={this.handleClockRadio.bind(this, 'true')}
-                            >
-                                24-hour clock (example: 16:00)
-                            </input>
+                            />
+                            {'24-hour clock (example: 16:00)'}
                         </label>
                         <br/>
                     </div>
@@ -99,7 +97,6 @@ export default class UserSettingsDisplay extends React.Component {
                 </div>
             ];
 
-
             clockSection = (
                 <SettingItemMax
                     title='Clock Display'
@@ -138,13 +135,13 @@ export default class UserSettingsDisplay extends React.Component {
                         className='close'
                         data-dismiss='modal'
                         aria-label='Close'
-                        >
+                    >
                         <span aria-hidden='true'>{'×'}</span>
                     </button>
                     <h4
                         className='modal-title'
                         ref='title'
-                        >
+                    >
                         <i className='modal-back'></i>
                         {'Display Settings'}
                     </h4>
diff --git a/web/react/components/user_settings/user_settings_notifications.jsx b/web/react/components/user_settings/user_settings_notifications.jsx
index 62738efbd..61d49acb2 100644
--- a/web/react/components/user_settings/user_settings_notifications.jsx
+++ b/web/react/components/user_settings/user_settings_notifications.jsx
@@ -228,9 +228,8 @@ export default class NotificationsTab extends React.Component {
                             <input type='radio'
                                 checked={notifyActive[0]}
                                 onChange={this.handleNotifyRadio.bind(this, 'all')}
-                            >
-                                For all activity
-                            </input>
+                            />
+                            {'For all activity'}
                         </label>
                         <br/>
                     </div>
@@ -240,9 +239,8 @@ export default class NotificationsTab extends React.Component {
                                 type='radio'
                                 checked={notifyActive[1]}
                                 onChange={this.handleNotifyRadio.bind(this, 'mention')}
-                            >
-                                Only for mentions and direct messages
-                            </input>
+                            />
+                            {'Only for mentions and direct messages'}
                         </label>
                         <br/>
                     </div>
@@ -252,9 +250,8 @@ export default class NotificationsTab extends React.Component {
                                 type='radio'
                                 checked={notifyActive[2]}
                                 onChange={this.handleNotifyRadio.bind(this, 'none')}
-                            >
-                                Never
-                            </input>
+                            />
+                            {'Never'}
                         </label>
                     </div>
                 </div>
@@ -320,9 +317,8 @@ export default class NotificationsTab extends React.Component {
                                 type='radio'
                                 checked={soundActive[0]}
                                 onChange={this.handleSoundRadio.bind(this, 'true')}
-                            >
-                                On
-                            </input>
+                            />
+                            {'On'}
                         </label>
                         <br/>
                     </div>
@@ -332,9 +328,8 @@ export default class NotificationsTab extends React.Component {
                                 type='radio'
                                 checked={soundActive[1]}
                                 onChange={this.handleSoundRadio.bind(this, 'false')}
-                            >
-                                Off
-                            </input>
+                            />
+                            {'Off'}
                         </label>
                         <br/>
                      </div>
@@ -402,9 +397,8 @@ export default class NotificationsTab extends React.Component {
                                 type='radio'
                                 checked={emailActive[0]}
                                 onChange={this.handleEmailRadio.bind(this, 'true')}
-                            >
-                                On
-                            </input>
+                            />
+                            {'On'}
                         </label>
                         <br/>
                     </div>
@@ -414,9 +408,8 @@ export default class NotificationsTab extends React.Component {
                                 type='radio'
                                 checked={emailActive[1]}
                                 onChange={this.handleEmailRadio.bind(this, 'false')}
-                            >
-                                Off
-                            </input>
+                            />
+                            {'Off'}
                         </label>
                         <br/>
                     </div>
@@ -482,9 +475,8 @@ export default class NotificationsTab extends React.Component {
                                     type='checkbox'
                                     checked={this.state.firstNameKey}
                                     onChange={handleUpdateFirstNameKey}
-                                >
-                                    {'Your case sensitive first name "' + user.first_name + '"'}
-                                </input>
+                                />
+                                {'Your case sensitive first name "' + user.first_name + '"'}
                             </label>
                         </div>
                     </div>
@@ -502,9 +494,8 @@ export default class NotificationsTab extends React.Component {
                                 type='checkbox'
                                 checked={this.state.usernameKey}
                                 onChange={handleUpdateUsernameKey}
-                            >
-                                {'Your non-case sensitive username "' + user.username + '"'}
-                            </input>
+                            />
+                            {'Your non-case sensitive username "' + user.username + '"'}
                         </label>
                     </div>
                 </div>
@@ -521,9 +512,8 @@ export default class NotificationsTab extends React.Component {
                                 type='checkbox'
                                 checked={this.state.mentionKey}
                                 onChange={handleUpdateMentionKey}
-                            >
-                                {'Your username mentioned "@' + user.username + '"'}
-                            </input>
+                            />
+                            {'Your username mentioned "@' + user.username + '"'}
                         </label>
                     </div>
                 </div>
@@ -540,9 +530,8 @@ export default class NotificationsTab extends React.Component {
                                 type='checkbox'
                                 checked={this.state.allKey}
                                 onChange={handleUpdateAllKey}
-                            >
-                                {'Team-wide mentions "@all"'}
-                            </input>
+                            />
+                            {'Team-wide mentions "@all"'}
                         </label>
                     </div>
                 </div>
@@ -559,9 +548,8 @@ export default class NotificationsTab extends React.Component {
                                 type='checkbox'
                                 checked={this.state.channelKey}
                                 onChange={handleUpdateChannelKey}
-                            >
-                                {'Channel-wide mentions "@channel"'}
-                            </input>
+                            />
+                            {'Channel-wide mentions "@channel"'}
                         </label>
                     </div>
                 </div>
@@ -576,9 +564,8 @@ export default class NotificationsTab extends React.Component {
                                 type='checkbox'
                                 checked={this.state.customKeysChecked}
                                 onChange={this.updateCustomMentionKeys}
-                            >
-                                {'Other non-case sensitive words, separated by commas:'}
-                            </input>
+                            />
+                            {'Other non-case sensitive words, separated by commas:'}
                         </label>
                     </div>
                     <input
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index f75693470..322e68c17 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -6,6 +6,7 @@ const Utils = require('../utils/utils.jsx');
 const Constants = require('../utils/constants.jsx');
 const ViewImagePopoverBar = require('./view_image_popover_bar.jsx');
 const Modal = ReactBootstrap.Modal;
+const KeyCodes = Constants.KeyCodes;
 
 export default class ViewImageModal extends React.Component {
     constructor(props) {
@@ -63,11 +64,11 @@ export default class ViewImageModal extends React.Component {
         this.loadImage(id);
     }
     handleKeyPress(e) {
-        if (!e) {
+        if (!e || !this.props.show) {
             return;
-        } else if (e.keyCode === 39) {
+        } else if (e.keyCode === KeyCodes.RIGHT) {
             this.handleNext();
-        } else if (e.keyCode === 37) {
+        } else if (e.keyCode === KeyCodes.LEFT) {
             this.handlePrev();
         }
     }
diff --git a/web/react/pages/admin_console.jsx b/web/react/pages/admin_console.jsx
index c89cb4edc..ea9ae06f4 100644
--- a/web/react/pages/admin_console.jsx
+++ b/web/react/pages/admin_console.jsx
@@ -5,9 +5,12 @@ var ErrorBar = require('../components/error_bar.jsx');
 var SelectTeamModal = require('../components/admin_console/select_team_modal.jsx');
 var AdminController = require('../components/admin_console/admin_controller.jsx');
 
-export function setupAdminConsolePage() {
+export function setupAdminConsolePage(props) {
     ReactDOM.render(
-        <AdminController />,
+        <AdminController
+            tab={props.ActiveTab}
+            teamId={props.TeamId}
+        />,
         document.getElementById('admin_controller')
     );
 
diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx
index 77e7067ad..77951f214 100644
--- a/web/react/stores/socket_store.jsx
+++ b/web/react/stores/socket_store.jsx
@@ -1,15 +1,22 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
-var UserStore = require('./user_store.jsx');
-var ErrorStore = require('./error_store.jsx');
-var EventEmitter = require('events').EventEmitter;
+const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
+const UserStore = require('./user_store.jsx');
+const PostStore = require('./post_store.jsx');
+const ChannelStore = require('./channel_store.jsx');
+const BrowserStore = require('./browser_store.jsx');
+const ErrorStore = require('./error_store.jsx');
+const EventEmitter = require('events').EventEmitter;
 
-var Constants = require('../utils/constants.jsx');
-var ActionTypes = Constants.ActionTypes;
+const Utils = require('../utils/utils.jsx');
+const AsyncClient = require('../utils/async_client.jsx');
 
-var CHANGE_EVENT = 'change';
+const Constants = require('../utils/constants.jsx');
+const ActionTypes = Constants.ActionTypes;
+const SocketEvents = Constants.SocketEvents;
+
+const CHANGE_EVENT = 'change';
 
 var conn;
 
@@ -94,6 +101,39 @@ class SocketStoreClass extends EventEmitter {
     removeChangeListener(callback) {
         this.removeListener(CHANGE_EVENT, callback);
     }
+    handleMessage(msg) {
+        switch (msg.action) {
+        case SocketEvents.POSTED:
+            handleNewPostEvent(msg);
+            break;
+
+        case SocketEvents.POST_EDITED:
+            handlePostEditEvent(msg);
+            break;
+
+        case SocketEvents.POST_DELETED:
+            handlePostDeleteEvent(msg);
+            break;
+
+        case SocketEvents.NEW_USER:
+            handleNewUserEvent();
+            break;
+
+        case SocketEvents.USER_ADDED:
+            handleUserAddedEvent(msg);
+            break;
+
+        case SocketEvents.USER_REMOVED:
+            handleUserRemovedEvent(msg);
+            break;
+
+        case SocketEvents.CHANNEL_VIEWED:
+            handleChannelViewedEvent(msg);
+            break;
+
+        default:
+        }
+    }
     sendMessage(msg) {
         if (conn && conn.readyState === WebSocket.OPEN) {
             conn.send(JSON.stringify(msg));
@@ -104,6 +144,138 @@ class SocketStoreClass extends EventEmitter {
     }
 }
 
+function handleNewPostEvent(msg) {
+    // Store post
+    const post = JSON.parse(msg.props.post);
+    PostStore.storePost(post);
+
+    // Update channel state
+    if (ChannelStore.getCurrentId() === msg.channel_id) {
+        if (window.isActive) {
+            AsyncClient.updateLastViewedAt();
+        }
+    } else {
+        AsyncClient.getChannel(msg.channel_id);
+    }
+
+    // Send desktop notification
+    if (UserStore.getCurrentId() !== msg.user_id) {
+        const msgProps = msg.props;
+
+        let mentions = [];
+        if (msgProps.mentions) {
+            mentions = JSON.parse(msg.props.mentions);
+        }
+
+        const channel = ChannelStore.get(msg.channel_id);
+        const user = UserStore.getCurrentUser();
+        const member = ChannelStore.getMember(msg.channel_id);
+
+        let notifyLevel = member && member.notify_props ? member.notify_props.desktop : 'default';
+        if (notifyLevel === 'default') {
+            notifyLevel = user.notify_props.desktop;
+        }
+
+        if (notifyLevel === 'none') {
+            return;
+        } else if (notifyLevel === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== 'D') {
+            return;
+        }
+
+        let username = 'Someone';
+        if (UserStore.hasProfile(msg.user_id)) {
+            username = UserStore.getProfile(msg.user_id).username;
+        }
+
+        let title = 'Posted';
+        if (channel) {
+            title = channel.display_name;
+        }
+
+        let notifyText = post.message.replace(/\n+/g, ' ');
+        if (notifyText.length > 50) {
+            notifyText = notifyText.substring(0, 49) + '...';
+        }
+
+        if (notifyText.length === 0) {
+            if (msgProps.image) {
+                Utils.notifyMe(title, username + ' uploaded an image', channel);
+            } else if (msgProps.otherFile) {
+                Utils.notifyMe(title, username + ' uploaded a file', channel);
+            } else {
+                Utils.notifyMe(title, username + ' did something new', channel);
+            }
+        } else {
+            Utils.notifyMe(title, username + ' wrote: ' + notifyText, channel);
+        }
+        if (!user.notify_props || user.notify_props.desktop_sound === 'true') {
+            Utils.ding();
+        }
+    }
+}
+
+function handlePostEditEvent(msg) {
+    // Store post
+    const post = JSON.parse(msg.props.post);
+    PostStore.storePost(post);
+
+    // Update channel state
+    if (ChannelStore.getCurrentId() === msg.channel_id) {
+        if (window.isActive) {
+            AsyncClient.updateLastViewedAt();
+        }
+    }
+}
+
+function handlePostDeleteEvent(msg) {
+    const post = JSON.parse(msg.props.post);
+
+    PostStore.storeUnseenDeletedPost(post);
+    PostStore.removePost(post, true);
+    PostStore.emitChange();
+}
+
+function handleNewUserEvent() {
+    AsyncClient.getProfiles();
+    AsyncClient.getChannelExtraInfo(true);
+}
+
+function handleUserAddedEvent(msg) {
+    if (ChannelStore.getCurrentId() === msg.channel_id) {
+        AsyncClient.getChannelExtraInfo(true);
+    }
+
+    if (UserStore.getCurrentId() === msg.user_id) {
+        AsyncClient.getChannel(msg.channel_id);
+    }
+}
+
+function handleUserRemovedEvent(msg) {
+    if (UserStore.getCurrentId() === msg.user_id) {
+        AsyncClient.getChannels();
+
+        if (msg.props.remover_id !== msg.user_id &&
+                msg.channel_id === ChannelStore.getCurrentId() &&
+                $('#removed_from_channel').length > 0) {
+            var sentState = {};
+            sentState.channelName = ChannelStore.getCurrent().display_name;
+            sentState.remover = UserStore.getProfile(msg.props.remover_id).username;
+
+            BrowserStore.setItem('channel-removed-state', sentState);
+            $('#removed_from_channel').modal('show');
+        }
+    } else if (ChannelStore.getCurrentId() === msg.channel_id) {
+        AsyncClient.getChannelExtraInfo(true);
+    }
+}
+
+function handleChannelViewedEvent(msg) {
+    // Useful for when multiple devices have the app open to different channels
+    if (ChannelStore.getCurrentId() !== msg.channel_id && UserStore.getCurrentId() === msg.user_id) {
+        AsyncClient.getChannel(msg.channel_id);
+    }
+}
+
 var SocketStore = new SocketStoreClass();
 
 SocketStore.dispatchToken = AppDispatcher.register((payload) => {
@@ -111,6 +283,7 @@ SocketStore.dispatchToken = AppDispatcher.register((payload) => {
 
     switch (action.type) {
     case ActionTypes.RECIEVED_MSG:
+        SocketStore.handleMessage(action.msg);
         SocketStore.emitChange(action.msg);
         break;
 
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index d6da91fe2..0911412d8 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -46,6 +46,18 @@ module.exports = {
         SERVER_ACTION: null,
         VIEW_ACTION: null
     }),
+
+    SocketEvents: {
+        POSTED: 'posted',
+        POST_EDITED: 'post_edited',
+        POST_DELETED: 'post_deleted',
+        CHANNEL_VIEWED: 'channel_viewed',
+        NEW_USER: 'new_user',
+        USER_ADDED: 'user_added',
+        USER_REMOVED: 'user_removed',
+        TYPING: 'typing'
+    },
+
     SPECIAL_MENTIONS: ['all', 'channel'],
     CHARACTER_LIMIT: 4000,
     IMAGE_TYPES: ['jpg', 'gif', 'bmp', 'png', 'jpeg'],
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 561c2c4c4..38ac68d58 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -13,7 +13,8 @@ var client = require('./client.jsx');
 var Autolinker = require('autolinker');
 
 export function isEmail(email) {
-    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    //var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    var regex = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
     return regex.test(email);
 }