wip

2026-08-06 13:41:02 +08:00 · 2018-05-02 18:15:04 -03:00
parent bfb4b790d4
commit b04fc1faf8
10 changed files with 523 additions and 0 deletions
@@ -0,0 +1,177 @@
+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 validate from 'coral-framework/helpers/validate';
+import errorMsj from 'coral-framework/helpers/error';
+import InputField from './InputField';
+import { getErrorMessages } from 'coral-framework/utils';
+
+const initialState = {
+  showErrors: false,
+  errors: {},
+  formData: {},
+};
+
+class AddEmailAddressDialog extends React.Component {
+  state = initialState;
+  validKeys = ['emailAddress', 'confirmEmailAddress'];
+
+  onChange = e => {
+    const { name, value, type } = e.target;
+    this.setState(
+      state => ({
+        formData: {
+          ...state.formData,
+          [name]: value,
+        },
+      }),
+      () => {
+        this.fieldValidation(value, type, name);
+      }
+    );
+  };
+
+  fieldValidation = (value, type, name) => {
+    if (!value.length) {
+      this.addError({
+        [name]: 'Field is required',
+      });
+    } else if (!validate[type](value)) {
+      this.addError({ [name]: errorMsj[type] });
+    } else {
+      this.removeError(name);
+    }
+  };
+
+  addError = err => {
+    this.setState(({ errors }) => ({
+      errors: { ...errors, ...err },
+    }));
+  };
+
+  removeError = errKey => {
+    this.setState(state => {
+      const { [errKey]: _, ...errors } = state.errors;
+      return {
+        errors,
+      };
+    });
+  };
+
+  hasError = err => {
+    return Object.keys(this.state.errors).indexOf(err) !== -1;
+  };
+
+  formHasError = () => {
+    const formHasErrors = !!Object.keys(this.state.errors).length;
+    const formIncomplete = !isEqual(
+      Object.keys(this.state.formData),
+      this.validKeys
+    );
+    return formHasErrors || formIncomplete;
+  };
+
+  showError = () => {
+    this.setState({
+      showError: true,
+    });
+  };
+
+  confirmChanges = async () => {
+    if (this.formHasError()) {
+      this.showError();
+      return;
+    }
+
+    const { emailAddress } = this.state.formData;
+    const { attachLocalAuth } = this.props;
+
+    try {
+      await attachLocalAuth({
+        email: emailAddress,
+      });
+      this.props.notify('success', 'Email Added!');
+    } catch (err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+  };
+
+  render() {
+    const { errors, formData, showErrors } = this.state;
+    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>
+      </Dialog>
+    );
+  }
+}
+
+AddEmailAddressDialog.propTypes = {
+  attachLocalAuth: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+};
+
+export default AddEmailAddressDialog;