#

luxiaotao1123

2025-02-13 e6be6598d70f1fc4e6d4bf33d6e43dc6492187ad

 rsf-admin/src/page/login/Register.jsx

@@ -15,11 +15,13 @@
    useTranslate,
    useLogin,
    useNotify,
    email as validEmail,
} from 'react-admin';
import { useForm, Controller } from 'react-hook-form';
import ProviderChoices from "./ProviderChoices";
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import { sendEmailCode } from '@/api/auth';

const Register = (props) => {
    const translate = useTranslate();
@@ -28,7 +30,7 @@
    const location = useLocation();
    const { systemInfo } = props;

    const { control, watch, handleSubmit, setValue } = useForm();
    const { control, watch, handleSubmit, setValue, setError, clearErrors } = useForm();

    const email = watch('email');
    const username = watch('username');
@@ -36,20 +38,40 @@
    const confirmPassword = watch('confirmPassword');

    const [loading, setLoading] = useState(false);
    const [codeLoading, setCodeLoading] = useState(false);
    const [showPassword, setShowPassword] = useState(true);


    const [isCounting, setIsCounting] = useState(false);
    const [countdown, setCountdown] = useState(60);

    // 处理验证码按钮点击
    const handleSendCode = async () => {
        // 这里假设发送验证码的请求
        const response = await fetch('/api/send-code');
        if (response.ok) {
            setIsCounting(true);
            localStorage.setItem('codeCountdown', 60); // 存储倒计时到本地
        if (!email) {
            setError("email", {
                message: translate('ra.validation.required')
            })
            return;
        }
        const emailError = validEmail()(email);
        if (emailError) {
            setError("email", {
                message: translate("ra.validation.email")
            })
            return;
        }
        clearErrors("email");
        setCodeLoading(true);
        sendEmailCode({ email }).then(res => {
            setCodeLoading(false);
            const { code, msg, data } = res;
            if (code === 200) {
                notify(msg, { type: 'success', messageArgs: { _: msg } });
            } else {
                notify(msg, { type: 'error', messageArgs: { _: msg } });
            }
        }).catch((error) => {
            setCodeLoading(false);
            notify(error.message, { type: 'error', messageArgs: { _: error.message } });
            console.error(error);
        })
    };

    // 倒计时功能
@@ -260,19 +282,22 @@
                        <Button
                            variant="outlined"
                            onClick={handleSendCode}
                            disabled={isCounting || loading}
                            disabled={codeLoading || isCounting}
                            sx={{
                                width: '35%',
                                mt: 1,
                                whiteSpace: 'nowrap',
                            }}
                        >
                            {isCounting ? (
                                <>
                                    <CircularProgress size={20} color="primary" sx={{ marginRight: 1 }} />
                                    {`${countdown}s`}
                                </>
                            ) : (
                                translate('page.login.button.code')
                            )}
                            {codeLoading ? (
                                <CircularProgress size={20} color="primary" sx={{ marginRight: 1 }} />
                            ) :
                                isCounting ? (
                                    `${countdown}s`
                                ) : (
                                    translate('page.login.button.code')
                                )
                            }
                        </Button>
                    </Box>