Get captcha working

stable/1.0.x
Alex Gleason 2020-04-23 20:48:25 -05:00
rodzic da0de40256
commit 6bcae0dd13
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 109 dodań i 51 usunięć

Wyświetl plik

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

Wyświetl plik

@ -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'>
<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='fields-group'>
<TextInput
placeholder='Username'
name='username'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='E-mail address'
name='email'
type='email'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='Password'
name='password'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='Confirm password'
name='confirm'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<fieldset disabled={isLoading}>
<div className='simple_form__overlay-area'>
<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='fields-group'>
<TextInput
placeholder='Username'
name='username'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='E-mail address'
name='email'
type='email'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='Password'
name='password'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='Confirm password'
name='confirm'
type='password'
autoComplete='off'
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'>
<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>
</fieldset>
</SimpleForm>
</div>
);

Wyświetl plik

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