add new user-setting section 'advanced' and remove ctrl-send setting from general tab

7 files changed, 202 insertions, 101 deletions

diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 7b199f5d6..058594165 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -8,6 +8,7 @@ const SocketStore = require('../stores/socket_store.jsx');
 const ChannelStore = require('../stores/channel_store.jsx');
 const UserStore = require('../stores/user_store.jsx');
 const PostStore = require('../stores/post_store.jsx');
+const PreferenceStore = require('../stores/preference_store.jsx');
 const Textbox = require('./textbox.jsx');
 const MsgTyping = require('./msg_typing.jsx');
 const FileUpload = require('./file_upload.jsx');
@@ -36,7 +37,7 @@ export default class CreateComment extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
         this.handleResize = this.handleResize.bind(this);
-        this.onUserChange = this.onUserChange.bind(this);
+        this.onPreferenceChange = this.onPreferenceChange.bind(this);
 
         PostStore.clearCommentDraftUploads();
 
@@ -47,20 +48,21 @@ export default class CreateComment extends React.Component {
             previews: draft.previews,
             submitting: false,
             windowWidth: Utils.windowWidth(),
-            ctrlSend: UserStore.getCurrentUser().props.ctrlSend
+            ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value
         };
-
-        UserStore.addChangeListener(this.onUserChange);
     }
     componentDidMount() {
+        PreferenceStore.addChangeListener(this.onPreferenceChange);
         window.addEventListener('resize', this.handleResize);
     }
     componentWillUnmount() {
+        PreferenceStore.removeChangeListener(this.onPreferenceChange);
         window.removeEventListener('resize', this.handleResize);
     }
