Changes

client/coral-framework/graphql/fragments.js

@@ -27,6 +27,7 @@ export default {
     'UpdateAssetStatusResponse',
     'UpdateSettingsResponse',
     'ChangePasswordResponse',
-    'UpdateEmailAddressResponse'
+    'UpdateEmailAddressResponse',
+    'AttachLocalAuthResponse'
   ),
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
+import isMatch from 'lodash/isEqual';
+import isEqualWith from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { Dialog } from 'plugin-api/beta/client/components/ui';
 import validate from 'coral-framework/helpers/validate';
@@ -20,7 +21,7 @@ const initialState = {
 
 class AddEmailAddressDialog extends React.Component {
   state = initialState;
-  validKeys = ['emailAddress', 'confirmEmailAddress', 'confirmPassword'];
+  validKeys = ['emailAddress', 'confirmPassword', 'confirmEmailAddress'];
 
   onChange = e => {
     const { name, value, type } = e.target;
@@ -70,10 +71,12 @@ class AddEmailAddressDialog extends React.Component {
 
   formHasError = () => {
     const formHasErrors = !!Object.keys(this.state.errors).length;
-    const formIncomplete = !isEqual(
+    const formIncomplete = !isEqualWith(
       Object.keys(this.state.formData),
-      this.validKeys
+      this.validKeys,
+      isMatch
     );
+
     return formHasErrors || formIncomplete;
   };
 
@@ -113,6 +116,7 @@ class AddEmailAddressDialog extends React.Component {
   render() {
     const { errors, formData, showErrors, step } = this.state;
     const { root: { settings } } = this.props;
+
     return (
       <Dialog className={styles.dialog} open={true}>
         {step === 0 && (
@@ -121,6 +125,7 @@ class AddEmailAddressDialog extends React.Component {
             errors={errors}
             showErrors={showErrors}
             confirmChanges={this.confirmChanges}
+            onChange={this.onChange}
           />
         )}
         {step === 1 &&

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

@@ -5,7 +5,13 @@ import { Icon } from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 import InputField from './InputField';
 
-const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => (
+const AddEmailContent = ({
+  formData,
+  errors,
+  showErrors,
+  confirmChanges,
+  onChange,
+}) => (
   <div>
     <h4 className={styles.title}>Add an Email Address</h4>
     <p className={styles.description}>
@@ -33,13 +39,14 @@ const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => (
         </span>
       </li>
     </ul>
-    <form>
+
+    <form autoComplete="off">
       <InputField
         id="emailAddress"
         label="Enter Email Address:"
         name="emailAddress"
         type="email"
-        onChange={this.onChange}
+        onChange={onChange}
         defaultValue=""
         hasError={!formData.emailAddress || errors.emailAddress}
         errorMsg={'Invalid email address'}
@@ -52,7 +59,7 @@ const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => (
         label="Confirm Email Address:"
         name="confirmEmailAddress"
         type="email"
-        onChange={this.onChange}
+        onChange={onChange}
         defaultValue=""
         hasError={
           !formData.emailAddress ||
@@ -68,7 +75,7 @@ const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => (
         label="Insert Password"
         name="confirmPassword"
         type="password"
-        onChange={this.onChange}
+        onChange={onChange}
         defaultValue=""
         hasError={!formData.confirmPassword}
         errorMsg={'Confirm Password'}
@@ -88,6 +95,7 @@ AddEmailContent.propTypes = {
   errors: PropTypes.object.isRequired,
   showErrors: PropTypes.bool.isRequired,
   confirmChanges: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
 };
 
 export default AddEmailContent;