WIP: Steps

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

@@ -18,7 +18,8 @@ class ChangeEmailContentDialog extends React.Component {
   };
 
   confirmChanges = async () => {
-    await this.props.saveChanges();
+    await this.props.save();
+    this.props.next();
   };
 
   render() {
@@ -77,7 +78,8 @@ class ChangeEmailContentDialog extends React.Component {
 }
 
 ChangeEmailContentDialog.propTypes = {
-  saveChanges: PropTypes.func,
+  save: PropTypes.func,
+  next: PropTypes.func,
   cancel: PropTypes.func,
   onChange: PropTypes.func,
   formData: PropTypes.object,

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

@@ -20,7 +20,8 @@ class ChangeUsernameContentDialog extends React.Component {
     if (this.formHasError()) {
       this.showError();
     } else {
-      await this.props.saveChanges();
+      await this.props.save();
+      this.props.next();
     }
   };
 
@@ -90,7 +91,8 @@ class ChangeUsernameContentDialog extends React.Component {
 }
 
 ChangeUsernameContentDialog.propTypes = {
-  saveChanges: PropTypes.func,
+  save: PropTypes.func,
+  next: PropTypes.func,
   cancel: PropTypes.func,
   onChange: PropTypes.func,
   formData: PropTypes.object,

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

@@ -15,24 +15,22 @@ class ConfirmChangesDialog extends React.Component {
     }));
   };
 
-  saveAndContinue = async () => {
-    await this.props.saveChanges();
-    this.goToNextStep();
-  };
-
-  saveAndFinish = async () => {
-    await this.props.saveChanges();
-    this.clear();
-    this.closeDialog();
-  };
-
   clear = () => {
     this.setState(initialState);
   };
 
-  cancel = async () => {
+  cancel = () => {
     this.clear();
-    this.closeDialog();
+    this.props.closeDialog();
+  };
+
+  continue = () => {
+    this.goToNextStep();
+  };
+
+  finish = () => {
+    this.clear();
+    this.props.closeDialog();
   };
 
   render() {
@@ -45,10 +43,12 @@ class ConfirmChangesDialog extends React.Component {
           const totalSteps = React.Children.count(this.props.children);
           if (i !== this.state.step) return;
           return React.cloneElement(child, {
-            ...this.props,
+            onChange: this.props.onChange,
+            goToNextStep: this.goToNextStep,
+            clear: this.clear,
             cancel: this.cancel,
-            saveChanges:
-              i === totalSteps - 1 ? this.saveAndFinish : this.saveAndContinue,
+            next:
+              this.state.step === totalSteps - 1 ? this.finish : this.continue,
           });
         })}
       </Dialog>

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

@@ -53,27 +53,6 @@ class Profile extends React.Component {
     this.showDialog();
   };
 
-  saveChanges = async () => {
-    const { newUsername } = this.state.formData;
-    const { id } = this.props;
-
-    try {
-      await this.props.changeUsername({
-        id,
-        username: newUsername,
-      });
-      this.props.notify(
-        'success',
-        t('talk-plugin-auth.change_username.changed_username_success_msg')
-      );
-    } catch (err) {
-      this.props.notify('error', getErrorMessages(err));
-    }
-
-    this.clearForm();
-    this.disableEditing();
-  };
-
   addError = err => {
     this.setState(({ errors }) => ({
       errors: { ...errors, ...err },
@@ -139,6 +118,47 @@ class Profile extends React.Component {
     return !formHasErrors && (validUsername || validEmail);
   };
 
+  saveUsername = async () => {
+    const { newUsername } = this.state.formData;
+    const { id } = this.props;
+
+    try {
+      await this.props.changeUsername({
+        id,
+        username: newUsername,
+      });
+      this.props.notify(
+        'success',
+        t('talk-plugin-auth.change_username.changed_username_success_msg')
+      );
+    } catch (err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+  };
+
+  saveEmail = async () => {
+    const { newUsername } = this.state.formData;
+    const { id } = this.props;
+
+    try {
+      await this.props.changeUsername({
+        id,
+        username: newUsername,
+      });
+      this.props.notify(
+        'success',
+        t('talk-plugin-auth.change_username.changed_username_success_msg')
+      );
+    } catch (err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+  };
+
+  finish = () => {
+    this.clearForm();
+    this.disableEditing();
+  };
+
   render() {
     const { username, emailAddress } = this.props;
     const { editing } = this.state;
@@ -151,15 +171,20 @@ class Profile extends React.Component {
       >
         <ConfirmChangesDialog
           showDialog={this.state.showDialog}
-          onChange={this.onChange}
-          formData={this.state.formData}
-          username={username}
-          emailAddress={emailAddress}
           closeDialog={this.closeDialog}
-          saveChanges={this.saveChanges}
         >
-          <ChangeEmailContentDialog />
-          <ChangeUsernameContentDialog />
+          <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}
+          />
         </ConfirmChangesDialog>
 
         {editing ? (