Adding LDAP test connection button. Reordering LDAP settings. (#3912)

4 files changed, 198 insertions, 40 deletions

diff --git a/webapp/components/admin_console/admin_settings.jsx b/webapp/components/admin_console/admin_settings.jsx
index 8601722eb..9975a3975 100644
--- a/webapp/components/admin_console/admin_settings.jsx
+++ b/webapp/components/admin_console/admin_settings.jsx
@@ -21,6 +21,7 @@ export default class AdminSettings extends React.Component {
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.doSubmit = this.doSubmit.bind(this);
 
         this.state = Object.assign(this.getStateFromConfig(props.config), {
             saveNeeded: false,
@@ -39,6 +40,10 @@ export default class AdminSettings extends React.Component {
     handleSubmit(e) {
         e.preventDefault();
 
+        this.doSubmit();
+    }
+
+    doSubmit(callback) {
         this.setState({
             saving: true,
             serverError: null
@@ -59,12 +64,20 @@ export default class AdminSettings extends React.Component {
                     saveNeeded: false,
                     saving: false
                 });
+
+                if (callback) {
+                    callback();
+                }
             },
             (err) => {
                 this.setState({
                     saving: false,
                     serverError: err.message
                 });
+
+                if (callback) {
+                    callback();
+                }
             }
         );
     }
diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index 4fcfe2731..0b107e19a 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -207,7 +207,7 @@ export default class AdminSidebar extends React.Component {
                         title={
                             <FormattedMessage
                                 id='admin.sidebar.ldap'
-                                defaultMessage='LDAP'
+                                defaultMessage='AD/LDAP'
                             />
                         }
                     />
diff --git a/webapp/components/admin_console/ldap_settings.jsx b/webapp/components/admin_console/ldap_settings.jsx
index 23728870e..3d93ae6d8 100644
--- a/webapp/components/admin_console/ldap_settings.jsx
+++ b/webapp/components/admin_console/ldap_settings.jsx
@@ -8,6 +8,7 @@ import SettingsGroup from './settings_group.jsx';
 import TextSetting from './text_setting.jsx';
 
 import SyncNowButton from './sync_now_button.jsx';
+import LdapTestButton from './ldap_test_button.jsx';
 
 import * as Utils from 'utils/utils.jsx';
 
@@ -76,7 +77,7 @@ export default class LdapSettings extends AdminSettings {
             <h3>
                 <FormattedMessage
                     id='admin.authentication.ldap'
-                    defaultMessage='LDAP'
+                    defaultMessage='AD/LDAP'
                 />
             </h3>
         );
@@ -150,6 +151,23 @@ export default class LdapSettings extends AdminSettings {
                     onChange={this.handleChange}
                     disabled={!this.state.enable}
                 />
+                <BooleanSetting
+                    id='skipCertificateVerification'
+                    label={
+                        <FormattedMessage
+                            id='admin.ldap.skipCertificateVerification'
+                            defaultMessage='Skip Certificate Verification:'
+                        />
+                    }
+                    helpText={
+                        <FormattedMessage
+                            id='admin.ldap.skipCertificateVerificationDesc'
+                            defaultMessage='Skips the certificate verification step for TLS or STARTTLS connections. Not recommended for production environments where TLS is required. For testing only.'
+                        />
+                    }
+                    value={this.state.skipCertificateVerification}
+                    onChange={this.handleChange}
+                />
                 <TextSetting
                     id='baseDN'
                     label={
@@ -339,56 +357,39 @@ export default class LdapSettings extends AdminSettings {
                     disabled={!this.state.enable}
                 />
                 <TextSetting
-                    id='syncIntervalMinutes'
+                    id='loginFieldName'
                     label={
                         <FormattedMessage
-                            id='admin.ldap.syncIntervalTitle'
-                            defaultMessage='Synchronization Interval (minutes)'
+                            id='admin.ldap.loginNameTitle'
+                            defaultMessage='Sign-in Field Default Text:'
                         />
                     }
+                    placeholder={Utils.localizeMessage('admin.ldap.loginNameEx', 'Ex "LDAP Username"')}
                     helpText={
                         <FormattedMessage
-                            id='admin.ldap.syncIntervalHelpText'
-                            defaultMessage='LDAP Synchronization updates Mattermost user information to reflect updates on the LDAP server. For example, when a user’s name changes on the LDAP server, the change updates in Mattermost when synchronization is performed. Accounts removed from or disabled in the LDAP server have their Mattermost accounts set to “Inactive” and have their account sessions revoked. Mattermost performs synchronization on the interval entered. For example, if 60 is entered, Mattermost synchronizes every 60 minutes.'
+                            id='admin.ldap.loginNameDesc'
+                            defaultMessage='The placeholder text that appears in the login field on the login page. Defaults to "LDAP Username".'
                         />
                     }
-                    value={this.state.syncIntervalMinutes}
+                    value={this.state.loginFieldName}
                     onChange={this.handleChange}
                     disabled={!this.state.enable}
                 />
-                <BooleanSetting
-                    id='skipCertificateVerification'
-                    label={
-                        <FormattedMessage
-                            id='admin.ldap.skipCertificateVerification'
-                            defaultMessage='Skip Certificate Verification'
-                        />
-                    }
-                    helpText={
-                        <FormattedMessage
-                            id='admin.ldap.skipCertificateVerificationDesc'
-                            defaultMessage='Skips the certificate verification step for TLS or STARTTLS connections. Not recommended for production environments where TLS is required. For testing only.'
-                        />
-                    }
-                    value={this.state.skipCertificateVerification}
-                    onChange={this.handleChange}
-                />
                 <TextSetting
-                    id='queryTimeout'
+                    id='syncIntervalMinutes'
                     label={
                         <FormattedMessage
-                            id='admin.ldap.queryTitle'
-                            defaultMessage='Query Timeout (seconds):'
+                            id='admin.ldap.syncIntervalTitle'
+                            defaultMessage='Synchronization Interval (minutes):'
                         />
                     }
-                    placeholder={Utils.localizeMessage('admin.ldap.queryEx', 'Ex "60"')}
                     helpText={
                         <FormattedMessage
-                            id='admin.ldap.queryDesc'
-                            defaultMessage='The timeout value for queries to the LDAP server. Increase if you are getting timeout errors caused by a slow LDAP server.'
+                            id='admin.ldap.syncIntervalHelpText'
+                            defaultMessage='LDAP Synchronization updates Mattermost user information to reflect updates on the LDAP server. For example, when a user’s name changes on the LDAP server, the change updates in Mattermost when synchronization is performed. Accounts removed from or disabled in the LDAP server have their Mattermost accounts set to “Inactive” and have their account sessions revoked. Mattermost performs synchronization on the interval entered. For example, if 60 is entered, Mattermost synchronizes every 60 minutes.'
                         />
                     }
-                    value={this.state.queryTimeout}
+                    value={this.state.syncIntervalMinutes}
                     onChange={this.handleChange}
                     disabled={!this.state.enable}
                 />
@@ -397,7 +398,7 @@ export default class LdapSettings extends AdminSettings {
                     label={
                         <FormattedMessage
                             id='admin.ldap.maxPageSizeTitle'
-                            defaultMessage='Maximum Page Size'
+                            defaultMessage='Maximum Page Size:'
                         />
                     }
                     placeholder={Utils.localizeMessage('admin.ldap.maxPageSizeEx', 'Ex "2000"')}
@@ -412,27 +413,32 @@ export default class LdapSettings extends AdminSettings {
                     disabled={!this.state.enable}
                 />
                 <TextSetting
-                    id='loginFieldName'
+                    id='queryTimeout'
                     label={
                         <FormattedMessage
-                            id='admin.ldap.loginNameTitle'
-                            defaultMessage='Sign-in Field Default Text:'
+                            id='admin.ldap.queryTitle'
+                            defaultMessage='Query Timeout (seconds):'
                         />
                     }
-                    placeholder={Utils.localizeMessage('admin.ldap.loginNameEx', 'Ex "LDAP Username"')}
+                    placeholder={Utils.localizeMessage('admin.ldap.queryEx', 'Ex "60"')}
                     helpText={
                         <FormattedMessage
-                            id='admin.ldap.loginNameDesc'
-                            defaultMessage='The placeholder text that appears in the login field on the login page. Defaults to "LDAP Username".'
+                            id='admin.ldap.queryDesc'
+                            defaultMessage='The timeout value for queries to the LDAP server. Increase if you are getting timeout errors caused by a slow LDAP server.'
                         />
                     }
-                    value={this.state.loginFieldName}
+                    value={this.state.queryTimeout}
                     onChange={this.handleChange}
                     disabled={!this.state.enable}
                 />
                 <SyncNowButton
                     disabled={!this.state.enable}
                 />
+                <LdapTestButton
+                    disabled={!this.state.enable}
+                    submitFunction={this.doSubmit}
+                    saveNeeded={this.state.saveNeeded}
+                />
             </SettingsGroup>
         );
     }
diff --git a/webapp/components/admin_console/ldap_test_button.jsx b/webapp/components/admin_console/ldap_test_button.jsx
new file mode 100644
index 000000000..fbe348158
--- /dev/null
+++ b/webapp/components/admin_console/ldap_test_button.jsx
@@ -0,0 +1,139 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import Client from 'client/web_client.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+
+export default class LdapTestButton extends React.Component {
+    static get propTypes() {
+        return {
+            disabled: React.PropTypes.bool,
+            submitFunction: React.PropTypes.func,
+            saveNeeded: React.PropTypes.bool
+        };
+    }
+    constructor(props) {
+        super(props);
+
+        this.handleLdapTest = this.handleLdapTest.bind(this);
+
+        this.state = {
+            buisy: false,
+            fail: null,
+            success: false
+        };
+    }
+
+    handleLdapTest(e) {
+        e.preventDefault();
+
+        this.setState({
+            buisy: true,
+            fail: null,
+            success: false
+        });
+
+        const doRequest = () => { //eslint-disable-line func-style
+            Client.ldapTest(
+                () => {
+                    this.setState({
+                        buisy: false,
+                        success: true
+                    });
+                },
+                (err) => {
+                    this.setState({
+                        buisy: false,
+                        fail: err.message
+                    });
+                }
+            );
+        };
+
+        // If we need to run the save function then run it with our request function as callback
+        if (this.props.saveNeeded) {
+            this.props.submitFunction(doRequest);
+        } else {
+            doRequest();
+        }
+    }
+
+    render() {
+        let message = null;
+        if (this.state.fail) {
+            message = (
+                <div className='alert alert-warning'>
+                    <i className='fa fa-warning'/>
+                    <FormattedMessage
+                        id='admin.ldap.testFailure'
+                        defaultMessage='LDAP Test Failure: {error}'
+                        values={{
+                            error: this.state.fail
+                        }}
+                    />
+                </div>
+            );
+        } else if (this.state.success) {
+            message = (
+                <div className='alert alert-success'>
+                    <i className='fa fa-success'/>
+                    <FormattedMessage
+                        id='admin.ldap.testSuccess'
+                        defaultMessage='LDAP Test Successful'
+                        values={{
+                            error: this.state.fail
+                        }}
+                    />
+                </div>
+            );
+        }
+
+        let helpText = (
+            <FormattedHTMLMessage
+                id='admin.ldap.testHelpText'
+                defaultMessage='Tests if the Mattermost server can connect to the LDAP server specified. See log file for more detailed error messages.'
+            />
+        );
+
+        let contents = null;
+        if (this.state.loading) {
+            contents = (
+                <span>
+                    <span className='fa fa-refresh icon--rotate'/>
+                    {Utils.localizeMessage('admin.reload.loading', ' Loading...')}
+                </span>
+            );
+        } else {
+            contents = (
+                <FormattedMessage
+                    id='admin.ldap.ldap_test_button'
+                    defaultMessage='LDAP Test'
+                />
+            );
+        }
+
+        return (
+            <div className='form-group reload-config'>
+                <div className='col-sm-offset-4 col-sm-8'>
+                    <div>
+                        <button
+                            className='btn btn-default'
+                            onClick={this.handleLdapTest}
+                            disabled={this.props.disabled}
+                        >
+                            {contents}
+                        </button>
+                        {message}
+                    </div>
+                    <div className='help-text'>
+                        {helpText}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}