Adding Change Email

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;
+  }
+}

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 (
+      <Dialog
+        open={this.props.showDialog}
+        className={cn(styles.dialog, 'talk-plugin-auth--edit-profile-dialog')}
+      >
+        <span className={styles.close} onClick={this.props.closeDialog}>
+          ×
+        </span>
+        <h1 className={styles.title}>
+          {t('talk-plugin-auth.change_email.confirm_email_change')}
+        </h1>
+        <div className={styles.content}>
+          <p className={styles.description}>
+            {t('talk-plugin-auth.change_email.description')}
+          </p>
+          <div className={styles.emailChange}>
+            <span className={styles.item}>
+              {t('talk-plugin-auth.change_email.old_email')}: {this.props.email}
+            </span>
+            <span className={styles.item}>
+              {t('talk-plugin-auth.change_email.new_email')}:{' '}
+              {this.props.formData.newEmail}
+            </span>
+          </div>
+          <form>
+            <InputField
+              id="password"
+              label={t('talk-plugin-auth.change_email.enter_password')}
+              name="password"
+              type="password"
+              onChange={this.props.onChange}
+              defaultValue=""
+              hasError={this.state.errors.password && this.state.showError}
+              errorMsg={t('talk-plugin-auth.change_email.incorrect_password')}
+              showError={this.state.showError}
+              columnDisplay
+              showSuccess={false}
+            />
+          </form>
+          <div className={styles.bottomActions}>
+            <Button className={styles.cancel}>
+              {t('talk-plugin-auth.change_email.cancel')}
+            </Button>
+            <Button
+              className={styles.confirmChanges}
+              onClick={this.confirmChanges}
+            >
+              {t('talk-plugin-auth.change_email.confirm_change')}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  }
+}
+
+ChangeEmailDialog.propTypes = {
+  saveChanges: PropTypes.func,
+  closeDialog: PropTypes.func,
+  showDialog: PropTypes.bool,
+  onChange: PropTypes.func,
+  email: PropTypes.string,
+  formData: PropTypes.object,
+};
+
+export default ChangeEmailDialog;

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}
         />
 
+        <ChangeEmailDialog
+          showDialog={this.state.showDialog}
+          onChange={this.onChange}
+          formData={this.state.formData}
+          username={username}
+          closeDialog={this.closeDialog}
+          saveChanges={this.saveChanges}
+        />
+
         {editing ? (
           <div className={styles.content}>
             <div className={styles.detailList}>
@@ -114,8 +176,8 @@ class ChangeUsername extends React.Component {
                 name="newUsername"
                 onChange={this.onChange}
                 defaultValue={username}
-                columnDisplay
                 validationType="username"
+                columnDisplay
               >
                 <span className={styles.bottomText}>
                   {t('talk-plugin-auth.change_username.change_username_note')}
@@ -123,11 +185,12 @@ class ChangeUsername extends React.Component {
               </InputField>
               <InputField
                 icon="email"
-                id="email"
-                name="email"
-                value={emailAddress}
-                validationType="username"
-                disabled
+                id="newEmail"
+                name="newEmail"
+                onChange={this.onChange}
+                defaultValue={emailAddress}
+                validationType="email"
+                columnDisplay
               />
             </div>
           </div>
@@ -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')}
             </Button>

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: