chore: optimize frontend (#293)

* main

* chore: update style

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/src/components/PasswordResetConfirm.js

@@ -12,6 +12,11 @@ const PasswordResetConfirm = () => {
 
   const [loading, setLoading] = useState(false);
 
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
+
+  const [newPassword, setNewPassword] = useState('');
+
   const [searchParams, setSearchParams] = useSearchParams();
   useEffect(() => {
     let token = searchParams.get('token');
@@ -22,7 +27,21 @@ const PasswordResetConfirm = () => {
     });
   }, []);
 
+  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]);
+
   async function handleSubmit(e) {
+    setDisableButton(true);
     if (!email) return;
     setLoading(true);
     const res = await API.post(`/api/user/reset`, {
@@ -32,14 +51,15 @@ const PasswordResetConfirm = () => {
     const { success, message } = res.data;
     if (success) {
       let password = res.data.data;
+      setNewPassword(password);
       await copy(password);
-      showNotice(`密码已重置并已复制到剪贴板：${password}`);
+      showNotice(`新密码已复制到剪贴板：${password}`);
     } else {
       showError(message);
     }
     setLoading(false);
   }
-
+  
   return (
     <Grid textAlign='center' style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
@@ -57,20 +77,37 @@ const PasswordResetConfirm = () => {
               value={email}
               readOnly
             />
+            {newPassword && (
+              <Form.Input
+              fluid
+              icon='lock'
+              iconPosition='left'
+              placeholder='新密码'
+              name='newPassword'
+              value={newPassword}
+              readOnly
+              onClick={(e) => {
+                e.target.select();
+                navigator.clipboard.writeText(newPassword);
+                showNotice(`密码已复制到剪贴板：${newPassword}`);
+              }}
+            />            
+            )}
             <Button
-              color=''
+              color='green'
               fluid
               size='large'
               onClick={handleSubmit}
               loading={loading}
+              disabled={disableButton}
             >
-              提交
+              {disableButton ? `密码重置完成` : '提交'}
             </Button>
           </Segment>
         </Form>
       </Grid.Column>
     </Grid>
-  );
+  );  
 };
 
 export default PasswordResetConfirm;