79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
|
'use client'
|
||
|
|
import {useEffect, useRef, useState} from 'react'
|
||
|
|
import Cap from '@cap.js/widget'
|
||
|
|
import {updateSendSMS} from '@/actions/verify'
|
||
|
|
import {toast} from 'sonner'
|
||
|
|
import {Button} from '@/components/ui/button'
|
||
|
|
import {LoaderIcon} from 'lucide-react'
|
||
|
|
|
||
|
|
export default function SendMsg() {
|
||
|
|
const [countdown, setCountdown] = useState(0)
|
||
|
|
const [progress, setProgress] = useState(0)
|
||
|
|
const [mode, setMode] = useState<'ready' | 'wait' | 'check'>('ready')
|
||
|
|
const cap = useRef(new Cap({apiEndpoint: '/'}))
|
||
|
|
cap.current.addEventListener('progress', (event) => {
|
||
|
|
setProgress(event.detail.progress)
|
||
|
|
})
|
||
|
|
|
||
|
|
// 发送验证码
|
||
|
|
const sendCode = async () => {
|
||
|
|
try {
|
||
|
|
setMode('check')
|
||
|
|
|
||
|
|
// 完成挑战
|
||
|
|
const result = await cap.current.solve()
|
||
|
|
if (!result.success || !cap.current.token) {
|
||
|
|
throw new Error('人机验证失败')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 发送验证码
|
||
|
|
const resp = await updateSendSMS({
|
||
|
|
captcha: cap.current.token,
|
||
|
|
})
|
||
|
|
if (!resp.success) {
|
||
|
|
throw new Error(`验证码发送失败: ${resp.message}`)
|
||
|
|
}
|
||
|
|
|
||
|
|
setMode('wait')
|
||
|
|
setCountdown(60)
|
||
|
|
toast.success('验证码已发送')
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
setMode('ready')
|
||
|
|
toast.error('验证码发送失败', {
|
||
|
|
description: (e as Error).message,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 计时
|
||
|
|
useEffect(() => {
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
if (countdown > 0) {
|
||
|
|
setCountdown(countdown - 1)
|
||
|
|
}
|
||
|
|
else if (mode === 'wait') {
|
||
|
|
setMode('ready')
|
||
|
|
}
|
||
|
|
}, 1000)
|
||
|
|
return () => clearInterval(interval)
|
||
|
|
}, [countdown, mode])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
theme="outline"
|
||
|
|
className="whitespace-nowrap h-10"
|
||
|
|
disabled={countdown > 0}
|
||
|
|
onClick={sendCode}
|
||
|
|
>
|
||
|
|
{mode === 'check' && <LoaderIcon className="animate-spin"/>}
|
||
|
|
<span>
|
||
|
|
{mode === 'check' && '检查登录环境'}
|
||
|
|
{mode === 'wait' && `${countdown}秒后重发`}
|
||
|
|
{mode === 'ready' && '获取验证码'}
|
||
|
|
</span>
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|