Merge pull request #1579 from coralproject/bug-fixes

Fixes password validation field for Change Email Dialog

plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js

@@ -18,10 +18,18 @@ class ChangeEmailContentDialog extends React.Component {
 
   confirmChanges = async e => {
     e.preventDefault();
+
+    if (this.formHasError()) {
+      this.showError();
+      return;
+    }
+
     await this.props.save();
     this.props.next();
   };
 
+  formHasError = () => this.props.hasError('confirmPassword');
+
   render() {
     return (
       <div>
@@ -53,15 +61,10 @@ class ChangeEmailContentDialog extends React.Component {
               type="password"
               onChange={this.props.onChange}
               defaultValue=""
-              hasError={
-                !this.props.formData.confirmPassword && this.state.showError
-              }
-              errorMsg={t(
-                'talk-plugin-local-auth.change_email.incorrect_password'
-              )}
+              hasError={this.props.hasError('confirmPassword')}
+              errorMsg={this.props.getError('confirmPassword')}
               showError={this.state.showError}
               columnDisplay
-              showSuccess={false}
             />
             <div className={styles.bottomActions}>
               <Button
@@ -89,6 +92,8 @@ ChangeEmailContentDialog.propTypes = {
   onChange: PropTypes.func,
   formData: PropTypes.object,
   email: PropTypes.string,
+  hasError: PropTypes.func,
+  getError: PropTypes.func,
 };
 
 export default ChangeEmailContentDialog;

plugins/talk-plugin-local-auth/client/components/Profile.js

@@ -155,6 +155,10 @@ class Profile extends React.Component {
     }
   };
 
+  getError = errorKey => {
+    return this.state.errors[errorKey];
+  };
+
   finish = () => {
     this.clearForm();
     this.disableEditing();
@@ -193,6 +197,7 @@ class Profile extends React.Component {
               formData={this.state.formData}
               username={username}
               enable={formData.newUsername && username !== formData.newUsername}
+              hasError={this.hasError}
             />
           )}
           <ChangeEmailContentDialog
@@ -201,6 +206,8 @@ class Profile extends React.Component {
             formData={this.state.formData}
             email={email}
             enable={formData.newEmail && email !== formData.newEmail}
+            hasError={this.hasError}
+            getError={this.getError}
           />
         </ConfirmChangesDialog>