Adding TLS options to LDAP

webapp/components/admin_console/boolean_setting.jsx

@@ -0,0 +1,62 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import Setting from './setting.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+export default class BooleanSetting extends React.Component {
+    render() {
+        return (
+            <Setting label={this.props.label}>
+                <label className='radio-inline'>
+                    <input
+                        type='radio'
+                        value='true'
+                        checked={this.props.currentValue}
+                        onChange={this.props.handleChange}
+                        disabled={this.props.isDisabled}
+                    />
+                    {this.props.trueText}
+                </label>
+                <label className='radio-inline'>
+                    <input
+                        type='radio'
+                        value='false'
+                        checked={!this.props.currentValue}
+                        onChange={this.props.handleChange}
+                        disabled={this.props.isDisabled}
+                    />
+                    {this.props.falseText}
+                </label>
+                {this.props.helpText}
+            </Setting>
+        );
+    }
+}
+BooleanSetting.defaultProps = {
+    trueText: (
+        <FormattedMessage
+            id='admin.ldap.true'
+            defaultMessage='true'
+        />
+    ),
+    falseText: (
+        <FormattedMessage
+            id='admin.ldap.false'
+            defaultMessage='false'
+        />
+    )
+};
+
+BooleanSetting.propTypes = {
+    label: React.PropTypes.node.isRequired,
+    currentValue: React.PropTypes.bool.isRequired,
+    trueText: React.PropTypes.node,
+    falseText: React.PropTypes.node,
+    isDisabled: React.PropTypes.bool.isRequired,
+    handleChange: React.PropTypes.func.isRequired,
+    helpText: React.PropTypes.node.isRequired
+};

webapp/components/admin_console/connection_security_dropdown_setting.jsx

@@ -0,0 +1,94 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import * as Utils from 'utils/utils.jsx';
+
+import DropdownSetting from './dropdown_setting.jsx';
+import {FormattedMessage} from 'react-intl';
+
+const CONNECTION_SECURITY_HELP_TEXT = (
+    <div className='help-text'>
+        <table
+            className='table table-bordered'
+            cellPadding='5'
+        >
+            <tbody>
+                <tr>
+                    <td className='help-text'>
+                        <FormattedMessage
+                            id='admin.connectionSecurityNone'
+                            defaultMessage='None'
+                        />
+                    </td>
+                    <td className='help-text'>
+                        <FormattedMessage
+                            id='admin.connectionSecurityNoneDescription'
+                            defaultMessage='Mattermost will connect over an unsecure connection.'
+                        />
+                    </td>
+                </tr>
+                <tr>
+                    <td className='help-text'>
+                        <FormattedMessage
+                            id='admin.connectionSecurityTls'
+                            defaultMessage='TLS'
+                        />
+                    </td>
+                    <td className='help-text'>
+                        <FormattedMessage
+                            id='admin.connectionSecurityTlsDescription'
+                            defaultMessage='Encrypts the communication between Mattermost and your server.'
+                        />
+                    </td>
+                </tr>
+                <tr>
+                    <td className='help-text'>
+                        <FormattedMessage
+                            id='admin.connectionSecurityStart'
+                            defaultMessage='STARTTLS'
+                        />
+                    </td>
+                    <td className='help-text'>
+                        <FormattedMessage
+                            id='admin.connectionSecurityStartDescription'
+                            defaultMessage='Takes an existing insecure connection and attempts to upgrade it to a secure connection using TLS.'
+                        />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+);
+
+export default class ConnectionSecurityDropdownSetting extends React.Component {
+    render() {
+        return (
+            <DropdownSetting
+                values={[
+                    {value: '', text: Utils.localizeMessage('admin.connectionSecurityNone', 'None')},
+                    {value: 'TLS', text: Utils.localizeMessage('admin.connectionSecurityTls', 'TLS (Recommended)')},
+                    {value: 'STARTTLS', text: Utils.localizeMessage('admin.connectionSecurityStart')}
+                ]}
+                label={
+                    <FormattedMessage
+                        id='admin.connectionSecurityTitle'
+                        defaultMessage='Connection Security:'
+                    />
+                }
+                currentValue={this.props.currentValue}
+                handleChange={this.props.handleChange}
+                isDisabled={this.props.isDisabled}
+                helpText={CONNECTION_SECURITY_HELP_TEXT}
+            />
+        );
+    }
+}
+ConnectionSecurityDropdownSetting.defaultProps = {
+};
+
+ConnectionSecurityDropdownSetting.propTypes = {
+    currentValue: React.PropTypes.string.isRequired,
+    handleChange: React.PropTypes.func.isRequired,
+    isDisabled: React.PropTypes.bool.isRequired
+};

webapp/components/admin_console/dropdown_setting.jsx

