diff --git a/assets/js/__test__/components/CompanyRegisterModal-test.jsx b/assets/js/__test__/components/CompanyRegisterModal-test.jsx index 9300a93492eab2750eea4a3af5494104567cf81b..6fd0d3d6fb976048167ffafa2834b1dc25e797ae 100755 --- a/assets/js/__test__/components/CompanyRegisterModal-test.jsx +++ b/assets/js/__test__/components/CompanyRegisterModal-test.jsx @@ -47,6 +47,14 @@ describe('CompanyRegisterModal', () => { expect(companyRegister.categoryOptions).to.exist; }); + it('renders recaptcha without problem', () => { + const companyRegister = ReactTestUtils.renderIntoDocument( + <CompanyRegisterModal />, + ); + const recaptcha = ReactTestUtils.scryRenderedComponentsWithType(companyRegister, 'ReCAPTCHA'); + expect(recaptcha).to.exist; + }); + it('handle password validation', () => { const password = '3s24Aasd'; expect(validatePassword(password)).to.equal(true); @@ -58,4 +66,11 @@ describe('CompanyRegisterModal', () => { ); expect(companyRegister.state.benefits).to.exist; }); + + it('Register modal state contain recaptchaValue', () => { + const companyRegister = ReactTestUtils.renderIntoDocument( + <CompanyRegisterModal />, + ); + expect(companyRegister.state.recaptchaValue).to.equal(null); + }); }); diff --git a/assets/js/components/CompanyRegisterModal.jsx b/assets/js/components/CompanyRegisterModal.jsx index 8832c2e256f0590de46a1afe188963fb44738976..1bc9245171f28fadff48aa7cb0691cd217ec0159 100755 --- a/assets/js/components/CompanyRegisterModal.jsx +++ b/assets/js/components/CompanyRegisterModal.jsx @@ -7,6 +7,7 @@ import ModalAlert from './ModalAlert'; import Server from '../lib/Server'; import Storage from '../lib/Storage'; import Dumper from '../lib/Dumper'; +import ReCAPTCHA from "react-google-recaptcha"; export default class CompanyRegisterModal extends React.Component { constructor(props) { @@ -19,6 +20,7 @@ export default class CompanyRegisterModal extends React.Component { { text: 'Mempermudah mencari calon peserta magang' }, { text: 'Dan banyak keuntungan lainnya' }, ], + recaptchaValue: null, }; this.handleChange = this.handleChange.bind(this); this.handleFile = this.handleFile.bind(this); @@ -97,16 +99,25 @@ export default class CompanyRegisterModal extends React.Component { } }; + handleRecaptchaValue = (value) => { + this.setState({ recaptchaValue: value }); + }; + handleSubmit = (e) => { e.preventDefault(); - this.setState({ loading: true }); - Server.submit('/register/', this.state).then((response) => { - Storage.set('user-data', response); - browserHistory.push('/home'); - }, (error) => error.then((r) => { - this.setState({ loading: false }); - this.modalAlert.open('Gagal Membuat Akun', Dumper.dump(r)); - })); + if(this.state.recaptchaValue != null){ + this.setState({ loading: true }); + Server.submit('/register/', this.state).then((response) => { + Storage.set('user-data', response); + browserHistory.push('/home'); + }, (error) => error.then((r) => { + this.setState({ loading: false }); + this.modalAlert.open('Gagal Membuat Akun', Dumper.dump(r)); + })); + } + else { + this.modalAlert.open('Pastikan anda bukan robot', Dumper.dump()); + } }; render() { @@ -209,6 +220,10 @@ export default class CompanyRegisterModal extends React.Component { <label htmlFor="address">Website</label> <Input onChange={this.handleChange} placeholder="Website perusahaan anda" name="website" required /> </Form.Field> + <ReCAPTCHA + sitekey="6LfUYMYUAAAAAF_Yj073qov9JOMrYQaNIu3-UIF7" + onChange={(value) => { this.handleRecaptchaValue(value); }} + /> <Modal.Actions style={{ textAlign: 'right' }}> <Button type="reset" color="red"> <Icon name="remove" /> diff --git a/package.json b/package.json index 963d3428de192d50633e20e238c50e557d5beebb..00846147ea8d77293dd89ccf040a3a73a161e232 100755 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "react-ckeditor-wrapper": "^1.0.22", "react-datepicker": "^0.60.2", "react-dom": "^16.12.0", + "react-google-recaptcha": "^2.0.1", "react-router": "^3.2.5", "semantic-ui-react": "^0.79.1", "sinon": "^7.5.0",