Add VerifyEmailForm

Author: gocreating

src/common/components/forms/user/VerifyEmailForm.js

@@ -0,0 +1,140 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
+import { Field, reduxForm } from 'redux-form';
+import Alert from 'react-bootstrap/lib/Alert';
+import Button from 'react-bootstrap/lib/Button';
+// import validator from 'validator';
+import FormNames from '../../../constants/FormNames';
+import { validateForm } from '../../../actions/formActions';
+import { pushErrors } from '../../../actions/errorActions';
+import { Form, FormField, FormFooter } from '../../utils/BsForm';
+import configs from '../../../../../configs/project/client';
+
+export let validate = (values) => {
+  let errors = {};
+
+  // if (values.email && !validator.isEmail(values.email)) {
+  //   errors.email = 'Not an email';
+  // }
+
+  if (!values.email) {
+    errors.email = 'Required';
+  }
+
+  if (configs.recaptcha && !values.recaptcha) {
+    errors.recaptcha = 'Required';
+  }
+
+  return errors;
+};
+
+let asyncValidate = (values, dispatch) => {
+  return dispatch(validateForm(
+    FormNames.USER_VERIFY_EMAIL,
+    'email',
+    values.email
+  )).then((json) => {
+    let validationError = {};
+    if (!json.isPassed) {
+      validationError.email = json.message;
+      throw validationError;
+    }
+  });
+};
+
+class VerifyEmailForm extends Component {
+  constructor() {
+    super();
+    this.handleSubmit = this._handleSubmit.bind(this);
+    this.handleCancleClick = this._handleCancleClick.bind(this);
+  }
+
+  componentDidMount() {
+    let { email, initialize } = this.props;
+
+    if (email) {
+      initialize({ email });
+    }
+  }
+
+  _handleSubmit(formData) {
+  }
+
+  _handleCancleClick() {
+    let { onCancel, dispatch } = this.props;
+
+    if (onCancel) {
+      onCancel();
+    } else {
+      dispatch(push('/'));
+    }
+  }
+
+  render() {
+    const {
+      email,
+      handleSubmit,
+      submitSucceeded,
+      submitFailed,
+      error,
+      pristine,
+      submitting,
+      invalid,
+    } = this.props;
+
+    return (
+      <Form horizontal onSubmit={handleSubmit(this.handleSubmit)}>
+        {submitSucceeded && (
+          <Alert bsStyle="success">A reset link is sent</Alert>
+        )}
+        {submitFailed && error && (<Alert bsStyle="danger">{error}</Alert>)}
+        <Field
+          label="Email"
+          name="email"
+          component={FormField}
+          type="text"
+          disabled={Boolean(email)}
+          placeholder="Email"
+        />
+        <Field
+          label=" "
+          name="recaptcha"
+          component={FormField}
+          type="recaptcha"
+        />
+        <FormFooter>
+          <Button
+            type="submit"
+            disabled={(!email && pristine) || submitting || invalid}
+          >
+            Send An Email to Verify My Email Address
+            {submitting && (
+              <i className="fa fa-spinner fa-spin" aria-hidden="true" />
+            )}
+          </Button>
+          <Button
+            bsStyle="link"
+            onClick={this.handleCancleClick}
+          >
+            Cancel
+          </Button>
+        </FormFooter>
+      </Form>
+    );
+  }
+};
+
+VerifyEmailForm.propTypes = {
+  email: PropTypes.string,
+  onCancel: PropTypes.func,
+};
+
+export default reduxForm({
+  form: FormNames.USER_VERIFY_EMAIL,
+  validate,
+  asyncValidate,
+  asyncBlurFields: ['email'],
+})(connect(state => ({
+  apiEngine: state.apiEngine,
+}))(VerifyEmailForm));

src/common/constants/FormNames.js

@@ -3,6 +3,7 @@ export default {
   USER_LOGIN: 'USER_LOGIN',
   USER_EDIT: 'USER_EDIT',
   USER_AVATAR: 'USER_AVATAR',
+  USER_VERIFY_EMAIL: 'USER_VERIFY_EMAIL',
   USER_CHANGE_PASSWORD: 'USER_CHANGE_PASSWORD',
   USER_FORGET_PASSWORD: 'USER_FORGET_PASSWORD',
   USER_RESET_PASSWORD: 'USER_RESET_PASSWORD',

src/server/controllers/formValidation.js

@@ -22,6 +22,25 @@ export default {
     },
   },
 
+  [FormNames.USER_VERIFY_EMAIL]: {
+    email(req, res) {
+      User.findOne({
+        'email.value': req.body.value,
+      }, handleDbError(res)((user) => {
+        if (!user) {
+          res.json({
+            isPassed: false,
+            message: 'This is an invalid account',
+          });
+        } else {
+          res.json({
+            isPassed: true,
+          });
+        }
+      }));
+    },
+  },
+
   [FormNames.USER_FORGET_PASSWORD]: {
     email(req, res) {
       User.findOne({

src/server/routes/api.js

@@ -90,6 +90,11 @@ export default ({ app }) => {
     bodyParser.json,
     formValidationController[FormNames.USER_REGISTER].email
   );
+  app.post(
+    `/api/forms/${FormNames.USER_VERIFY_EMAIL}/fields/email/validation`,
+    bodyParser.json,
+    formValidationController[FormNames.USER_VERIFY_EMAIL].email
+  );
   app.post(
     `/api/forms/${FormNames.USER_FORGET_PASSWORD}/fields/email/validation`,
     bodyParser.json,