hamed
c3c520801d
- Introduced a new endpoint `/api/v1/altcha/config` in CaptchaController to return the status of the ALTCHA captcha. - Updated HomeController to inject AltchaService and pass the captcha status to the home page template. - Modified the home.html.twig template to conditionally render the ALTCHA widget based on the captcha status. - Updated manifest.json and cache files to reflect changes in the codebase.
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import 'altcha';
|
|
|
|
// ALTCHA خودمیزبان: widget با گرفتن challenge از بکاند، proof-of-work را در
|
|
// پسزمینهی مرورگر حل میکند و مقدار base64 حلشده را در event `verified` میدهد.
|
|
// این مقدار باید در بدنهی درخواستِ endpoint عمومی با کلید `altcha` ارسال شود.
|
|
|
|
interface AltchaProps {
|
|
onVerified: (payload: string) => void;
|
|
challengeUrl?: string;
|
|
}
|
|
|
|
// برچسبهای فارسی widget (ترجمهی رسمی locale fa).
|
|
const FA_STRINGS = JSON.stringify({
|
|
label: 'من ربات نیستم',
|
|
verifying: 'در حال بررسی...',
|
|
verified: 'تأیید شد',
|
|
waitAlert: 'در حال بررسی... لطفاً منتظر بمانید.',
|
|
error: 'احراز هویت ناموفق بود. کمی بعد دوباره تلاش کنید.',
|
|
expired: 'احراز هویت منقضی شد. دوباره تلاش کنید.',
|
|
});
|
|
|
|
// altcha-widget یک custom element است؛ به JSX معرفی میشود (React 19: namespace زیر React.JSX).
|
|
declare module 'react' {
|
|
namespace JSX {
|
|
interface IntrinsicElements {
|
|
'altcha-widget': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
|
|
challengeurl?: string;
|
|
strings?: string;
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function Altcha({ onVerified, challengeUrl = '/api/v1/altcha/challenge' }: AltchaProps) {
|
|
const ref = useRef<HTMLElement>(null);
|
|
// null=در حال بررسی وضعیت، true/false=فعال/غیرفعال بودن کپچا در سرور
|
|
const [enabled, setEnabled] = useState<boolean | null>(null);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
fetch('/api/v1/altcha/config')
|
|
.then((r) => r.json())
|
|
.then((c) => {
|
|
if (!alive) return;
|
|
setEnabled(!!c.enabled);
|
|
if (!c.enabled) onVerified(''); // کپچا خاموش → فرم بدون مانع ارسال شود
|
|
})
|
|
.catch(() => { if (alive) setEnabled(false); });
|
|
return () => { alive = false; };
|
|
}, [onVerified]);
|
|
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
|
|
const onStateChange = (e: Event) => {
|
|
const detail = (e as CustomEvent).detail as { state?: string; payload?: string };
|
|
if (detail?.state === 'verified' && detail.payload) {
|
|
onVerified(detail.payload);
|
|
}
|
|
};
|
|
|
|
el.addEventListener('statechange', onStateChange);
|
|
return () => el.removeEventListener('statechange', onStateChange);
|
|
}, [onVerified, enabled]);
|
|
|
|
if (enabled !== true) return null;
|
|
|
|
return <altcha-widget ref={ref as React.Ref<HTMLElement>} challengeurl={challengeUrl} strings={FA_STRINGS} />;
|
|
}
|