panel-web/apps/admin/app/(auth)/send-code.tsx

74 lines
2.1 KiB
TypeScript

'use client';
import { sendEmailCode, sendSmsCode } from '@/services/common/common';
import { Button } from '@workspace/ui/components/button';
import { useCountDown } from 'ahooks';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { UseFormReturn } from 'react-hook-form'; // For type-safety
interface SendCodeProps {
type: 'email' | 'phone';
params: {
email?: string;
type?: 1 | 2;
telephone_area_code?: string;
telephone?: string;
};
form: UseFormReturn<any>; // Add the new form prop
}
export default function SendCode({ type, params, form }: SendCodeProps) {
const t = useTranslations('auth');
const [targetDate, setTargetDate] = useState<number>();
const [, { seconds }] = useCountDown({
targetDate,
onEnd: () => {
setTargetDate(undefined);
},
});
const getEmailCode = async () => {
// Use form.getValues() to get the latest form data
const latestValues = form.getValues();
console.log(11111, latestValues);
if (latestValues.email && latestValues.type) {
await sendEmailCode({
email: latestValues.email,
type: latestValues.type,
});
setTargetDate(Date.now() + 60000);
}
};
const getPhoneCode = async () => {
// Use form.getValues() to get the latest form data
const latestValues = form.getValues();
if (latestValues.telephone && latestValues.telephone_area_code && latestValues.type) {
await sendSmsCode({
telephone: latestValues.telephone,
telephone_area_code: latestValues.telephone_area_code,
type: latestValues.type,
});
setTargetDate(Date.now() + 60000);
}
};
const handleSendCode = async () => {
if (type === 'email') {
await getEmailCode();
} else {
await getPhoneCode();
}
};
const disabled =
seconds > 0 ||
(type === 'email' ? !params.email : !params.telephone || !params.telephone_area_code);
return (
<Button type='button' onClick={handleSendCode} disabled={disabled}>
{seconds > 0 ? `${seconds}s` : t('get')}
</Button>
);
}