chore: update default theme style

web/default/src/components/RegisterForm.js

@@ -6,15 +6,16 @@ import {
   Header,
   Image,
   Message,
-  Segment,
   Card,
   Divider,
 } from 'semantic-ui-react';
 import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
 import Turnstile from 'react-turnstile';
 
 const RegisterForm = () => {
+  const { t } = useTranslation();
   const [inputs, setInputs] = useState({
     username: '',
     password: '',
@@ -28,6 +29,8 @@ const RegisterForm = () => {
   const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
   const [turnstileToken, setTurnstileToken] = useState('');
   const [loading, setLoading] = useState(false);
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
   const logo = getLogo();
   let affCode = new URLSearchParams(window.location.search).get('aff');
   if (affCode) {
@@ -46,6 +49,19 @@ const RegisterForm = () => {
     }
   });
 
+  useEffect(() => {
+    let countdownInterval = null;
+    if (disableButton && countdown > 0) {
+      countdownInterval = setInterval(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setDisableButton(false);
+      setCountdown(30);
+    }
+    return () => clearInterval(countdownInterval);
+  }, [disableButton, countdown]);
+
   let navigate = useNavigate();
 
   function handleChange(e) {
@@ -56,16 +72,16 @@ const RegisterForm = () => {
 
   async function handleSubmit(e) {
     if (password.length < 8) {
-      showInfo('密码长度不得小于 8 位！');
+      showInfo(t('messages.error.password_length'));
       return;
     }
     if (password !== password2) {
-      showInfo('两次输入的密码不一致');
+      showInfo(t('messages.error.password_mismatch'));
       return;
     }
     if (username && password) {
       if (turnstileEnabled && turnstileToken === '') {
-        showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+        showInfo(t('messages.error.turnstile_wait'));
         return;
       }
       setLoading(true);
@@ -80,7 +96,7 @@ const RegisterForm = () => {
       const { success, message } = res.data;
       if (success) {
         navigate('/login');
-        showSuccess('注册成功！');
+        showSuccess(t('messages.success.register'));
       } else {
         showError(message);
       }
@@ -91,18 +107,21 @@ const RegisterForm = () => {
   const sendVerificationCode = async () => {
     if (inputs.email === '') return;
     if (turnstileEnabled && turnstileToken === '') {
-      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      showInfo(t('messages.error.turnstile_wait'));
       return;
     }
+    setDisableButton(true);
     setLoading(true);
     const res = await API.get(
       `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
     );
     const { success, message } = res.data;
     if (success) {
-      showSuccess('验证码发送成功，请检查你的邮箱！');
+      showSuccess(t('messages.success.verification_code'));
     } else {
       showError(message);
+      setDisableButton(false);
+      setCountdown(30);
     }
     setLoading(false);
   };
@@ -123,7 +142,7 @@ const RegisterForm = () => {
                 style={{ marginBottom: '1.5em' }}
               >
                 <Image src={logo} style={{ marginBottom: '10px' }} />
-                <Header.Content>新用户注册</Header.Content>
+                <Header.Content>{t('auth.register.title')}</Header.Content>
               </Header>
             </Card.Header>
             <Form size='large'>
@@ -131,7 +150,7 @@ const RegisterForm = () => {
                 fluid
                 icon='user'
                 iconPosition='left'
-                placeholder='输入用户名，最长 12 位'
+                placeholder={t('auth.register.username')}
                 onChange={handleChange}
                 name='username'
                 style={{ marginBottom: '1em' }}
@@ -140,7 +159,7 @@ const RegisterForm = () => {
                 fluid
                 icon='lock'
                 iconPosition='left'
-                placeholder='输入密码，最短 8 位，最长 20 位'
+                placeholder={t('auth.register.password')}
                 onChange={handleChange}
                 name='password'
                 type='password'
@@ -150,7 +169,7 @@ const RegisterForm = () => {
                 fluid
                 icon='lock'
                 iconPosition='left'
-                placeholder='再次输入密码'
+                placeholder={t('auth.register.confirm_password')}
                 onChange={handleChange}
                 name='password2'
                 type='password'
@@ -163,7 +182,7 @@ const RegisterForm = () => {
                     fluid
                     icon='mail'
                     iconPosition='left'
-                    placeholder='输入邮箱地址'
+                    placeholder={t('auth.register.email')}
                     onChange={handleChange}
                     name='email'
                     type='email'
@@ -171,9 +190,10 @@ const RegisterForm = () => {
                       <Button
                         onClick={sendVerificationCode}
                         disabled={loading}
-                        // style={{ backgroundColor: '#2F73FF', color: 'white' }}
                       >
-                        获取验证码
+                        {disableButton 
+                          ? t('auth.register.get_code_retry', { countdown })
+                          : t('auth.register.get_code')}
                       </Button>
                     }
                     style={{ marginBottom: '1em' }}
@@ -182,7 +202,7 @@ const RegisterForm = () => {
                     fluid
                     icon='lock'
                     iconPosition='left'
-                    placeholder='输入验证码'
+                    placeholder={t('auth.register.verification_code')}
                     onChange={handleChange}
                     name='verification_code'
                     style={{ marginBottom: '1em' }}
@@ -218,7 +238,7 @@ const RegisterForm = () => {
                 }}
                 loading={loading}
               >
-                注册
+                {t('auth.register.button')}
               </Button>
             </Form>
 
@@ -231,9 +251,9 @@ const RegisterForm = () => {
                   color: '#666',
                 }}
               >
-                已有账户？
+                {t('auth.register.has_account')}
                 <Link to='/login' style={{ color: '#2185d0' }}>
-                  点击登录
+                  {t('auth.register.login')}
                 </Link>
               </div>
             </Message>