Allow customization of LDAP login fields (#2692)

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}

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>