Checking if email verification is required

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

@@ -1,15 +1,18 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './AddEmailAddressDialog.css';
-import { Button, Dialog, Icon } from 'plugin-api/beta/client/components/ui';
+import { Dialog } from 'plugin-api/beta/client/components/ui';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
-import InputField from './InputField';
 import { getErrorMessages } from 'coral-framework/utils';
+import styles from './AddEmailAddressDialog.css';
+
+import AddEmailContent from './AddEmailContent';
+import VerifyEmailAddress from './VerifyEmailAddress';
+import EmailAddressAdded from './EmailAddressAdded';
 
 const initialState = {
+  step: 0,
   showErrors: false,
   errors: {},
   formData: {},
@@ -17,7 +20,7 @@ const initialState = {
 
 class AddEmailAddressDialog extends React.Component {
   state = initialState;
-  validKeys = ['emailAddress', 'confirmEmailAddress'];
+  validKeys = ['emailAddress', 'confirmEmailAddress', 'confirmPassword'];
 
   onChange = e => {
     const { name, value, type } = e.target;
@@ -74,96 +77,56 @@ class AddEmailAddressDialog extends React.Component {
     return formHasErrors || formIncomplete;
   };
 
-  showError = () => {
+  showErrors = () => {
     this.setState({
-      showError: true,
+      showErrors: true,
     });
   };
 
   confirmChanges = async () => {
     if (this.formHasError()) {
-      this.showError();
+      this.showErrors();
       return;
     }
 
-    const { emailAddress } = this.state.formData;
+    const { emailAddress, confirmPassword } = this.state.formData;
     const { attachLocalAuth } = this.props;
 
     try {
       await attachLocalAuth({
         email: emailAddress,
+        password: confirmPassword,
       });
       this.props.notify('success', 'Email Added!');
+      this.goToNextStep();
     } catch (err) {
       this.props.notify('error', getErrorMessages(err));
     }
   };
 
+  goToNextStep = () => {
+    this.setState(({ step }) => ({
+      step: step + 1,
+    }));
+  };
+
   render() {
-    const { errors, formData, showErrors } = this.state;
+    const { errors, formData, showErrors, step } = this.state;
+    const { root: { settings } } = this.props;
     return (
       <Dialog className={styles.dialog} open={true}>
-        <h4 className={styles.title}>Add an Email Address</h4>
-        <p className={styles.description}>
-          For your added security, we require users to add an email address to
-          their accounts. Your email address will be used to:
-        </p>
-        <ul className={styles.list}>
-          <li className={styles.item}>
-            <Icon name="done" className={styles.itemIcon} />
-            <span className={styles.text}>
-              Receive updates regarding any changes to your account (email
-              address, username, password, etc.)
-            </span>
-          </li>
-          <li className={styles.item}>
-            <Icon name="done" className={styles.itemIcon} />
-            <span className={styles.text}>
-              Allow you to download your comments.
-            </span>
-          </li>
-          <li className={styles.item}>
-            <Icon name="done" className={styles.itemIcon} />
-            <span className={styles.text}>
-              Send comment notifications that you have chosen to receive.
-            </span>
-          </li>
-        </ul>
-        <InputField
-          id="emailAddress"
-          label="Enter Email Address:"
-          name="emailAddress"
-          type="email"
-          onChange={this.onChange}
-          defaultValue=""
-          hasError={
-            (!formData.emailAddress || errors.emailAddress) && showErrors
-          }
-          errorMsg={errors.emailAddress}
-          showError={this.state.showError}
-          columnDisplay
-          showSuccess={false}
-        />
-        <InputField
-          id="confirmEmailAddress"
-          label="Confirm Email Address:"
-          name="confirmEmailAddress"
-          type="email"
-          onChange={this.onChange}
-          defaultValue=""
-          hasError={
-            (!formData.emailAddress ||
-              formData.emailAddress !== formData.confirmEmailAddress) &&
-            showErrors
-          }
-          errorMsg={'Email address does not match'}
-          showError={this.state.showError}
-          columnDisplay
-          showSuccess={false}
-        />
-        <Button className={cn(styles.button, styles.proceed)} full>
-          Add Email Address
-        </Button>
+        {step === 0 && (
+          <AddEmailContent
+            formData={formData}
+            errors={errors}
+            showErrors={showErrors}
+          />
+        )}
+        {step === 1 && !settings.requireEmailConfirmation ? (
+          <EmailAddressAdded />
+        ) : (
+          <VerifyEmailAddress emailAddress={formData.emailAddress} />
+        )}
       </Dialog>
     );
   }
@@ -172,6 +135,7 @@ class AddEmailAddressDialog extends React.Component {
 AddEmailAddressDialog.propTypes = {
   attachLocalAuth: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
+  root: PropTypes.func.isRequired,
 };
 
 export default AddEmailAddressDialog;

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import styles from './AddEmailAddressDialog.css';
+import { Button, Icon } from 'plugin-api/beta/client/components/ui';
+import cn from 'classnames';
+import InputField from './InputField';
+
+const AddEmailContent = ({ formData, errors, showErrors }) => (
+  <div>
+    <h4 className={styles.title}>Add an Email Address</h4>
+    <p className={styles.description}>
+      For your added security, we require users to add an email address to their
+      accounts. Your email address will be used to:
+    </p>
+    <ul className={styles.list}>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          Receive updates regarding any changes to your account (email address,
+          username, password, etc.)
+        </span>
+      </li>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          Allow you to download your comments.
+        </span>
+      </li>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          Send comment notifications that you have chosen to receive.
+        </span>
+      </li>
+    </ul>
+    <InputField
+      id="emailAddress"
+      label="Enter Email Address:"
+      name="emailAddress"
+      type="email"
+      onChange={this.onChange}
+      defaultValue=""
+      hasError={(!formData.emailAddress || errors.emailAddress) && showErrors}
+      errorMsg={errors.emailAddress}
+      showError={this.state.showError}
+      columnDisplay
+      showSuccess={false}
+    />
+    <InputField
+      id="confirmEmailAddress"
+      label="Confirm Email Address:"
+      name="confirmEmailAddress"
+      type="email"
+      onChange={this.onChange}
+      defaultValue=""
+      hasError={
+        (!formData.emailAddress ||
+          formData.emailAddress !== formData.confirmEmailAddress) &&
+        showErrors
+      }
+      errorMsg={'Email address does not match'}
+      showError={this.state.showError}
+      columnDisplay
+      showSuccess={false}
+    />
+    <InputField
+      id="confirmPassword"
+      label="Insert Password"
+      name="confirmPassword"
+      type="password"
+      onChange={this.onChange}
+      defaultValue=""
+      hasError={!formData.confirmPassword && showErrors}
+      errorMsg={'Confirm Password'}
+      showError={this.state.showError}
+      columnDisplay
+      showSuccess={false}
+    />
+    <Button className={cn(styles.button, styles.proceed)} full>
+      Add Email Address
+    </Button>
+  </div>
+);
+
+export default AddEmailContent;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './AddEmailAddressDialog.css';
+
+const EmailAddressAdded = () => (
+  <div>
+    <h4 className={styles.title}>Email Address Added</h4>
+    <p className={styles.description}>
+      Your email address has been added to your account.
+    </p>
+    <strong>Need to change your email address?</strong>
+    <p className={styles.description}>
+      You can change your account settings by visiting{' '}
+      <strong>My Profile {'>'} Settings</strong>.
+    </p>
+  </div>
+);
+
+export default EmailAddressAdded;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './AddEmailAddressDialog.css';
+
+const VerifyEmailAddress = ({ emailAddress }) => (
+  <div>
+    <h4 className={styles.title}>Verify Your Email Address</h4>
+    <p className={styles.description}>
+      We’ve sent an email to {emailAddress} to verify your account. You must
+      verify your email address so that it can be used for account change
+      confirmations and notifications.
+    </p>
+  </div>
+);
+
+VerifyEmailAddress.propTypes = {
+  emailAddress: PropTypes.string,
+};
+
+export default VerifyEmailAddress;

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

@@ -15,6 +15,9 @@ const withData = withFragments({
         id
         email
       }
+      settings {
+        requireEmailConfirmation
+      }
     }
   `,
 });