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

6 files changed, 214 insertions, 44 deletions

diff --git a/webapp/client/client.jsx b/webapp/client/client.jsx
index b842d9939..a059bb38a 100644
--- a/webapp/client/client.jsx
+++ b/webapp/client/client.jsx
@@ -471,6 +471,15 @@ export default class Client {
             end(this.handleResponse.bind(this, 'ldapSyncNow', success, error));
     }
 
+    ldapTest(success, error) {
+        request.
+            post(`${this.getAdminRoute()}/ldap_test`).
+            set(this.defaultHeaders).
+            type('application/json').
+            accept('application/json').
+            end(this.handleResponse.bind(this, 'ldap_test', success, error));
+    }
+
     // Team Routes Section
 
     createTeamFromSignup(teamSignup, success, error) {
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>
+        );
+    }
+}
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 4211ff13b..f8d2c580e 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -143,6 +143,7 @@
   "admin.authentication.gitlab": "GitLab",
   "admin.authentication.oauth": "OAuth 2.0",
   "admin.authentication.saml": "SAML",
+  "admin.authentication.ldap": "AD/LDAP",
   "admin.banner.heading": "Note:",
   "admin.cluster.enableDescription": "When true, Mattermost will run in High Availability mode. Please see <a href=\"http://docs.mattermost.com/deployment/cluster.html\" target=\"_blank\">documentation</a> to learn more about configuring High Availability for Mattermost.",
   "admin.cluster.enableTitle": "Enable High Availability Mode:",
@@ -415,7 +416,7 @@
   "admin.ldap.loginNameTitle": "Login Field Name:",
   "admin.ldap.maxPageSizeEx": "Ex \"2000\"",
   "admin.ldap.maxPageSizeHelpText": "The maximum number of users the Mattermost server will request from the LDAP server at one time. 0 is unlimited.",
-  "admin.ldap.maxPageSizeTitle": "Maximum Page Size",
+  "admin.ldap.maxPageSizeTitle": "Maximum Page Size:",
   "admin.ldap.nicknameAttrDesc": "(Optional) The attribute in the LDAP server that will be used to populate the nickname of users in Mattermost.",
   "admin.ldap.nicknameAttrEx": "Ex \"nickname\"",
   "admin.ldap.nicknameAttrTitle": "Nickname Attribute:",
@@ -429,11 +430,13 @@
   "admin.ldap.serverDesc": "The domain or IP address of LDAP server.",
   "admin.ldap.serverEx": "Ex \"10.0.0.23\"",
   "admin.ldap.serverTitle": "LDAP Server:",
-  "admin.ldap.skipCertificateVerification": "Skip Certificate Verification",
+  "admin.ldap.skipCertificateVerification": "Skip Certificate Verification:",
   "admin.ldap.skipCertificateVerificationDesc": "Skips the certificate verification step for TLS or STARTTLS connections. Not recommended for production environments where TLS is required. For testing only.",
   "admin.ldap.syncFailure": "Sync Failure: {error}",
+  "admin.ldap.testFailure": "LDAP Test Failure: {error}",
+  "admin.ldap.testHelpText": "Tests if the Mattermost server can connect to the LDAP server specified. See log file for more detailed error messages.",
   "admin.ldap.syncIntervalHelpText": "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.",
-  "admin.ldap.syncIntervalTitle": "Synchronization Interval (minutes)",
+  "admin.ldap.syncIntervalTitle": "Synchronization Interval (minutes):",
   "admin.ldap.syncNowHelpText": "Initiates an LDAP synchronization immediately.",
   "admin.ldap.sync_button": "LDAP Synchronize Now",
   "admin.ldap.uernameAttrDesc": "The attribute in the LDAP server that will be used to populate the username field in Mattermost. This may be the same as the ID Attribute.",
@@ -684,7 +687,7 @@
   "admin.sidebar.gitlab": "GitLab",
   "admin.sidebar.images": "Images",
   "admin.sidebar.integrations": "Integrations",
-  "admin.sidebar.ldap": "LDAP",
+  "admin.sidebar.ldap": "AD/LDAP",
   "admin.sidebar.legalAndSupport": "Legal and Support",
   "admin.sidebar.license": "Edition and License",
   "admin.sidebar.localization": "Localization",