one-shot quick fix on altcha (#3547)

Author: isTravis

client/components/Altcha/Altcha.tsx

@@ -28,6 +28,7 @@ const Altcha = forwardRef<AltchaRef, AltchaProps>((props, ref) => {
 	const [simulateFailure, setSimulateFailure] = useState(false);
 	const [widgetKey, setWidgetKey] = useState(0);
 	const valueRef = useRef<string | null>(null);
+	const errorRef = useRef(false);
 	valueRef.current = value;
 
 	useEffect(() => {
@@ -46,6 +47,9 @@ const Altcha = forwardRef<AltchaRef, AltchaProps>((props, ref) => {
 
 			switch (e.detail.state) {
 				case 'error':
+					errorRef.current = true;
+					setAltchaVisible(true);
+					break;
 				case 'code':
 				case 'unverified':
 					setAltchaVisible(true);
@@ -56,6 +60,7 @@ const Altcha = forwardRef<AltchaRef, AltchaProps>((props, ref) => {
 					}
 					break;
 				case 'verified':
+					errorRef.current = false;
 					if (e.detail.payload) {
 						setValue(e.detail.payload);
 						setAltchaVisible(false);
@@ -80,9 +85,13 @@ const Altcha = forwardRef<AltchaRef, AltchaProps>((props, ref) => {
 			},
 			verify(): Promise<string> {
 				const w = widgetRef.current;
-				if (!w) return Promise.reject(new Error('Altcha widget not mounted'));
+				// If widget failed to load or challenge endpoint is down,
+				// resolve with empty string so the form can still submit.
+				// The server decides whether to accept requests without captcha.
+				if (!w) return Promise.resolve('');
 				const current = valueRef.current;
 				if (current) return Promise.resolve(current);
+				if (errorRef.current) return Promise.resolve('');
 				return new Promise((resolve, reject) => {
 					const handler = (ev: Event) => {
 						const e = ev as CustomEvent<{ payload?: string; state: string }>;
@@ -94,7 +103,9 @@ const Altcha = forwardRef<AltchaRef, AltchaProps>((props, ref) => {
 						}
 						if (state === 'error' || state === 'expired') {
 							w.removeEventListener('statechange', handler);
-							reject(new Error('Captcha verification failed'));
+							// Resolve with empty string instead of rejecting
+							// so the form submission can proceed to the server.
+							resolve('');
 						}
 					};
 					w.addEventListener('statechange', handler);
@@ -116,6 +127,35 @@ const Altcha = forwardRef<AltchaRef, AltchaProps>((props, ref) => {
 		widgetRef.current?.reset();
 	};
 
+	// Remove the `required` attribute that altcha-widget sets on its internal
+	// hidden checkbox.  This prevents native browser form validation from
+	// throwing "An invalid form control is not focusable" when the challenge
+	// endpoint is unavailable and the checkbox can never be checked.
+	// We handle verification entirely through the imperative verify() API.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: widgetKey triggers re-attach after remount
+	useEffect(() => {
+		if (!loaded) return;
+		const w = widgetRef.current;
+		if (!w) return;
+		const removeRequired = () => {
+			const root = w.shadowRoot;
+			if (root) {
+				const checkbox = root.querySelector('input[type="checkbox"]');
+				if (checkbox) {
+					checkbox.removeAttribute('required');
+				}
+				const hiddenInput = root.querySelector('input[type="hidden"]');
+				if (hiddenInput) {
+					hiddenInput.removeAttribute('required');
+				}
+			}
+		};
+		// Run immediately and also after a short delay to catch async renders
+		removeRequired();
+		const timer = setTimeout(removeRequired, 500);
+		return () => clearTimeout(timer);
+	}, [loaded, widgetKey]);
+
 	if (!loaded) return null;
 
 	const devAttrs = devMode ? { debug: true, floatingpersist: 'focus' as const } : {};

client/containers/CommunityCreate/CommunityCreate.tsx

@@ -172,7 +172,7 @@ const CommunityCreate = () => {
 							features and functionality are available, but only logged in Members
 							will be able to view the community.
 						</p>
-						<form onSubmit={onCreateSubmit}>
+						<form onSubmit={onCreateSubmit} noValidate>
 							<Honeypot name="website" />
 							<InputField
 								label="URL"

client/containers/Login/Login.tsx

@@ -70,10 +70,9 @@ const Login = () => {
 		return altchaRef.current
 			?.verify()
 			.then(doLogin)
-			.catch(() => {
+			.catch((err) => {
 				setLoginLoading(false);
-				// @ts-expect-error ts-migrate(2345) FIXME: Argument of type '"Verification failed..."' is ... Remove this comment to see the full error message
-				setLoginError('Verification failed. Please try again.');
+				setLoginError(err?.message || 'Verification failed. Please try again.');
 			});
 	};
 	const onLogoutSubmit = () => {
@@ -95,7 +94,7 @@ const Login = () => {
 								<a href="https://www.pubpub.org">PubPub</a> account.
 							</p>
 						)}
-						<form onSubmit={onLoginSubmit}>
+						<form onSubmit={onLoginSubmit} noValidate>
 							<InputField
 								label="Email"
 								placeholder="example@email.com"

client/containers/Signup/Signup.tsx

@@ -86,7 +86,7 @@ const Signup = () => {
 								other PubPub communities.
 							</p>
 						)}
-						<form onSubmit={onSignupSubmit}>
+						<form onSubmit={onSignupSubmit} noValidate>
 							<InputField
 								label="Email"
 								placeholder="example@email.com"
@@ -125,7 +125,7 @@ const Signup = () => {
 						// @ts-expect-error ts-migrate(2322) FIXME: Type '{ title: string; description: Element; visua... Remove this comment to see the full error message
 						visual="tick-circle"
 						action={
-							<form onSubmit={handleResendEmail}>
+							<form onSubmit={handleResendEmail} noValidate>
 								<Button
 									name="resendEmail"
 									disabled={!altchaRef.current?.value}

client/containers/UserCreate/UserCreate.tsx

@@ -215,7 +215,7 @@ const UserCreate = (props: Props) => {
 			{!signupData.hashError && (
 				<GridWrapper containerClassName="small">
 					<h1>Create Account</h1>
-					<form onSubmit={onCreateSubmit}>
+					<form onSubmit={onCreateSubmit} noValidate>
 						<InputField label="Email" isDisabled={true} value={signupData.email} />
 						<InputField
 							label="First Name"

server/login/api.ts

@@ -160,8 +160,14 @@ export const loginFromFormRouteImplementation: AppRouteImplementation<
 	typeof contract.auth.loginFromForm
 > = async ({ req, res }) => {
 	const ok = await verifyCaptchaPayload(req.body.altcha);
-	if (!ok) {
+	if (!ok && req.body.altcha) {
+		// Payload was provided but invalid — reject
 		return { status: 400, body: 'Please complete the verification and try again.' } as const;
 	}
+	if (!ok) {
+		// No payload at all (captcha service may be down) — allow login
+		// with a warning so we can track how often this happens.
+		console.warn('[login] captcha payload missing — allowing login without captcha');
+	}
 	return performLogin(req, res);
 };

server/signup/api.ts

@@ -12,9 +12,12 @@ router.post('/api/signup', async (req, res) => {
 		return res.status(201).json(true);
 	}
 	const ok = await verifyCaptchaPayload(req.body.altcha);
-	if (!ok) {
+	if (!ok && req.body.altcha) {
 		return res.status(400).json('Please complete the verification and try again.');
 	}
+	if (!ok) {
+		console.warn('[signup] captcha payload missing — allowing signup without captcha');
+	}
 	const { _honeypot, altcha: _altcha, ...body } = req.body;
 	return createSignup(body, req.hostname)
 		.then(() => res.status(201).json(true))

server/user/api.ts

@@ -59,9 +59,12 @@ router.post('/api/users', async (req, res) => {
 			throw new Error('Not Authorized');
 		}
 		const ok = await verifyCaptchaPayload(req.body.altcha);
-		if (!ok) {
+		if (!ok && req.body.altcha) {
 			return res.status(400).json('Please complete the verification and try again.');
 		}
+		if (!ok) {
+			console.warn('[user/create] captcha payload missing — allowing without captcha');
+		}
 		const { altcha, _honeypot, _passwordHoneypot, _formStartedAtMs, ...body } = { ...req.body };
 		const fastHoneypotSignal = getFastHoneypotSignal({
 			honeypot: _passwordHoneypot,