Commit 633a30c1 authored by Matija Obreza's avatar Matija Obreza
Browse files

ReCaptcha: Allow for configuration of captcha public site key

parent 7cfefde0
......@@ -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
......
......@@ -18,6 +18,7 @@ const genesysConfig: Config = {
shoppingCart: {
enabled: true,
},
recaptchaSiteKey: '6Lfb5w4TAAAAAI6pD_4l5uIwXEaUJ6KQmhU9cyjx',
};
showGenesysUI(document.getElementById('genesys'), genesysConfig);
......
......@@ -77,7 +77,8 @@
},
shoppingCart: {
enabled: true, // Enable shopping cart
}
},
recaptchaSiteKey: '6LeGp-oSAAAAAAszCIVxG-wPmoOmDtdIc9Wgrzar', // Public ReCaptcha site key
};
// Show UI
......
......@@ -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
......
......@@ -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>
......
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);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment