Passing Dialog content

client/coral-framework/graphql/mutations.js

@@ -331,7 +331,7 @@ export const withUpdateEmailAddress = withMutation(
   `,
   {
     props: ({ mutate }) => ({
-      updateEmailAdress: input => {
+      updateEmailAddress: input => {
         return mutate({
           variables: {
             input,

plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailContentDialog.js

@@ -8,7 +8,6 @@ import { t } from 'plugin-api/beta/client/services';
 class ChangeEmailContentDialog extends React.Component {
   state = {
     showError: false,
-    errors: {},
   };
 
   showError = () => {
@@ -53,7 +52,9 @@ class ChangeEmailContentDialog extends React.Component {
               type="password"
               onChange={this.props.onChange}
               defaultValue=""
-              hasError={this.state.errors.password && this.state.showError}
+              hasError={
+                !this.props.formData.confirmPassword && this.state.showError
+              }
               errorMsg={t('talk-plugin-auth.change_email.incorrect_password')}
               showError={this.state.showError}
               columnDisplay

plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.js

@@ -31,6 +31,7 @@ class ConfirmChangesDialog extends React.Component {
   finish = () => {
     this.clear();
     this.props.closeDialog();
+    this.props.finish();
   };
 
   render() {
@@ -43,7 +44,6 @@ class ConfirmChangesDialog extends React.Component {
           const totalSteps = React.Children.count(this.props.children);
           if (i !== this.state.step) return;
           return React.cloneElement(child, {
-            onChange: this.props.onChange,
             goToNextStep: this.goToNextStep,
             clear: this.clear,
             cancel: this.cancel,
@@ -58,13 +58,9 @@ class ConfirmChangesDialog extends React.Component {
 
 ConfirmChangesDialog.propTypes = {
   children: PropTypes.node,
-  saveChanges: PropTypes.func,
   closeDialog: PropTypes.func,
   showDialog: PropTypes.bool,
-  onChange: PropTypes.func,
-  emailAddress: PropTypes.string,
-  username: PropTypes.string,
-  formData: PropTypes.object,
+  finish: PropTypes.func,
 };
 
 export default ConfirmChangesDialog;

plugins/talk-plugin-auth/client/profile-settings/components/Profile.js

@@ -137,17 +137,16 @@ class Profile extends React.Component {
   };
 
   saveEmail = async () => {
-    const { newUsername } = this.state.formData;
-    const { id } = this.props;
+    const { newEmail, confirmPassword } = this.state.formData;
 
     try {
-      await this.props.changeUsername({
-        id,
-        username: newUsername,
+      await this.props.updateEmailAddress({
+        email: newEmail,
+        confirmPassword,
       });
       this.props.notify(
         'success',
-        t('talk-plugin-auth.change_username.changed_username_success_msg')
+        t('talk-plugin-auth.change_email.change_email_msg')
       );
     } catch (err) {
       this.props.notify('error', getErrorMessages(err));
@@ -161,7 +160,7 @@ class Profile extends React.Component {
 
   render() {
     const { username, emailAddress } = this.props;
-    const { editing } = this.state;
+    const { editing, formData } = this.state;
 
     return (
       <section
@@ -172,19 +171,25 @@ class Profile extends React.Component {
         <ConfirmChangesDialog
           showDialog={this.state.showDialog}
           closeDialog={this.closeDialog}
+          finish={this.finish}
         >
-          <ChangeEmailContentDialog
-            save={this.saveEmail}
-            onChange={this.onChange}
-            formData={this.state.formData}
-            emailAddress={emailAddress}
-          />
-          <ChangeUsernameContentDialog
-            save={this.saveUsername}
-            onChange={this.onChange}
-            formData={this.state.formData}
-            username={username}
-          />
+          {username !== formData.newUsername && (
+            <ChangeUsernameContentDialog
+              save={this.saveUsername}
+              onChange={this.onChange}
+              formData={this.state.formData}
+              username={username}
+            />
+          )}
+
+          {emailAddress !== formData.newEmail && (
+            <ChangeEmailContentDialog
+              save={this.saveEmail}
+              onChange={this.onChange}
+              formData={this.state.formData}
+              emailAddress={emailAddress}
+            />
+          )}
         </ConfirmChangesDialog>
 
         {editing ? (
@@ -253,6 +258,7 @@ class Profile extends React.Component {
 }
 
 Profile.propTypes = {
+  updateEmailAddress: PropTypes.func.isRequired,
   changeUsername: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
   username: PropTypes.string,