1906438115-231: Implement google recaptcha for company register (client side)

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);
+  });
 });

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" />

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",