Get captcha working

app/gabsocial/actions/auth.js

@@ -75,6 +75,12 @@ export function register(params) {
   };
 }
 
+export function fetchCaptcha() {
+  return (dispatch, getState) => {
+    return api(getState).get('/api/pleroma/captcha');
+  };
+}
+
 export function authAppCreated(app) {
   return {
     type: AUTH_APP_CREATED,

app/gabsocial/features/landing_page/components/registration_form.js

@@ -9,7 +9,8 @@ import {
   TextInput,
   Checkbox,
 } from 'gabsocial/features/forms';
-import { register } from 'gabsocial/actions/auth';
+import { register, fetchCaptcha } from 'gabsocial/actions/auth';
+import { Map as ImmutableMap } from 'immutable';
 
 const mapStateToProps = (state, props) => ({
   instance: state.get('instance'),
@@ -22,72 +23,113 @@ class RegistrationForm extends ImmutablePureComponent {
     instance: ImmutablePropTypes.map,
   }
 
+  state = {
+    captcha: ImmutableMap(),
+    captchaLoading: true,
+    submissionLoading: false,
+    params: ImmutableMap(),
+  }
+
+  componentWillMount() {
+    this.props.dispatch(fetchCaptcha()).then(response => {
+      const captcha = ImmutableMap(response.data);
+      this.setState({ captcha: captcha, captchaLoading: false });
+      this.setParams({ captcha_token: captcha.get('token') });
+    }).catch(error => console.error(error));
+  }
+
+  setParams = map => {
+    this.setState({ params: this.state.params.merge(ImmutableMap(map)) });
+  }
+
   onInputChange = e => {
-    this.setState({ [e.target.name]: e.target.value });
+    this.setParams({ [e.target.name]: e.target.value });
   }
 
   onCheckboxChange = e => {
-    this.setState({ [e.target.name]: e.target.checked });
+    this.setParams({ [e.target.name]: e.target.checked });
   }
 
   onSubmit = e => {
-    this.props.dispatch(register(this.state));
+    this.props.dispatch(register(this.state.params.toJS()));
+  }
+
+  getCaptchaElem = () => {
+    const { captcha } = this.state;
+    if (captcha.get('type') !== 'native') return null;
+
+    return (
+      <div className='captcha'>
+        <img alt='captcha' src={captcha.get('url')} />
+        <TextInput
+          placeholder='Enter the pictured text'
+          name='captcha_solution'
+          autoComplete='off'
+          onChange={this.onInputChange}
+          required
+        />
+      </div>
+    );
   }
 
   render() {
     const { instance } = this.props;
+    const isLoading = this.state.captchaLoading || this.state.submissionLoading;
 
     return (
       <div className='box-widget'>
         <SimpleForm onSubmit={this.onSubmit}>
-          <div className='simple_form__overlay-area'>
+          <fieldset disabled={isLoading}>
-            <p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p>
+            <div className='simple_form__overlay-area'>
-            <div className='fields-group'>
+              <p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p>
-              <TextInput
+              <div className='fields-group'>
-                placeholder='Username'
+                <TextInput
-                name='username'
+                  placeholder='Username'
-                autoComplete='off'
+                  name='username'
-                onChange={this.onInputChange}
+                  autoComplete='off'
-                required
+                  onChange={this.onInputChange}
-              />
+                  required
-              <SimpleInput
+                />
-                placeholder='E-mail address'
+                <SimpleInput
-                name='email'
+                  placeholder='E-mail address'
-                type='email'
+                  name='email'
-                autoComplete='off'
+                  type='email'
-                onChange={this.onInputChange}
+                  autoComplete='off'
-                required
+                  onChange={this.onInputChange}
-              />
+                  required
-              <SimpleInput
+                />
-                placeholder='Password'
+                <SimpleInput
-                name='password'
+                  placeholder='Password'
-                type='password'
+                  name='password'
-                autoComplete='off'
+                  type='password'
-                onChange={this.onInputChange}
+                  autoComplete='off'
-                required
+                  onChange={this.onInputChange}
-              />
+                  required
-              <SimpleInput
+                />
-                placeholder='Confirm password'
+                <SimpleInput
-                name='confirm'
+                  placeholder='Confirm password'
-                type='password'
+                  name='confirm'
-                autoComplete='off'
+                  type='password'
-                onChange={this.onInputChange}
+                  autoComplete='off'
-                required
+                  onChange={this.onInputChange}
-              />
+                  required
+                />
+              </div>
+              {this.getCaptchaElem()}
+              <div className='fields-group'>
+                <Checkbox
+                  label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
+                  name='agreement'
+                  onChange={this.onCheckboxChange}
+                  required
+                />
+              </div>
+              <input type='hidden' name='locale' value='en_US' />
+              <div className='actions'>
+                <button name='button' type='submit' className='btn button button-primary'>Sign up</button>
+              </div>
             </div>
-            <div className='fields-group'>
+          </fieldset>
-              <Checkbox
-                label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
-                name='agreement'
-                onChange={this.onCheckboxChange}
-                required
-              />
-            </div>
-            <input type='hidden' name='locale' value='en_US' />
-            <div className='actions'>
-              <button name='button' type='submit' className='btn button button-primary'>Sign up</button>
-            </div>
-          </div>
         </SimpleForm>
       </div>
     );

app/styles/gabsocial/forms.scss

@@ -927,3 +927,13 @@ code {
     padding: 15px;
   }
 }
+
+.captcha {
+  background-color: #ffffff;
+  border-radius: 10px;
+
+  img {
+    display: table;
+    margin: 0 auto;
+  }
+}