Email Attach Fixes

client/coral-framework/components/Popup.js

@@ -37,7 +37,8 @@ export default class Popup extends Component {
       this.onBlur();
     };
 
-    // Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
+    // Use `onunload` instead of `onbeforeunload` which is not supported in iOS
+    // Safari.
     this.ref.onunload = () => {
       this.onUnload();
 
@@ -46,10 +47,15 @@ export default class Popup extends Component {
       }
 
       this.resetCallbackInterval = setInterval(() => {
-        if (this.ref && this.ref.onload === null) {
-          clearInterval(this.resetCallbackInterval);
-          this.resetCallbackInterval = null;
-          this.setCallbacks();
+        try {
+          if (this.ref && this.ref.onload === null) {
+            clearInterval(this.resetCallbackInterval);
+            this.resetCallbackInterval = null;
+            this.setCallbacks();
+          }
+        } catch (err) {
+          // We could be getting a security exception here if the login page
+          // gets redirected to another domain to authenticate.
         }
       }, 50);
 

plugins/talk-plugin-local-auth/client/actions.js

@@ -0,0 +1,9 @@
+import * as actions from './constants';
+
+export const startAttach = () => ({
+  type: actions.STARTED_ATTACH,
+});
+
+export const finishAttach = () => ({
+  type: actions.FINISH_ATTACH,
+});

plugins/talk-plugin-local-auth/client/components/AddEmailAddressDialog.js

@@ -45,6 +45,10 @@ class AddEmailAddressDialog extends React.Component {
     ),
   };
 
+  componentDidMount() {
+    this.props.startAttach();
+  }
+
   onChange = e => {
     const { name, value } = e.target;
     this.setState(
@@ -99,7 +103,13 @@ class AddEmailAddressDialog extends React.Component {
     });
   };
 
-  confirmChanges = async () => {
+  finish = () => {
+    this.props.finishAttach();
+  };
+
+  confirmChanges = async e => {
+    e.preventDefault();
+
     if (!this.validate()) {
       this.showErrors();
       return;
@@ -113,6 +123,8 @@ class AddEmailAddressDialog extends React.Component {
         email: emailAddress,
         password: confirmPassword,
       });
+
+      // TODO: translate
       this.props.notify('success', 'Email Added!');
       this.goToNextStep();
     } catch (err) {
@@ -143,13 +155,13 @@ class AddEmailAddressDialog extends React.Component {
         )}
         {step === 1 &&
           !settings.requireEmailConfirmation && (
-            <EmailAddressAdded done={() => {}} />
+            <EmailAddressAdded done={this.finish} />
           )}
         {step === 1 &&
           settings.requireEmailConfirmation && (
             <VerifyEmailAddress
               emailAddress={formData.emailAddress}
-              done={() => {}}
+              done={this.finish}
             />
           )}
       </Dialog>
@@ -161,6 +173,8 @@ AddEmailAddressDialog.propTypes = {
   attachLocalAuth: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
   root: PropTypes.object.isRequired,
+  startAttach: PropTypes.func.isRequired,
+  finishAttach: PropTypes.func.isRequired,
 };
 
 export default AddEmailAddressDialog;

plugins/talk-plugin-local-auth/client/components/AddEmailContent.js

@@ -41,7 +41,7 @@ const AddEmailContent = ({
       </li>
     </ul>
 
-    <form autoComplete="off">
+    <form autoComplete="off" onSubmit={confirmChanges}>
       <InputField
         id="emailAddress"
         label={t('talk-plugin-local-auth.add_email.enter_email_address')}
@@ -82,12 +82,9 @@ const AddEmailContent = ({
         showSuccess={false}
       />
       <div className={styles.actions}>
-        <a
-          className={cn(styles.button, styles.proceed)}
-          onClick={confirmChanges}
-        >
+        <button className={cn(styles.button, styles.proceed)}>
           {t('talk-plugin-local-auth.add_email.add_email_address')}
-        </a>
+        </button>
       </div>
     </form>
   </div>

plugins/talk-plugin-local-auth/client/constants.js

@@ -0,0 +1,4 @@
+const prefix = 'TALK_LOCAL_AUTH';
+
+export const STARTED_ATTACH = `${prefix}_STARTED_ATTACH`;
+export const FINISH_ATTACH = `${prefix}_FINISH_ATTACH`;

plugins/talk-plugin-local-auth/client/containers/AddEmailAddressDialog.js

@@ -3,10 +3,15 @@ import { bindActionCreators } from 'redux';
 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 '../hocs';
+import { startAttach, finishAttach } from '../actions';
 
-const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
+const mapStateToProps = ({ talkPluginLocalAuth: state }) => ({
+  inProgress: state.inProgress,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ notify, startAttach, finishAttach }, dispatch);
 
 const withData = withFragments({
   root: gql`
@@ -23,8 +28,11 @@ const withData = withFragments({
 });
 
 export default compose(
-  connect(null, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps),
   withAttachLocalAuth,
   withData,
-  excludeIf(({ root: { me } }) => !me || me.email)
+  excludeIf(
+    ({ root: { me }, inProgress }) =>
+      !((me && !me.email) || (me && me.email && inProgress))
+  )
 )(AddEmailAddressDialog);

plugins/talk-plugin-local-auth/client/index.js

@@ -1,10 +1,12 @@
 import ChangePassword from './containers/ChangePassword';
 import AddEmailAddressDialog from './containers/AddEmailAddressDialog';
 import Profile from './containers/Profile';
-import translations from './translations.yml';
+import translations from '../translations.yml';
 import graphql from './graphql';
+import reducer from './reducer';
 
 export default {
+  reducer,
   translations,
   slots: {
     profileHeader: [Profile],

plugins/talk-plugin-local-auth/client/reducer.js

@@ -0,0 +1,20 @@
+import * as actions from './constants';
+
+const initialState = {
+  inProgress: false,
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+    case actions.STARTED_ATTACH:
+      return {
+        inProgress: true,
+      };
+    case actions.FINISH_ATTACH:
+      return {
+        inProgress: false,
+      };
+    default:
+      return state;
+  }
+}

plugins/talk-plugin-local-auth/index.js

@@ -4,7 +4,7 @@ const mutators = require('./server/mutators');
 const path = require('path');
 
 module.exports = {
-  translations: path.join(__dirname, 'server', 'translations.yml'),
+  translations: path.join(__dirname, 'translations.yml'),
   typeDefs,
   mutators,
   resolvers,

plugins/talk-plugin-local-auth/server/translations.yml

@@ -1,9 +0,0 @@
-en:
-  email:
-    email_change_original:
-      subject: Email change
-      body: Your email address has been changed from {0} to {1}. If you did not initiate this change, please contact {2}. # TODO: update translation
-  error:
-    NO_LOCAL_PROFILE: No existing email address is associated with this account.
-    LOCAL_PROFILE: An email address is already associated with this account.
-    INCORRECT_PASSWORD: Provided password was incorrect.

plugins/talk-plugin-local-auth/translations.yml

@@ -1,4 +1,12 @@
 en:
+  email:
+    email_change_original:
+      subject: Email change
+      body: Your email address has been changed from {0} to {1}. If you did not initiate this change, please contact {2}. # TODO: update translation
+  error:
+    NO_LOCAL_PROFILE: No existing email address is associated with this account.
+    LOCAL_PROFILE: An email address is already associated with this account.
+    INCORRECT_PASSWORD: Provided password was incorrect.
   talk-plugin-local-auth:
     change_password:
       change_password: "Change Password"
@@ -43,7 +51,7 @@ en:
       email_does_not_match: "Email Address does not match"
       insert_password: "Insert Password:"
       required_field: "This field is required"
-      done: "done"
+      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:"