From 8c2733734aaecbee013b14743030700d5ffccbb3 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 7 May 2018 22:16:36 +0200 Subject: [PATCH] Fix Add Email Dialog --- .../components/AddEmailAddressDialog.js | 71 ++++++++++++------- .../client/components/AddEmailContent.js | 20 +++--- .../client/translations.yml | 1 + 3 files changed, 56 insertions(+), 36 deletions(-) diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js index 691915c0f..0fd70b505 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js +++ b/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; } diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js index 4a2ce7430..8d3fc308f 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js +++ b/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} diff --git a/plugins/talk-plugin-local-auth/client/translations.yml b/plugins/talk-plugin-local-auth/client/translations.yml index 90c25ae0a..fcb80782a 100644 --- a/plugins/talk-plugin-local-auth/client/translations.yml +++ b/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"