checkin recaptcha (#75)

<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
<!-- Try to link to an open issue, bounty or submission for more information. -->
checkin recaptcha

<!-- In addition to that please answer these questions: -->

**What kind of change does this PR introduce?**

<!-- E.g. a bugfix, feature, refactoring, build related change, etc… -->

**Did you add tests for your changes?**

<!-- Note that we won't merge your changes if you don't add tests -->

**Does this PR introduce a breaking change?**

<!-- If this PR introduces a breaking change, please describe the impact and a migration path for existing applications. -->

**What needs to be documented once your changes are merged?**

<!-- List all the information that needs to be added to the documentation after merge -->
<!-- When your changes are merged you will be asked to contribute this to the documentation -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/conflux-chain/conflux-bounty/75)
<!-- Reviewable:end -->

package.json

@@ -72,6 +72,7 @@
     "qrcode": "^1.3.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-google-recaptcha": "^2.0.1",
     "react-intl": "^2.8.0",
     "react-onclickoutside": "^6.8.0",
     "react-redux": "^7.0.2",

src/components/DailyCheckin/action.js

@@ -14,6 +14,7 @@ export const checkinEnum = {
   disabled: 1,
   overMaxNum: 2,
   alreadyChecked: 3,
+  recaptchaErr: 4,
 };
 
 export const startCountDown = () => (dispatch, getState) => {
@@ -42,8 +43,10 @@ export const getCheckInInfo = () => dispatch => {
   });
 };
 
-export const submitCheckIn = () => dispatch => {
-  reqSubmitCheckIn().then(body => {
+export const submitCheckIn = recaptchaVal => dispatch => {
+  reqSubmitCheckIn({
+    recaptchaVal,
+  }).then(body => {
     const param = {
       checkinStatus: body.result.status,
       checkinRemainingTime: body.result.remainingTime,
@@ -78,6 +81,12 @@ export const submitCheckIn = () => dispatch => {
         content: utils.i18nTxt('You have already checked in today'),
         timeout: 5000,
       });
+    } else if (body.result.status === checkinEnum.recaptchaErr) {
+      utils.notice.show({
+        type: 'message-important-light',
+        content: utils.getRecaptchaErr(body.result.recaptcha['error-codes']),
+        timeout: 5000,
+      });
     }
 
     dispatch(update(param));

src/components/DailyCheckin/index.js

@@ -4,9 +4,12 @@ import moment from 'moment';
 import styled from 'styled-components';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
+import ReCAPTCHA from 'react-google-recaptcha';
 import * as actions from './action';
 import { compose, commonPropTypes, i18nTxt, auth } from '../../utils';
 import CheckIn from '../../assets/iconfont/checkIn.svg';
+import Modal from '../Modal';
+import { recaptchaKey } from '../../constants';
 
 const DailyCheckinWrap = styled.div`
   .pos-rightbottom {
@@ -124,6 +127,13 @@ const svgOrange = (
 /* eslint jsx-a11y/alt-text: 0 */
 
 class DailyCheckin extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      showRecaptcha: false,
+    };
+  }
+
   componentDidMount() {
     const { history, common, getCheckInInfo } = this.props;
 
@@ -142,13 +152,16 @@ class DailyCheckin extends Component {
   render() {
     const { common, submitCheckIn, showAlreadyTips } = this.props;
     const { checkinStatus, checkinFansCoin } = common;
+    const { showRecaptcha } = this.state;
 
     let checkInButton;
     if (checkinStatus === actions.checkinEnum.pass) {
       checkInButton = (
         <div
           onClick={() => {
-            submitCheckIn();
+            this.setState({
+              showRecaptcha: true,
+            });
           }}
           className="btn-checkin pos-rightbottom"
         >
@@ -195,10 +208,27 @@ class DailyCheckin extends Component {
       </div>
     );
 
+    const recaptchaModal = (
+      <Modal showOverlay show={showRecaptcha}>
+        <div>
+          <ReCAPTCHA
+            sitekey={recaptchaKey}
+            onChange={val => {
+              submitCheckIn(val);
+              this.setState({
+                showRecaptcha: false,
+              });
+            }}
+          />
+        </div>
+      </Modal>
+    );
+
     return (
       <DailyCheckinWrap>
         {checkInButton}
         {successPanel}
+        {recaptchaModal}
       </DailyCheckinWrap>
     );
   }

src/constants.js

@@ -41,3 +41,5 @@ export const { SOLUTION_STATUS_ENUM } = bountyEnum;
 export const { MILESTONE_STATUS_ENUM } = bountyEnum;
 export const { REWARD_STATUS_ENUM } = bountyEnum;
 export const { WITHDRAWAL_STATUS_ENUM } = bountyEnum;
+
+export const recaptchaKey = '6LcGDroUAAAAAIDuTI9RpZNIuCi-QpSEKCdq_I4i';

src/index.js

@@ -9,6 +9,10 @@ import rootReducer from './reducers/index';
 import App from './App';
 import { updateDispatch } from './utils';
 
+window.recaptchaOptions = {
+  useRecaptchaNet: true,
+};
+
 Sentry.init({ dsn: 'https://14d772ae785b46d2979814725a251882@sentry.conflux-chain.org/3' });
 
 if (!global.Intl) {

src/pages/Solution/mysolution.js

@@ -88,7 +88,7 @@ class MySolution extends Component {
                     <div className="update-progress">
                       <Link
                         style={{
-                          opacity: !v.transDeleted ? '0.6' : 1,
+                          opacity: v.transDeleted ? '0.6' : 1,
                         }}
                         onClick={e => {
                           if (v.transDeleted) {

src/utils/index.js

@@ -707,3 +707,20 @@ export const fetchPic = imgSrc => {
       });
     });
 };
+
+export const getRecaptchaErr = (errCodes = []) => {
+  const reContains = a => {
+    return errCodes.indexOf(a) !== -1;
+  };
+  let noticeMsg = '';
+  if (reContains('missing-input-secret') || reContains('invalid-input-secret')) {
+    noticeMsg = i18nTxt('invalid recaptcha secret');
+  } else if (reContains('missing-input-response') || reContains('invalid-input-response')) {
+    noticeMsg = i18nTxt('invalid recaptcha secret');
+  } else if (reContains('timeout-or-duplicate')) {
+    noticeMsg = i18nTxt('recaptcha check timeout, please reload page');
+  } else if (reContains('bad-request')) {
+    noticeMsg = i18nTxt('invalid recaptcha request');
+  }
+  return noticeMsg;
+};

yarn.lock

@@ -8782,7 +8782,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9026,6 +9026,14 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-async-script@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npm.taobao.org/react-async-script/download/react-async-script-1.1.1.tgz#f481c6c5f094bf4b94a9d52da0d0dda2e1a74bdf"
+  integrity sha1-9IHGxfCUv0uUqdUtoNDdouGnS98=
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.0"
+
 react-dom@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
@@ -9036,6 +9044,14 @@ react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-google-recaptcha@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/react-google-recaptcha/download/react-google-recaptcha-2.0.1.tgz#3276b29659493f7ca2a5b7739f6c239293cdf1d8"
+  integrity sha1-MnaylllJP3yipbdzn2wjkpPN8dg=
+  dependencies:
+    prop-types "^15.5.0"
+    react-async-script "^1.1.1"
+
 react-intl@^2.8.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.9.0.tgz#c97c5d17d4718f1575fdbd5a769f96018a3b1843"