Email Attach Fixes

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/client/translations.yml

@@ -1,87 +0,0 @@
-en:
-  talk-plugin-local-auth:
-    change_password:
-      change_password: "Change Password"
-      passwords_dont_match: "Passwords don`t match"
-      required_field: "This field is required"
-      forgot_password: "Forgot your password?"
-      save: "Save"
-      cancel: "Cancel"
-      edit: "Edit"
-      changed_password_msg: "Changed Password - Your password has been successfully changed"
-      forgot_password_sent: "Forgot Password - We sent you an email to recover your password"
-    change_username:
-      change_username_note: "Usernames can only be changed once every 14 days. Your username is not currently eligible to be updated."
-      save: "Save"
-      edit_profile: "Edit Profile"
-      cancel: "Cancel"
-      confirm_username_change: "Confirm Username Change"
-      description: "You are attempting to change your username. Your new username will appear on all of your past and future comments."
-      old_username: "Old Username"
-      new_username: "New Username"
-      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"
-      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."
-    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."
-    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:"
-      required_field: "This field is required"
-      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:
-      change_password: "Cambiar Contraseña"
-      passwords_dont_match: "Las contraseñas no coinciden"
-      required_field: "Este campo es requerido"
-      forgot_password: "Olvidaste tu contraseña?"
-      save: "Guardar"
-      cancel: "Cancelar"
-      edit: "Editar"
-      changed_password_msg: "Contraseña Actualizada - Tu contraseña ha sido exitosamente actualizada"
-      forgot_password_sent: "Contraseña Olvidada - Te enviamos un email para recuperar tu contraseña"
-    change_username:
-      change_username_note: "El usuario puede ser cambiado cada 14 días"
-      save: "Guardar"
-      edit_profile: "Editar Perfil"
-      cancel: "Cancelar"
-      confirm_username_change: "Confirmar Cambio de Usuario"
-      description: "Estás intentando cambiar tu usuario. Tu nuevo usuario aparecerá en todos tus pasados y futuros comentarios."
-      old_username: "Usuario viejo"
-      new_username: "Usuario nuevo"
-      bottom_note: "Nota: No podrás cambiar tu usuario por 14 días"
-      confirm_changes: "Confirmar Cambios"
-      username_does_not_match: "El usuario no coincide"
-      changed_username_success_msg: "Usuario Actualizado - Tu usuario ha sido exitosamente actualizado. No podrás cambiar el usuario por 14 días."
-      change_username_attempt: "El usuario no puede ser actualizado. Los usuarios pueden ser cambiados cada 14 días."