|  |  | 
 |  |  | import ProviderChoices from "./ProviderChoices"; | 
 |  |  | import Visibility from '@mui/icons-material/Visibility'; | 
 |  |  | import VisibilityOff from '@mui/icons-material/VisibilityOff'; | 
 |  |  | import { sendEmailCode } from '@/api/auth'; | 
 |  |  | import { sendEmailCode, register } from '@/api/auth'; | 
 |  |  |  | 
 |  |  | const Register = (props) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  | 
 |  |  |     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 [isCounting, setIsCounting] = useState(false); | 
 |  |  |     const [countdown, setCountdown] = useState(60); | 
 |  |  |  | 
 |  |  |     // send code | 
 |  |  |     const handleSendCode = async () => { | 
 |  |  |         if (!email) { | 
 |  |  |             setError("email", { | 
 |  |  | 
 |  |  |             const { code, msg, data } = res; | 
 |  |  |             if (code === 200) { | 
 |  |  |                 notify(msg, { type: 'success', messageArgs: { _: msg } }); | 
 |  |  |  | 
 |  |  |                 const timestamp = Math.floor(Date.now() / 1000); | 
 |  |  |                 const expirationTime = timestamp + 60; | 
 |  |  |                 localStorage.setItem('codeExpirationTime', expirationTime); | 
 |  |  |  | 
 |  |  |                 setIsCounting(true); | 
 |  |  |                 setCountdown(60); | 
 |  |  |             } else if (code === 10005 || code === 10006) { | 
 |  |  |                 setError('email', { | 
 |  |  |                     message: msg | 
 |  |  |                 }) | 
 |  |  |             } else { | 
 |  |  |                 notify(msg, { type: 'error', messageArgs: { _: msg } }); | 
 |  |  |             } | 
 |  |  | 
 |  |  |         }) | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     // 倒计时功能 | 
 |  |  |     // countdown | 
 |  |  |     useEffect(() => { | 
 |  |  |         const savedCountdown = localStorage.getItem('codeCountdown'); | 
 |  |  |         if (savedCountdown && !isCounting) { | 
 |  |  |             setCountdown(Number(savedCountdown)); | 
 |  |  |             setIsCounting(true); | 
 |  |  |         const codeExpirationTime = localStorage.getItem('codeExpirationTime'); | 
 |  |  |         if (codeExpirationTime) { | 
 |  |  |             const currentTimestamp = Math.floor(Date.now() / 1000); | 
 |  |  |             const remainingTime = codeExpirationTime - currentTimestamp; | 
 |  |  |             if (remainingTime > 0) { | 
 |  |  |                 setCountdown(remainingTime); | 
 |  |  |                 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'); // 重置 | 
 |  |  |                 localStorage.removeItem('codeExpirationTime'); | 
 |  |  |             } | 
 |  |  |         }, 1000); | 
 |  |  |  | 
 |  |  |         return () => clearInterval(interval); | 
 |  |  |     }, [countdown, isCounting]); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const onSubmit = (data) => { | 
 |  |  |         notify("Registration is not open yet"); | 
 |  |  |         return; | 
 |  |  |     // register | 
 |  |  |     const onSubmit = (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) { | 
 |  |  |                 notify(msg, { type: 'success', messageArgs: { _: msg } }); | 
 |  |  |                 // to login | 
 |  |  |                 login( | 
 |  |  |                     params, | 
 |  |  |                     location.state ? (location.state).nextPathname : '/' | 
 |  |  |                 ).catch(({ code, msg }) => { | 
 |  |  |                     setLoading(false); | 
 |  |  |                     notify(msg, { type: 'error', 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 ( | 
 |  |  | 
 |  |  |                         control={control} | 
 |  |  |                         defaultValue="" | 
 |  |  |                         rules={{ required: true }} | 
 |  |  |                         render={({ field }) => ( | 
 |  |  |                         render={({ field, fieldState: { error } }) => ( | 
 |  |  |                             <TextField | 
 |  |  |                                 {...field} | 
 |  |  |                                 label={translate("page.login.username")} | 
 |  |  | 
 |  |  |                                 disabled={loading} | 
 |  |  |                                 autoFocus | 
 |  |  |                                 autoComplete="off" | 
 |  |  |                                 error={!!error} | 
 |  |  |                                 helperText={error?.message || ""} | 
 |  |  |                             /> | 
 |  |  |                         )} | 
 |  |  |                     /> | 
 |  |  | 
 |  |  |                     <Button | 
 |  |  |                         type="submit" | 
 |  |  |                         variant="contained" | 
 |  |  |                         disabled={loading || !(email && username && password && confirmPassword)} | 
 |  |  |                         disabled={loading || !(email && username && password && confirmPassword && code)} | 
 |  |  |                         sx={{ | 
 |  |  |                             backgroundColor: "#3D4BA7" | 
 |  |  |                         }} |