Merge branch '24-recaptcha-sitekey' into 'master'

Resolve "ReCaptcha siteKey"

Closes #24

See merge request !18

README.md

@@ -39,7 +39,8 @@ Add a container `<div>` to your HTML page and initialize the Genesys UI with the
     },
     shoppingCart: {
       enabled: true, // Enable shopping cart
-    }
+    },
+    recaptchaSiteKey: '<public key for your site>', // Public ReCaptcha site key
   };
 
   // Show UI

entrypoints/client.tsx

@@ -18,6 +18,7 @@ const genesysConfig: Config = {
   shoppingCart: {
     enabled: true,
   },
+  recaptchaSiteKey: '6Lfb5w4TAAAAAI6pD_4l5uIwXEaUJ6KQmhU9cyjx',
 };
 
 showGenesysUI(document.getElementById('genesys'), genesysConfig);

index.html

@@ -77,7 +77,8 @@
       },
       shoppingCart: {
         enabled: true, // Enable shopping cart
-      }
+      },
+      recaptchaSiteKey: '6LeGp-oSAAAAAAszCIVxG-wPmoOmDtdIc9Wgrzar', // Public ReCaptcha site key
     };
 
     // Show UI

src/config/config.ts

@@ -12,12 +12,14 @@ export class Config {
   public language?: string = 'en';
   public accession?: AccessionConfig;
   public shoppingCart?: BaseFeatureConfig;
+  public recaptchaSiteKey?: string;
 
   public constructor(config: Config) {
     this.apiUrl = config.apiUrl || defaultConfig.apiUrl;
     this.clientId = config.clientId;
     this.clientKey = config.clientKey;
     this.language = config.language || defaultConfig.language;
+    this.recaptchaSiteKey = config.recaptchaSiteKey || defaultConfig.recaptchaSiteKey;
     this.filter = config.filter || defaultConfig.filter;
 
     // Merge feature config

src/request/RequestPage.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { RouteComponentProps } from 'react-router-dom';
 import ErrorDisplay from 'ui/common/ErrorDisplay';
-import { ApiInfoService, RequestService } from '@genesys/client/service';
+import { RequestService } from '@genesys/client/service';
 import { LocalStorageCart } from 'utilities';
 import EasySMTAUserData from '@genesys/client/model/request/EasySMTAUserData';
 import RequestInfo from '@genesys/client/model/request/RequestInfo';
@@ -14,7 +14,6 @@ interface IRequestPageState {
   requestInfo: Partial<RequestInfo>;
   userData: Partial<EasySMTAUserData>;
   captcha: string;
-  captchaSiteKey: string;
 }
 
 interface IRequestPageProps extends WithTranslation, RouteComponentProps {}
@@ -31,25 +30,9 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
         // type: 'in',
       },
       captcha: null,
-      captchaSiteKey: null,
     }
   }
 
-  public componentDidMount() {
-    ApiInfoService
-      .apiInfo()
-      .then((data) => {
-        if (data.captchaSiteKey) {
-          return this.setState({ captchaSiteKey: data.captchaSiteKey });
-        }
-        this.setState({ apiError: 'Api info call failed' });
-      })
-      .catch((e) => {
-        console.log('Api info call failed: ', e);
-        this.setState({ apiError: 'Api info call failed' });
-      });
-  }
-
   private onRequestDataChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.currentTarget as HTMLInputElement;
     this.setState({ requestInfo: { ...this.state.requestInfo, [name]: value } });
@@ -114,7 +97,7 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
 
   public render() {
     const { t } = this.props;
-    const { apiError, requestInfo, userData, captcha, captchaSiteKey } = this.state;
+    const { apiError, requestInfo, userData, captcha } = this.state;
     const { internalRequest } = requestInfo;
     const getValueRequest = (name: string) => requestInfo[name] || '';
     const getValueUser = (name: string) => userData[name] || '';
@@ -309,7 +292,7 @@ class RequestPage extends React.Component<IRequestPageProps, IRequestPageState>
               required
             />
           </div>
-          <CaptchaInput onChange={ this.onCaptchaChange } captchaClientKey={ captchaSiteKey }/>
+          <CaptchaInput onChange={ this.onCaptchaChange } />
           { apiError && <ErrorDisplay error={ apiError }/> }
           <button className="btn btn-primary mt-3" type="submit" disabled={ !captcha }>{ t('request.submit') }</button>
         </form>

src/ui/common/CaptchaInput.tsx

 import * as React from 'react';
+import { connect } from 'react-redux';
+
 import ReCAPTCHA from 'react-google-recaptcha';
 
 interface ICaptchaInputProps extends React.ClassAttributes<any> {
   onChange: (...args) => void;
-  captchaClientKey: string;
+  recaptchaSiteKey: string;
 }
 
-export default class CaptchaInput extends React.Component<ICaptchaInputProps> {
+class CaptchaInput extends React.Component<ICaptchaInputProps> {
   public render() {
-    const { captchaClientKey, onChange } = this.props;
+    const { recaptchaSiteKey, onChange } = this.props;
+    console.log(`Using reCaptcha siteKey ${recaptchaSiteKey}`);
 
-    return !captchaClientKey ?
+    return !recaptchaSiteKey ?
       null : (
         <ReCAPTCHA
-          sitekey={ captchaClientKey }
+          sitekey={ recaptchaSiteKey }
           onChange={ onChange }
         />
       );
   }
 }
+
+const mapStateToProps = (state) => ({
+  recaptchaSiteKey: state.appConfig.config.recaptchaSiteKey,
+});
+
+export default connect(mapStateToProps)(CaptchaInput);