-    onUserChange() {
-        const ctrlSend = UserStore.getCurrentUser().props.ctrlSend || 'false';
-        this.setState({ctrlSend});
+    onPreferenceChange() {
+        this.setState({
+            ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value
+        });
     }
     handleResize() {
         this.setState({windowWidth: Utils.windowWidth()});
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 3bde457b5..cdbc3bc6d 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -8,6 +8,7 @@ const ChannelStore = require('../stores/channel_store.jsx');
 const PostStore = require('../stores/post_store.jsx');
 const UserStore = require('../stores/user_store.jsx');
 const SocketStore = require('../stores/socket_store.jsx');
+const PreferenceStore = require('../stores/preference_store.jsx');
 const MsgTyping = require('./msg_typing.jsx');
 const Textbox = require('./textbox.jsx');
 const FileUpload = require('./file_upload.jsx');
@@ -39,7 +40,7 @@ export default class CreatePost extends React.Component {
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleResize = this.handleResize.bind(this);
         this.sendMessage = this.sendMessage.bind(this);
-        this.onUserChange = this.onUserChange.bind(this);
+        this.onPreferenceChange = this.onPreferenceChange.bind(this);
 
         PostStore.clearDraftUploads();
 
@@ -54,14 +55,15 @@ export default class CreatePost extends React.Component {
             initialText: draft.messageText,
             windowWidth: Utils.windowWidth(),
             windowHeight: Utils.windowHeight(),
-            ctrlSend: UserStore.getCurrentUser().props.ctrlSend
+            ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value
         };
 
-        UserStore.addChangeListener(this.onUserChange);
+        PreferenceStore.addChangeListener(this.onPreferenceChange);
     }
-    onUserChange() {
-        const ctrlSend = UserStore.getCurrentUser().props.ctrlSend || 'false';
-        this.setState({ctrlSend});
+    onPreferenceChange() {
+        this.setState({
+            ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value
+        });
     }
     handleResize() {
         this.setState({
diff --git a/web/react/components/user_settings/user_settings.jsx b/web/react/components/user_settings/user_settings.jsx
index 15bf961d6..546e26ca3 100644
--- a/web/react/components/user_settings/user_settings.jsx
+++ b/web/react/components/user_settings/user_settings.jsx
@@ -10,6 +10,7 @@ var AppearanceTab = require('./user_settings_appearance.jsx');
 var DeveloperTab = require('./user_settings_developer.jsx');
 var IntegrationsTab = require('./user_settings_integrations.jsx');
 var DisplayTab = require('./user_settings_display.jsx');
+var AdvancedTab = require('./user_settings_advanced.jsx');
 
 export default class UserSettings extends React.Component {
     constructor(props) {
@@ -110,6 +111,17 @@ export default class UserSettings extends React.Component {
                     />
                 </div>
             );
+        } else if (this.props.activeTab === 'advanced') {
+            return (
+                <div>
+                    <AdvancedTab
+                        user={this.state.user}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
+                    />
+                </div>
+            );
         }
 
         return <div/>;
diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx
new file mode 100644
index 000000000..910444735
--- /dev/null
+++ b/web/react/components/user_settings/user_settings_advanced.jsx
@@ -0,0 +1,169 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+const Client = require('../../utils/client.jsx');
+const SettingItemMin = require('../setting_item_min.jsx');
+const SettingItemMax = require('../setting_item_max.jsx');
+const Constants = require('../../utils/constants.jsx');
+const PreferenceStore = require('../../stores/preference_store.jsx');
+
+export default class AdvancedSettingsDisplay extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.updateSection = this.updateSection.bind(this);
+        this.updateSetting = this.updateSetting.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+        this.setupInitialState = this.setupInitialState.bind(this);
+
+        this.state = this.setupInitialState();
+    }
+
+    setupInitialState() {
+        const sendOnCtrlEnter = PreferenceStore.getPreference(
+            Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
+            'send_on_ctrl_enter',
+            {value: 'false'}
+        ).value;
+
+        return {
+            settings: {send_on_ctrl_enter: sendOnCtrlEnter}
+        };
+    }
+
+    updateSetting(setting, value) {
+        const settings = this.state.settings;
+        settings[setting] = value;
+        this.setState(settings);
+    }
+
+    handleSubmit(setting) {
+        const preference = PreferenceStore.setPreference(
+            Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
+            setting,
+            this.state.settings[setting]
+        );
+
+        Client.savePreferences([preference],
+            () => {
+                PreferenceStore.emitChange();
+                this.updateSection('');
+            },
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+    }
+
+    updateSection(section) {
+        this.props.updateSection(section);
+    }
+
+    handleClose() {
+        this.updateSection('');
+    }
+
+    componentDidMount() {
+        $('#user_settings').on('hidden.bs.modal', this.handleClose);
+    }
+
+    componentWillUnmount() {
+        $('#user_settings').off('hidden.bs.modal', this.handleClose);
+    }
+
+    render() {
+        const serverError = this.state.serverError || null;
+        let ctrlSendSection;
+
+        if (this.props.activeSection === 'advancedCtrlSend') {
+            const ctrlSendActive = [
+                this.state.settings.send_on_ctrl_enter === 'true',
+                this.state.settings.send_on_ctrl_enter === 'false'
+            ];
+
+            const inputs = [
+                <div key='ctrlSendSetting'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={ctrlSendActive[0]}
+                                onChange={this.updateSetting.bind(this, 'send_on_ctrl_enter', 'true')}
+                            />
+                            {'On'}
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={ctrlSendActive[1]}
+                                onChange={this.updateSetting.bind(this, 'send_on_ctrl_enter', 'false')}
+                            />
+                            {'Off'}
+                        </label>
+                        <br/>
+                    </div>
+                    <div><br/>{'If enabled \'Enter\' inserts a new line and \'Ctrl + Enter\' submits the message.'}</div>
+                </div>
+            ];
+
+            ctrlSendSection = (
+                <SettingItemMax
+                    title='Send messages on Ctrl + Enter'
+                    inputs={inputs}
+                    submit={() => this.handleSubmit('send_on_ctrl_enter')}
+                    server_error={serverError}
+                    updateSection={(e) => {
+                        this.updateSection('');
+                        e.preventDefault();
+                    }}
+                />
+            );
+        } else {
+            ctrlSendSection = (
+                <SettingItemMin
+                    title='Send messages on Ctrl + Enter'
+                    describe={this.state.settings.send_on_ctrl_enter === 'true' ? 'On' : 'Off'}
+                    updateSection={() => this.props.updateSection('advancedCtrlSend')}
+                />
+            );
+        }
+
+        return (
+            <div>
+                <div className='modal-header'>
+                    <button
+                        type='button'
+                        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>
+                        {'Advanced Settings'}
+                    </h4>
+                </div>
+                <div className='user-settings'>
+                    <h3 className='tab-header'>{'Advanced Settings'}</h3>
+                    <div className='divider-dark first'/>
+                    {ctrlSendSection}
+                    <div className='divider-dark'/>
+                </div>
+            </div>
+        );
+    }
+}
+
+AdvancedSettingsDisplay.propTypes = {
+    user: React.PropTypes.object,
+    updateSection: React.PropTypes.func,
+    updateTab: React.PropTypes.func,
+    activeSection: React.PropTypes.string
+};
diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx
index 6b7f1ad51..3adac197a 100644
--- a/web/react/components/user_settings/user_settings_general.jsx
+++ b/web/react/components/user_settings/user_settings_general.jsx
@@ -22,7 +22,6 @@ export default class UserSettingsGeneralTab extends React.Component {
         this.submitEmail = this.submitEmail.bind(this);
         this.submitUser = this.submitUser.bind(this);
         this.submitPicture = this.submitPicture.bind(this);
-        this.submitCtrlSend = this.submitCtrlSend.bind(this);
 
         this.updateUsername = this.updateUsername.bind(this);
         this.updateFirstName = this.updateFirstName.bind(this);
@@ -31,7 +30,6 @@ export default class UserSettingsGeneralTab extends React.Component {
         this.updateEmail = this.updateEmail.bind(this);
         this.updateConfirmEmail = this.updateConfirmEmail.bind(this);
         this.updatePicture = this.updatePicture.bind(this);
-        this.updateCtrlSend = this.updateCtrlSend.bind(this);
         this.updateSection = this.updateSection.bind(this);
 
         this.handleClose = this.handleClose.bind(this);
@@ -178,13 +176,6 @@ export default class UserSettingsGeneralTab extends React.Component {
             }.bind(this)
         );
     }
-    submitCtrlSend(e) {
-        e.preventDefault();
-
-        var user = UserStore.getCurrentUser();
-        user.props = this.state.props;
-        this.submitUser(user, true);
-    }
     updateUsername(e) {
         this.setState({username: e.target.value});
     }
@@ -203,11 +194,6 @@ export default class UserSettingsGeneralTab extends React.Component {
     updateConfirmEmail(e) {
         this.setState({confirmEmail: e.target.value});
     }
-    updateCtrlSend(value) {
-        let props = this.state.props;
-        props.ctrlSend = value;
-        this.setState({props});
-    }
     updatePicture(e) {
         if (e.target.files && e.target.files[0]) {
             this.setState({picture: e.target.files[0]});
@@ -242,8 +228,7 @@ export default class UserSettingsGeneralTab extends React.Component {
         var user = props.user;
 
         return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname,
-                        email: user.email, confirmEmail: '', picture: null, loadingPicture: false, emailChangeInProgress: false,
-                        props: user.props};
+                        email: user.email, confirmEmail: '', picture: null, loadingPicture: false, emailChangeInProgress: false};
     }
     render() {
         var user = this.props.user;
@@ -586,75 +571,6 @@ export default class UserSettingsGeneralTab extends React.Component {
             );
         }
 
-        var miscellaneousSection;
-        var describeCtrlSend = this.state.props.ctrlSend === 'true' ? 'On' : 'Off';
-        if (this.props.activeSection === 'ctrlSend') {
-            var ctrlSendActive = [false, false];
-            if (this.state.props.ctrlSend === 'true') {
-                ctrlSendActive[0] = true;
-            } else {
-                ctrlSendActive[1] = true;
-            }
-
-            let ctrlSendInputs = [];
-            ctrlSendInputs.push(
-                <div
-                    key='ctrlSendSetting'
-                    className='form-group'
-                >
-                    <div className=''>
-                        <div className='radio'>
-                            <label>
-                                <input
-                                    type='radio'
-                                    onChange={() => this.updateCtrlSend('true')}
-                                    checked={ctrlSendActive[0]}
-                                />
-                                {'On'}
-                            </label>
-                            <br/>
-                        </div>
-                        <div className='radio'>
-                            <label>
-                                <input
-                                    type='radio'
-                                    onChange={() => this.updateCtrlSend('false')}
-                                    checked={ctrlSendActive[1]}
-                                />
-                                {'Off'}
-                            </label>
-                            <br/>
-                        </div>
-                        <div><br/>{'If enabled \'Enter\' inserts a new line and ctrl + enter submits the message.'}</div>
-                    </div>
-                </div>
-            );
-
-            miscellaneousSection = (
-                <SettingItemMax
-                    title='Send messages on Ctrl + Enter'
-                    inputs={ctrlSendInputs}
-                    submit={this.submitCtrlSend}
-                    server_error={serverError}
-                    client_error={emailError}
-                    updateSection={function clearCtrlSend(e) {
-                        this.updateSection('ctrlSend');
-                        e.preventDefault();
-                    }.bind(this)}
-                />
-            );
-        } else {
-            miscellaneousSection = (
-                <SettingItemMin
-                    title='Send messages on Ctrl + Enter'
-                    describe={describeCtrlSend}
-                    updateSection={function updateCtrlSend() {
-                        this.updateSection('ctrlSend');
-                    }.bind(this)}
-                />
-            );
-        }
-
         return (
             <div>
                 <div className='modal-header'>
@@ -686,8 +602,6 @@ export default class UserSettingsGeneralTab extends React.Component {
                     {emailSection}
                     <div className='divider-light'/>
                     {pictureSection}
-                    <div className='divider-light'/>
-                    {miscellaneousSection}
                     <div className='divider-dark'/>
                 </div>
             </div>
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index 5449ae91e..18dd490e7 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -43,6 +43,7 @@ export default class UserSettingsModal extends React.Component {
             tabs.push({name: 'integrations', uiName: 'Integrations', icon: 'glyphicon glyphicon-transfer'});
         }
         tabs.push({name: 'display', uiName: 'Display', icon: 'glyphicon glyphicon-eye-open'});
+        tabs.push({name: 'advanced', uiName: 'Advanced', icon: 'glyphicon glyphicon-list-alt'});
 
         return (
             <div
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 0e89b9470..07bac78e3 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -311,7 +311,8 @@ module.exports = {
     DEFAULT_CODE_THEME: 'github',
     Preferences: {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
-        CATEGORY_DISPLAY_SETTINGS: 'display_settings'
+        CATEGORY_DISPLAY_SETTINGS: 'display_settings',
+        CATEGORY_ADVANCED_SETTINGS: 'advanced_settings'
     },
     KeyCodes: {
         UP: 38,