Merge branch 'feature/recaptcha-integration' into dev

Author: gocreating

configs/project/client.js

@@ -8,4 +8,5 @@ module.exports = {
       trackingID: 'UA-86112397-1',
     },
   },
+  recaptcha: require('./recaptcha/client'),
 };

configs/project/recaptcha/client.js

@@ -0,0 +1,11 @@
+module.exports = {
+  development: {
+    siteKey: '6LfQGgoUAAAAAANHp6AvQOYD81JU9GnThpiIK7pH',
+  },
+  test: {
+    siteKey: '6LfQGgoUAAAAAANHp6AvQOYD81JU9GnThpiIK7pH',
+  },
+  production: {
+    siteKey: '6LeoHAoUAAAAAHKlo43OuPREJb22GLmik2HSaFC1',
+  },
+};

configs/project/recaptcha/credential.tmpl.js

@@ -0,0 +1,11 @@
+module.exports = {
+  development: {
+    secretKey: 'akb48akb48akb48akb48akb48akb48akb48akb48',
+  },
+  test: {
+    secretKey: 'akb48akb48akb48akb48akb48akb48akb48akb48',
+  },
+  production: {
+    secretKey: 'akc49akc49akc49akc49akc49akc49akc49akc49',
+  },
+};

configs/project/server.js

@@ -18,5 +18,6 @@ if (process.env.TRAVIS) {
       facebook: require('./passportStrategy/facebook/credential'),
       linkedin: require('./passportStrategy/linkedin/credential'),
     },
+    recaptcha: require('./recaptcha/credential'),
   };
 }

package.json

@@ -115,6 +115,7 @@
     "react-bootstrap": "^0.30.5",
     "react-dom": "^15.0.2",
     "react-ga": "^2.1.2",
+    "react-google-recaptcha": "^0.5.4",
     "react-helmet": "^3.0.2",
     "react-intl": "^2.1.2",
     "react-native": "^0.31.0",

src/common/components/forms/RegisterForm.js

@@ -8,6 +8,7 @@ import userAPI from '../../api/user';
 import { validateForm } from '../../actions/formActions';
 import { pushErrors } from '../../actions/errorActions';
 import { Form, FormField, FormFooter } from '../utils/BsForm';
+import configs from '../../../../configs/project/client';
 
 const validate = (values) => {
   const errors = {};
@@ -24,6 +25,10 @@ const validate = (values) => {
     errors.password = 'Required';
   }
 
+  if (configs.recaptcha && !values.recaptcha) {
+    errors.recaptcha = 'Required';
+  }
+
   return errors;
 };
 
@@ -90,6 +95,12 @@ class RegisterForm extends Component {
           type="password"
           placeholder="Password"
         />
+        <Field
+          label=" "
+          name="recaptcha"
+          component={FormField}
+          type="recaptcha"
+        />
         <FormFooter>
           <Button
             type="submit"

src/common/components/utils/BsForm.js

@@ -4,6 +4,8 @@ import BsFormGroup from 'react-bootstrap/lib/FormGroup';
 import Col from 'react-bootstrap/lib/Col';
 import ControlLabel from 'react-bootstrap/lib/ControlLabel';
 import HelpBlock from 'react-bootstrap/lib/HelpBlock';
+import Recaptcha from 'react-google-recaptcha';
+import configs from '../../../../configs/project/client';
 
 class BsForm extends Component {
   getChildContext() {
@@ -65,7 +67,20 @@ let BsFormField = ({
   let isShowError = meta && meta.touched && meta.error;
 
   let formControl = null;
-  if (options) {
+  if (type === 'recaptcha') {
+    // ref:
+    //   - <https://github.com/erikras/redux-form/issues/1880>
+    /* eslint-disable */
+    formControl = configs.recaptcha ? (
+      <Recaptcha
+        sitekey={configs.recaptcha[process.env.NODE_ENV].siteKey}
+        onChange={input.onChange}
+      />
+    ) : (
+      <pre>Recaptcha is disabled</pre>
+    );
+    /* eslint-enable */
+  } else if (options) {
     // ref: <https://github.com/erikras/redux-form/issues/1857#issuecomment-249890206>
     formControl = (
       options.map((option) => (

src/common/constants/ErrorCodes.js

@@ -8,5 +8,6 @@ export default {
   LOCALE_NOT_SUPPORTED: 'LOCALE_NOT_SUPPORTED',
   USER_TOKEN_EXPIRATION: 'USER_TOKEN_EXPIRATION',
   ODM_VALIDATION: 'ODM_VALIDATION',
+  INVALID_RECAPTCHA: 'INVALID_RECAPTCHA',
   SOCIAL_AUTH_FAIL: 'SOCIAL_AUTH_FAIL',
 };

src/common/constants/Errors.js

@@ -19,6 +19,12 @@ export default {
     title: 'Database Validation Failed',
     detail: 'The data is invalid.',
   },
+  [ErrorCodes.INVALID_RECAPTCHA]: {
+    code: ErrorCodes.INVALID_RECAPTCHA,
+    status: 400,
+    title: 'Invalid Recaptcha',
+    detail: 'The value of recaptcha is invalid.',
+  },
   [ErrorCodes.STATE_PRE_FETCHING_FAIL]: {
     code: ErrorCodes.STATE_PRE_FETCHING_FAIL,
     status: 500,

src/server/middlewares/verifyRecaptcha.js

@@ -0,0 +1,32 @@
+import superagent from 'superagent';
+import Errors from '../../common/constants/Errors';
+import serverConfigs from '../../../configs/project/server';
+import clientConfigs from '../../../configs/project/client';
+
+export default (req, res, next) => {
+  if (process.env.NODE_ENV === 'test' || !clientConfigs.recaptcha) {
+    return next();
+  }
+  superagent
+    .post('https://www.google.com/recaptcha/api/siteverify')
+    .type('form')
+    .send({
+      secret: serverConfigs.recaptcha[process.env.NODE_ENV].secretKey,
+      response: req.body.recaptcha,
+    })
+    .end((err, { body } = {}) => {
+      if (err) {
+        res.pushError(Errors.UNKNOWN_EXCEPTION, {
+          meta: err,
+        });
+        return res.errors();
+      }
+      if (!body.success) {
+        res.pushError(Errors.INVALID_RECAPTCHA, {
+          meta: body['error-codes'],
+        });
+        return res.errors();
+      }
+      next();
+    });
+};

src/server/routes/api.js

@@ -1,6 +1,7 @@
 import configs from '../../../configs/project/server';
 import Roles from '../../common/constants/Roles';
 import bodyParser from '../middlewares/bodyParser';
+import verifyRecaptcha from '../middlewares/verifyRecaptcha';
 import authRequired from '../middlewares/authRequired';
 import roleRequired from '../middlewares/roleRequired';
 import fileUpload from '../middlewares/fileUpload';
@@ -16,7 +17,11 @@ export default ({ app }) => {
     roleRequired([Roles.ADMIN]),
     userController.list
   );
-  app.post('/api/users', bodyParser.json, userController.create);
+  app.post('/api/users',
+    bodyParser.json,
+    verifyRecaptcha,
+    userController.create
+  );
   app.post('/api/users/login', bodyParser.json, userController.login);
   app.get('/api/users/logout', userController.logout);
   app.get('/api/users/me', authRequired, userController.show);