import { useTranslation } from "react-i18next"; import { css } from '@emotion/css'; import { useAPIClient } from "../api-client"; import { useForm } from "@formily/react"; import { useEffect, useRef, useState } from "react"; import { Button, Input, message } from "antd"; import React from "react"; 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 (
); }