Improve the way this is hidden

This commit is contained in:
2026-01-23 20:06:10 -07:00
parent fa6920403f
commit 131e34dbe8

View File

@@ -20,33 +20,34 @@ export default function CaptchaCodePage () {
<p className='mb-4 px-8 -mt-2 text-center'> <p className='mb-4 px-8 -mt-2 text-center'>
Verify you are human to get a code Verify you are human to get a code
</p> </p>
<Turnstile {result == -1 && (
siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''} <Turnstile
onSuccess={async token => { siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
setToken(token) onSuccess={async token => {
setResult(0) setToken(token)
try { setResult(0)
const result = await axios.post('/api/get-verify-code', { try {
token const result = await axios.post('/api/get-verify-code', {
}) token
if (result.data.success) { })
setCode(result.data.data) if (result.data.success) {
setResult(2) setCode(result.data.data)
} else { setResult(2)
if (result.data.message) {
setResultMsg(result.data.message)
} else { } else {
setResult(3) if (result.data.message) {
setResultMsg(result.data.message)
} else {
setResult(3)
}
} }
} catch {
setResult(3)
} }
} catch { }}
setResult(3) onError={() => setResult(1)}
} className='flex justify-center'
}} />
onError={() => setResult(1)} )}
hidden={result != -1}
className='flex justify-center'
/>
<p className='mt-2 -mb-2 text-center text-sm' hidden={result == -1}> <p className='mt-2 -mb-2 text-center text-sm' hidden={result == -1}>
{result == 0 {result == 0
? 'Getting verification code...' ? 'Getting verification code...'
@@ -57,26 +58,29 @@ export default function CaptchaCodePage () {
: resultMsg ?? : resultMsg ??
'Failed to get verification code. Please try again later.'} 'Failed to get verification code. Please try again later.'}
</p> </p>
<p {result == 2 && (
className='bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] rounded-md px-2 py-1 mt-4 transition-colors text-center cursor-pointer' <>
hidden={result != 2} <p
onClick={async () => { className='bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] rounded-md px-2 py-1 mt-4 transition-colors text-center cursor-pointer'
navigator.clipboard.writeText(code ?? '') onClick={async () => {
if (showCopied) return navigator.clipboard.writeText(code ?? '')
setShowCopied(true) if (showCopied) return
setTimeout(() => { setShowCopied(true)
setShowCopied(false) setTimeout(() => {
}, 3000) setShowCopied(false)
}} }, 3000)
> }}
{code ?? 'N/A'} >
</p> {code ?? 'N/A'}
<p </p>
className='text-blue-500 text-center mt-2 -mb-4' <p
hidden={!showCopied || result != 2} className='text-blue-500 text-center mt-2 -mb-4'
> hidden={!showCopied}
Copied to clipboard! >
</p> Copied to clipboard!
</p>
</>
)}
</div> </div>
) )
} }