@@ -0,0 +1,47 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import Setting from './setting.jsx';
+
+export default class DropdownSetting extends React.Component {
+    render() {
+        const options = [];
+        for (const {value, text} of this.props.values) {
+            options.push(
+                <option
+                    value={value}
+                    key={value}
+                >
+                    {text}
+                </option>
+            );
+        }
+
+        return (
+            <Setting label={this.props.label}>
+                <select
+                    className='form-control'
+                    value={this.props.currentValue}
+                    onChange={this.props.handleChange}
+                    disabled={this.props.isDisabled}
+                >
+                    {options}
+                </select>
+                {this.props.helpText}
+            </Setting>
+        );
+    }
+}
+DropdownSetting.defaultProps = {
+};
+
+DropdownSetting.propTypes = {
+    values: React.PropTypes.array.isRequired,
+    label: React.PropTypes.node.isRequired,
+    currentValue: React.PropTypes.string.isRequired,
+    handleChange: React.PropTypes.func.isRequired,
+    isDisabled: React.PropTypes.bool.isRequired,
+    helpText: React.PropTypes.node.isRequired
+};

webapp/components/admin_console/email_settings.jsx

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import * as Client from 'utils/client.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import crypto from 'crypto';
+import ConnectionSecurityDropdownSetting from './connection_security_dropdown_setting.jsx';
 
 import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
@@ -34,18 +35,6 @@ var holders = defineMessages({
         id: 'admin.email.smtpPortExample',
         defaultMessage: 'Ex: "25", "465"'
     },
-    connectionSecurityNone: {
-        id: 'admin.email.connectionSecurityNone',
-        defaultMessage: 'None'
-    },
-    connectionSecurityTls: {
-        id: 'admin.email.connectionSecurityTls',
-        defaultMessage: 'TLS (Recommended)'
-    },
-    connectionSecurityStart: {
-        id: 'admin.email.connectionSecurityStart',
-        defaultMessage: 'STARTTLS'
-    },
     inviteSaltExample: {
         id: 'admin.email.inviteSaltExample',
         defaultMessage: 'Ex "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9Yo"'
@@ -96,7 +85,8 @@ class EmailSettings extends React.Component {
             serverError: null,
             emailSuccess: null,
             emailFail: null,
-            pushNotificationContents: this.props.config.EmailSettings.PushNotificationContents
+            pushNotificationContents: this.props.config.EmailSettings.PushNotificationContents,
+            connectionSecurity: this.props.config.EmailSettings.ConnectionSecurity
         };
     }
 
@@ -138,7 +128,7 @@ class EmailSettings extends React.Component {
         config.EmailSettings.SMTPPort = ReactDOM.findDOMNode(this.refs.SMTPPort).value.trim();
         config.EmailSettings.SMTPUsername = ReactDOM.findDOMNode(this.refs.SMTPUsername).value.trim();
         config.EmailSettings.SMTPPassword = ReactDOM.findDOMNode(this.refs.SMTPPassword).value.trim();
-        config.EmailSettings.ConnectionSecurity = ReactDOM.findDOMNode(this.refs.ConnectionSecurity).value.trim();
+        config.EmailSettings.ConnectionSecurity = this.state.connectionSecurity.trim();
 
         config.EmailSettings.InviteSalt = ReactDOM.findDOMNode(this.refs.InviteSalt).value.trim();
         if (config.EmailSettings.InviteSalt === '') {
@@ -703,61 +693,13 @@ class EmailSettings extends React.Component {
                         </div>
                     </div>
 
+                    <ConnectionSecurityDropdownSetting
+                        currentValue={this.state.connectionSecurity}
+                        handleChange={(e) => this.setState({connectionSecurity: e.target.value, saveNeeded: true})}
+                        isDisabled={!this.state.sendEmailNotifications}
+                    />
                     <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='ConnectionSecurity'
-                        >
-                            <FormattedMessage
-                                id='admin.email.connectionSecurityTitle'
-                                defaultMessage='Connection Security:'
-                            />
-                        </label>
                         <div className='col-sm-8'>
-                            <select
-                                className='form-control'
-                                id='ConnectionSecurity'
-                                ref='ConnectionSecurity'
-                                defaultValue={this.props.config.EmailSettings.ConnectionSecurity}
-                                onChange={this.handleChange}
-                                disabled={!this.state.sendEmailNotifications}
-                            >
-                                <option value=''>{formatMessage(holders.connectionSecurityNone)}</option>
-                                <option value='TLS'>{formatMessage(holders.connectionSecurityTls)}</option>
-                                <option value='STARTTLS'>{formatMessage(holders.connectionSecurityStart)}</option>
-                            </select>
-                            <div className='help-text'>
-                                <table
-                                    className='table table-bordered'
-                                    cellPadding='5'
-                                >
-                                    <tbody>
-                                        <tr><td className='help-text'>
-                                            <FormattedMessage
-                                                id='admin.email.connectionSecurityNone'
-                                                defaultMessage='None'
-                                            />
-                                        </td><td className='help-text'>
-                                            <FormattedMessage
-                                                id='admin.email.connectionSecurityNoneDescription'
-                                                defaultMessage='Mattermost will send email over an unsecure connection.'
-                                            />
-                                        </td></tr>
-                                        <tr><td className='help-text'>{'TLS'}</td><td className='help-text'>
-                                            <FormattedMessage
-                                                id='admin.email.connectionSecurityTlsDescription'
-                                                defaultMessage='Encrypts the communication between Mattermost and your email server.'
-                                            />
-                                        </td></tr>
-                                        <tr><td className='help-text'>{'STARTTLS'}</td><td className='help-text'>
-                                            <FormattedMessage
-                                                id='admin.email.connectionSecurityStartDescription'
-                                                defaultMessage='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'>
                                 <button
                                     className='btn btn-default'

webapp/components/admin_console/ldap_settings.jsx

@@ -8,6 +8,8 @@ import * as Utils from 'utils/utils.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+import ConnectionSecurityDropdownSetting from './connection_security_dropdown_setting.jsx';
+import BooleanSetting from './boolean_setting.jsx';
 
 const DEFAULT_LDAP_PORT = 389;
 const DEFAULT_QUERY_TIMEOUT = 60;
@@ -26,7 +28,9 @@ class LdapSettings extends React.Component {
         this.state = {
             saveNeeded: false,
             serverError: null,
-            enable: this.props.config.LdapSettings.Enable
+            enable: this.props.config.LdapSettings.Enable,
+            connectionSecurity: this.props.config.LdapSettings.ConnectionSecurity,
+            skipCertificateVerification: this.props.config.LdapSettings.SkipCertificateVerification
         };
     }
     handleChange() {
@@ -61,6 +65,8 @@ class LdapSettings extends React.Component {
         config.LdapSettings.UsernameAttribute = this.refs.UsernameAttribute.value.trim();
         config.LdapSettings.IdAttribute = this.refs.IdAttribute.value.trim();
         config.LdapSettings.UserFilter = this.refs.UserFilter.value.trim();
+        config.LdapSettings.ConnectionSecurity = this.state.connectionSecurity.trim();
+        config.LdapSettings.SkipCertificateVerification = this.state.skipCertificateVerification;
 
         let QueryTimeout = DEFAULT_QUERY_TIMEOUT;
         if (!isNaN(parseInt(ReactDOM.findDOMNode(this.refs.QueryTimeout).value, 10))) {
@@ -251,6 +257,11 @@ class LdapSettings extends React.Component {
                             </p>
                         </div>
                     </div>
+                    <ConnectionSecurityDropdownSetting
+                        currentValue={this.state.connectionSecurity}
+                        handleChange={(e) => this.setState({connectionSecurity: e.target.value, saveNeeded: true})}
+                        isDisabled={!this.state.enable}
+                    />
                     <div className='form-group'>
                         <label
                             className='control-label col-sm-4'
@@ -512,6 +523,25 @@ class LdapSettings extends React.Component {
                             </p>
                         </div>
                     </div>
+                    <BooleanSetting
+                        label={
+                            <FormattedMessage
+                                id='admin.ldap.skipCertificateVerification'
+                                defaultMessage='Skip Certificate Verification'
+                            />
+                        }
+                        currentValue={this.state.skipCertificateVerification}
+                        isDisabled={!this.state.enable}
+                        handleChange={(e) => this.setState({skipCertificateVerification: e.target.value.trim() === 'true', saveNeeded: true})}
+                        helpText={
+                            <p className='help-text'>
+                                <FormattedMessage
+                                    id='admin.ldap.skipCertificateVerificationDesc'
+                                    defaultMessage='Skips the certificate verificaiton step for TLS or STARTTLS connections. Not recommented for production enviroments where TLS is required. For testing only.'
+                                />
+                            </p>
+                        }
+                    />
                     <div className='form-group'>
                         <label
                             className='control-label col-sm-4'

webapp/components/admin_console/setting.jsx

@@ -0,0 +1,28 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+export default class Setting extends React.Component {
+    render() {
+        return (
+            <div className='form-group'>
+                <label
+                    className='control-label col-sm-4'
+                >
+                    {this.props.label}
+                </label>
+                <div className='col-sm-8'>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+Setting.defaultProps = {
+};
+
+Setting.propTypes = {
+    label: React.PropTypes.node.isRequired,
+    children: React.PropTypes.node.isRequired
+};