diff --git a/app/gabsocial/actions/auth.js b/app/gabsocial/actions/auth.js index 9263be0bd..3b2d38e06 100644 --- a/app/gabsocial/actions/auth.js +++ b/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, diff --git a/app/gabsocial/features/landing_page/components/registration_form.js b/app/gabsocial/features/landing_page/components/registration_form.js index 1fa7f596a..2eb9b2044 100644 --- a/app/gabsocial/features/landing_page/components/registration_form.js +++ b/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 ( +
With an account on {instance.get('title')} you'll be able to follow people on any server in the fediverse.
-