WIP: Steps

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

@@ -8,9 +8,7 @@ import { t } from 'plugin-api/beta/client/services';
 class ChangeEmailContentDialog extends React.Component {
   state = {
     showError: false,
-    errors: {
-      passowrd: '',
-    },
+    errors: {},
   };
 
   showError = () => {
@@ -20,18 +18,13 @@ class ChangeEmailContentDialog extends React.Component {
   };
 
   confirmChanges = async () => {
-    if (this.formHasError()) {
-      this.showError();
-    } else {
-      await this.props.saveChanges();
-      this.props.closeDialog();
-    }
+    await this.props.saveChanges();
   };
 
   render() {
     return (
       <div>
-        <span className={styles.close} onClick={this.props.closeDialog}>
+        <span className={styles.close} onClick={this.props.cancel}>
           ×
         </span>
         <h1 className={styles.title}>
@@ -43,7 +36,8 @@ class ChangeEmailContentDialog extends React.Component {
           </p>
           <div className={styles.emailChange}>
             <span className={styles.item}>
-              {t('talk-plugin-auth.change_email.old_email')}: {this.props.email}
+              {t('talk-plugin-auth.change_email.old_email')}:{' '}
+              {this.props.emailAddress}
             </span>
             <span className={styles.item}>
               {t('talk-plugin-auth.change_email.new_email')}:{' '}
@@ -66,7 +60,7 @@ class ChangeEmailContentDialog extends React.Component {
             />
           </form>
           <div className={styles.bottomActions}>
-            <Button className={styles.cancel}>
+            <Button className={styles.cancel} onClick={this.props.cancel}>
               {t('talk-plugin-auth.change_email.cancel')}
             </Button>
             <Button
@@ -84,11 +78,10 @@ class ChangeEmailContentDialog extends React.Component {
 
 ChangeEmailContentDialog.propTypes = {
   saveChanges: PropTypes.func,
-  closeDialog: PropTypes.func,
-  showDialog: PropTypes.bool,
+  cancel: PropTypes.func,
   onChange: PropTypes.func,
-  email: PropTypes.string,
   formData: PropTypes.object,
+  emailAddress: PropTypes.string,
 };
 
 export default ChangeEmailContentDialog;

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

@@ -21,7 +21,6 @@ class ChangeUsernameContentDialog extends React.Component {
       this.showError();
     } else {
       await this.props.saveChanges();
-      this.props.closeDialog();
     }
   };
 
@@ -31,7 +30,7 @@ class ChangeUsernameContentDialog extends React.Component {
   render() {
     return (
       <div>
-        <span className={styles.close} onClick={this.props.closeDialog}>
+        <span className={styles.close} onClick={this.props.cancel}>
           ×
         </span>
         <h1 className={styles.title}>
@@ -74,7 +73,7 @@ class ChangeUsernameContentDialog extends React.Component {
             </InputField>
           </form>
           <div className={styles.bottomActions}>
-            <Button className={styles.cancel}>
+            <Button className={styles.cancel} onClick={this.props.cancel}>
               {t('talk-plugin-auth.change_username.cancel')}
             </Button>
             <Button
@@ -92,11 +91,10 @@ class ChangeUsernameContentDialog extends React.Component {
 
 ChangeUsernameContentDialog.propTypes = {
   saveChanges: PropTypes.func,
-  closeDialog: PropTypes.func,
-  showDialog: PropTypes.bool,
+  cancel: PropTypes.func,
   onChange: PropTypes.func,
-  username: PropTypes.string,
   formData: PropTypes.object,
+  username: PropTypes.string,
 };
 
 export default ChangeUsernameContentDialog;

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

@@ -1,22 +1,70 @@
 import React from 'react';
 import cn from 'classnames';
+import PropTypes from 'prop-types';
 import styles from './ConfirmChangesDialog.css';
 import { Dialog } from 'plugin-api/beta/client/components/ui';
-import ChangeUsernameContentDialog from './ChangeUsernameContentDialog';
-import ChangeEmailContentDialog from './ChangeEmailContentDialog';
+
+const initialState = { step: 0 };
 
 class ConfirmChangesDialog extends React.Component {
+  state = initialState;
+
+  goToNextStep = () => {
+    this.setState(({ step }) => ({
+      step: step + 1,
+    }));
+  };
+
+  saveAndContinue = async () => {
+    await this.props.saveChanges();
+    this.goToNextStep();
+  };
+
+  saveAndFinish = async () => {
+    await this.props.saveChanges();
+    this.clear();
+    this.closeDialog();
+  };
+
+  clear = () => {
+    this.setState(initialState);
+  };
+
+  cancel = async () => {
+    this.clear();
+    this.closeDialog();
+  };
+
   render() {
     return (
       <Dialog
         open={this.props.showDialog}
         className={cn(styles.dialog, 'talk-plugin-auth--edit-profile-dialog')}
       >
-        <ChangeUsernameContentDialog {...this.props} />
-        <ChangeEmailContentDialog {...this.props} />
+        {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, {
+            ...this.props,
+            cancel: this.cancel,
+            saveChanges:
+              i === totalSteps - 1 ? this.saveAndFinish : this.saveAndContinue,
+          });
+        })}
       </Dialog>
     );
   }
 }
 
+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,
+};
+
 export default ConfirmChangesDialog;

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

@@ -9,6 +9,8 @@ import { getErrorMessages } from 'coral-framework/utils';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 import ConfirmChangesDialog from './ConfirmChangesDialog';
+import ChangeUsernameContentDialog from './ChangeUsernameContentDialog';
+import ChangeEmailContentDialog from './ChangeEmailContentDialog';
 
 const initialState = {
   editing: false,
@@ -88,7 +90,6 @@ class Profile extends React.Component {
   };
 
   fieldValidation = (value, type, name) => {
-    console.log(value, type, name);
     if (!value.length) {
       this.addError({
         [name]: t('talk-plugin-auth.change_password.required_field'),
@@ -128,20 +129,12 @@ class Profile extends React.Component {
   };
 
   isSaveEnabled = () => {
+    const { formData } = this.state;
+    const { emailAddress, username } = this.props;
     const formHasErrors = !!Object.keys(this.state.errors).length;
     const validUsername =
-      this.state.formData.newUsername &&
-      this.state.formData.newUsername !== this.props.username;
-    const validEmail =
-      this.state.formData.newEmail &&
-      this.state.formData.newEmail !== this.props.emailAddress;
-
-    // const res = !formHasErrors && (!!validUsername || !!validEmail);
-    // console.log('formHasErrors:', formHasErrors);
-    // console.log('validUsername:', validUsername);
-    // console.log('validEmail:', validEmail);
-    // console.log('res:', res);
-    // console.log(this.state.errors);
+      formData.newUsername && formData.newUsername !== username;
+    const validEmail = formData.newEmail && formData.newEmail !== emailAddress;
 
     return !formHasErrors && (validUsername || validEmail);
   };
@@ -164,7 +157,10 @@ class Profile extends React.Component {
           emailAddress={emailAddress}
           closeDialog={this.closeDialog}
           saveChanges={this.saveChanges}
-        />
+        >
+          <ChangeEmailContentDialog />
+          <ChangeUsernameContentDialog />
+        </ConfirmChangesDialog>
 
         {editing ? (
           <div className={styles.content}>