Fix Add Email Dialog

plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import isMatch from 'lodash/isEqual';
-import isEqualWith from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { Dialog } from 'plugin-api/beta/client/components/ui';
 import validate from 'coral-framework/helpers/validate';
-import errorMsj from 'coral-framework/helpers/error';
 import { getErrorMessages } from 'coral-framework/utils';
 import styles from './AddEmailAddressDialog.css';
+import { t } from 'plugin-api/beta/client/services';
 
 import AddEmailContent from './AddEmailContent';
 import VerifyEmailAddress from './VerifyEmailAddress';
@@ -16,15 +14,39 @@ const initialState = {
   step: 0,
   showErrors: false,
   errors: {},
-  formData: {},
+  formData: {
+    emailAddress: '',
+    confirmPassword: '',
+    confirmEmailAddress: '',
+  },
 };
 
+const validateRequired = v =>
+  v ? '' : t('talk-plugin-local-auth.add_email.required_field');
+
+const validateRepeat = (key, msg) => (v, data) => (v !== data[key] ? msg : '');
+
+const validateEmail = v =>
+  validateRequired(v) || !validate.email(v)
+    ? t('talk-plugin-local-auth.add_email.invalid_email_address')
+    : '';
+
+const validatePassword = v => validateRequired(v);
+
 class AddEmailAddressDialog extends React.Component {
   state = initialState;
-  validKeys = ['emailAddress', 'confirmPassword', 'confirmEmailAddress'];
+
+  fields = {
+    emailAddress: validateEmail,
+    confirmPassword: validatePassword,
+    confirmEmailAddress: validateRepeat(
+      'emailAddress',
+      t('talk-plugin-local-auth.add_email.confirm_email_address')
+    ),
+  };
 
   onChange = e => {
-    const { name, value, type } = e.target;
+    const { name, value } = e.target;
     this.setState(
       state => ({
         formData: {
@@ -33,21 +55,19 @@ class AddEmailAddressDialog extends React.Component {
         },
       }),
       () => {
-        this.fieldValidation(value, type, name);
+        this.validate();
       }
     );
   };
 
-  fieldValidation = (value, type, name) => {
-    if (!value.length) {
-      this.addError({
-        [name]: 'Field is required',
-      });
-    } else if (!validate[type](value)) {
-      this.addError({ [name]: errorMsj[type] });
-    } else {
-      this.removeError(name);
+  validateField = (value, name) => {
+    const error = this.fields[name](value, this.state.formData);
+    if (error) {
+      this.addError({ [name]: error });
+      return false;
     }
+    this.removeError(name);
+    return true;
   };
 
   addError = err => {
@@ -56,6 +76,14 @@ class AddEmailAddressDialog extends React.Component {
     }));
   };
 
+  validate() {
+    let hasErrors = false;
+    Object.keys(this.state.formData).forEach(k => {
+      hasErrors = !this.validateField(this.state.formData[k], k) || hasErrors;
+    });
+    return !hasErrors;
+  }
+
   removeError = errKey => {
     this.setState(state => {
       const { [errKey]: _, ...errors } = state.errors;
@@ -70,14 +98,7 @@ class AddEmailAddressDialog extends React.Component {
   };
 
   formHasError = () => {
-    const formHasErrors = !!Object.keys(this.state.errors).length;
-    const formIncomplete = !isEqualWith(
-      Object.keys(this.state.formData),
-      this.validKeys,
-      isMatch
-    );
-
-    return formHasErrors || formIncomplete;
+    return !!Object.keys(this.state.errors).length;
   };
 
   showErrors = () => {
@@ -87,7 +108,7 @@ class AddEmailAddressDialog extends React.Component {
   };
 
   confirmChanges = async () => {
-    if (this.formHasError()) {
+    if (!this.validate()) {
       this.showErrors();
       return;
     }

plugins/talk-plugin-local-auth/client/components/AddEmailContent.js

@@ -48,9 +48,9 @@ const AddEmailContent = ({
         name="emailAddress"
         type="email"
         onChange={onChange}
-        defaultValue=""
-        hasError={!formData.emailAddress || errors.emailAddress}
-        errorMsg={t('talk-plugin-local-auth.add_email.invalid_email_address')}
+        value={formData.emailAddress}
+        hasError={!!errors.emailAddress}
+        errorMsg={errors.emailAddress}
         showError={showErrors}
         columnDisplay
         showSuccess={false}
@@ -61,12 +61,9 @@ const AddEmailContent = ({
         name="confirmEmailAddress"
         type="email"
         onChange={onChange}
-        defaultValue=""
-        hasError={
-          !formData.emailAddress ||
-          formData.emailAddress !== formData.confirmEmailAddress
-        }
-        errorMsg={t('talk-plugin-local-auth.add_email.email_does_not_match')}
+        value={formData.confirmEmailAddress}
+        hasError={!!errors.confirmEmailAddress}
+        errorMsg={errors.confirmEmailAddress}
         showError={showErrors}
         columnDisplay
         showSuccess={false}
@@ -77,8 +74,9 @@ const AddEmailContent = ({
         name="confirmPassword"
         type="password"
         onChange={onChange}
-        defaultValue=""
-        hasError={!formData.confirmPassword}
+        value={formData.confirmPassword}
+        hasError={!!errors.confirmPassword}
+        errorMsg={errors.confirmPassword}
         showError={showErrors}
         columnDisplay
         showSuccess={false}

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

@@ -42,6 +42,7 @@ en:
       confirm_email_address: "Confirm Email Address:"
       email_does_not_match: "Email Address does not match"
       insert_password: "Insert Password:"
+      required_field: "This field is required"
       done: "done"
       content:
         title: "Add an Email Address"