diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.css b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.css new file mode 100644 index 000000000..a57c3662b --- /dev/null +++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.css @@ -0,0 +1,77 @@ +.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: 320px; + top: 10px; + font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif; + font-size: 14px; + border-radius: 4px; + padding: 12px 20px; +} + +.close { + font-size: 20px; + line-height: 14px; + top: 10px; + right: 10px; + position: absolute; + display: block; + font-weight: bold; + color: #363636; + cursor: pointer; + + &:hover { + color: #6b6b6b; + } +} + +.title { + font-size: 1.3em; + margin-bottom: 8px; +} + +.description { + font-size: 1em; + line-height: 20px; + margin: 0; +} + +.item { + display: block; + color: #4C4C4D; + font-size: 1em; + margin-bottom: 2px; +} + +.bottomActions { + text-align: right; +} + +.emailChange { + margin: 18px 0; +} + +.cancel { + border: 1px solid #787d80; + background-color: transparent; + height: 30px; + font-size: 0.9em; + line-height: normal; + + &:hover { + background-color: #eaeaea; + } +} + +.confirmChanges { + background-color: #3498DB; + border-color: #3498DB; + color: white; + height: 30px; + font-size: 0.9em; + + &:hover { + background-color: #3ba3ec; + color: white; + } +} \ No newline at end of file diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.js new file mode 100644 index 000000000..844b900e7 --- /dev/null +++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.js @@ -0,0 +1,98 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cn from 'classnames'; +import styles from './ChangeUsernameDialog.css'; +import InputField from './InputField'; +import { Button, Dialog } from 'plugin-api/beta/client/components/ui'; +import { t } from 'plugin-api/beta/client/services'; + +class ChangeEmailDialog extends React.Component { + state = { + showError: false, + errors: { + passowrd: '', + }, + }; + + showError = () => { + this.setState({ + showError: true, + }); + }; + + confirmChanges = async () => { + if (this.formHasError()) { + this.showError(); + } else { + await this.props.saveChanges(); + this.props.closeDialog(); + } + }; + + render() { + return ( + + + × + +

+ {t('talk-plugin-auth.change_email.confirm_email_change')} +

+
+

+ {t('talk-plugin-auth.change_email.description')} +

+
+ + {t('talk-plugin-auth.change_email.old_email')}: {this.props.email} + + + {t('talk-plugin-auth.change_email.new_email')}:{' '} + {this.props.formData.newEmail} + +
+
+ + +
+ + +
+
+
+ ); + } +} + +ChangeEmailDialog.propTypes = { + saveChanges: PropTypes.func, + closeDialog: PropTypes.func, + showDialog: PropTypes.bool, + onChange: PropTypes.func, + email: PropTypes.string, + formData: PropTypes.object, +}; + +export default ChangeEmailDialog; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js index df8b3a641..d9f020491 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js @@ -4,14 +4,18 @@ import PropTypes from 'prop-types'; import styles from './ChangeUsername.css'; import { Button } from 'plugin-api/beta/client/components/ui'; import ChangeUsernameDialog from './ChangeUsernameDialog'; +import ChangeEmailDialog from './ChangeEmailDialog'; import { t } from 'plugin-api/beta/client/services'; import InputField from './InputField'; import { getErrorMessages } from 'coral-framework/utils'; +import validate from 'coral-framework/helpers/validate'; +import errorMsj from 'coral-framework/helpers/error'; const initialState = { editing: false, showDialog: false, formData: {}, + errors: {}, }; class ChangeUsername extends React.Component { @@ -69,23 +73,72 @@ class ChangeUsername extends React.Component { this.disableEditing(); }; - onChange = e => { - const { name, value } = e.target; - - this.setState(state => ({ - formData: { - ...state.formData, - [name]: value, - }, + 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-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); + } + ); + }; + closeDialog = () => { this.setState({ showDialog: false, }); }; + hasError = err => { + return Object.keys(this.state.errors).indexOf(err) !== -1; + }; + + isSaveEnabled = () => { + 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; + + return !formHasErrors && (validUsername || validEmail); + }; + render() { const { username, emailAddress } = this.props; const { editing } = this.state; @@ -105,6 +158,15 @@ class ChangeUsername extends React.Component { saveChanges={this.saveChanges} /> + + {editing ? (
@@ -114,8 +176,8 @@ class ChangeUsername extends React.Component { name="newUsername" onChange={this.onChange} defaultValue={username} - columnDisplay validationType="username" + columnDisplay > {t('talk-plugin-auth.change_username.change_username_note')} @@ -123,11 +185,12 @@ class ChangeUsername extends React.Component {
@@ -145,10 +208,7 @@ class ChangeUsername extends React.Component { className={cn(styles.button, styles.saveButton)} icon="save" onClick={this.onSave} - disabled={ - !this.state.formData.newUsername || - this.state.formData.newUsername === username - } + disabled={!this.isSaveEnabled()} > {t('talk-plugin-auth.change_username.save')} diff --git a/plugins/talk-plugin-auth/client/translations.yml b/plugins/talk-plugin-auth/client/translations.yml index 3cfb46a95..4ac5ae4e6 100644 --- a/plugins/talk-plugin-auth/client/translations.yml +++ b/plugins/talk-plugin-auth/client/translations.yml @@ -152,6 +152,17 @@ en: bottom_note: "Note: You will not be able to change your username again for 14 days" confirm_changes: "Confirm Changes" username_does_not_match: "Username does not match" + cant_be_equal: "Your new {0} must be different to your current one" + change_email: + confirm_email_change: "Confirm Email Address Change" + description: "You are attempting to change your email address. Your new email address will be used for your login and to receive account notifications." + old_email: "Old Email Address" + new_email: "New Email Address" + enter_password: "Enter Password" + incorrect_password: "Incorrect Password" + confirm_change: "Confirm Change" + cancel: "Cancel" + 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" de: talk-plugin-auth: login: