Allow customization of LDAP login fields (#2692)

3 files changed, 85 insertions, 2 deletions

diff --git a/webapp/components/admin_console/ldap_settings.jsx b/webapp/components/admin_console/ldap_settings.jsx
index e5abec95f..dd6e4338f 100644
--- a/webapp/components/admin_console/ldap_settings.jsx
+++ b/webapp/components/admin_console/ldap_settings.jsx
@@ -67,6 +67,8 @@ class LdapSettings extends React.Component {
         config.LdapSettings.UserFilter = this.refs.UserFilter.value.trim();
         config.LdapSettings.ConnectionSecurity = this.state.connectionSecurity.trim();
         config.LdapSettings.SkipCertificateVerification = this.state.skipCertificateVerification;
+        config.LdapSettings.LoginFieldName = this.refs.LoginFieldName.value.trim();
+        config.LdapSettings.PasswordFieldName = this.refs.PasswordFieldName.value.trim();
 
         let QueryTimeout = DEFAULT_QUERY_TIMEOUT;
         if (!isNaN(parseInt(ReactDOM.findDOMNode(this.refs.QueryTimeout).value, 10))) {
@@ -571,6 +573,67 @@ class LdapSettings extends React.Component {
                             </p>
                         </div>
                     </div>
+
+                    <div className='form-group'>
+                        <label
+                            className='control-label col-sm-4'
+                            htmlFor='LoginFieldName'
+                        >
+                            <FormattedMessage
+                                id='admin.ldap.loginNameTitle'
+                                defaultMessage='Login Field Name:'
+                            />
+                        </label>
+                        <div className='col-sm-8'>
+                            <input
+                                type='text'
+                                className='form-control'
+                                id='LoginFieldName'
+                                ref='LoginFieldName'
+                                placeholder={Utils.localizeMessage('admin.ldap.loginNameEx', 'Ex "LDAP Username"')}
+                                defaultValue={this.props.config.LdapSettings.LoginFieldName}
+                                onChange={this.handleChange}
+                                disabled={!this.state.enable}
+                            />
+                            <p className='help-text'>
+                                <FormattedMessage
+                                    id='admin.ldap.loginNameDesc'
+                                    defaultMessage='The placeholder text that appears in the login field on the login page. Defaults to "LDAP Username".'
+                                />
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className='form-group'>
+                        <label
+                            className='control-label col-sm-4'
+                            htmlFor='PasswordFieldName'
+                        >
+                            <FormattedMessage
+                                id='admin.ldap.passwordFieldTitle'
+                                defaultMessage='Password Field Name:'
+                            />
+                        </label>
+                        <div className='col-sm-8'>
+                            <input
+                                type='text'
+                                className='form-control'
+                                id='PasswordFieldName'
+                                ref='PasswordFieldName'
+                                placeholder={Utils.localizeMessage('admin.ldap.passwordFieldEx', 'Ex "LDAP Password"')}
+                                defaultValue={this.props.config.LdapSettings.PasswordFieldName}
+                                onChange={this.handleChange}
+                                disabled={!this.state.enable}
+                            />
+                            <p className='help-text'>
+                                <FormattedMessage
+                                    id='admin.ldap.passwordFieldDesc'
+                                    defaultMessage='The placeholder text that appears in the password field on the login page. Defaults to "LDAP Password".'
+                                />
+                            </p>
+                        </div>
+                    </div>
+
                     <div className='form-group'>
                         <div className='col-sm-12'>
                             {serverError}
diff --git a/webapp/components/login/components/login_ldap.jsx b/webapp/components/login/components/login_ldap.jsx
index a2013710f..36b8a406c 100644
--- a/webapp/components/login/components/login_ldap.jsx
+++ b/webapp/components/login/components/login_ldap.jsx
@@ -52,6 +52,20 @@ export default class LoginLdap extends React.Component {
             errorClass = ' has-error';
         }
 
+        let loginPlaceholder;
+        if (global.window.mm_config.LdapLoginFieldName) {
+            loginPlaceholder = global.window.mm_config.LdapLoginFieldName;
+        } else {
+            loginPlaceholder = Utils.localizeMessage('login_ldap.username', 'LDAP Username');
+        }
+
+        let passwordPlaceholder;
+        if (global.window.mm_config.LdapPasswordFieldName) {
+            passwordPlaceholder = global.window.mm_config.LdapPasswordFieldName;
+        } else {
+            passwordPlaceholder = Utils.localizeMessage('login_ldap.pwd', 'LDAP Password');
+        }
+
         return (
             <form onSubmit={this.handleSubmit}>
                 <div className='signup__email-container'>
@@ -63,7 +77,7 @@ export default class LoginLdap extends React.Component {
                             autoFocus={true}
                             className='form-control'
                             ref='id'
-                            placeholder={Utils.localizeMessage('login_ldap.username', 'LDAP Username')}
+                            placeholder={loginPlaceholder}
                             spellCheck='false'
                         />
                     </div>
@@ -72,7 +86,7 @@ export default class LoginLdap extends React.Component {
                             type='password'
                             className='form-control'
                             ref='password'
-                            placeholder={Utils.localizeMessage('login_ldap.pwd', 'LDAP Password')}
+                            placeholder={passwordPlaceholder}
                             spellCheck='false'
                         />
                     </div>
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 75d516f90..ee2d472e7 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -241,6 +241,12 @@
   "admin.image.thumbWidthExample": "Ex \"120\"",
   "admin.image.thumbWidthTitle": "Thumbnail Width:",
   "admin.image.true": "true",
+  "admin.ldap.loginNameTitle": "Login Field Name:",
+  "admin.ldap.loginNameEx": "Ex \"LDAP Username\"",
+  "admin.ldap.loginNameDesc": "The placeholder text that appears in the login field on the login page. Defaults to \"LDAP Username\".",
+  "admin.ldap.passwordFieldTitle": "Password Field Name:",
+  "admin.ldap.passwordFieldEx": "Ex \"LDAP Password\"",
+  "admin.ldap.passwordFieldDesc": "The placeholder text that appears in the password field on the login page. Defaults to \"LDAP Password\".",
   "admin.ldap.bannerDesc": "If a user attribute changes on the LDAP server it will be updated the next time the user enters their credentials to log in to Mattermost. This includes if a user is made inactive or removed from an LDAP server. Synchronization with LDAP servers is planned in a future release.",
   "admin.ldap.bannerHeading": "Note:",
   "admin.ldap.baseDesc": "The Base DN is the Distinguished Name of the location where Mattermost should start its search for users in the LDAP tree.",