diff --git a/client/coral-framework/graphql/fragments.js b/client/coral-framework/graphql/fragments.js index bf75fa1a8..778214b8b 100644 --- a/client/coral-framework/graphql/fragments.js +++ b/client/coral-framework/graphql/fragments.js @@ -27,6 +27,7 @@ export default { 'UpdateAssetStatusResponse', 'UpdateSettingsResponse', 'ChangePasswordResponse', - 'UpdateEmailAddressResponse' + 'UpdateEmailAddressResponse', + 'AttachLocalAuthResponse' ), }; diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js index e5226eae0..c5b816e85 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js +++ b/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 ( {step === 0 && ( @@ -121,6 +125,7 @@ class AddEmailAddressDialog extends React.Component { errors={errors} showErrors={showErrors} confirmChanges={this.confirmChanges} + onChange={this.onChange} /> )} {step === 1 && diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js index 8ff5db689..40edeea2a 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js +++ b/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, +}) => (

Add an Email Address

@@ -33,13 +39,14 @@ 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;