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 (
+
+ );
+ }
+}
+
+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}
/>
+