109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@workspace/ui/components/button";
|
|
import {
|
|
sendEmailCode,
|
|
sendSmsCode,
|
|
} from "@workspace/ui/services/common/common";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useGlobalStore } from "@/stores/global";
|
|
|
|
interface SendCodeProps {
|
|
type: "email" | "phone";
|
|
params: {
|
|
email?: string;
|
|
type?: 1 | 2;
|
|
telephone_area_code?: string;
|
|
telephone?: string;
|
|
};
|
|
}
|
|
export default function SendCode({ type, params }: SendCodeProps) {
|
|
const { t } = useTranslation("auth");
|
|
const { common } = useGlobalStore();
|
|
const { verify_code_interval } = common.verify_code;
|
|
const [targetDate, setTargetDate] = useState<number>();
|
|
const [seconds, setSeconds] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const storedEndTime = localStorage.getItem(`verify_code_${type}`);
|
|
if (storedEndTime) {
|
|
const endTime = Number.parseInt(storedEndTime, 10);
|
|
if (endTime > Date.now()) {
|
|
setTargetDate(endTime);
|
|
} else {
|
|
localStorage.removeItem(`verify_code_${type}`);
|
|
}
|
|
}
|
|
}, [type]);
|
|
|
|
useEffect(() => {
|
|
if (!targetDate) {
|
|
setSeconds(0);
|
|
return;
|
|
}
|
|
|
|
const updateTimer = () => {
|
|
const now = Date.now();
|
|
const remaining = Math.max(0, Math.ceil((targetDate - now) / 1000));
|
|
setSeconds(remaining);
|
|
|
|
if (remaining === 0) {
|
|
setTargetDate(undefined);
|
|
localStorage.removeItem(`verify_code_${type}`);
|
|
}
|
|
};
|
|
|
|
updateTimer();
|
|
const interval = setInterval(updateTimer, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [targetDate, type]);
|
|
|
|
const setCodeTimer = () => {
|
|
const endTime = Date.now() + verify_code_interval * 1000;
|
|
setTargetDate(endTime);
|
|
localStorage.setItem(`verify_code_${type}`, endTime.toString());
|
|
};
|
|
|
|
const getEmailCode = async () => {
|
|
if (params.email && params.type) {
|
|
await sendEmailCode({
|
|
email: params.email,
|
|
type: params.type,
|
|
});
|
|
setCodeTimer();
|
|
}
|
|
};
|
|
|
|
const getPhoneCode = async () => {
|
|
if (params.telephone && params.telephone_area_code && params.type) {
|
|
await sendSmsCode({
|
|
telephone: params.telephone,
|
|
telephone_area_code: params.telephone_area_code,
|
|
type: params.type,
|
|
});
|
|
setCodeTimer();
|
|
}
|
|
};
|
|
|
|
const handleSendCode = async () => {
|
|
if (type === "email") {
|
|
getEmailCode();
|
|
} else {
|
|
getPhoneCode();
|
|
}
|
|
};
|
|
const disabled =
|
|
seconds > 0 ||
|
|
(type === "email"
|
|
? !params.email
|
|
: !(params.telephone && params.telephone_area_code));
|
|
|
|
return (
|
|
<Button disabled={disabled} onClick={handleSendCode} type="button">
|
|
{seconds > 0 ? `${seconds}s` : t("get", "Get Code")}
|
|
</Button>
|
|
);
|
|
}
|