Finished with crossed steps

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

@@ -32,7 +32,6 @@ class ChangeUsernameContentDialog extends React.Component {
 
     await this.props.save();
     this.props.next();
-    this.props.closeDialog();
   };
 
   formHasError = () =>

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

@@ -34,27 +34,28 @@ class ConfirmChangesDialog extends React.Component {
     this.props.finish();
   };
 
+  renderSteps = () => {
+    const steps = React.Children.toArray(this.props.children)
+      .filter(child => child.props.enable)
+      .filter((_, i) => i === this.state.step);
+
+    return steps.map(child => {
+      return React.cloneElement(child, {
+        goToNextStep: this.goToNextStep,
+        clear: this.clear,
+        cancel: this.cancel,
+        next: this.state.step === steps.length ? this.finish : this.continue,
+      });
+    });
+  };
+
   render() {
-    const totalSteps = React.Children.count(this.props.children);
-
-    if (!totalSteps) return null;
-
     return (
       <Dialog
         open={this.props.showDialog}
         className={cn(styles.dialog, 'talk-plugin-auth--edit-profile-dialog')}
       >
-        {React.Children.map(this.props.children, (child, i) => {
-          const totalSteps = React.Children.count(this.props.children);
-          if (i !== this.state.step) return;
-          return React.cloneElement(child, {
-            goToNextStep: this.goToNextStep,
-            clear: this.clear,
-            cancel: this.cancel,
-            next:
-              this.state.step === totalSteps - 1 ? this.finish : this.continue,
-          });
-        })}
+        {this.renderSteps()}
       </Dialog>
     );
   }

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

@@ -176,25 +176,22 @@ class Profile extends React.Component {
           closeDialog={this.closeDialog}
           finish={this.finish}
         >
-          {username !== formData.newUsername && (
-            <ChangeUsernameContentDialog
-              notify={notify}
-              canUsernameBeUpdated={canUsernameBeUpdated(status)}
-              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}
-            />
-          )}
+          <ChangeUsernameContentDialog
+            notify={notify}
+            canUsernameBeUpdated={canUsernameBeUpdated(status)}
+            save={this.saveUsername}
+            onChange={this.onChange}
+            formData={this.state.formData}
+            username={username}
+            enable={formData.newUsername && username !== formData.newUsername}
+          />
+          <ChangeEmailContentDialog
+            save={this.saveEmail}
+            onChange={this.onChange}
+            formData={this.state.formData}
+            emailAddress={emailAddress}
+            enable={formData.newEmail && emailAddress !== formData.newEmail}
+          />
         </ConfirmChangesDialog>
 
         {editing ? (

plugins/talk-plugin-auth/client/translations.yml

@@ -155,6 +155,7 @@ en:
       confirm_changes: "Confirm Changes"
       username_does_not_match: "Username does not match"
       cant_be_equal: "Your new {0} must be different to your current one"
+      change_username_attempt: "Username can't be updated. Usernames can be changed every 14 days"
     change_email:
       confirm_email_change: "Confirm Email Address Change"
       description: "You are attempting to change your email address. Your new email address will be used for your login and to receive account notifications."
@@ -166,7 +167,6 @@ en:
       cancel: "Cancel"
       change_email_msg: "Email Address Changed - Your email address has been successfully changed. This email address will now be used for signing in and email notifications"
       changed_username_success_msg: "Username Changed - Your username has been successfully changed. You will not be able to change your user name for 14 days."
-      change_username_attempt: "Username can't be updated. Usernames can be changed every 14 days"
 de:
   talk-plugin-auth:
     login: