diff --git a/webapp/components/claim/components/email_to_ldap.jsx b/webapp/components/claim/components/email_to_ldap.jsx index c377174217..92d822a349 100644 --- a/webapp/components/claim/components/email_to_ldap.jsx +++ b/webapp/components/claim/components/email_to_ldap.jsx @@ -14,34 +14,43 @@ export default class EmailToLDAP extends React.Component { this.submit = this.submit.bind(this); - this.state = {}; + this.state = { + passwordError: '', + ldapError: '', + ldapPasswordError: '', + serverError: '' + }; } submit(e) { e.preventDefault(); - var state = {}; + var state = { + passwordError: '', + ldapError: '', + ldapPasswordError: '', + serverError: '' + }; const password = ReactDOM.findDOMNode(this.refs.emailpassword).value; if (!password) { - state.error = Utils.localizeMessage('claim.email_to_ldap.pwdError', 'Please enter your password.'); + state.passwordError = Utils.localizeMessage('claim.email_to_ldap.pwdError', 'Please enter your password.'); this.setState(state); return; } const ldapId = ReactDOM.findDOMNode(this.refs.ldapid).value.trim(); if (!ldapId) { - state.error = Utils.localizeMessage('claim.email_to_ldap.ldapIdError', 'Please enter your LDAP ID.'); + state.ldapError = Utils.localizeMessage('claim.email_to_ldap.ldapIdError', 'Please enter your LDAP ID.'); this.setState(state); return; } const ldapPassword = ReactDOM.findDOMNode(this.refs.ldappassword).value; if (!ldapPassword) { - state.error = Utils.localizeMessage('claim.email_to_ldap.ldapPasswordError', 'Please enter your LDAP password.'); + state.ldapPasswordError = Utils.localizeMessage('claim.email_to_ldap.ldapPasswordError', 'Please enter your LDAP password.'); this.setState(state); return; } - state.error = null; this.setState(state); Client.emailToLdap( @@ -55,19 +64,37 @@ export default class EmailToLDAP extends React.Component { } }, (err) => { - this.setState({error: err.message}); + this.setState({serverError: err.message}); } ); } render() { - var error = null; - if (this.state.error) { - error =
; + let serverError = null; + let formClass = 'form-group'; + if (this.state.serverError) { + serverError = ; + formClass += ' has-error'; } - var formClass = 'form-group'; - if (error) { - formClass += ' has-error'; + let passwordError = null; + let passwordClass = 'form-group'; + if (this.state.passwordError) { + passwordError = ; + passwordClass += ' has-error'; + } + + let ldapError = null; + let ldapClass = 'form-group'; + if (this.state.ldapError) { + ldapError = ; + ldapClass += ' has-error'; + } + + let ldapPasswordError = null; + let ldapPasswordClass = 'form-group'; + if (this.state.ldapPasswordError) { + ldapPasswordError = ; + ldapPasswordClass += ' has-error'; } let loginPlaceholder; @@ -92,7 +119,10 @@ export default class EmailToLDAP extends React.Component { defaultMessage='Switch Email/Password Account to LDAP' /> -