From 78732d8d43f4fb7e9041c7a0c6deba653ba5b1e3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 29 May 2020 15:02:04 -0500
Subject: [PATCH] Let Captcha be force-refreshed with idempotencyKey

---
 .../features/auth_login/components/captcha.js       | 13 +++++++++++++
 .../landing_page/components/registration_form.js    |  7 +++++++
 2 files changed, 20 insertions(+)

diff --git a/app/soapbox/features/auth_login/components/captcha.js b/app/soapbox/features/auth_login/components/captcha.js
index 0746461d6..728b24822 100644
--- a/app/soapbox/features/auth_login/components/captcha.js
+++ b/app/soapbox/features/auth_login/components/captcha.js
@@ -17,6 +17,7 @@ class CaptchaField extends React.Component {
     onFetchFail: PropTypes.func,
     dispatch: PropTypes.func,
     refreshInterval: PropTypes.number,
+    idempotencyKey: PropTypes.string,
   }
 
   static defaultProps = {
@@ -43,6 +44,12 @@ class CaptchaField extends React.Component {
     clearInterval(this.state.refresh);
   }
 
+  forceRefresh = () => {
+    this.fetchCaptcha();
+    this.endRefresh();
+    this.startRefresh();
+  }
+
   fetchCaptcha = () => {
     const { dispatch, onFetch, onFetchFail } = this.props;
     dispatch(fetchCaptcha()).then(response => {
@@ -63,6 +70,12 @@ class CaptchaField extends React.Component {
     this.endRefresh();
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.idempotencyKey !== prevProps.idempotencyKey) {
+      this.forceRefresh();
+    }
+  }
+
   render() {
     const { captcha } = this.state;
     const { onChange } = this.props;
diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/landing_page/components/registration_form.js
index 76febc41b..5c17e3824 100644
--- a/app/soapbox/features/landing_page/components/registration_form.js
+++ b/app/soapbox/features/landing_page/components/registration_form.js
@@ -12,6 +12,7 @@ import {
 import { register } from 'soapbox/actions/auth';
 import CaptchaField from 'soapbox/features/auth_login/components/captcha';
 import { Map as ImmutableMap } from 'immutable';
+import { v4 as uuidv4 } from 'uuid';
 
 const mapStateToProps = (state, props) => ({
   instance: state.get('instance'),
@@ -28,6 +29,7 @@ class RegistrationForm extends ImmutablePureComponent {
     captchaLoading: true,
     submissionLoading: false,
     params: ImmutableMap(),
+    captchaIdempotencyKey: uuidv4(),
   }
 
   setParams = map => {
@@ -61,6 +63,10 @@ class RegistrationForm extends ImmutablePureComponent {
     this.setState({ captchaLoading: false });
   }
 
+  refreshCaptcha = () => {
+    this.setState({ captchaIdempotencyKey: uuidv4() });
+  }
+
   render() {
     const { instance } = this.props;
     const isLoading = this.state.captchaLoading || this.state.submissionLoading;
@@ -108,6 +114,7 @@ class RegistrationForm extends ImmutablePureComponent {
                 onFetch={this.onFetchCaptcha}
                 onFetchFail={this.onFetchCaptchaFail}
                 onChange={this.onInputChange}
+                idempotencyKey={this.state.captchaIdempotencyKey}
               />
               <div className='fields-group'>
                 <Checkbox