From 9af56f878cc3e22d3bce6ab53d67f3753470a7ac Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期五, 14 二月 2025 08:59:22 +0800
Subject: [PATCH] #
---
rsf-admin/src/page/login/Register.jsx | 124 ++++++++++++++++++++++++----------------
1 files changed, 74 insertions(+), 50 deletions(-)
diff --git a/rsf-admin/src/page/login/Register.jsx b/rsf-admin/src/page/login/Register.jsx
index 881f5be..e8a0822 100644
--- a/rsf-admin/src/page/login/Register.jsx
+++ b/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, register } from '@/api/auth';
const Register = (props) => {
const translate = useTranslate();
@@ -28,31 +30,56 @@
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');
const password = watch('password');
const confirmPassword = watch('confirmPassword');
+ const code = watch('code');
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);
- // 澶勭悊楠岃瘉鐮佹寜閽偣鍑�
+ // send code
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 } });
+ setIsCounting(true);
+ setCountdown(60);
+ localStorage.setItem('codeCountdown', 60);
+ } else {
+ notify(msg, { type: 'error', messageArgs: { _: msg } });
+ }
+ }).catch((error) => {
+ setCodeLoading(false);
+ notify(error.message, { type: 'error', messageArgs: { _: error.message } });
+ console.error(error);
+ })
};
- // 鍊掕鏃跺姛鑳�
+ // countdown
useEffect(() => {
const savedCountdown = localStorage.getItem('codeCountdown');
if (savedCountdown && !isCounting) {
@@ -67,43 +94,35 @@
} else if (countdown <= 0) {
clearInterval(interval);
setIsCounting(false);
- localStorage.removeItem('codeCountdown'); // 閲嶇疆
+ localStorage.removeItem('codeCountdown');
}
}, 1000);
return () => clearInterval(interval);
}, [countdown, isCounting]);
-
- const onSubmit = (data) => {
- notify("Registration is not open yet");
- return;
+ // register
+ const onSubmit = (params) => {
+ // console.log(params);
setLoading(true);
- // js native confirm && root
- login(
- data,
- location.state ? (location.state).nextPathname : '/'
- ).catch((error) => {
+ register(params).then(res => {
setLoading(false);
- notify(
- typeof error === 'string'
- ? error
- : typeof error === 'undefined' || !error.message
- ? 'ra.auth.sign_in_error'
- : error.message,
- {
- type: 'error',
- messageArgs: {
- _:
- typeof error === 'string'
- ? error
- : error && error.message
- ? error.message
- : undefined,
- },
- }
- );
- });
+ const { code, msg, data } = res;
+ if (code === 200) {
+ console.log(data);
+ notify(msg, { type: 'success', messageArgs: { _: msg } });
+ } else if (code === 10002) {
+ setError("username", {
+ message: msg
+ })
+ } else {
+ notify(msg, { type: 'error', messageArgs: { _: msg } });
+ }
+ }).catch((error) => {
+ setLoading(false);
+ notify(error.message, { type: 'error', messageArgs: { _: error.message } });
+ console.error(error);
+ })
};
return (
@@ -120,7 +139,7 @@
control={control}
defaultValue=""
rules={{ required: true }}
- render={({ field }) => (
+ render={({ field, fieldState: { error } }) => (
<TextField
{...field}
label={translate("page.login.username")}
@@ -128,6 +147,8 @@
disabled={loading}
autoFocus
autoComplete="off"
+ error={!!error}
+ helperText={error?.message || ""}
/>
)}
/>
@@ -260,19 +281,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>
@@ -281,7 +305,7 @@
<Button
type="submit"
variant="contained"
- disabled={loading || !(email && username && password && confirmPassword)}
+ disabled={loading || !(email && username && password && confirmPassword && code)}
sx={{
backgroundColor: "#3D4BA7"
}}
--
Gitblit v1.9.1