#

vincentlu

2025-02-13 2fd817916072018b631c4f608c75ff455efb42a6

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

@@ -26,23 +26,54 @@
    const notify = useNotify();
    const login = useLogin();
    const location = useLocation();
    const { systemInfo, tenantList } = props;
    const { systemInfo } = props;

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

    const email = watch('email');
    const username = watch('username');
    const password = watch('password');
    const confirmPassword = watch('confirmPassword');

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

    const username = watch('username');
    const password = watch('password');
    const confirmPassword = watch('confirmPassword');
    const tenantId = watch('tenantId');

    useEffect(() => {
        if (tenantList.length > 0 && !tenantId) {
            setValue('tenantId', tenantList[0].id);
    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); // 存储倒计时到本地
        }
    }, [tenantList, setValue]);
    };

    // 倒计时功能
    useEffect(() => {
        const savedCountdown = localStorage.getItem('codeCountdown');
        if (savedCountdown && !isCounting) {
            setCountdown(Number(savedCountdown));
            setIsCounting(true);
        }

        const interval = setInterval(() => {
            if (isCounting && countdown > 0) {
                setCountdown(prev => prev - 1);
                localStorage.setItem('codeCountdown', countdown - 1);
            } else if (countdown <= 0) {
                clearInterval(interval);
                setIsCounting(false);
                localStorage.removeItem('codeCountdown'); // 重置
            }
        }, 1000);

        return () => clearInterval(interval);
    }, [countdown, isCounting]);


    const onSubmit = (data) => {
        notify("Registration is not open yet");
@@ -85,34 +116,6 @@
            >
                <Stack spacing={2}>
                    <Controller
                        name="tenantId"
                        control={control}
                        rules={{ required: true }}
                        defaultValue={tenantList.length > 0 ? tenantList[0].id : ''}
                        render={({ field: { onChange, value, ref } }) => {
                            const selectedTenant = tenantList.find(tenant => tenant.id === value) || null;
                            return (
                                <Autocomplete
                                    options={tenantList}
                                    getOptionLabel={(option) => option.name}
                                    value={selectedTenant}
                                    onChange={(_, newValue) => {
                                        onChange(newValue ? newValue.id : '');
                                    }}
                                    renderInput={(params) => (
                                        <TextField
                                            {...params}
                                            label={translate("page.login.tenant")}
                                            variant="standard"
                                            inputRef={ref}
                                        />
                                    )}
                                />
                            );
                        }}
                    />

                    <Controller
                        name="username"
                        control={control}
                        defaultValue=""
@@ -120,7 +123,7 @@
                        render={({ field }) => (
                            <TextField
                                {...field}
                                label={translate('ra.auth.username')}
                                label={translate("page.login.username")}
                                variant="standard"
                                disabled={loading}
                                autoFocus
@@ -133,15 +136,23 @@
                        name="password"
                        control={control}
                        defaultValue=""
                        rules={{ required: true }}
                        render={({ field }) => (
                        rules={{
                            required: translate('ra.validation.required'),
                            pattern: {
                                value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\.]{6,13}$/,
                                message: translate('page.settings.resetPwd.tip.pwdInputLimit'),
                            },
                        }}
                        render={({ field, fieldState: { error } }) => (
                            <TextField
                                {...field}
                                label={translate('ra.auth.password')}
                                label={translate("page.login.password")}
                                type={showPassword ? 'text' : 'password'}
                                variant="standard"
                                disabled={loading}
                                autoComplete="off"
                                error={!!error}
                                helperText={error?.message || ""}
                                InputProps={{
                                    endAdornment: (
                                        <InputAdornment position="end">
@@ -164,8 +175,12 @@
                        name="confirmPassword"
                        control={control}
                        defaultValue=""
                        rules={{ required: true }}
                        render={({ field }) => (
                        rules={{
                            required: translate('ra.validation.required'),
                            validate: value =>
                                value === password || translate('page.settings.resetPwd.tip.pwdNotMatch'),
                        }}
                        render={({ field, fieldState: { error } }) => (
                            <TextField
                                {...field}
                                label={translate('page.login.confirmPwd')}
@@ -173,6 +188,8 @@
                                variant="standard"
                                disabled={loading}
                                autoComplete="off"
                                error={!!error}
                                helperText={error?.message || ""}
                                InputProps={{
                                    endAdornment: (
                                        <InputAdornment position="end">
@@ -191,12 +208,80 @@
                        )}
                    />

                    <Controller
                        name="email"
                        control={control}
                        defaultValue=""
                        rules={{
                            required: translate('ra.validation.required'),
                            pattern: {
                                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                                message: translate("ra.validation.email"),
                            },
                        }}
                        render={({ field, fieldState: { error } }) => (
                            <TextField
                                {...field}
                                label={translate('page.login.email')}
                                variant="standard"
                                disabled={loading}
                                // autoComplete="off"
                                error={!!error}
                                helperText={error ? error.message : ""}
                            />
                        )}
                    />

                    <Box display="flex" alignItems="center" justifyContent='center' width="100%">
                        <Controller
                            name="code"
                            control={control}
                            defaultValue=""
                            rules={{
                                required: translate('ra.validation.required'),
                            }}
                            render={({ field, fieldState: { error } }) => (
                                <TextField
                                    {...field}
                                    label={translate('page.login.code')}
                                    variant="standard"
                                    disabled={loading}
                                    autoComplete="off"
                                    error={!!error}
                                    helperText={error ? error.message : ""}
                                    sx={{
                                        width: '65%',
                                        mr: 2,
                                    }}
                                />
                            )}
                        />

                        <Button
                            variant="outlined"
                            onClick={handleSendCode}
                            disabled={isCounting || loading}
                            sx={{
                                mt: 1,
                            }}
                        >
                            {isCounting ? (
                                <>
                                    <CircularProgress size={20} color="primary" sx={{ marginRight: 1 }} />
                                    {`${countdown}s`}
                                </>
                            ) : (
                                translate('page.login.button.code')
                            )}
                        </Button>
                    </Box>

                    <Box />

                    <Button
                        type="submit"
                        variant="contained"
                        disabled={loading || !(tenantId && username && password && confirmPassword)}
                        disabled={loading || !(email && username && password && confirmPassword)}
                        sx={{
                            backgroundColor: "#3D4BA7"
                        }}