moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clear captcha form when registration fails

This commit is contained in:
Alex Gleason 2021-03-26 15:30:14 -05:00
parent 4d1af4764f
commit eae309e150
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/soapbox/features/auth_login/components/captcha.js
View File

@ -81,15 +81,14 @@ class CaptchaField extends React.Component {
render() { render() {
const { captcha } = this.state; const { captcha } = this.state;
const { onChange } = this.props; const { onChange, onClick, ...props } = this.props;
const { onClick } = this.props;
switch(captcha.get('type')) { switch(captcha.get('type')) {
case 'native': case 'native':
return ( return (
<div> <div>
<p>{<FormattedMessage id='registration.captcha.hint' defaultMessage='Click the image to get a new captcha' />}</p> <p>{<FormattedMessage id='registration.captcha.hint' defaultMessage='Click the image to get a new captcha' />}</p>
<NativeCaptchaField captcha={captcha} onChange={onChange} onClick={onClick} /> <NativeCaptchaField captcha={captcha} onChange={onChange} onClick={onClick} {...props} />
</div> </div>
); );
case 'none': case 'none':
@ -100,12 +99,13 @@ class CaptchaField extends React.Component {
} }
export const NativeCaptchaField = ({ captcha, onChange, onClick }) => ( export const NativeCaptchaField = ({ captcha, onChange, onClick, name, value }) => (
<div className='captcha' > <div className='captcha' >
<img alt='captcha' src={captcha.get('url')} onClick={onClick} /> <img alt='captcha' src={captcha.get('url')} onClick={onClick} />
<TextInput <TextInput
placeholder='Enter the pictured text' placeholder='Enter the pictured text'
name='captcha_solution' name={name}
value={value}
autoComplete='off' autoComplete='off'
onChange={onChange} onChange={onChange}
required required
@ -117,4 +117,6 @@ NativeCaptchaField.propTypes = {
captcha: ImmutablePropTypes.map.isRequired, captcha: ImmutablePropTypes.map.isRequired,
onChange: PropTypes.func, onChange: PropTypes.func,
onClick: PropTypes.func, onClick: PropTypes.func,
name: PropTypes.string,
value: PropTypes.string,
}; };

4
app/soapbox/features/landing_page/components/registration_form.js
View File

@ -132,10 +132,12 @@ class RegistrationForm extends ImmutablePureComponent {
refreshCaptcha = () => { refreshCaptcha = () => {
this.setState({ captchaIdempotencyKey: uuidv4() }); this.setState({ captchaIdempotencyKey: uuidv4() });
this.setParams({ captcha_solution: '' });
} }
render() { render() {
const { instance, intl } = this.props; const { instance, intl } = this.props;
const { params } = this.state;
const isOpen = instance.get('registrations'); const isOpen = instance.get('registrations');
const isLoading = this.state.captchaLoading || this.state.submissionLoading; const isLoading = this.state.captchaLoading || this.state.submissionLoading;
@ -221,6 +223,8 @@ class RegistrationForm extends ImmutablePureComponent {
onChange={this.onInputChange} onChange={this.onInputChange}
onClick={this.onCaptchaClick} onClick={this.onCaptchaClick}
idempotencyKey={this.state.captchaIdempotencyKey} idempotencyKey={this.state.captchaIdempotencyKey}
name='captcha_solution'
value={params.get('captcha_solution', '')}
/> />
<div className='fields-group'> <div className='fields-group'>
<Checkbox <Checkbox