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 ( +
+ captcha + +
+ ); } render() { const { instance } = this.props; + const isLoading = this.state.captchaLoading || this.state.submissionLoading; return (
-
-

With an account on {instance.get('title')} you'll be able to follow people on any server in the fediverse.

-
- - - - +
+
+

With an account on {instance.get('title')} you'll be able to follow people on any server in the fediverse.

+
+ + + + +
+ {this.getCaptchaElem()} +
+ I agree to the Terms of Service.} + name='agreement' + onChange={this.onCheckboxChange} + required + /> +
+ +
+ +
-
- I agree to the Terms of Service.} - name='agreement' - onChange={this.onCheckboxChange} - required - /> -
- -
- -
-
+
); diff --git a/app/styles/gabsocial/forms.scss b/app/styles/gabsocial/forms.scss index 2ca94297e..bf0f43f1e 100644 --- a/app/styles/gabsocial/forms.scss +++ b/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; + } +}