Merge remote-tracking branch 'origin/alpha' into alpha

web/src/components/auth/PasswordResetConfirm.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { API, copy, showError, showNotice, getLogo, getSystemName } from '../../helpers';
 import { useSearchParams, Link } from 'react-router-dom';
-import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
-import { IconMail, IconLock } from '@douyinfe/semi-icons';
+import { Button, Card, Form, Typography, Banner } from '@douyinfe/semi-ui';
+import { IconMail, IconLock, IconCopy } from '@douyinfe/semi-icons';
 import { useTranslation } from 'react-i18next';
 import Background from '/example.png';
 
@@ -15,13 +15,14 @@ const PasswordResetConfirm = () => {
     token: '',
   });
   const { email, token } = inputs;
+  const isValidResetLink = email && token;
 
   const [loading, setLoading] = useState(false);
   const [disableButton, setDisableButton] = useState(false);
   const [countdown, setCountdown] = useState(30);
   const [newPassword, setNewPassword] = useState('');
-
   const [searchParams, setSearchParams] = useSearchParams();
+  const [formApi, setFormApi] = useState(null);
 
   const logo = getLogo();
   const systemName = getSystemName();
@@ -30,10 +31,16 @@ const PasswordResetConfirm = () => {
     let token = searchParams.get('token');
     let email = searchParams.get('email');
     setInputs({
-      token,
-      email,
+      token: token || '',
+      email: email || '',
     });
-  }, []);
+    if (formApi) {
+      formApi.setValues({
+        email: email || '',
+        newPassword: newPassword || ''
+      });
+    }
+  }, [searchParams, newPassword, formApi]);
 
   useEffect(() => {
     let countdownInterval = null;
@@ -49,7 +56,10 @@ const PasswordResetConfirm = () => {
   }, [disableButton, countdown]);
 
   async function handleSubmit(e) {
-    if (!email || !token) return;
+    if (!email || !token) {
+      showError(t('无效的重置链接，请重新发起密码重置请求'));
+      return;
+    }
     setDisableButton(true);
     setLoading(true);
     const res = await API.post(`/api/user/reset`, {
@@ -61,7 +71,7 @@ const PasswordResetConfirm = () => {
       let password = res.data.data;
       setNewPassword(password);
       await copy(password);
-      showNotice(`${t('密码已重置并已复制到剪贴板')}: ${password}`);
+      showNotice(`${t('密码已重置并已复制到剪贴板：')} ${password}`);
     } else {
       showError(message);
     }
@@ -94,16 +104,28 @@ const PasswordResetConfirm = () => {
                 <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('密码重置确认')}</Title>
               </div>
               <div className="px-2 py-8">
-                <Form className="space-y-3">
+                {!isValidResetLink && (
+                  <Banner
+                    type="danger"
+                    description={t('无效的重置链接，请重新发起密码重置请求')}
+                    className="mb-4 !rounded-lg"
+                    closeIcon={null}
+                  />
+                )}
+                <Form
+                  getFormApi={(api) => setFormApi(api)}
+                  initValues={{ email: email || '', newPassword: newPassword || '' }}
+                  className="space-y-4"
+                >
                   <Form.Input
                     field="email"
                     label={t('邮箱')}
                     name="email"
                     size="large"
                     className="!rounded-md"
-                    value={email}
-                    readOnly
+                    disabled={true}
                     prefix={<IconMail />}
+                    placeholder={email ? '' : t('等待获取邮箱信息...')}
                   />
 
                   {newPassword && (
@@ -113,14 +135,21 @@ const PasswordResetConfirm = () => {
                       name="newPassword"
                       size="large"
                       className="!rounded-md"
-                      value={newPassword}
-                      readOnly
+                      disabled={true}
                       prefix={<IconLock />}
-                      onClick={(e) => {
-                        e.target.select();
-                        navigator.clipboard.writeText(newPassword);
-                        showNotice(`${t('密码已复制到剪贴板')}: ${newPassword}`);
-                      }}
+                      suffix={
+                        <Button
+                          icon={<IconCopy />}
+                          type="tertiary"
+                          theme="borderless"
+                          onClick={async () => {
+                            await copy(newPassword);
+                            showNotice(`${t('密码已复制到剪贴板：')} ${newPassword}`);
+                          }}
+                        >
+                          {t('复制')}
+                        </Button>
+                      }
                     />
                   )}
 
@@ -133,9 +162,9 @@ const PasswordResetConfirm = () => {
                       size="large"
                       onClick={handleSubmit}
                       loading={loading}
-                      disabled={disableButton || newPassword}
+                      disabled={disableButton || newPassword || !isValidResetLink}
                     >
-                      {newPassword ? t('密码重置完成') : t('提交')}
+                      {newPassword ? t('密码重置完成') : t('确认重置密码')}
                     </Button>
                   </div>
                 </Form>

web/src/components/auth/PasswordResetForm.js

@@ -55,7 +55,10 @@ const PasswordResetForm = () => {
   }
 
   async function handleSubmit(e) {
-    if (!email) return;
+    if (!email) {
+      showError(t('请输入邮箱地址'));
+      return;
+    }
     if (turnstileEnabled && turnstileToken === '') {
       showInfo(t('请稍后几秒重试，Turnstile 正在检查用户环境！'));
       return;

web/src/components/common/Loading.js

@@ -14,7 +14,7 @@ const Loading = ({ prompt: name = '', size = 'large' }) => {
           tip={null}
         />
         <span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
-          {name ? t('加载{{name}}中...', { name }) : t('加载中...')}
+          {name ? t('{{name}}', { name }) : t('加载中...')}
         </span>
       </div>
     </div>

web/src/i18n/locales/en.json

@@ -265,10 +265,15 @@
   "设置页脚": "Set Footer",
   "新版本": "New Version",
   "关闭": "Close",
-  "密码已重置并已复制到剪贴板": "Password has been reset and copied to clipboard",
+  "密码已重置并已复制到剪贴板：": "Password has been reset and copied to clipboard: ",
+  "密码已复制到剪贴板：": "Password has been copied to clipboard: ",
   "密码重置确认": "Password Reset Confirmation",
   "邮箱地址": "Email address",
   "提交": "Submit",
+  "等待获取邮箱信息...": "Waiting to get email information...",
+  "确认重置密码": "Confirm Password Reset",
+  "无效的重置链接，请重新发起密码重置请求": "Invalid reset link, please initiate a new password reset request",
+  "请输入邮箱地址": "Please enter the email address",
   "请稍后几秒重试": "Please retry in a few seconds",
   "正在检查用户环境": "Checking user environment",
   "重置邮件发送成功": "Reset mail sent successfully",