35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import type { AuthCaptchaChallenge } from '../../services/authService';
|
|
|
|
type CaptchaChallengeFieldProps = {
|
|
challenge: AuthCaptchaChallenge | null;
|
|
answer: string;
|
|
onAnswerChange: (value: string) => void;
|
|
};
|
|
|
|
export function CaptchaChallengeField({
|
|
challenge,
|
|
answer,
|
|
onAnswerChange,
|
|
}: CaptchaChallengeFieldProps) {
|
|
if (!challenge) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-3 rounded-2xl border border-sky-300/20 bg-sky-500/10 px-4 py-4">
|
|
<div className="text-sm leading-6 text-sky-100">{challenge.promptText}</div>
|
|
<img
|
|
src={challenge.imageDataUrl}
|
|
alt="图形验证码"
|
|
className="h-14 w-40 rounded-2xl border border-white/10 bg-black/20 object-cover"
|
|
/>
|
|
<input
|
|
className="h-11 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-sky-300/45 focus:bg-black/40"
|
|
value={answer}
|
|
placeholder="输入图形验证码"
|
|
onChange={(event) => onAnswerChange(event.target.value)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|