From eae309e150505257d69f9aba006d5e19d0b95abd Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 26 Mar 2021 15:30:14 -0500
Subject: [PATCH] Clear captcha form when registration fails

---
 .../features/auth_login/components/captcha.js        | 12 +++++++-----
 .../landing_page/components/registration_form.js     |  4 ++++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/captcha.js b/app/soapbox/features/auth_login/components/captcha.js
index 74ad686ac..0e5b95815 100644
--- a/app/soapbox/features/auth_login/components/captcha.js
+++ b/app/soapbox/features/auth_login/components/captcha.js
@@ -81,15 +81,14 @@ class CaptchaField extends React.Component {
 
   render() {
     const { captcha } = this.state;
-    const { onChange } = this.props;
-    const { onClick } = this.props;
+    const { onChange, onClick, ...props } = this.props;
 
     switch(captcha.get('type')) {
     case 'native':
       return (
         <div>
           <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>
       );
     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' >
     <img alt='captcha' src={captcha.get('url')} onClick={onClick} />
     <TextInput
       placeholder='Enter the pictured text'
-      name='captcha_solution'
+      name={name}
+      value={value}
       autoComplete='off'
       onChange={onChange}
       required
@@ -117,4 +117,6 @@ NativeCaptchaField.propTypes = {
   captcha: ImmutablePropTypes.map.isRequired,
   onChange: PropTypes.func,
   onClick: PropTypes.func,
+  name: PropTypes.string,
+  value: PropTypes.string,
 };
diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/landing_page/components/registration_form.js
index b520f6a9e..4f862c587 100644
--- a/app/soapbox/features/landing_page/components/registration_form.js
+++ b/app/soapbox/features/landing_page/components/registration_form.js
@@ -132,10 +132,12 @@ class RegistrationForm extends ImmutablePureComponent {
 
   refreshCaptcha = () => {
     this.setState({ captchaIdempotencyKey: uuidv4() });
+    this.setParams({ captcha_solution: '' });
   }
 
   render() {
     const { instance, intl } = this.props;
+    const { params } = this.state;
     const isOpen = instance.get('registrations');
     const isLoading = this.state.captchaLoading || this.state.submissionLoading;
 
@@ -221,6 +223,8 @@ class RegistrationForm extends ImmutablePureComponent {
               onChange={this.onInputChange}
               onClick={this.onCaptchaClick}
               idempotencyKey={this.state.captchaIdempotencyKey}
+              name='captcha_solution'
+              value={params.get('captcha_solution', '')}
             />
             <div className='fields-group'>
               <Checkbox