import { useForm } from '@formily/react'; import { css, useAPIClient } from '@nocobase/client'; import { Button, Input, message } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; export default function VerificationCode({ targetFieldName = 'phone', actionType, value, onChange }) { const { t } = useTranslation(); const api = useAPIClient(); const form = useForm(); const [count, setCountdown] = useState(0); const timer = useRef(null); useEffect(() => { if (count <= 0 && timer.current) { clearInterval(timer.current); } }, [count]); async function onGetCode() { if (count > 0) { return; } try { const { data: { data }, } = await api.resource('verifications').create({ values: { type: actionType, phone: form.values[targetFieldName], }, }); message.success(t('Operation succeeded')); if (value) { onChange(''); } const expiresIn = data.expiresAt ? Math.ceil((Date.parse(data.expiresAt) - Date.now()) / 1000) : 60; setCountdown(expiresIn); timer.current = setInterval(() => { setCountdown((count) => count - 1); }, 1000); } catch (err) { console.error(err); } } return (
); }