feat: add chat button for each token (#363)

* fork

* fork

* chore: update style

---------

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

web/src/components/PersonalSetting.js

@@ -25,6 +25,8 @@ const PersonalSetting = () => {
   const [loading, setLoading] = useState(false);
   const [disableButton, setDisableButton] = useState(false);
   const [countdown, setCountdown] = useState(30);
+  const [affLink, setAffLink] = useState("");
+  const [systemToken, setSystemToken] = useState("");
 
   useEffect(() => {
     let status = localStorage.getItem('status');
@@ -59,8 +61,10 @@ const PersonalSetting = () => {
     const res = await API.get('/api/user/token');
     const { success, message, data } = res.data;
     if (success) {
+      setSystemToken(data);
+      setAffLink(""); 
       await copy(data);
-      showSuccess(`令牌已重置并已复制到剪贴板：${data}`);
+      showSuccess(`令牌已重置并已复制到剪贴板`);
     } else {
       showError(message);
     }
@@ -71,13 +75,27 @@ const PersonalSetting = () => {
     const { success, message, data } = res.data;
     if (success) {
       let link = `${window.location.origin}/register?aff=${data}`;
+      setAffLink(link);
+      setSystemToken("");
       await copy(link);
-      showNotice(`邀请链接已复制到剪切板：${link}`);
+      showSuccess(`邀请链接已复制到剪切板`);
     } else {
       showError(message);
     }
   };
 
+  const handleAffLinkClick = async (e) => {
+    e.target.select();
+    await copy(e.target.value);
+    showSuccess(`邀请链接已复制到剪切板`);
+  };
+
+  const handleSystemTokenClick = async (e) => {
+    e.target.select();
+    await copy(e.target.value);
+    showSuccess(`系统令牌已复制到剪切板`);
+  };
+
   const deleteAccount = async () => {
     if (inputs.self_account_deletion_confirmation !== userState.user.username) {
       showError('请输入你的账户名以确认删除！');
@@ -168,6 +186,25 @@ const PersonalSetting = () => {
       <Button onClick={() => {
         setShowAccountDeleteModal(true);
       }}>删除个人账户</Button>
+      
+      {systemToken && (
+        <Form.Input 
+          fluid 
+          readOnly 
+          value={systemToken} 
+          onClick={handleSystemTokenClick}
+          style={{ marginTop: '10px' }}
+        />
+      )}
+      {affLink && (
+        <Form.Input 
+          fluid 
+          readOnly 
+          value={affLink} 
+          onClick={handleAffLinkClick}
+          style={{ marginTop: '10px' }}
+        />
+      )}
       <Divider />
       <Header as='h3'>账号绑定</Header>
       {
@@ -262,6 +299,7 @@ const PersonalSetting = () => {
               ) : (
                 <></>
               )}
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
               <Button
                 color=''
                 fluid
@@ -269,8 +307,17 @@ const PersonalSetting = () => {
                 onClick={bindEmail}
                 loading={loading}
               >
-                绑定
+                确认绑定
               </Button>
+              <div style={{ width: '1rem' }}></div> 
+              <Button
+                fluid
+                size='large'
+                onClick={() => setShowEmailBindModal(false)}
+              >
+                取消
+              </Button>
+              </div>
             </Form>
           </Modal.Description>
         </Modal.Content>
@@ -282,8 +329,9 @@ const PersonalSetting = () => {
         size={'tiny'}
         style={{ maxWidth: '450px' }}
       >
-        <Modal.Header>确认删除自己的帐户</Modal.Header>
+        <Modal.Header>危险操作</Modal.Header>
         <Modal.Content>
+        <Message>您正在删除自己的帐户，将清空所有数据且不可恢复</Message>
           <Modal.Description>
             <Form size='large'>
               <Form.Input
@@ -303,15 +351,25 @@ const PersonalSetting = () => {
               ) : (
                 <></>
               )}
-              <Button
-                color='red'
-                fluid
-                size='large'
-                onClick={deleteAccount}
-                loading={loading}
-              >
-                删除
-              </Button>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
+                <Button
+                  color='red'
+                  fluid
+                  size='large'
+                  onClick={deleteAccount}
+                  loading={loading}
+                >
+                  确认删除
+                </Button>
+                <div style={{ width: '1rem' }}></div>
+                <Button
+                  fluid
+                  size='large'
+                  onClick={() => setShowAccountDeleteModal(false)}
+                >
+                  取消
+                </Button>
+              </div>
             </Form>
           </Modal.Description>
         </Modal.Content>