added errors to claim ldap account (#3468)

2 files changed, 108 insertions, 42 deletions

diff --git a/webapp/components/claim/components/email_to_ldap.jsx b/webapp/components/claim/components/email_to_ldap.jsx
index c37717421..92d822a34 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 = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
+        let serverError = null;
+        let formClass = 'form-group';
+        if (this.state.serverError) {
+            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+            formClass += ' has-error';
         }
 
-        var formClass = 'form-group';
-        if (error) {
-            formClass += ' has-error';
+        let passwordError = null;
+        let passwordClass = 'form-group';
+        if (this.state.passwordError) {
+            passwordError = <div className='form-group has-error'><label className='control-label'>{this.state.passwordError}</label></div>;
+            passwordClass += ' has-error';
+        }
+
+        let ldapError = null;
+        let ldapClass = 'form-group';
+        if (this.state.ldapError) {
+            ldapError = <div className='form-group has-error'><label className='control-label'>{this.state.ldapError}</label></div>;
+            ldapClass += ' has-error';
+        }
+
+        let ldapPasswordError = null;
+        let ldapPasswordClass = 'form-group';
+        if (this.state.ldapPasswordError) {
+            ldapPasswordError = <div className='form-group has-error'><label className='control-label'>{this.state.ldapPasswordError}</label></div>;
+            ldapPasswordClass += ' has-error';
         }
 
         let loginPlaceholder;
@@ -92,7 +119,10 @@ export default class EmailToLDAP extends React.Component {
                         defaultMessage='Switch Email/Password Account to LDAP'
                     />
                 </h3>
-                <form onSubmit={this.submit}>
+                <form
+                    onSubmit={this.submit}
+                    className={formClass}
+                >
                     <p>
                         <FormattedMessage
                             id='claim.email_to_ldap.ssoType'
@@ -119,7 +149,7 @@ export default class EmailToLDAP extends React.Component {
                         style={{display: 'none'}}
                         name='fakeusernameremembered'
                     />
-                    <div className={formClass}>
+                    <div className={passwordClass}>
                         <input
                             type='password'
                             className='form-control'
@@ -130,13 +160,14 @@ export default class EmailToLDAP extends React.Component {
                             spellCheck='false'
                         />
                     </div>
+                    {passwordError}
                     <p>
                         <FormattedMessage
                             id='claim.email_to_ldap.enterLdapPwd'
                             defaultMessage='Enter the ID and password for your LDAP account'
                         />
                     </p>
-                    <div className={formClass}>
+                    <div className={ldapClass}>
                         <input
                             type='text'
                             className='form-control'
@@ -147,7 +178,8 @@ export default class EmailToLDAP extends React.Component {
                             spellCheck='false'
                         />
                     </div>
-                    <div className={formClass}>
+                    {ldapError}
+                    <div className={ldapPasswordClass}>
                         <input
                             type='password'
                             className='form-control'
@@ -158,7 +190,7 @@ export default class EmailToLDAP extends React.Component {
                             spellCheck='false'
                         />
                     </div>
-                    {error}
+                    {ldapPasswordError}
                     <button
                         type='submit'
                         className='btn btn-primary'
@@ -168,6 +200,7 @@ export default class EmailToLDAP extends React.Component {
                             defaultMessage='Switch account to LDAP'
                         />
                     </button>
+                    {serverError}
                 </form>
             </div>
         );
diff --git a/webapp/components/claim/components/ldap_to_email.jsx b/webapp/components/claim/components/ldap_to_email.jsx
index fbc8bcebf..002ff89bd 100644
--- a/webapp/components/claim/components/ldap_to_email.jsx
+++ b/webapp/components/claim/components/ldap_to_email.jsx
@@ -15,35 +15,44 @@ export default class LDAPToEmail extends React.Component {
 
         this.submit = this.submit.bind(this);
 
-        this.state = {};
+        this.state = {
+            passwordError: '',
+            confirmError: '',
+            ldapPasswordError: '',
+            serverError: ''
+        };
     }
 
     submit(e) {
         e.preventDefault();
-        var state = {};
+        var state = {
+            passwordError: '',
+            confirmError: '',
+            ldapPasswordError: '',
+            serverError: ''
+        };
 
-        const password = ReactDOM.findDOMNode(this.refs.password).value;
-        if (!password) {
-            state.error = Utils.localizeMessage('claim.ldap_to_email.pwdError', 'Please enter your password.');
+        const ldapPassword = ReactDOM.findDOMNode(this.refs.ldappassword).value;
+        if (!ldapPassword) {
+            state.ldapPasswordError = Utils.localizeMessage('claim.ldap_to_email.ldapPasswordError', 'Please enter your LDAP password.');
             this.setState(state);
             return;
         }
 
-        const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value;
-        if (!confirmPassword || password !== confirmPassword) {
-            state.error = Utils.localizeMessage('claim.ldap_to_email.pwdNotMatch', 'Passwords do not match.');
+        const password = ReactDOM.findDOMNode(this.refs.password).value;
+        if (!password) {
+            state.passwordError = Utils.localizeMessage('claim.ldap_to_email.pwdError', 'Please enter your password.');
             this.setState(state);
             return;
         }
 
-        const ldapPassword = ReactDOM.findDOMNode(this.refs.ldappassword).value;
-        if (!ldapPassword) {
-            state.error = Utils.localizeMessage('claim.ldap_to_email.ldapPasswordError', 'Please enter your LDAP password.');
+        const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value;
+        if (!confirmPassword || password !== confirmPassword) {
+            state.confirmError = Utils.localizeMessage('claim.ldap_to_email.pwdNotMatch', 'Passwords do not match.');
             this.setState(state);
             return;
         }
 
-        state.error = null;
         this.setState(state);
 
         switchFromLdapToEmail(
@@ -51,19 +60,37 @@ export default class LDAPToEmail extends React.Component {
             password,
             ldapPassword,
             null,
-            (err) => this.setState({error: err.message})
+            (err) => this.setState({serverError: err.message})
         );
     }
 
     render() {
-        var error = null;
-        if (this.state.error) {
-            error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
+        let serverError = null;
+        let formClass = 'form-group';
+        if (this.state.serverError) {
+            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+            formClass += ' has-error';
         }
 
-        var formClass = 'form-group';
-        if (error) {
-            formClass += ' has-error';
+        let passwordError = null;
+        let passwordClass = 'form-group';
+        if (this.state.passwordError) {
+            passwordError = <div className='form-group has-error'><label className='control-label'>{this.state.passwordError}</label></div>;
+            passwordClass += ' has-error';
+        }
+
+        let ldapPasswordError = null;
+        let ldapPasswordClass = 'form-group';
+        if (this.state.ldapPasswordError) {
+            ldapPasswordError = <div className='form-group has-error'><label className='control-label'>{this.state.ldapPasswordError}</label></div>;
+            ldapPasswordClass += ' has-error';
+        }
+
+        let confirmError = null;
+        let confimClass = 'form-group';
+        if (this.state.confirmError) {
+            confirmError = <div className='form-group has-error'><label className='control-label'>{this.state.confirmError}</label></div>;
+            confimClass += ' has-error';
         }
 
         let passwordPlaceholder;
@@ -81,7 +108,10 @@ export default class LDAPToEmail extends React.Component {
                         defaultMessage='Switch LDAP Account to Email/Password'
                     />
                 </h3>
-                <form onSubmit={this.submit}>
+                <form
+                    onSubmit={this.submit}
+                    className={formClass}
+                >
                     <p>
                         <FormattedMessage
                             id='claim.ldap_to_email.ssoType'
@@ -107,7 +137,7 @@ export default class LDAPToEmail extends React.Component {
                             }}
                         />
                     </p>
-                    <div className={formClass}>
+                    <div className={ldapPasswordClass}>
                         <input
                             type='password'
                             className='form-control'
@@ -117,13 +147,14 @@ export default class LDAPToEmail extends React.Component {
                             spellCheck='false'
                         />
                     </div>
+                    {ldapPasswordError}
                     <p>
                         <FormattedMessage
                             id='claim.ldap_to_email.enterPwd'
                             defaultMessage='Enter a new password for your email account'
                         />
                     </p>
-                    <div className={formClass}>
+                    <div className={passwordClass}>
                         <input
                             type='password'
                             className='form-control'
@@ -133,7 +164,8 @@ export default class LDAPToEmail extends React.Component {
                             spellCheck='false'
                         />
                     </div>
-                    <div className={formClass}>
+                    {passwordError}
+                    <div className={confimClass}>
                         <input
                             type='password'
                             className='form-control'
@@ -143,7 +175,7 @@ export default class LDAPToEmail extends React.Component {
                             spellCheck='false'
                         />
                     </div>
-                    {error}
+                    {confirmError}
                     <button
                         type='submit'
                         className='btn btn-primary'
@@ -153,6 +185,7 @@ export default class LDAPToEmail extends React.Component {
                             defaultMessage='Switch account to email/password'
                         />
                     </button>
+                    {serverError}
                 </form>
             </div>
         );