Adding reducer

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

@@ -0,0 +1,9 @@
+import * as actions from './constants';
+
+export const showAddEmailDialog = () => ({
+  type: actions.SHOW_ADD_EMAIL_DIALOG,
+});
+
+export const hideAddEmailDialog = () => ({
+  type: actions.HIDE_ADD_EMAIL_DIALOG,
+});

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

@@ -1,17 +1,19 @@
 .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: 400px;
+  width: 320px;
   top: 50%;
   transform: translateY(-50%);
   padding: 20px;
   border-radius: 4px;
   font-family: Helvetica,Helvetica Neue,Verdana,sans-serif;
+  color:#3B4A53;
 }
 
 .title {
-  font-size: 1.2em;
-  margin-bottom: 8px;
+  font-size: 1.3em;
+  margin: 15px 0;
+  text-align: center;
 }
 
 .description {

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

@@ -115,10 +115,10 @@ class AddEmailAddressDialog extends React.Component {
 
   render() {
     const { errors, formData, showErrors, step } = this.state;
-    const { root: { settings } } = this.props;
+    const { root: { settings }, showAddEmailDialog } = this.props;
 
     return (
-      <Dialog className={styles.dialog} open={true}>
+      <Dialog className={styles.dialog} open={showAddEmailDialog}>
         {step === 0 && (
           <AddEmailContent
             formData={formData}
@@ -129,10 +129,15 @@ class AddEmailAddressDialog extends React.Component {
           />
         )}
         {step === 1 &&
-          !settings.requireEmailConfirmation && <EmailAddressAdded />}
+          !settings.requireEmailConfirmation && (
+            <EmailAddressAdded done={() => {}} />
+          )}
         {step === 1 &&
           settings.requireEmailConfirmation && (
-            <VerifyEmailAddress emailAddress={formData.emailAddress} />
+            <VerifyEmailAddress
+              emailAddress={formData.emailAddress}
+              done={() => {}}
+            />
           )}
       </Dialog>
     );
@@ -143,6 +148,7 @@ AddEmailAddressDialog.propTypes = {
   attachLocalAuth: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
   root: PropTypes.object.isRequired,
+  showAddEmailDialog: PropTypes.bool.isRequired,
 };
 
 export default AddEmailAddressDialog;

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

@@ -72,7 +72,7 @@ const AddEmailContent = ({
       />
       <InputField
         id="confirmPassword"
-        label="Insert Password"
+        label="Insert Password:"
         name="confirmPassword"
         type="password"
         onChange={onChange}
@@ -83,9 +83,14 @@ const AddEmailContent = ({
         columnDisplay
         showSuccess={false}
       />
-      <a className={cn(styles.button, styles.proceed)} onClick={confirmChanges}>
-        Add Email Address
-      </a>
+      <div className={styles.actions}>
+        <a
+          className={cn(styles.button, styles.proceed)}
+          onClick={confirmChanges}
+        >
+          Add Email Address
+        </a>
+      </div>
     </form>
   </div>
 );

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
 import styles from './AddEmailAddressDialog.css';
 
-const EmailAddressAdded = () => (
+const EmailAddressAdded = ({ done }) => (
   <div>
     <h4 className={styles.title}>Email Address Added</h4>
     <p className={styles.description}>
@@ -12,7 +14,16 @@ const EmailAddressAdded = () => (
       You can change your account settings by visiting{' '}
       <strong>My Profile {'>'} Settings</strong>.
     </p>
+    <div className={styles.actions}>
+      <a className={cn(styles.button, styles.proceed)} onClick={done}>
+        Done
+      </a>
+    </div>
   </div>
 );
 
+EmailAddressAdded.propTypes = {
+  done: PropTypes.func.isRequired,
+};
+
 export default EmailAddressAdded;

plugins/talk-plugin-local-auth/client/components/InputField.css

@@ -42,10 +42,11 @@
 }
 
 .detailLabel {
-  color: #4C4C4D;
+  color: #4c4c4d;
   font-size: 1em;
   display: block;
   margin-bottom: 4px;
+  font-weight: bold;
 }
 
 .detailValue {

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './AddEmailAddressDialog.css';
 
-const VerifyEmailAddress = ({ emailAddress }) => (
+const VerifyEmailAddress = ({ emailAddress, done }) => (
   <div>
     <h4 className={styles.title}>Verify Your Email Address</h4>
     <p className={styles.description}>
@@ -10,11 +11,17 @@ const VerifyEmailAddress = ({ emailAddress }) => (
       verify your email address so that it can be used for account change
       confirmations and notifications.
     </p>
+    <div className={styles.actions}>
+      <a className={cn(styles.button, styles.proceed)} onClick={done}>
+        Done
+      </a>
+    </div>
   </div>
 );
 
 VerifyEmailAddress.propTypes = {
-  emailAddress: PropTypes.string,
+  emailAddress: PropTypes.string.isRequired,
+  done: PropTypes.func.isRequired,
 };
 
 export default VerifyEmailAddress;

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

@@ -0,0 +1,4 @@
+const prefix = 'TALK_AUTH_LOCAL';
+
+export const SHOW_ADD_EMAIL_DIALOG = `${prefix}_SHOW_ADD_EMAIL_DIALOG`;
+export const HIDE_ADD_EMAIL_DIALOG = `${prefix}_HIDE_ADD_EMAIL_DIALOG`;

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

@@ -22,8 +22,12 @@ const withData = withFragments({
   `,
 });
 
+const mapStateToProps = ({ talkPluginLocalAuth: state }) => ({
+  showAddEmailDialog: state.showAddEmailDialog,
+});
+
 export default compose(
-  connect(null, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps),
   withAttachLocalAuth,
   withData
 )(AddEmailAddressDialog);

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

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

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

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