Allow customization of LDAP login fields (#2692)

config/config.json

@@ -145,7 +145,9 @@
         "UsernameAttribute": "",
         "IdAttribute": "",
         "SkipCertificateVerification": false,
-        "QueryTimeout": 60
+        "QueryTimeout": 60,
+        "LoginFieldName": "",
+        "PasswordFieldName": ""
     },
     "ComplianceSettings": {
         "Enable": false,

model/config.go

@@ -185,6 +185,10 @@ type LdapSettings struct {
 	// Advanced
 	SkipCertificateVerification *bool
 	QueryTimeout                *int
+
+	// Customization
+	LoginFieldName    *string
+	PasswordFieldName *string
 }
 
 type ComplianceSettings struct {
@@ -388,6 +392,16 @@ func (o *Config) SetDefaults() {
 		*o.LdapSettings.UserFilter = ""
 	}
 
+	if o.LdapSettings.LoginFieldName == nil {
+		o.LdapSettings.LoginFieldName = new(string)
+		*o.LdapSettings.LoginFieldName = ""
+	}
+
+	if o.LdapSettings.PasswordFieldName == nil {
+		o.LdapSettings.PasswordFieldName = new(string)
+		*o.LdapSettings.PasswordFieldName = ""
+	}
+
 	if o.ServiceSettings.SessionLengthWebInDays == nil {
 		o.ServiceSettings.SessionLengthWebInDays = new(int)
 		*o.ServiceSettings.SessionLengthWebInDays = 30

utils/config.go

@@ -241,6 +241,8 @@ func getClientConfig(c *model.Config) map[string]string {
 	props["ProfileWidth"] = fmt.Sprintf("%v", c.FileSettings.ProfileWidth)
 
 	props["EnableLdap"] = strconv.FormatBool(*c.LdapSettings.Enable)
+	props["LdapLoginFieldName"] = *c.LdapSettings.LoginFieldName
+	props["LdapPasswordFieldName"] = *c.LdapSettings.PasswordFieldName
 
 	props["WebsocketPort"] = fmt.Sprintf("%v", *c.ServiceSettings.WebsocketPort)
 	props["WebsocketSecurePort"] = fmt.Sprintf("%v", *c.ServiceSettings.WebsocketSecurePort)

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>

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.",