From b2988e540e4a8370839e31bffcd67cf7559170fc Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 1 May 2018 16:48:52 +0200 Subject: [PATCH 01/14] Move mutation logic to coral-admin --- client/coral-admin/src/graphql/index.js | 31 +++++++++++++++++++++ client/coral-framework/graphql/mutations.js | 31 --------------------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/client/coral-admin/src/graphql/index.js b/client/coral-admin/src/graphql/index.js index 95595c265..3874e6c94 100644 --- a/client/coral-admin/src/graphql/index.js +++ b/client/coral-admin/src/graphql/index.js @@ -291,5 +291,36 @@ export default { }, }, }), + SetCommentStatus: ({ variables: { status } }) => ({ + updateQueries: { + CoralAdmin_UserDetail: prev => { + const increment = { + rejectedComments: { + $apply: count => (count < prev.totalComments ? count + 1 : count), + }, + }; + + const decrement = { + rejectedComments: { + $apply: count => (count > 0 ? count - 1 : 0), + }, + }; + + // If rejected then increment rejectedComments by one + if (status === 'REJECTED') { + const updated = update(prev, increment); + return updated; + } + + // If approved then decrement rejectedComments by one + if (status === 'ACCEPTED') { + const updated = update(prev, decrement); + return updated; + } + + return prev; + }, + }, + }), }, }; diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js index 228911d4a..995ca1720 100644 --- a/client/coral-framework/graphql/mutations.js +++ b/client/coral-framework/graphql/mutations.js @@ -1,6 +1,5 @@ import { gql } from 'react-apollo'; import withMutation from '../hocs/withMutation'; -import update from 'immutability-helper'; function convertItemType(item_type) { switch (item_type) { @@ -168,36 +167,6 @@ export const withSetCommentStatus = withMutation( errors: null, }, }, - updateQueries: { - CoralAdmin_UserDetail: prev => { - const increment = { - rejectedComments: { - $apply: count => - count < prev.totalComments ? count + 1 : count, - }, - }; - - const decrement = { - rejectedComments: { - $apply: count => (count > 0 ? count - 1 : 0), - }, - }; - - // If rejected then increment rejectedComments by one - if (status === 'REJECTED') { - const updated = update(prev, increment); - return updated; - } - - // If approved then decrement rejectedComments by one - if (status === 'ACCEPTED') { - const updated = update(prev, decrement); - return updated; - } - - return prev; - }, - }, update: proxy => { const fragment = gql` fragment Talk_SetCommentStatus_Comment on Comment { From d07b77b8f7ab6e07cf1e53ef43c0140eb0f3f29c Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 1 May 2018 16:49:44 +0200 Subject: [PATCH 02/14] Remove forgotten console.log --- client/coral-admin/src/components/UserDetail.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js index e45e3f095..5dabc5b6f 100644 --- a/client/coral-admin/src/components/UserDetail.js +++ b/client/coral-admin/src/components/UserDetail.js @@ -96,8 +96,6 @@ class UserDetail extends React.Component { bulkReject, } = this.props; - console.log(rejectedComments, totalComments); - // if totalComments is 0, you're dividing by zero let rejectedPercent = rejectedComments / totalComments * 100; From b04fc1faf896242ea128f78d731850d885908694 Mon Sep 17 00:00:00 2001 From: okbel Date: Wed, 2 May 2018 18:15:04 -0300 Subject: [PATCH 03/14] wip --- client/coral-framework/graphql/mutations.js | 44 +++++ plugin-api/beta/client/hocs/index.js | 1 + .../client/components/ErrorMessage.css | 8 + .../client/components/ErrorMessage.js | 17 ++ .../client/components/InputField.css | 80 ++++++++ .../client/components/InputField.js | 94 ++++++++++ .../components/AddEmailAddressDialog.css | 74 ++++++++ .../components/AddEmailAddressDialog.js | 177 ++++++++++++++++++ .../containers/AddEmailAddressDialog.js | 26 +++ .../talk-plugin-local-auth/client/index.js | 2 + 10 files changed, 523 insertions(+) create mode 100644 plugins/talk-plugin-facebook-auth/client/components/ErrorMessage.css create mode 100644 plugins/talk-plugin-facebook-auth/client/components/ErrorMessage.js create mode 100644 plugins/talk-plugin-facebook-auth/client/components/InputField.css create mode 100644 plugins/talk-plugin-facebook-auth/client/components/InputField.js create mode 100644 plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css create mode 100644 plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js create mode 100644 plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js index 29ec3fc96..dd54d0438 100644 --- a/client/coral-framework/graphql/mutations.js +++ b/client/coral-framework/graphql/mutations.js @@ -321,6 +321,50 @@ const SetUsernameFragment = gql` } `; +export const withAttachLocalAuth = withMutation( + gql` + mutation AttachLocalAuth($input: AttachLocalAuthInput!) { + attachLocalAuth(input: $input) { + ...AttachLocalAuthResponse + } + } + `, + { + props: ({ mutate }) => ({ + attachLocalAuth: input => { + return mutate({ + variables: { + input, + }, + update: proxy => { + const AttachLocalAuthQuery = gql` + query Talk_AttachLocalAuth { + me { + id + email + } + } + `; + + const prev = proxy.readQuery({ query: AttachLocalAuthQuery }); + + const data = update(prev, { + me: { + email: { $set: input.email }, + }, + }); + + proxy.writeQuery({ + query: AttachLocalAuthQuery, + data, + }); + }, + }); + }, + }), + } +); + export const withUpdateEmailAddress = withMutation( gql` mutation UpdateEmailAddress($input: UpdateEmailAddressInput!) { diff --git a/plugin-api/beta/client/hocs/index.js b/plugin-api/beta/client/hocs/index.js index d33e7acc9..910969227 100644 --- a/plugin-api/beta/client/hocs/index.js +++ b/plugin-api/beta/client/hocs/index.js @@ -28,5 +28,6 @@ export { withChangePassword, withChangeUsername, withUpdateEmailAddress, + withAttachLocalAuth, } from 'coral-framework/graphql/mutations'; export { compose } from 'recompose'; diff --git a/plugins/talk-plugin-facebook-auth/client/components/ErrorMessage.css b/plugins/talk-plugin-facebook-auth/client/components/ErrorMessage.css new file mode 100644 index 000000000..039ffae30 --- /dev/null +++ b/plugins/talk-plugin-facebook-auth/client/components/ErrorMessage.css @@ -0,0 +1,8 @@ +.errorMsg { + color: #FA4643; + font-size: 0.9em; +} + +.warningIcon { + color: #FA4643; +} diff --git a/plugins/talk-plugin-facebook-auth/client/components/ErrorMessage.js b/plugins/talk-plugin-facebook-auth/client/components/ErrorMessage.js new file mode 100644 index 000000000..f39a8fc08 --- /dev/null +++ b/plugins/talk-plugin-facebook-auth/client/components/ErrorMessage.js @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './ErrorMessage.css'; +import { Icon } from 'plugin-api/beta/client/components/ui'; + +const ErrorMessage = ({ children }) => ( +
+ + {children} +
+); + +ErrorMessage.propTypes = { + children: PropTypes.node, +}; + +export default ErrorMessage; diff --git a/plugins/talk-plugin-facebook-auth/client/components/InputField.css b/plugins/talk-plugin-facebook-auth/client/components/InputField.css new file mode 100644 index 000000000..3442befde --- /dev/null +++ b/plugins/talk-plugin-facebook-auth/client/components/InputField.css @@ -0,0 +1,80 @@ + +.detailItem { + margin-bottom: 12px; +} + +.detailItemContainer { + display: flex; +} + +.columnDisplay { + flex-direction: column; + + .detailItemMessage { + padding: 4px 0 0; + } +} + +.detailItemContent { + border: solid 1px #787D80; + border-radius: 2px; + background-color: white; + height: 30px; + display: inline-block; + width: 230px; + display: flex; + box-sizing: border-box; + + > .detailIcon { + font-size: 1.2em; + padding: 0 5px; + color: #787D80; + line-height: 30px; + } + + &.error { + border: solid 2px #FA4643; + } + + &.disabled { + background-color: #E0E0E0; + } +} + +.detailLabel { + color: #4C4C4D; + font-size: 1em; + display: block; + margin-bottom: 4px; +} + +.detailValue { + background: transparent; + border: none; + font-size: 1em; + color: #000; + outline: none; + flex: 1; + height: 100%; + box-sizing: border-box; +} + +.detailItemMessage { + flex-grow: 1; + display: flex; + align-items: center; + padding-left: 6px; + padding-top: 16px; + + .warningIcon, .checkIcon { + font-size: 17px; + } +} + +.checkIcon { + color: #00CD73; +} + +.warningIcon { + color: #FA4643; +} diff --git a/plugins/talk-plugin-facebook-auth/client/components/InputField.js b/plugins/talk-plugin-facebook-auth/client/components/InputField.js new file mode 100644 index 000000000..26937d5b9 --- /dev/null +++ b/plugins/talk-plugin-facebook-auth/client/components/InputField.js @@ -0,0 +1,94 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cn from 'classnames'; +import styles from './InputField.css'; +import ErrorMessage from './ErrorMessage'; +import { Icon } from 'plugin-api/beta/client/components/ui'; + +const InputField = ({ + id = '', + label = '', + type = 'text', + name = '', + onChange = () => {}, + showError = true, + hasError = false, + errorMsg = '', + children, + columnDisplay = false, + showSuccess = false, + validationType = '', + icon = '', + value = '', + defaultValue = '', + disabled = false, +}) => { + const inputValue = { + ...(value ? { value } : {}), + ...(defaultValue ? { defaultValue } : {}), + }; + + return ( +
+
+ {label && ( + + )} +
+ {icon && } + +
+
+ {!hasError && + showSuccess && + value && } + {hasError && showError && {errorMsg}} +
+
+ {children} +
+ ); +}; + +InputField.propTypes = { + id: PropTypes.string, + disabled: PropTypes.bool, + label: PropTypes.string, + type: PropTypes.string, + name: PropTypes.string.isRequired, + onChange: PropTypes.func, + value: PropTypes.string, + defaultValue: PropTypes.string, + icon: PropTypes.string, + showError: PropTypes.bool, + hasError: PropTypes.bool, + errorMsg: PropTypes.string, + children: PropTypes.node, + columnDisplay: PropTypes.bool, + showSuccess: PropTypes.bool, + validationType: PropTypes.string, +}; + +export default InputField; diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css new file mode 100644 index 000000000..7fa3ce78c --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css @@ -0,0 +1,74 @@ +.dialog { + border: none; + box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); + width: 400px; + top: 50%; + transform: translateY(-50%); + padding: 20px; + border-radius: 4px; + font-family: Helvetica,Helvetica Neue,Verdana,sans-serif; +} + +.title { + font-size: 1.2em; + margin-bottom: 8px; +} + +.description { + font-size: 1em; + line-height: 20px; + margin: 0; + margin-bottom: 15px; +} + +.list { + padding: 0; + margin: 20px 0; + list-style: none; +} + +.item { + display: flex; + margin-bottom: 20px; + + .itemIcon { + flex-grow: 0; + } + + .text { + flex-grow: 1; + padding-left: 10px; + } + + > i.itemIcon { + font-size: 1.3em; + } +} + +.button { + color: #787D80; + border-radius: 2px; + background-color: transparent; + height: 30px; + font-size: 0.9em; + line-height: normal; + + &:hover { + background-color: #eaeaea; + } + + &.cancel { + background-color: transparent; + color: #787D80; + } + + &.proceed { + background-color: #3498DB; + color: white; + } + + &.danger { + background-color: #FA4643; + color: white; + } +} \ No newline at end of file diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js new file mode 100644 index 000000000..4468d7865 --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js @@ -0,0 +1,177 @@ +import React from 'react'; +import isEqual from 'lodash/isEqual'; +import PropTypes from 'prop-types'; +import cn from 'classnames'; +import styles from './AddEmailAddressDialog.css'; +import { Button, Dialog, Icon } from 'plugin-api/beta/client/components/ui'; +import validate from 'coral-framework/helpers/validate'; +import errorMsj from 'coral-framework/helpers/error'; +import InputField from './InputField'; +import { getErrorMessages } from 'coral-framework/utils'; + +const initialState = { + showErrors: false, + errors: {}, + formData: {}, +}; + +class AddEmailAddressDialog extends React.Component { + state = initialState; + validKeys = ['emailAddress', 'confirmEmailAddress']; + + onChange = e => { + const { name, value, type } = e.target; + this.setState( + state => ({ + formData: { + ...state.formData, + [name]: value, + }, + }), + () => { + this.fieldValidation(value, type, name); + } + ); + }; + + 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); + } + }; + + addError = err => { + this.setState(({ errors }) => ({ + errors: { ...errors, ...err }, + })); + }; + + removeError = errKey => { + this.setState(state => { + const { [errKey]: _, ...errors } = state.errors; + return { + errors, + }; + }); + }; + + hasError = err => { + return Object.keys(this.state.errors).indexOf(err) !== -1; + }; + + formHasError = () => { + const formHasErrors = !!Object.keys(this.state.errors).length; + const formIncomplete = !isEqual( + Object.keys(this.state.formData), + this.validKeys + ); + return formHasErrors || formIncomplete; + }; + + showError = () => { + this.setState({ + showError: true, + }); + }; + + confirmChanges = async () => { + if (this.formHasError()) { + this.showError(); + return; + } + + const { emailAddress } = this.state.formData; + const { attachLocalAuth } = this.props; + + try { + await attachLocalAuth({ + email: emailAddress, + }); + this.props.notify('success', 'Email Added!'); + } catch (err) { + this.props.notify('error', getErrorMessages(err)); + } + }; + + render() { + const { errors, formData, showErrors } = this.state; + return ( + +

Add an Email Address

+

+ For your added security, we require users to add an email address to + their accounts. Your email address will be used to: +

+
    +
  • + + + Receive updates regarding any changes to your account (email + address, username, password, etc.) + +
    • +
  • + + + Allow you to download your comments. + +
    • +
  • + + + Send comment notifications that you have chosen to receive. + +
    • +
+ + + + + ); + } +} + +AddEmailAddressDialog.propTypes = { + attachLocalAuth: PropTypes.func.isRequired, + notify: PropTypes.func.isRequired, +}; + +export default AddEmailAddressDialog; diff --git a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js new file mode 100644 index 000000000..639236ea5 --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js @@ -0,0 +1,26 @@ +import { compose, gql } from 'react-apollo'; +import { bindActionCreators } from 'redux'; +import { connect, withFragments } from 'plugin-api/beta/client/hocs'; +import AddEmailAddressDialog from '../components/AddEmailAddressDialog'; +import { notify } from 'coral-framework/actions/notification'; + +import { withAttachLocalAuth } from 'plugin-api/beta/client/hocs'; + +const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch); + +const withData = withFragments({ + root: gql` + fragment TalkPluginLocalAuth_AddEmailAddressDialog_root on RootQuery { + me { + id + email + } + } + `, +}); + +export default compose( + connect(null, mapDispatchToProps), + withAttachLocalAuth, + withData +)(AddEmailAddressDialog); diff --git a/plugins/talk-plugin-local-auth/client/index.js b/plugins/talk-plugin-local-auth/client/index.js index c669effaa..ce5816583 100644 --- a/plugins/talk-plugin-local-auth/client/index.js +++ b/plugins/talk-plugin-local-auth/client/index.js @@ -1,4 +1,5 @@ import ChangePassword from './containers/ChangePassword'; +import AddEmailAddressDialog from './containers/AddEmailAddressDialog'; import Profile from './containers/Profile'; import translations from './translations.yml'; @@ -7,5 +8,6 @@ export default { slots: { profileHeader: [Profile], profileSettings: [ChangePassword], + stream: [AddEmailAddressDialog], }, }; From 3b2deeb00772611a75bb37e23d51d70b4bbca8d2 Mon Sep 17 00:00:00 2001 From: okbel Date: Wed, 2 May 2018 18:35:15 -0300 Subject: [PATCH 04/14] Checking if email verification is required --- .../components/AddEmailAddressDialog.js | 106 ++++++------------ .../client/components/AddEmailContent.js | 84 ++++++++++++++ .../client/components/EmailAddressAdded.js | 18 +++ .../client/components/VerifyEmailAddress.js | 20 ++++ .../containers/AddEmailAddressDialog.js | 3 + 5 files changed, 160 insertions(+), 71 deletions(-) create mode 100644 plugins/talk-plugin-local-auth/client/components/AddEmailContent.js create mode 100644 plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js create mode 100644 plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js index 4468d7865..b801a70da 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js @@ -1,15 +1,18 @@ import React from 'react'; import isEqual from 'lodash/isEqual'; import PropTypes from 'prop-types'; -import cn from 'classnames'; -import styles from './AddEmailAddressDialog.css'; -import { Button, Dialog, Icon } from 'plugin-api/beta/client/components/ui'; +import { Dialog } from 'plugin-api/beta/client/components/ui'; import validate from 'coral-framework/helpers/validate'; import errorMsj from 'coral-framework/helpers/error'; -import InputField from './InputField'; import { getErrorMessages } from 'coral-framework/utils'; +import styles from './AddEmailAddressDialog.css'; + +import AddEmailContent from './AddEmailContent'; +import VerifyEmailAddress from './VerifyEmailAddress'; +import EmailAddressAdded from './EmailAddressAdded'; const initialState = { + step: 0, showErrors: false, errors: {}, formData: {}, @@ -17,7 +20,7 @@ const initialState = { class AddEmailAddressDialog extends React.Component { state = initialState; - validKeys = ['emailAddress', 'confirmEmailAddress']; + validKeys = ['emailAddress', 'confirmEmailAddress', 'confirmPassword']; onChange = e => { const { name, value, type } = e.target; @@ -74,96 +77,56 @@ class AddEmailAddressDialog extends React.Component { return formHasErrors || formIncomplete; }; - showError = () => { + showErrors = () => { this.setState({ - showError: true, + showErrors: true, }); }; confirmChanges = async () => { if (this.formHasError()) { - this.showError(); + this.showErrors(); return; } - const { emailAddress } = this.state.formData; + const { emailAddress, confirmPassword } = this.state.formData; const { attachLocalAuth } = this.props; try { await attachLocalAuth({ email: emailAddress, + password: confirmPassword, }); this.props.notify('success', 'Email Added!'); + this.goToNextStep(); } catch (err) { this.props.notify('error', getErrorMessages(err)); } }; + goToNextStep = () => { + this.setState(({ step }) => ({ + step: step + 1, + })); + }; + render() { - const { errors, formData, showErrors } = this.state; + const { errors, formData, showErrors, step } = this.state; + const { root: { settings } } = this.props; return ( -

Add an Email Address

-

- For your added security, we require users to add an email address to - their accounts. Your email address will be used to: -

-
    -
  • - - - Receive updates regarding any changes to your account (email - address, username, password, etc.) - -
    • -
  • - - - Allow you to download your comments. - -
    • -
  • - - - Send comment notifications that you have chosen to receive. - -
    • -
- - - + {step === 0 && ( + + )} + {step === 1 && !settings.requireEmailConfirmation ? ( + + ) : ( + + )} ); } @@ -172,6 +135,7 @@ class AddEmailAddressDialog extends React.Component { AddEmailAddressDialog.propTypes = { attachLocalAuth: PropTypes.func.isRequired, notify: PropTypes.func.isRequired, + root: PropTypes.func.isRequired, }; export default AddEmailAddressDialog; diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js new file mode 100644 index 000000000..a2b14c5fd --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js @@ -0,0 +1,84 @@ +import React from 'react'; +import styles from './AddEmailAddressDialog.css'; +import { Button, Icon } from 'plugin-api/beta/client/components/ui'; +import cn from 'classnames'; +import InputField from './InputField'; + +const AddEmailContent = ({ formData, errors, showErrors }) => ( +
+

Add an Email Address

+

+ For your added security, we require users to add an email address to their + accounts. Your email address will be used to: +

+
    +
  • + + + Receive updates regarding any changes to your account (email address, + username, password, etc.) + +
    • +
  • + + + Allow you to download your comments. + +
    • +
  • + + + Send comment notifications that you have chosen to receive. + +
    • +
+ + + + +
+); + +export default AddEmailContent; diff --git a/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js b/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js new file mode 100644 index 000000000..9d3e875d5 --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js @@ -0,0 +1,18 @@ +import React from 'react'; +import styles from './AddEmailAddressDialog.css'; + +const EmailAddressAdded = () => ( +
+

Email Address Added

+

+ Your email address has been added to your account. +

+ Need to change your email address? +

+ You can change your account settings by visiting{' '} + My Profile {'>'} Settings. +

+
+); + +export default EmailAddressAdded; diff --git a/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js b/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js new file mode 100644 index 000000000..8d9d207b7 --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js @@ -0,0 +1,20 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './AddEmailAddressDialog.css'; + +const VerifyEmailAddress = ({ emailAddress }) => ( +
+

Verify Your Email Address

+

+ We’ve sent an email to {emailAddress} to verify your account. You must + verify your email address so that it can be used for account change + confirmations and notifications. +

+
+); + +VerifyEmailAddress.propTypes = { + emailAddress: PropTypes.string, +}; + +export default VerifyEmailAddress; diff --git a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js index 639236ea5..9732383ce 100644 --- a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js @@ -15,6 +15,9 @@ const withData = withFragments({ id email } + settings { + requireEmailConfirmation + } } `, }); From 1bf440c4a6f0f652682ae6cd1ea01079525bec19 Mon Sep 17 00:00:00 2001 From: okbel Date: Wed, 2 May 2018 18:43:06 -0300 Subject: [PATCH 05/14] Changes --- .../components/AddEmailAddressDialog.js | 14 ++- .../client/components/AddEmailContent.js | 107 ++++++++++-------- 2 files changed, 68 insertions(+), 53 deletions(-) diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js index b801a70da..e5226eae0 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js @@ -120,13 +120,15 @@ class AddEmailAddressDialog extends React.Component { formData={formData} errors={errors} showErrors={showErrors} + confirmChanges={this.confirmChanges} /> )} - {step === 1 && !settings.requireEmailConfirmation ? ( - - ) : ( - - )} + {step === 1 && + !settings.requireEmailConfirmation && } + {step === 1 && + settings.requireEmailConfirmation && ( + + )} ); } @@ -135,7 +137,7 @@ class AddEmailAddressDialog extends React.Component { AddEmailAddressDialog.propTypes = { attachLocalAuth: PropTypes.func.isRequired, notify: PropTypes.func.isRequired, - root: PropTypes.func.isRequired, + root: PropTypes.object.isRequired, }; export default AddEmailAddressDialog; diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js index a2b14c5fd..cb127520f 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js @@ -1,10 +1,11 @@ import React from 'react'; +import PropTypes from 'prop-types'; import styles from './AddEmailAddressDialog.css'; import { Button, Icon } from 'plugin-api/beta/client/components/ui'; import cn from 'classnames'; import InputField from './InputField'; -const AddEmailContent = ({ formData, errors, showErrors }) => ( +const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => (

Add an Email Address

@@ -32,53 +33,65 @@ const AddEmailContent = ({ formData, errors, showErrors }) => ( - - - - +

+ + + + +
); +AddEmailContent.propTypes = { + formData: PropTypes.object.isRequired, + errors: PropTypes.object.isRequired, + showErrors: PropTypes.bool.isRequired, + confirmChanges: PropTypes.func.isRequired, +}; + export default AddEmailContent; From 09d20257acc71172d8cd727dfaf23a447758eaae Mon Sep 17 00:00:00 2001 From: okbel Date: Wed, 2 May 2018 18:46:41 -0300 Subject: [PATCH 06/14] Changes --- .../client/components/AddEmailAddressDialog.css | 6 ++++++ .../client/components/AddEmailContent.js | 10 +++------- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css index 7fa3ce78c..1e711f5cb 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css @@ -52,9 +52,15 @@ height: 30px; font-size: 0.9em; line-height: normal; + width: 100%; + display: inline-block; + text-align: center; + line-height: 30px; + font-size: 1em; &:hover { background-color: #eaeaea; + cursor: pointer; } &.cancel { diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js index cb127520f..dcd0d9496 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styles from './AddEmailAddressDialog.css'; -import { Button, Icon } from 'plugin-api/beta/client/components/ui'; +import { Icon } from 'plugin-api/beta/client/components/ui'; import cn from 'classnames'; import InputField from './InputField'; @@ -76,13 +76,9 @@ const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => ( columnDisplay showSuccess={false} /> - + ); From cdae2796a5dcfa61fe2e06ba1039f0b74548337a Mon Sep 17 00:00:00 2001 From: okbel Date: Wed, 2 May 2018 18:48:52 -0300 Subject: [PATCH 07/14] Changes --- .../talk-plugin-local-auth/client/components/AddEmailContent.js | 2 +- plugins/talk-plugin-local-auth/client/components/InputField.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js index dcd0d9496..8ff5db689 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js @@ -42,7 +42,7 @@ const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => ( onChange={this.onChange} defaultValue="" hasError={!formData.emailAddress || errors.emailAddress} - errorMsg={errors.emailAddress} + errorMsg={'Invalid email address'} showError={showErrors} columnDisplay showSuccess={false} diff --git a/plugins/talk-plugin-local-auth/client/components/InputField.js b/plugins/talk-plugin-local-auth/client/components/InputField.js index 34c314c20..26937d5b9 100644 --- a/plugins/talk-plugin-local-auth/client/components/InputField.js +++ b/plugins/talk-plugin-local-auth/client/components/InputField.js @@ -43,7 +43,7 @@ const InputField = ({
From 478770f6c6a0c1836a0b8eef8fb2819337aef7b1 Mon Sep 17 00:00:00 2001 From: okbel Date: Wed, 2 May 2018 20:41:32 -0300 Subject: [PATCH 08/14] Changes --- client/coral-framework/graphql/fragments.js | 3 ++- .../client/components/AddEmailAddressDialog.js | 13 +++++++++---- .../client/components/AddEmailContent.js | 18 +++++++++++++----- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/client/coral-framework/graphql/fragments.js b/client/coral-framework/graphql/fragments.js index bf75fa1a8..778214b8b 100644 --- a/client/coral-framework/graphql/fragments.js +++ b/client/coral-framework/graphql/fragments.js @@ -27,6 +27,7 @@ export default { 'UpdateAssetStatusResponse', 'UpdateSettingsResponse', 'ChangePasswordResponse', - 'UpdateEmailAddressResponse' + 'UpdateEmailAddressResponse', + 'AttachLocalAuthResponse' ), }; diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js index e5226eae0..c5b816e85 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js @@ -1,5 +1,6 @@ import React from 'react'; -import isEqual from 'lodash/isEqual'; +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'; @@ -20,7 +21,7 @@ const initialState = { class AddEmailAddressDialog extends React.Component { state = initialState; - validKeys = ['emailAddress', 'confirmEmailAddress', 'confirmPassword']; + validKeys = ['emailAddress', 'confirmPassword', 'confirmEmailAddress']; onChange = e => { const { name, value, type } = e.target; @@ -70,10 +71,12 @@ class AddEmailAddressDialog extends React.Component { formHasError = () => { const formHasErrors = !!Object.keys(this.state.errors).length; - const formIncomplete = !isEqual( + const formIncomplete = !isEqualWith( Object.keys(this.state.formData), - this.validKeys + this.validKeys, + isMatch ); + return formHasErrors || formIncomplete; }; @@ -113,6 +116,7 @@ class AddEmailAddressDialog extends React.Component { render() { const { errors, formData, showErrors, step } = this.state; const { root: { settings } } = this.props; + return ( {step === 0 && ( @@ -121,6 +125,7 @@ class AddEmailAddressDialog extends React.Component { errors={errors} showErrors={showErrors} confirmChanges={this.confirmChanges} + onChange={this.onChange} /> )} {step === 1 && diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js index 8ff5db689..40edeea2a 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js @@ -5,7 +5,13 @@ import { Icon } from 'plugin-api/beta/client/components/ui'; import cn from 'classnames'; import InputField from './InputField'; -const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => ( +const AddEmailContent = ({ + formData, + errors, + showErrors, + confirmChanges, + onChange, +}) => (

Add an Email Address

@@ -33,13 +39,14 @@ const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => ( -

+ + ( label="Confirm Email Address:" name="confirmEmailAddress" type="email" - onChange={this.onChange} + onChange={onChange} defaultValue="" hasError={ !formData.emailAddress || @@ -68,7 +75,7 @@ const AddEmailContent = ({ formData, errors, showErrors, confirmChanges }) => ( label="Insert Password" name="confirmPassword" type="password" - onChange={this.onChange} + onChange={onChange} defaultValue="" hasError={!formData.confirmPassword} errorMsg={'Confirm Password'} @@ -88,6 +95,7 @@ AddEmailContent.propTypes = { errors: PropTypes.object.isRequired, showErrors: PropTypes.bool.isRequired, confirmChanges: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, }; export default AddEmailContent; From 59cac9db8b3c08791354722f18c4af6e3389688e Mon Sep 17 00:00:00 2001 From: okbel Date: Wed, 2 May 2018 20:58:34 -0300 Subject: [PATCH 09/14] Adding reducer --- .../talk-plugin-local-auth/client/actions.js | 9 ++++++++ .../components/AddEmailAddressDialog.css | 8 ++++--- .../components/AddEmailAddressDialog.js | 14 ++++++++---- .../client/components/AddEmailContent.js | 13 +++++++---- .../client/components/EmailAddressAdded.js | 13 ++++++++++- .../client/components/InputField.css | 3 ++- .../client/components/VerifyEmailAddress.js | 11 ++++++++-- .../client/constants.js | 4 ++++ .../containers/AddEmailAddressDialog.js | 6 ++++- .../talk-plugin-local-auth/client/index.js | 2 ++ .../talk-plugin-local-auth/client/reducer.js | 22 +++++++++++++++++++ 11 files changed, 89 insertions(+), 16 deletions(-) create mode 100644 plugins/talk-plugin-local-auth/client/actions.js create mode 100644 plugins/talk-plugin-local-auth/client/constants.js create mode 100644 plugins/talk-plugin-local-auth/client/reducer.js diff --git a/plugins/talk-plugin-local-auth/client/actions.js b/plugins/talk-plugin-local-auth/client/actions.js new file mode 100644 index 000000000..4786b92c8 --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/actions.js @@ -0,0 +1,9 @@ +import * as actions from './constants'; + +export const showAddEmailDialog = () => ({ + type: actions.SHOW_ADD_EMAIL_DIALOG, +}); + +export const hideAddEmailDialog = () => ({ + type: actions.HIDE_ADD_EMAIL_DIALOG, +}); diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css index 1e711f5cb..41b531147 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.css @@ -1,17 +1,19 @@ .dialog { border: none; box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); - width: 400px; + width: 320px; top: 50%; transform: translateY(-50%); padding: 20px; border-radius: 4px; font-family: Helvetica,Helvetica Neue,Verdana,sans-serif; + color:#3B4A53; } .title { - font-size: 1.2em; - margin-bottom: 8px; + font-size: 1.3em; + margin: 15px 0; + text-align: center; } .description { diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js index c5b816e85..253e3ac62 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js @@ -115,10 +115,10 @@ class AddEmailAddressDialog extends React.Component { render() { const { errors, formData, showErrors, step } = this.state; - const { root: { settings } } = this.props; + const { root: { settings }, showAddEmailDialog } = this.props; return ( - + {step === 0 && ( )} {step === 1 && - !settings.requireEmailConfirmation && } + !settings.requireEmailConfirmation && ( + {}} /> + )} {step === 1 && settings.requireEmailConfirmation && ( - + {}} + /> )} ); @@ -143,6 +148,7 @@ AddEmailAddressDialog.propTypes = { attachLocalAuth: PropTypes.func.isRequired, notify: PropTypes.func.isRequired, root: PropTypes.object.isRequired, + showAddEmailDialog: PropTypes.bool.isRequired, }; export default AddEmailAddressDialog; diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js index 40edeea2a..0d3411ff3 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js @@ -72,7 +72,7 @@ const AddEmailContent = ({ /> - - Add Email Address - +
); diff --git a/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js b/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js index 9d3e875d5..ef74f4b8b 100644 --- a/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js +++ b/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js @@ -1,7 +1,9 @@ import React from 'react'; +import cn from 'classnames'; +import PropTypes from 'prop-types'; import styles from './AddEmailAddressDialog.css'; -const EmailAddressAdded = () => ( +const EmailAddressAdded = ({ done }) => (

Email Address Added

@@ -12,7 +14,16 @@ const EmailAddressAdded = () => ( You can change your account settings by visiting{' '} My Profile {'>'} Settings.

+
); +EmailAddressAdded.propTypes = { + done: PropTypes.func.isRequired, +}; + export default EmailAddressAdded; diff --git a/plugins/talk-plugin-local-auth/client/components/InputField.css b/plugins/talk-plugin-local-auth/client/components/InputField.css index cd6015e47..befc94f18 100644 --- a/plugins/talk-plugin-local-auth/client/components/InputField.css +++ b/plugins/talk-plugin-local-auth/client/components/InputField.css @@ -42,10 +42,11 @@ } .detailLabel { - color: #4C4C4D; + color: #4c4c4d; font-size: 1em; display: block; margin-bottom: 4px; + font-weight: bold; } .detailValue { diff --git a/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js b/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js index 8d9d207b7..9a3e6ae89 100644 --- a/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js +++ b/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js @@ -1,8 +1,9 @@ import React from 'react'; +import cn from 'classnames'; import PropTypes from 'prop-types'; import styles from './AddEmailAddressDialog.css'; -const VerifyEmailAddress = ({ emailAddress }) => ( +const VerifyEmailAddress = ({ emailAddress, done }) => (

Verify Your Email Address

@@ -10,11 +11,17 @@ const VerifyEmailAddress = ({ emailAddress }) => ( verify your email address so that it can be used for account change confirmations and notifications.

+
); VerifyEmailAddress.propTypes = { - emailAddress: PropTypes.string, + emailAddress: PropTypes.string.isRequired, + done: PropTypes.func.isRequired, }; export default VerifyEmailAddress; diff --git a/plugins/talk-plugin-local-auth/client/constants.js b/plugins/talk-plugin-local-auth/client/constants.js new file mode 100644 index 000000000..927816e0e --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/constants.js @@ -0,0 +1,4 @@ +const prefix = 'TALK_AUTH_LOCAL'; + +export const SHOW_ADD_EMAIL_DIALOG = `${prefix}_SHOW_ADD_EMAIL_DIALOG`; +export const HIDE_ADD_EMAIL_DIALOG = `${prefix}_HIDE_ADD_EMAIL_DIALOG`; diff --git a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js index 9732383ce..62c637d71 100644 --- a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js @@ -22,8 +22,12 @@ const withData = withFragments({ `, }); +const mapStateToProps = ({ talkPluginLocalAuth: state }) => ({ + showAddEmailDialog: state.showAddEmailDialog, +}); + export default compose( - connect(null, mapDispatchToProps), + connect(mapStateToProps, mapDispatchToProps), withAttachLocalAuth, withData )(AddEmailAddressDialog); diff --git a/plugins/talk-plugin-local-auth/client/index.js b/plugins/talk-plugin-local-auth/client/index.js index ce5816583..126ea72c6 100644 --- a/plugins/talk-plugin-local-auth/client/index.js +++ b/plugins/talk-plugin-local-auth/client/index.js @@ -2,8 +2,10 @@ import ChangePassword from './containers/ChangePassword'; import AddEmailAddressDialog from './containers/AddEmailAddressDialog'; import Profile from './containers/Profile'; import translations from './translations.yml'; +import reducer from './reducer'; export default { + reducer, translations, slots: { profileHeader: [Profile], diff --git a/plugins/talk-plugin-local-auth/client/reducer.js b/plugins/talk-plugin-local-auth/client/reducer.js new file mode 100644 index 000000000..586bbf759 --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/reducer.js @@ -0,0 +1,22 @@ +import * as actions from './constants'; + +const initialState = { + showAddEmailDialog: true, +}; + +export default function reducer(state = initialState, action) { + switch (action.type) { + case actions.SHOW_ADD_EMAIL_DIALOG: + return { + ...state, + showAddEmailDialog: true, + }; + case actions.HIDE_ADD_EMAIL_DIALOG: + return { + ...state, + showAddEmailDialog: false, + }; + default: + return state; + } +} From a649bd8252528472985b0d35ae073928ee7fb008 Mon Sep 17 00:00:00 2001 From: okbel Date: Wed, 2 May 2018 21:01:08 -0300 Subject: [PATCH 10/14] done - but translations --- .../talk-plugin-local-auth/client/actions.js | 9 -------- .../client/constants.js | 4 ---- .../containers/AddEmailAddressDialog.js | 11 ++++------ .../talk-plugin-local-auth/client/index.js | 2 -- .../talk-plugin-local-auth/client/reducer.js | 22 ------------------- 5 files changed, 4 insertions(+), 44 deletions(-) delete mode 100644 plugins/talk-plugin-local-auth/client/actions.js delete mode 100644 plugins/talk-plugin-local-auth/client/constants.js delete mode 100644 plugins/talk-plugin-local-auth/client/reducer.js diff --git a/plugins/talk-plugin-local-auth/client/actions.js b/plugins/talk-plugin-local-auth/client/actions.js deleted file mode 100644 index 4786b92c8..000000000 --- a/plugins/talk-plugin-local-auth/client/actions.js +++ /dev/null @@ -1,9 +0,0 @@ -import * as actions from './constants'; - -export const showAddEmailDialog = () => ({ - type: actions.SHOW_ADD_EMAIL_DIALOG, -}); - -export const hideAddEmailDialog = () => ({ - type: actions.HIDE_ADD_EMAIL_DIALOG, -}); diff --git a/plugins/talk-plugin-local-auth/client/constants.js b/plugins/talk-plugin-local-auth/client/constants.js deleted file mode 100644 index 927816e0e..000000000 --- a/plugins/talk-plugin-local-auth/client/constants.js +++ /dev/null @@ -1,4 +0,0 @@ -const prefix = 'TALK_AUTH_LOCAL'; - -export const SHOW_ADD_EMAIL_DIALOG = `${prefix}_SHOW_ADD_EMAIL_DIALOG`; -export const HIDE_ADD_EMAIL_DIALOG = `${prefix}_HIDE_ADD_EMAIL_DIALOG`; diff --git a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js index 62c637d71..7ab887183 100644 --- a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js @@ -1,6 +1,6 @@ import { compose, gql } from 'react-apollo'; import { bindActionCreators } from 'redux'; -import { connect, withFragments } from 'plugin-api/beta/client/hocs'; +import { connect, withFragments, excludeIf } from 'plugin-api/beta/client/hocs'; import AddEmailAddressDialog from '../components/AddEmailAddressDialog'; import { notify } from 'coral-framework/actions/notification'; @@ -22,12 +22,9 @@ const withData = withFragments({ `, }); -const mapStateToProps = ({ talkPluginLocalAuth: state }) => ({ - showAddEmailDialog: state.showAddEmailDialog, -}); - export default compose( - connect(mapStateToProps, mapDispatchToProps), + connect(null, mapDispatchToProps), withAttachLocalAuth, - withData + withData, + excludeIf(({ root: { me } }) => !me || me.email) )(AddEmailAddressDialog); diff --git a/plugins/talk-plugin-local-auth/client/index.js b/plugins/talk-plugin-local-auth/client/index.js index 126ea72c6..ce5816583 100644 --- a/plugins/talk-plugin-local-auth/client/index.js +++ b/plugins/talk-plugin-local-auth/client/index.js @@ -2,10 +2,8 @@ import ChangePassword from './containers/ChangePassword'; import AddEmailAddressDialog from './containers/AddEmailAddressDialog'; import Profile from './containers/Profile'; import translations from './translations.yml'; -import reducer from './reducer'; export default { - reducer, translations, slots: { profileHeader: [Profile], diff --git a/plugins/talk-plugin-local-auth/client/reducer.js b/plugins/talk-plugin-local-auth/client/reducer.js deleted file mode 100644 index 586bbf759..000000000 --- a/plugins/talk-plugin-local-auth/client/reducer.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as actions from './constants'; - -const initialState = { - showAddEmailDialog: true, -}; - -export default function reducer(state = initialState, action) { - switch (action.type) { - case actions.SHOW_ADD_EMAIL_DIALOG: - return { - ...state, - showAddEmailDialog: true, - }; - case actions.HIDE_ADD_EMAIL_DIALOG: - return { - ...state, - showAddEmailDialog: false, - }; - default: - return state; - } -} From a9132c13539dc6ef2c6f401970ed5ea7865c2d26 Mon Sep 17 00:00:00 2001 From: okbel Date: Thu, 3 May 2018 11:07:58 -0300 Subject: [PATCH 11/14] stream fragment --- .../coral-embed-stream/src/tabs/stream/containers/Stream.js | 1 + .../client/components/AddEmailAddressDialog.js | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js index 0a7a1951c..17d3132ea 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js +++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js @@ -372,6 +372,7 @@ const slots = [ 'streamTabsPrepend', 'streamTabPanes', 'streamFilter', + 'stream', ]; const fragments = { diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js index 253e3ac62..691915c0f 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js @@ -115,10 +115,10 @@ class AddEmailAddressDialog extends React.Component { render() { const { errors, formData, showErrors, step } = this.state; - const { root: { settings }, showAddEmailDialog } = this.props; + const { root: { settings } } = this.props; return ( - + {step === 0 && ( Date: Thu, 3 May 2018 09:58:49 -0600 Subject: [PATCH 12/14] cleaned up refs to passwor dhash --- plugins/talk-plugin-local-auth/server/mutators.js | 3 +-- services/users.js | 10 +++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/plugins/talk-plugin-local-auth/server/mutators.js b/plugins/talk-plugin-local-auth/server/mutators.js index cb34bed7a..95ab7cefc 100644 --- a/plugins/talk-plugin-local-auth/server/mutators.js +++ b/plugins/talk-plugin-local-auth/server/mutators.js @@ -5,7 +5,6 @@ const { ErrIncorrectPassword, } = require('./errors'); const { get } = require('lodash'); -const bcrypt = require('bcryptjs'); // hasLocalProfile checks a user's profiles to see if they already have a local // profile associated with their account. @@ -88,7 +87,7 @@ async function attachUserLocalAuth(ctx, email, password) { await Users.isValidPassword(password); // Hash the new password. - const hashedPassword = await bcrypt.hash(password, 10); + const hashedPassword = await Users.hashPassword(password); try { // Associate the account with the user. diff --git a/services/users.js b/services/users.js index e53df4119..54fe057ba 100644 --- a/services/users.js +++ b/services/users.js @@ -557,7 +557,7 @@ class Users { throw new ErrPasswordTooShort(); } - const hashedPassword = await bcrypt.hash(password, SALT_ROUNDS); + const hashedPassword = await Users.hashPassword(password); return User.update( { id }, @@ -634,7 +634,7 @@ class Users { Users.isValidPassword(password), ]); - const hashedPassword = await bcrypt.hash(password, SALT_ROUNDS); + const hashedPassword = await Users.hashPassword(password); let user = new User({ username, @@ -811,6 +811,10 @@ class Users { return { user, redirect, version }; } + static async hashPassword(password) { + return bcrypt.hash(password, SALT_ROUNDS); + } + // TODO: update doc static async resetPassword(token, password) { const { user, redirect, version } = await this.verifyPasswordResetToken( @@ -821,7 +825,7 @@ class Users { throw new ErrPasswordTooShort(); } - const hashedPassword = await bcrypt.hash(password, SALT_ROUNDS); + const hashedPassword = await Users.hashPassword(password); // Update the user's password. await User.update( From 438c515d2ff56de6baaa9a45204fe4764394e5e2 Mon Sep 17 00:00:00 2001 From: okbel Date: Thu, 3 May 2018 16:06:28 -0300 Subject: [PATCH 13/14] moving mutations to /hocs folder --- client/coral-framework/graphql/mutations.js | 88 ------------------ plugin-api/beta/client/hocs/index.js | 2 - .../containers/AddEmailAddressDialog.js | 2 +- .../client/containers/Profile.js | 6 +- .../client/hocs/index.js | 91 +++++++++++++++++++ 5 files changed, 94 insertions(+), 95 deletions(-) create mode 100644 plugins/talk-plugin-local-auth/client/hocs/index.js diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js index dd54d0438..228911d4a 100644 --- a/client/coral-framework/graphql/mutations.js +++ b/client/coral-framework/graphql/mutations.js @@ -321,94 +321,6 @@ const SetUsernameFragment = gql` } `; -export const withAttachLocalAuth = withMutation( - gql` - mutation AttachLocalAuth($input: AttachLocalAuthInput!) { - attachLocalAuth(input: $input) { - ...AttachLocalAuthResponse - } - } - `, - { - props: ({ mutate }) => ({ - attachLocalAuth: input => { - return mutate({ - variables: { - input, - }, - update: proxy => { - const AttachLocalAuthQuery = gql` - query Talk_AttachLocalAuth { - me { - id - email - } - } - `; - - const prev = proxy.readQuery({ query: AttachLocalAuthQuery }); - - const data = update(prev, { - me: { - email: { $set: input.email }, - }, - }); - - proxy.writeQuery({ - query: AttachLocalAuthQuery, - data, - }); - }, - }); - }, - }), - } -); - -export const withUpdateEmailAddress = withMutation( - gql` - mutation UpdateEmailAddress($input: UpdateEmailAddressInput!) { - updateEmailAddress(input: $input) { - ...UpdateEmailAddressResponse - } - } - `, - { - props: ({ mutate }) => ({ - updateEmailAddress: input => { - return mutate({ - variables: { - input, - }, - update: proxy => { - const UpdateEmailAddressQuery = gql` - query Talk_UpdateEmailAddress { - me { - id - email - } - } - `; - - const prev = proxy.readQuery({ query: UpdateEmailAddressQuery }); - - const data = update(prev, { - me: { - email: { $set: input.email }, - }, - }); - - proxy.writeQuery({ - query: UpdateEmailAddressQuery, - data, - }); - }, - }); - }, - }), - } -); - export const withChangeUsername = withMutation( gql` mutation ChangeUsername($id: ID!, $username: String!) { diff --git a/plugin-api/beta/client/hocs/index.js b/plugin-api/beta/client/hocs/index.js index 910969227..d7ca5fce9 100644 --- a/plugin-api/beta/client/hocs/index.js +++ b/plugin-api/beta/client/hocs/index.js @@ -27,7 +27,5 @@ export { withSetCommentStatus, withChangePassword, withChangeUsername, - withUpdateEmailAddress, - withAttachLocalAuth, } from 'coral-framework/graphql/mutations'; export { compose } from 'recompose'; diff --git a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js index 7ab887183..841dc8420 100644 --- a/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js +++ b/plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js @@ -4,7 +4,7 @@ import { connect, withFragments, excludeIf } from 'plugin-api/beta/client/hocs'; import AddEmailAddressDialog from '../components/AddEmailAddressDialog'; import { notify } from 'coral-framework/actions/notification'; -import { withAttachLocalAuth } from 'plugin-api/beta/client/hocs'; +import { withAttachLocalAuth } from '../hocs'; const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch); diff --git a/plugins/talk-plugin-local-auth/client/containers/Profile.js b/plugins/talk-plugin-local-auth/client/containers/Profile.js index 239304535..e1ed99ef6 100644 --- a/plugins/talk-plugin-local-auth/client/containers/Profile.js +++ b/plugins/talk-plugin-local-auth/client/containers/Profile.js @@ -3,10 +3,8 @@ import { bindActionCreators } from 'redux'; import { connect, withFragments } from 'plugin-api/beta/client/hocs'; import Profile from '../components/Profile'; import { notify } from 'coral-framework/actions/notification'; -import { - withChangeUsername, - withUpdateEmailAddress, -} from 'plugin-api/beta/client/hocs'; +import { withChangeUsername } from 'plugin-api/beta/client/hocs'; +import { withUpdateEmailAddress } from '../hocs'; const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch); diff --git a/plugins/talk-plugin-local-auth/client/hocs/index.js b/plugins/talk-plugin-local-auth/client/hocs/index.js new file mode 100644 index 000000000..573fa6b10 --- /dev/null +++ b/plugins/talk-plugin-local-auth/client/hocs/index.js @@ -0,0 +1,91 @@ +import { withMutation } from 'plugin-api/beta/client/hocs'; +import { gql } from 'react-apollo'; +import update from 'immutability-helper'; + +export const withAttachLocalAuth = withMutation( + gql` + mutation AttachLocalAuth($input: AttachLocalAuthInput!) { + attachLocalAuth(input: $input) { + ...AttachLocalAuthResponse + } + } + `, + { + props: ({ mutate }) => ({ + attachLocalAuth: input => { + return mutate({ + variables: { + input, + }, + update: proxy => { + const AttachLocalAuthQuery = gql` + query Talk_AttachLocalAuth { + me { + id + email + } + } + `; + + const prev = proxy.readQuery({ query: AttachLocalAuthQuery }); + + const data = update(prev, { + me: { + email: { $set: input.email }, + }, + }); + + proxy.writeQuery({ + query: AttachLocalAuthQuery, + data, + }); + }, + }); + }, + }), + } +); + +export const withUpdateEmailAddress = withMutation( + gql` + mutation UpdateEmailAddress($input: UpdateEmailAddressInput!) { + updateEmailAddress(input: $input) { + ...UpdateEmailAddressResponse + } + } + `, + { + props: ({ mutate }) => ({ + updateEmailAddress: input => { + return mutate({ + variables: { + input, + }, + update: proxy => { + const UpdateEmailAddressQuery = gql` + query Talk_UpdateEmailAddress { + me { + id + email + } + } + `; + + const prev = proxy.readQuery({ query: UpdateEmailAddressQuery }); + + const data = update(prev, { + me: { + email: { $set: input.email }, + }, + }); + + proxy.writeQuery({ + query: UpdateEmailAddressQuery, + data, + }); + }, + }); + }, + }), + } +); From 070ecbaafc15097091a1b568a5886fd0182320b0 Mon Sep 17 00:00:00 2001 From: okbel Date: Thu, 3 May 2018 16:30:15 -0300 Subject: [PATCH 14/14] translations --- .../client/components/AddEmailContent.js | 28 +++++++++---------- .../client/components/EmailAddressAdded.js | 15 ++++++---- .../client/components/InputField.css | 5 ++-- .../client/components/VerifyEmailAddress.js | 11 ++++---- .../client/translations.yml | 23 +++++++++++++++ 5 files changed, 54 insertions(+), 28 deletions(-) diff --git a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js index 0d3411ff3..4a2ce7430 100644 --- a/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js +++ b/plugins/talk-plugin-local-auth/client/components/AddEmailContent.js @@ -4,6 +4,7 @@ import styles from './AddEmailAddressDialog.css'; import { Icon } from 'plugin-api/beta/client/components/ui'; import cn from 'classnames'; import InputField from './InputField'; +import { t } from 'plugin-api/beta/client/services'; const AddEmailContent = ({ formData, @@ -13,29 +14,29 @@ const AddEmailContent = ({ onChange, }) => (
-

Add an Email Address

+

+ {t('talk-plugin-local-auth.add_email.content.title')} +

- For your added security, we require users to add an email address to their - accounts. Your email address will be used to: + {t('talk-plugin-local-auth.add_email.content.description')}

  • - Receive updates regarding any changes to your account (email address, - username, password, etc.) + {t('talk-plugin-local-auth.add_email.content.item_1')}
  • - Allow you to download your comments. + {t('talk-plugin-local-auth.add_email.content.item_2')}
  • - Send comment notifications that you have chosen to receive. + {t('talk-plugin-local-auth.add_email.content.item_3')}
@@ -43,20 +44,20 @@ const AddEmailContent = ({
- Add Email Address + {t('talk-plugin-local-auth.add_email.add_email_address')}
diff --git a/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js b/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js index ef74f4b8b..6d5775f3c 100644 --- a/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js +++ b/plugins/talk-plugin-local-auth/client/components/EmailAddressAdded.js @@ -2,21 +2,24 @@ import React from 'react'; import cn from 'classnames'; import PropTypes from 'prop-types'; import styles from './AddEmailAddressDialog.css'; +import { t } from 'plugin-api/beta/client/services'; const EmailAddressAdded = ({ done }) => (
-

Email Address Added

+

+ {t('talk-plugin-local-auth.add_email.added.title')} +

- Your email address has been added to your account. + {t('talk-plugin-local-auth.add_email.added.description')}

- Need to change your email address? + {t('talk-plugin-local-auth.add_email.added.subtitle')}

- You can change your account settings by visiting{' '} - My Profile {'>'} Settings. + {t('talk-plugin-local-auth.add_email.added.description_2')}{' '} + {t('talk-plugin-local-auth.add_email.added.path')}.

diff --git a/plugins/talk-plugin-local-auth/client/components/InputField.css b/plugins/talk-plugin-local-auth/client/components/InputField.css index befc94f18..3442befde 100644 --- a/plugins/talk-plugin-local-auth/client/components/InputField.css +++ b/plugins/talk-plugin-local-auth/client/components/InputField.css @@ -42,11 +42,10 @@ } .detailLabel { - color: #4c4c4d; + color: #4C4C4D; font-size: 1em; display: block; margin-bottom: 4px; - font-weight: bold; } .detailValue { @@ -78,4 +77,4 @@ .warningIcon { color: #FA4643; -} \ No newline at end of file +} diff --git a/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js b/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js index 9a3e6ae89..cc1ff3626 100644 --- a/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js +++ b/plugins/talk-plugin-local-auth/client/components/VerifyEmailAddress.js @@ -2,18 +2,19 @@ import React from 'react'; import cn from 'classnames'; import PropTypes from 'prop-types'; import styles from './AddEmailAddressDialog.css'; +import { t } from 'plugin-api/beta/client/services'; const VerifyEmailAddress = ({ emailAddress, done }) => (
-

Verify Your Email Address

+

+ {t('talk-plugin-local-auth.add_email.verify.title')} +

- We’ve sent an email to {emailAddress} to verify your account. You must - verify your email address so that it can be used for account change - confirmations and notifications. + {t('talk-plugin-local-auth.add_email.verify.description', emailAddress)}

diff --git a/plugins/talk-plugin-local-auth/client/translations.yml b/plugins/talk-plugin-local-auth/client/translations.yml index d3b323f54..2b46a0464 100644 --- a/plugins/talk-plugin-local-auth/client/translations.yml +++ b/plugins/talk-plugin-local-auth/client/translations.yml @@ -35,6 +35,29 @@ en: 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 only be changed every 14 days." + add_email: + add_email_address: "Add Email Address" + enter_email_address: "Enter Email Address:" + invalid_email_address: "Invalid Email address" + confirm_email_address: "Confirm Email Address:" + email_does_not_match: "Email Address does not match" + insert_password: "Insert Password:" + done: "done" + content: + title: "Add an Email Address" + description: "For your added security, we require users to add an email address to their accounts. Your email address will be used to:" + item_1: "Receive updates regarding any changes to your account (email address, username, password, etc.)" + item_2: "Allow you to download your comments." + item_3: "Send comment notifications that you have chosen to receive." + verify: + title: "Verify Your Email Address" + description: "We’ve sent an email to {0} to verify your account. You must verify your email address so that it can be used for account change confirmations and notifications." + added: + title: "Email Address Added" + description: "Your email address has been added to your account." + subtitle: "Need to change your email address?" + description_2: "You can change your account settings by visiting" + path: "My Profile > Settings" es: talk-plugin-local-auth: change_password: