From 527ba1adc46335c94e798574ad4df562edfd3185 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 17 Oct 2020 14:30:54 -0700
Subject: [PATCH] Fix recaptcha not resetting on login fail; closes #2397

---
 .../auth/ForgotPasswordContainer.tsx          | 15 +++++++++++--
 .../components/auth/LoginContainer.tsx        | 21 +++++++++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/resources/scripts/components/auth/ForgotPasswordContainer.tsx b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
index f82b76e20..8b75511d0 100644
--- a/resources/scripts/components/auth/ForgotPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
@@ -30,7 +30,13 @@ export default () => {
         // If there is no token in the state yet, request the token and then abort this submit request
         // since it will be re-submitted when the recaptcha data is returned by the component.
         if (recaptchaEnabled && !token) {
-            ref.current!.execute().catch(error => console.error(error));
+            ref.current!.execute().catch(error => {
+                console.error(error);
+
+                setSubmitting(false);
+                addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
+            });
+
             return;
         }
 
@@ -43,7 +49,12 @@ export default () => {
                 console.error(error);
                 addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
             })
-            .then(() => setSubmitting(false));
+            .then(() => {
+                setToken('');
+                if (ref.current) ref.current.reset();
+
+                setSubmitting(false);
+            });
     };
 
     return (
diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
index 35b2ba887..d74ada61f 100644
--- a/resources/scripts/components/auth/LoginContainer.tsx
+++ b/resources/scripts/components/auth/LoginContainer.tsx
@@ -29,7 +29,13 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
         // If there is no token in the state yet, request the token and then abort this submit request
         // since it will be re-submitted when the recaptcha data is returned by the component.
         if (recaptchaEnabled && !token) {
-            ref.current!.execute().catch(error => console.error(error));
+            ref.current!.execute().catch(error => {
+                console.error(error);
+
+                setSubmitting(false);
+                clearAndAddHttpError({ error });
+            });
+
             return;
         }
 
@@ -46,6 +52,9 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
             .catch(error => {
                 console.error(error);
 
+                setToken('');
+                if (ref.current) ref.current.reset();
+
                 setSubmitting(false);
                 clearAndAddHttpError({ error });
             });
@@ -63,23 +72,23 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
             {({ isSubmitting, setSubmitting, submitForm }) => (
                 <LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`}>
                     <Field
+                        light
                         type={'text'}
                         label={'Username or Email'}
-                        id={'username'}
                         name={'username'}
-                        light
+                        disabled={isSubmitting}
                     />
                     <div css={tw`mt-6`}>
                         <Field
+                            light
                             type={'password'}
                             label={'Password'}
-                            id={'password'}
                             name={'password'}
-                            light
+                            disabled={isSubmitting}
                         />
                     </div>
                     <div css={tw`mt-6`}>
-                        <Button type={'submit'} size={'xlarge'} isLoading={isSubmitting}>
+                        <Button type={'submit'} size={'xlarge'} isLoading={isSubmitting} disabled={isSubmitting}>
                             Login
                         </Button>
                     </div>