ReCaptcha fixes

src/components/RecaptchaLoader.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+declare const grecaptcha: { reset: () => void } | undefined;
+
+const RecaptchaLoader = () => {
+	const location = useLocation();
+
+	useEffect(() => {
+		if (document.querySelector('script[src="https://www.google.com/recaptcha/api.js"]')) {
+			if (typeof grecaptcha !== "undefined") {
+				grecaptcha.reset();
+			}
+			return;
+		}
+
+		const script = document.createElement("script");
+		script.src = "https://www.google.com/recaptcha/api.js";
+		script.async = true;
+		script.defer = true;
+		document.body.appendChild(script);
+
+		return () => {
+			document.body.removeChild(script);
+		};
+	}, [location.pathname]);
+
+	return null;
+};
+
+export default RecaptchaLoader;

src/pages/join-org/fail.mdx

@@ -12,7 +12,8 @@ Sorry, something went wrong. Please contact a developer by [opening an issue](ht
 
 ### Error
 
-import BrowserOnly from "@docusaurus/BrowserOnly";
 import CodeBlock from "@theme/CodeBlock";
 
-<BrowserOnly>{() => <CodeBlock>{new URLSearchParams(location.search).get("reason")}</CodeBlock>}</BrowserOnly>
+<CodeBlock>
+	{new URLSearchParams(globalThis.location?.search).get("reason")}
+</CodeBlock>

src/pages/join-org/index.mdx

@@ -10,13 +10,11 @@ See the [guide on publishing packages](/docs/guides/typescript-packages) for mor
 
 Enter your npm username below and you will be added to the "@rbxts" npm organization.
 
-<script src="https://www.google.com/recaptcha/api.js"></script>
+import RecaptchaLoader from "../../components/RecaptchaLoader";
 
-<>
-	{(() => {
-		globalThis.onSubmit = token => document.getElementById("org-form").submit();
-	})()}
-</>
+<RecaptchaLoader />
+
+<>{(() => globalThis.onSubmit = token => document.getElementById("org-form").submit())()}</>
 
 <form
 	id="org-form"

src/pages/join-org/invite-sent.mdx

@@ -8,15 +8,11 @@ Please check your email for an invite to the organization. If you don't see it,
 
 Once you have accepted the invite, click the button below to continue.
 
-<script src="https://www.google.com/recaptcha/api.js"></script>
+import RecaptchaLoader from "../../components/RecaptchaLoader";
 
-<>
-	{(() => {
-		globalThis.onSubmit = token => document.getElementById("org-form").submit();
-	})()}
-</>
+<RecaptchaLoader />
 
-import BrowserOnly from "@docusaurus/BrowserOnly";
+<>{(() => globalThis.onSubmit = token => document.getElementById("org-form").submit())()}</>
 
 <form
 	id="org-form"
@@ -26,9 +22,7 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 		display: "flex",
 	}}
 >
-	<BrowserOnly>
-		{() => <input type="hidden" name="username" value={new URLSearchParams(location.search).get("username")} />}
-	</BrowserOnly>
+	<input type="hidden" name="username" value={new URLSearchParams(globalThis.location?.search).get("username")} />
 	<button
 		className="g-recaptcha"
 		data-sitekey="6LeJpLIUAAAAANNNvHEWfIBZR08Tamp06xD4yIBy"
@@ -50,3 +44,5 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 		Done
 	</button>
 </form>
+
+<script src="https://www.google.com/recaptcha/api.js"></script>