From 1f7c4e58a1ebd6c3abd9579498a7c0c3746ac087 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 14 May 2018 13:31:24 -0300
Subject: [PATCH 1/3] sepatate state

---
 .../components/ChangeEmailContentDialog.js    | 92 +++++++++++++++++--
 .../client/components/Profile.js              |  7 +-
 2 files changed, 85 insertions(+), 14 deletions(-)

diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
index f29dd8d86..b0fdeb14d 100644
--- a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
+++ b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
@@ -4,10 +4,77 @@ import styles from './ChangeEmailContentDialog.css';
 import InputField from './InputField';
 import { Button } from 'plugin-api/beta/client/components/ui';
 import { t } from 'plugin-api/beta/client/services';
+import validate from 'coral-framework/helpers/validate';
+import errorMsj from 'coral-framework/helpers/error';
+
+const initialState = {
+  showError: false,
+  formData: {},
+  errors: {},
+};
 
 class ChangeEmailContentDialog extends React.Component {
-  state = {
-    showError: false,
+  state = initialState;
+
+  clearForm = () => {
+    this.setState(initialState);
+  };
+
+  addError = err => {
+    this.setState(({ errors }) => ({
+      errors: { ...errors, ...err },
+    }));
+  };
+
+  removeError = errKey => {
+    this.setState(state => {
+      const { [errKey]: _, ...errors } = state.errors;
+      return {
+        errors,
+      };
+    });
+  };
+
+  fieldValidation = (value, type, name) => {
+    if (!value.length) {
+      this.addError({
+        [name]: t('talk-plugin-local-auth.change_password.required_field'),
+      });
+    } else if (!validate[type](value)) {
+      this.addError({ [name]: errorMsj[type] });
+    } else {
+      this.removeError(name);
+    }
+  };
+
+  onChange = e => {
+    const { name, value, type, dataset } = e.target;
+    const validationType = dataset.validationType || type;
+
+    this.setState(
+      state => ({
+        formData: {
+          ...state.formData,
+          [name]: value,
+        },
+      }),
+      () => {
+        this.fieldValidation(value, validationType, name);
+      }
+    );
+  };
+
+  hasError = err => {
+    return Object.keys(this.state.errors).indexOf(err) !== -1;
+  };
+
+  isSaveEnabled = () => {
+    const formHasErrors = !!Object.keys(this.state.errors).length;
+    return !formHasErrors;
+  };
+
+  getError = errorKey => {
+    return this.state.errors[errorKey];
   };
 
   showError = () => {
@@ -16,24 +83,31 @@ class ChangeEmailContentDialog extends React.Component {
     });
   };
 
+  cancel = () => {
+    this.clearForm();
+    this.disableEditing();
+  };
+
   confirmChanges = async e => {
     e.preventDefault();
 
+    const { confirmPassword = '' } = this.state.formData;
+
     if (this.formHasError()) {
       this.showError();
       return;
     }
 
-    await this.props.save();
+    await this.props.save(confirmPassword);
     this.props.next();
   };
 
-  formHasError = () => this.props.hasError('confirmPassword');
+  formHasError = () => this.hasError('confirmPassword');
 
   render() {
     return (
       <div>
-        <span className={styles.close} onClick={this.props.cancel}>
+        <span className={styles.close} onClick={this.cancel}>
           ×
         </span>
         <h1 className={styles.title}>
@@ -59,17 +133,17 @@ class ChangeEmailContentDialog extends React.Component {
               label={t('talk-plugin-local-auth.change_email.enter_password')}
               name="confirmPassword"
               type="password"
-              onChange={this.props.onChange}
+              onChange={this.onChange}
               defaultValue=""
-              hasError={this.props.hasError('confirmPassword')}
-              errorMsg={this.props.getError('confirmPassword')}
+              hasError={this.hasError('confirmPassword')}
+              errorMsg={this.getError('confirmPassword')}
               showError={this.state.showError}
               columnDisplay
             />
             <div className={styles.bottomActions}>
               <Button
                 className={styles.cancel}
-                onClick={this.props.cancel}
+                onClick={this.cancel}
                 type="button"
               >
                 {t('talk-plugin-local-auth.change_email.cancel')}
diff --git a/plugins/talk-plugin-local-auth/client/components/Profile.js b/plugins/talk-plugin-local-auth/client/components/Profile.js
index c3b09aab2..7c4c8e493 100644
--- a/plugins/talk-plugin-local-auth/client/components/Profile.js
+++ b/plugins/talk-plugin-local-auth/client/components/Profile.js
@@ -138,8 +138,8 @@ class Profile extends React.Component {
     }
   };
 
-  saveEmail = async () => {
-    const { newEmail, confirmPassword } = this.state.formData;
+  saveEmail = async confirmPassword => {
+    const { newEmail } = this.state.formData;
 
     try {
       await this.props.updateEmailAddress({
@@ -202,12 +202,9 @@ class Profile extends React.Component {
           )}
           <ChangeEmailContentDialog
             save={this.saveEmail}
-            onChange={this.onChange}
             formData={this.state.formData}
             email={email}
             enable={formData.newEmail && email !== formData.newEmail}
-            hasError={this.hasError}
-            getError={this.getError}
           />
         </ConfirmChangesDialog>
 

From 50acf9ca5043c4e08739de2f32d3ff3aa930c869 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 15 May 2018 11:47:07 -0300
Subject: [PATCH 2/3] Removing

---
 .../client/components/ChangeEmailContentDialog.js                | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
index b0fdeb14d..cd6738d02 100644
--- a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
+++ b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
@@ -85,7 +85,6 @@ class ChangeEmailContentDialog extends React.Component {
 
   cancel = () => {
     this.clearForm();
-    this.disableEditing();
   };
 
   confirmChanges = async e => {

From 40a431b374e883d44777a6c248077c117f914bf9 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 15 May 2018 13:31:29 -0300
Subject: [PATCH 3/3] Ready

---
 .../components/ChangeEmailContentDialog.js    | 19 +++++++------------
 .../client/components/Profile.js              |  1 +
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
index cd6738d02..f671c065b 100644
--- a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
+++ b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
@@ -9,7 +9,9 @@ import errorMsj from 'coral-framework/helpers/error';
 
 const initialState = {
   showError: false,
-  formData: {},
+  formData: {
+    confirmPassword: '',
+  },
   errors: {},
 };
 
@@ -68,11 +70,6 @@ class ChangeEmailContentDialog extends React.Component {
     return Object.keys(this.state.errors).indexOf(err) !== -1;
   };
 
-  isSaveEnabled = () => {
-    const formHasErrors = !!Object.keys(this.state.errors).length;
-    return !formHasErrors;
-  };
-
   getError = errorKey => {
     return this.state.errors[errorKey];
   };
@@ -85,6 +82,7 @@ class ChangeEmailContentDialog extends React.Component {
 
   cancel = () => {
     this.clearForm();
+    this.props.closeDialog();
   };
 
   confirmChanges = async e => {
@@ -133,7 +131,7 @@ class ChangeEmailContentDialog extends React.Component {
               name="confirmPassword"
               type="password"
               onChange={this.onChange}
-              defaultValue=""
+              value={this.state.formData.confirmPassword}
               hasError={this.hasError('confirmPassword')}
               errorMsg={this.getError('confirmPassword')}
               showError={this.state.showError}
@@ -159,14 +157,11 @@ class ChangeEmailContentDialog extends React.Component {
 }
 
 ChangeEmailContentDialog.propTypes = {
-  save: PropTypes.func,
   next: PropTypes.func,
-  cancel: PropTypes.func,
-  onChange: PropTypes.func,
+  save: PropTypes.func,
   formData: PropTypes.object,
   email: PropTypes.string,
-  hasError: PropTypes.func,
-  getError: PropTypes.func,
+  closeDialog: PropTypes.func,
 };
 
 export default ChangeEmailContentDialog;
diff --git a/plugins/talk-plugin-local-auth/client/components/Profile.js b/plugins/talk-plugin-local-auth/client/components/Profile.js
index 7c4c8e493..8484fa2b8 100644
--- a/plugins/talk-plugin-local-auth/client/components/Profile.js
+++ b/plugins/talk-plugin-local-auth/client/components/Profile.js
@@ -205,6 +205,7 @@ class Profile extends React.Component {
             formData={this.state.formData}
             email={email}
             enable={formData.newEmail && email !== formData.newEmail}
+            closeDialog={this.closeDialog}
           />
         </ConfirmChangesDialog>