From dd025d42103a2eda9d23ef46328190b2fb6acb0c Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Sun, 21 Aug 2022 00:23:53 +0100
Subject: [PATCH 1/2] fix: reset captcha if you fail to login

---
 client/src/app/pages/LoginPage.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/app/pages/LoginPage.tsx b/client/src/app/pages/LoginPage.tsx
index ecc3d9c01..80899e877 100644
--- a/client/src/app/pages/LoginPage.tsx
+++ b/client/src/app/pages/LoginPage.tsx
@@ -6,7 +6,7 @@ import CenterPage from "components/util/CenterPage";
 import SiteWordmark from "components/util/SiteWordmark";
 import { UserContext } from "context/UserContext";
 import { useFormik } from "formik";
-import React, { useContext, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import { Button, Col, Form } from "react-bootstrap";
 import ReCAPTCHA from "react-google-recaptcha";
 import toast from "react-hot-toast";
@@ -20,6 +20,8 @@ export default function LoginPage() {
 	const { setUser } = useContext(UserContext);
 	const history = useHistory();
 
+	const recaptchaRef = useRef<any>(null);
+
 	const formik = useFormik({
 		initialValues: {
 			username: "",
@@ -42,6 +44,8 @@ export default function LoginPage() {
 				false
 			);
 
+			recaptchaRef.current.reset();
+
 			if (!rj.success) {
 				setErr(HumaniseError(rj.description));
 				return;
@@ -111,6 +115,7 @@ export default function LoginPage() {
 					</Form.Group>
 
 					<ReCAPTCHA
+						ref={recaptchaRef}
 						sitekey={
 							process.env.REACT_APP_RECAPTCHA_KEY ??
 							"6LdI2swUAAAAAArkM0ZQi4SnttilqgAwsJSFw3PX"

From 0f5cba5545335d321caa53b4327f9caaf09e299c Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Sun, 21 Aug 2022 00:27:23 +0100
Subject: [PATCH 2/2] fix: reset captcha on register fail

---
 client/src/app/pages/RegisterPage.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/app/pages/RegisterPage.tsx b/client/src/app/pages/RegisterPage.tsx
index e97014270..10489ea87 100644
--- a/client/src/app/pages/RegisterPage.tsx
+++ b/client/src/app/pages/RegisterPage.tsx
@@ -6,7 +6,7 @@ import Divider from "components/util/Divider";
 import { UserContext } from "context/UserContext";
 import { useFormik } from "formik";
 import { ClientConfig, TachiConfig } from "lib/config";
-import React, { useContext, useState } from "react";
+import React, { MutableRefObject, useContext, useRef, useState } from "react";
 import { Alert, Button, Col, Form } from "react-bootstrap";
 import ReCAPTCHA from "react-google-recaptcha";
 import toast from "react-hot-toast";
@@ -32,6 +32,7 @@ export default function RegisterPage() {
 
 	const { setUser } = useContext(UserContext);
 	const history = useHistory();
+	const recaptchaRef = useRef<any>();
 
 	const urlParams = new URLSearchParams(location.search);
 
@@ -69,6 +70,8 @@ export default function RegisterPage() {
 				true
 			);
 
+			recaptchaRef.current.reset();
+
 			if (!rj.success) {
 				setErr(HumaniseError(rj.description));
 				return;
@@ -126,7 +129,7 @@ export default function RegisterPage() {
 				</div>
 
 				{readRules === "acknowledged" ? (
-					<RegisterForm formik={formik} err={err} />
+					<RegisterForm formik={formik} err={err} recaptchaRef={recaptchaRef} />
 				) : (
 					<div className="text-center">
 						<div className="mb-8">
@@ -191,6 +194,7 @@ export default function RegisterPage() {
 function RegisterForm({
 	formik,
 	err,
+	recaptchaRef,
 }: {
 	formik: UseFormik<{
 		username: string;
@@ -201,6 +205,7 @@ function RegisterForm({
 		captcha: string;
 	}>;
 	err: string;
+	recaptchaRef: MutableRefObject<any>;
 }) {
 	return (
 		<Form onSubmit={formik.handleSubmit}>
@@ -265,6 +270,7 @@ function RegisterForm({
 			)}
 
 			<ReCAPTCHA
+				ref={recaptchaRef}
 				sitekey={
 					process.env.REACT_APP_RECAPTCHA_KEY ??
 					"6LdI2swUAAAAAArkM0ZQi4SnttilqgAwsJSFw3PX"