Able to manage token now

common/utils.go

@@ -10,6 +10,7 @@ import (
 	"runtime"
 	"strconv"
 	"strings"
+	"time"
 )
 
 func OpenBrowser(url string) {
@@ -132,6 +133,10 @@ func GetUUID() string {
 	return code
 }
 
+func GetTimestamp() int64 {
+	return time.Now().Unix()
+}
+
 func Max(a int, b int) int {
 	if a >= b {
 		return a

controller/token.go

@@ -51,6 +51,7 @@ func SearchTokens(c *gin.Context) {
 
 func GetToken(c *gin.Context) {
 	id, err := strconv.Atoi(c.Param("id"))
+	userId := c.GetInt("id")
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,
@@ -58,7 +59,7 @@ func GetToken(c *gin.Context) {
 		})
 		return
 	}
-	token, err := model.GetTokenById(id)
+	token, err := model.GetTokenByIds(id, userId)
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,
@@ -84,7 +85,21 @@ func AddToken(c *gin.Context) {
 		})
 		return
 	}
-	err = token.Insert()
+	if len(token.Name) == 0 || len(token.Name) > 20 {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": "令牌名称长度必须在1-20之间",
+		})
+		return
+	}
+	cleanToken := model.Token{
+		UserId:       c.GetInt("id"),
+		Name:         token.Name,
+		Key:          common.GetUUID(),
+		CreatedTime:  common.GetTimestamp(),
+		AccessedTime: common.GetTimestamp(),
+	}
+	err = cleanToken.Insert()
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,
@@ -101,8 +116,8 @@ func AddToken(c *gin.Context) {
 
 func DeleteToken(c *gin.Context) {
 	id, _ := strconv.Atoi(c.Param("id"))
-	token := model.Token{Id: id}
+	userId := c.GetInt("id")
-	err := token.Delete()
+	err := model.DeleteTokenById(id, userId)
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,
@@ -118,6 +133,7 @@ func DeleteToken(c *gin.Context) {
 }
 
 func UpdateToken(c *gin.Context) {
+	userId := c.GetInt("id")
 	token := model.Token{}
 	err := c.ShouldBindJSON(&token)
 	if err != nil {
@@ -127,7 +143,17 @@ func UpdateToken(c *gin.Context) {
 		})
 		return
 	}
-	err = token.Update()
+	cleanToken, err := model.GetTokenByIds(token.Id, userId)
+	if err != nil {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": err.Error(),
+		})
+		return
+	}
+	cleanToken.Name = token.Name
+	cleanToken.Status = token.Status
+	err = cleanToken.Update()
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,
@@ -138,6 +164,7 @@ func UpdateToken(c *gin.Context) {
 	c.JSON(http.StatusOK, gin.H{
 		"success": true,
 		"message": "",
+		"data":    cleanToken,
 	})
 	return
 }

model/main.go

@@ -56,6 +56,10 @@ func InitDB() (err error) {
 		if err != nil {
 			return err
 		}
+		err = db.AutoMigrate(&Token{})
+		if err != nil {
+			return err
+		}
 		err = db.AutoMigrate(&User{})
 		if err != nil {
 			return err

model/token.go

@@ -1,6 +1,7 @@
 package model
 
 import (
+	"errors"
 	_ "gorm.io/driver/sqlite"
 )
 
@@ -9,7 +10,7 @@ type Token struct {
 	UserId       int    `json:"user_id"`
 	Key          string `json:"key"`
 	Status       int    `json:"status" gorm:"default:1"`
-	Name         string `json:"name" gorm:"unique;index"`
+	Name         string `json:"name" gorm:"index" `
 	CreatedTime  int64  `json:"created_time" gorm:"bigint"`
 	AccessedTime int64  `json:"accessed_time" gorm:"bigint"`
 }
@@ -17,19 +18,22 @@ type Token struct {
 func GetAllUserTokens(userId int, startIdx int, num int) ([]*Token, error) {
 	var tokens []*Token
 	var err error
-	err = DB.Where("userId = ?", userId).Order("id desc").Limit(num).Offset(startIdx).Omit("key").Find(&tokens).Error
+	err = DB.Where("user_id = ?", userId).Order("id desc").Limit(num).Offset(startIdx).Find(&tokens).Error
 	return tokens, err
 }
 
 func SearchUserTokens(userId int, keyword string) (tokens []*Token, err error) {
-	err = DB.Where("userId = ?", userId).Omit("key").Where("id = ? or name LIKE ?", keyword, keyword+"%").Find(&tokens).Error
+	err = DB.Where("user_id = ?", userId).Where("id = ? or name LIKE ?", keyword, keyword+"%").Find(&tokens).Error
 	return tokens, err
 }
 
-func GetTokenById(id int) (*Token, error) {
+func GetTokenByIds(id int, userId int) (*Token, error) {
-	token := Token{Id: id}
+	if id == 0 || userId == 0 {
+		return nil, errors.New("id 或 userId 为空！")
+	}
+	token := Token{Id: id, UserId: userId}
 	var err error = nil
-	err = DB.Omit("key").Select([]string{"id", "type"}).First(&token, "id = ?", id).Error
+	err = DB.First(&token, "id = ? and user_id = ?", id, userId).Error
 	return &token, err
 }
 
@@ -50,3 +54,16 @@ func (token *Token) Delete() error {
 	err = DB.Delete(token).Error
 	return err
 }
+
+func DeleteTokenById(id int, userId int) (err error) {
+	// Why we need userId here? In case user want to delete other's token.
+	if id == 0 || userId == 0 {
+		return errors.New("id 或 userId 为空！")
+	}
+	token := Token{Id: id, UserId: userId}
+	err = DB.Where(token).First(&token).Error
+	if err != nil {
+		return err
+	}
+	return token.Delete()
+}

web/src/App.js

@@ -16,6 +16,10 @@ import PasswordResetConfirm from './components/PasswordResetConfirm';
 import { UserContext } from './context/User';
 import Channel from './pages/Channel';
 import Token from './pages/Token';
+import EditToken from './pages/Token/EditToken';
+import AddToken from './pages/Token/AddToken';
+import EditChannel from './pages/Channel/EditChannel';
+import AddChannel from './pages/Channel/AddChannel';
 
 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
@@ -73,12 +77,44 @@ function App() {
           </PrivateRoute>
         }
       />
+      <Route
+        path='/channel/edit/:id'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <EditChannel />
+          </Suspense>
+        }
+      />
+      <Route
+        path='/channel/add'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <AddChannel />
+          </Suspense>
+        }
+      />
       <Route
         path='/token'
         element={
           <Token />
         }
       />
+      <Route
+        path='/token/edit/:id'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <EditToken />
+          </Suspense>
+        }
+      />
+      <Route
+        path='/token/add'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <AddToken />
+          </Suspense>
+        }
+      />
       <Route
         path='/user'
         element={

web/src/components/TokensTable.js

@@ -1,40 +1,35 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
-import { API, showError, showSuccess } from '../helpers';
+import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
 
-function renderRole(role) {
+function renderTimestamp(timestamp) {
-  switch (role) {
+  return (
-    case 1:
+    <>
-      return <Label>普通用户</Label>;
+      {timestamp2string(timestamp)}
-    case 10:
+    </>
-      return <Label color='yellow'>管理员</Label>;
+  );
-    case 100:
-      return <Label color='orange'>超级管理员</Label>;
-    default:
-      return <Label color='red'>未知身份</Label>;
-  }
 }
 
 const TokensTable = () => {
-  const [users, setUsers] = useState([]);
+  const [tokens, setTokens] = useState([]);
   const [loading, setLoading] = useState(true);
   const [activePage, setActivePage] = useState(1);
   const [searchKeyword, setSearchKeyword] = useState('');
   const [searching, setSearching] = useState(false);
 
-  const loadUsers = async (startIdx) => {
+  const loadTokens = async (startIdx) => {
-    const res = await API.get(`/api/user/?p=${startIdx}`);
+    const res = await API.get(`/api/token/?p=${startIdx}`);
     const { success, message, data } = res.data;
     if (success) {
       if (startIdx === 0) {
-        setUsers(data);
+        setTokens(data);
       } else {
-        let newUsers = users;
+        let newTokens = tokens;
-        newUsers.push(...data);
+        newTokens.push(...data);
-        setUsers(newUsers);
+        setTokens(newTokens);
       }
     } else {
       showError(message);
@@ -44,55 +39,63 @@ const TokensTable = () => {
 
   const onPaginationChange = (e, { activePage }) => {
     (async () => {
-      if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
+      if (activePage === Math.ceil(tokens.length / ITEMS_PER_PAGE) + 1) {
         // In this case we have to load more data and then append them.
-        await loadUsers(activePage - 1);
+        await loadTokens(activePage - 1);
       }
       setActivePage(activePage);
     })();
   };
 
   useEffect(() => {
-    loadUsers(0)
+    loadTokens(0)
       .then()
       .catch((reason) => {
         showError(reason);
       });
   }, []);
 
-  const manageUser = (username, action, idx) => {
+  const manageToken = async (id, action, idx) => {
-    (async () => {
+    let data = { id };
-      const res = await API.post('/api/user/manage', {
+    let res;
-        username,
+    switch (action) {
-        action,
+      case 'delete':
-      });
+        res = await API.delete(`/api/token/${id}/`);
-      const { success, message } = res.data;
+        break;
-      if (success) {
+      case 'enable':
-        showSuccess('操作成功完成！');
+        data.status = 1;
-        let user = res.data.data;
+        res = await API.put('/api/token/', data);
-        let newUsers = [...users];
+        break;
-        let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      case 'disable':
-        if (action === 'delete') {
+        data.status = 2;
-          newUsers[realIdx].deleted = true;
+        res = await API.put('/api/token/', data);
-        } else {
+        break;
-          newUsers[realIdx].status = user.status;
+    }
-          newUsers[realIdx].role = user.role;
+    const { success, message } = res.data;
-        }
+    if (success) {
-        setUsers(newUsers);
+      showSuccess('操作成功完成！');
+      let token = res.data.data;
+      let newTokens = [...tokens];
+      let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      if (action === 'delete') {
+        newTokens[realIdx].deleted = true;
       } else {
-        showError(message);
+        newTokens[realIdx].status = token.status;
       }
-    })();
+      setTokens(newTokens);
+    } else {
+      showError(message);
+    }
   };
 
   const renderStatus = (status) => {
     switch (status) {
       case 1:
-        return <Label basic>已激活</Label>;
+        return <Label basic color='green'>已启用</Label>;
       case 2:
         return (
           <Label basic color='red'>
-            已封禁
+            已禁用
           </Label>
         );
       default:
@@ -104,18 +107,18 @@ const TokensTable = () => {
     }
   };
 
-  const searchUsers = async () => {
+  const searchTokens = async () => {
     if (searchKeyword === '') {
       // if keyword is blank, load files instead.
-      await loadUsers(0);
+      await loadTokens(0);
       setActivePage(1);
       return;
     }
     setSearching(true);
-    const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
+    const res = await API.get(`/api/token/search?keyword=${searchKeyword}/`);
     const { success, message, data } = res.data;
     if (success) {
-      setUsers(data);
+      setTokens(data);
       setActivePage(1);
     } else {
       showError(message);
@@ -127,28 +130,28 @@ const TokensTable = () => {
     setSearchKeyword(value.trim());
   };
 
-  const sortUser = (key) => {
+  const sortToken = (key) => {
-    if (users.length === 0) return;
+    if (tokens.length === 0) return;
     setLoading(true);
-    let sortedUsers = [...users];
+    let sortedTokens = [...tokens];
-    sortedUsers.sort((a, b) => {
+    sortedTokens.sort((a, b) => {
       return ('' + a[key]).localeCompare(b[key]);
     });
-    if (sortedUsers[0].id === users[0].id) {
+    if (sortedTokens[0].id === tokens[0].id) {
-      sortedUsers.reverse();
+      sortedTokens.reverse();
     }
-    setUsers(sortedUsers);
+    setTokens(sortedTokens);
     setLoading(false);
   };
 
   return (
     <>
-      <Form onSubmit={searchUsers}>
+      <Form onSubmit={searchTokens}>
         <Form.Input
           icon='search'
           fluid
           iconPosition='left'
-          placeholder='搜索用户的 ID，用户名，显示名称，以及邮箱地址 ...'
+          placeholder='搜索令牌的 ID 和名称 ...'
           value={searchKeyword}
           loading={searching}
           onChange={handleKeywordChange}
@@ -161,87 +164,82 @@ const TokensTable = () => {
             <Table.HeaderCell
               style={{ cursor: 'pointer' }}
               onClick={() => {
-                sortUser('username');
+                sortToken('id');
               }}
             >
-              用户名
+              ID
             </Table.HeaderCell>
             <Table.HeaderCell
               style={{ cursor: 'pointer' }}
               onClick={() => {
-                sortUser('display_name');
+                sortToken('name');
               }}
             >
-              显示名称
+              名称
             </Table.HeaderCell>
             <Table.HeaderCell
               style={{ cursor: 'pointer' }}
               onClick={() => {
-                sortUser('email');
+                sortToken('status');
-              }}
-            >
-              邮箱地址
-            </Table.HeaderCell>
-            <Table.HeaderCell
-              style={{ cursor: 'pointer' }}
-              onClick={() => {
-                sortUser('role');
-              }}
-            >
-              用户角色
-            </Table.HeaderCell>
-            <Table.HeaderCell
-              style={{ cursor: 'pointer' }}
-              onClick={() => {
-                sortUser('status');
               }}
             >
               状态
             </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortToken('created_time');
+              }}
+            >
+              创建时间
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortToken('accessed_time');
+              }}
+            >
+              访问时间
+            </Table.HeaderCell>
             <Table.HeaderCell>操作</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
 
         <Table.Body>
-          {users
+          {tokens
             .slice(
               (activePage - 1) * ITEMS_PER_PAGE,
               activePage * ITEMS_PER_PAGE
             )
-            .map((user, idx) => {
+            .map((token, idx) => {
-              if (user.deleted) return <></>;
+              if (token.deleted) return <></>;
               return (
-                <Table.Row key={user.id}>
+                <Table.Row key={token.id}>
-                  <Table.Cell>{user.username}</Table.Cell>
+                  <Table.Cell>{token.id}</Table.Cell>
-                  <Table.Cell>{user.display_name}</Table.Cell>
+                  <Table.Cell>{token.name ? token.name : '无'}</Table.Cell>
-                  <Table.Cell>{user.email ? user.email : '无'}</Table.Cell>
+                  <Table.Cell>{renderStatus(token.status)}</Table.Cell>
-                  <Table.Cell>{renderRole(user.role)}</Table.Cell>
+                  <Table.Cell>{renderTimestamp(token.created_time)}</Table.Cell>
-                  <Table.Cell>{renderStatus(user.status)}</Table.Cell>
+                  <Table.Cell>{renderTimestamp(token.accessed_time)}</Table.Cell>
                   <Table.Cell>
                     <div>
                       <Button
                         size={'small'}
                         positive
-                        onClick={() => {
+                        onClick={async () => {
-                          manageUser(user.username, 'promote', idx);
+                          if (await copy(token.key)) {
+                            showSuccess('已复制到剪贴板！');
+                          } else {
+                            showError('复制失败！');
+                          }
                         }}
                       >
-                        提升
+                        复制
-                      </Button>
-                      <Button
-                        size={'small'}
-                        color={'yellow'}
-                        onClick={() => {
-                          manageUser(user.username, 'demote', idx);
-                        }}
-                      >
-                        降级
                       </Button>
                       <Button
                         size={'small'}
                         negative
                         onClick={() => {
-                          manageUser(user.username, 'delete', idx);
+                          manageToken(token.id, 'delete', idx);
                         }}
                       >
                         删除
@@ -249,19 +247,19 @@ const TokensTable = () => {
                       <Button
                         size={'small'}
                         onClick={() => {
-                          manageUser(
+                          manageToken(
-                            user.username,
+                            token.id,
-                            user.status === 1 ? 'disable' : 'enable',
+                            token.status === 1 ? 'disable' : 'enable',
                             idx
                           );
                         }}
                       >
-                        {user.status === 1 ? '禁用' : '启用'}
+                        {token.status === 1 ? '禁用' : '启用'}
                       </Button>
                       <Button
                         size={'small'}
                         as={Link}
-                        to={'/user/edit/' + user.id}
+                        to={'/token/edit/' + token.id}
                       >
                         编辑
                       </Button>
@@ -275,8 +273,8 @@ const TokensTable = () => {
         <Table.Footer>
           <Table.Row>
             <Table.HeaderCell colSpan='6'>
-              <Button size='small' as={Link} to='/user/add' loading={loading}>
+              <Button size='small' as={Link} to='/token/add' loading={loading}>
-                添加新的用户
+                添加新的令牌
               </Button>
               <Pagination
                 floated='right'
@@ -285,8 +283,8 @@ const TokensTable = () => {
                 size='small'
                 siblingRange={1}
                 totalPages={
-                  Math.ceil(users.length / ITEMS_PER_PAGE) +
+                  Math.ceil(tokens.length / ITEMS_PER_PAGE) +
-                  (users.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
+                  (tokens.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
                 }
               />
             </Table.HeaderCell>

web/src/helpers/utils.js

@@ -97,3 +97,41 @@ export function removeTrailingSlash(url) {
     return url;
   }
 }
+
+export function timestamp2string(timestamp) {
+  let date = new Date(timestamp * 1000);
+  let year = date.getFullYear().toString();
+  let month = (date.getMonth() + 1).toString();
+  let day = date.getDate().toString();
+  let hour = date.getHours().toString();
+  let minute = date.getMinutes().toString();
+  let second = date.getSeconds().toString();
+  if (month.length === 1) {
+    month = '0' + month;
+  }
+  if (day.length === 1) {
+    day = '0' + day;
+  }
+  if (hour.length === 1) {
+    hour = '0' + hour;
+  }
+  if (minute.length === 1) {
+    minute = '0' + minute;
+  }
+  if (second.length === 1) {
+    second = '0' + second;
+  }
+  return (
+    year +
+    '-' +
+    month +
+    '-' +
+    day +
+    ' ' +
+    hour +
+    ':' +
+    minute +
+    ':' +
+    second
+  );
+}

web/src/pages/Channel/AddChannel.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { API, showError, showSuccess } from '../../helpers';
+
+const AddChannel = () => {
+  const originInputs = {
+    username: '',
+    display_name: '',
+    password: '',
+  };
+  const [inputs, setInputs] = useState(originInputs);
+  const { username, display_name, password } = inputs;
+
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const submit = async () => {
+    if (inputs.username === '' || inputs.password === '') return;
+    const res = await API.post(`/api/user/`, inputs);
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('用户账户创建成功！');
+      setInputs(originInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Segment>
+        <Header as="h3">创建新用户账户</Header>
+        <Form autoComplete="off">
+          <Form.Field>
+            <Form.Input
+              label="用户名"
+              name="username"
+              placeholder={'请输入用户名'}
+              onChange={handleInputChange}
+              value={username}
+              autoComplete="off"
+              required
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label="显示名称"
+              name="display_name"
+              placeholder={'请输入显示名称'}
+              onChange={handleInputChange}
+              value={display_name}
+              autoComplete="off"
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label="密码"
+              name="password"
+              type={'password'}
+              placeholder={'请输入密码'}
+              onChange={handleInputChange}
+              value={password}
+              autoComplete="off"
+              required
+            />
+          </Form.Field>
+          <Button type={'submit'} onClick={submit}>
+            提交
+          </Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default AddChannel;

web/src/pages/Channel/EditChannel.js

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { useParams } from 'react-router-dom';
+import { API, showError, showSuccess } from '../../helpers';
+
+const EditChannel = () => {
+  const params = useParams();
+  const userId = params.id;
+  const [loading, setLoading] = useState(true);
+  const [inputs, setInputs] = useState({
+    username: '',
+    display_name: '',
+    password: '',
+    github_id: '',
+    wechat_id: '',
+    email: '',
+  });
+  const { username, display_name, password, github_id, wechat_id, email } =
+    inputs;
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const loadUser = async () => {
+    let res = undefined;
+    if (userId) {
+      res = await API.get(`/api/user/${userId}`);
+    } else {
+      res = await API.get(`/api/user/self`);
+    }
+    const { success, message, data } = res.data;
+    if (success) {
+      data.password = '';
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    loadUser().then();
+  }, []);
+
+  const submit = async () => {
+    let res = undefined;
+    if (userId) {
+      res = await API.put(`/api/user/`, { ...inputs, id: parseInt(userId) });
+    } else {
+      res = await API.put(`/api/user/self`, inputs);
+    }
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('用户信息更新成功！');
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Segment loading={loading}>
+        <Header as='h3'>更新用户信息</Header>
+        <Form autoComplete='off'>
+          <Form.Field>
+            <Form.Input
+              label='用户名'
+              name='username'
+              placeholder={'请输入新的用户名'}
+              onChange={handleInputChange}
+              value={username}
+              autoComplete='off'
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='密码'
+              name='password'
+              type={'password'}
+              placeholder={'请输入新的密码'}
+              onChange={handleInputChange}
+              value={password}
+              autoComplete='off'
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='显示名称'
+              name='display_name'
+              placeholder={'请输入新的显示名称'}
+              onChange={handleInputChange}
+              value={display_name}
+              autoComplete='off'
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='已绑定的 GitHub 账户'
+              name='github_id'
+              value={github_id}
+              autoComplete='off'
+              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+              readOnly
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='已绑定的微信账户'
+              name='wechat_id'
+              value={wechat_id}
+              autoComplete='off'
+              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+              readOnly
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='已绑定的邮箱账户'
+              name='email'
+              value={email}
+              autoComplete='off'
+              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+              readOnly
+            />
+          </Form.Field>
+          <Button onClick={submit}>提交</Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default EditChannel;

web/src/pages/Token/AddToken.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { API, showError, showSuccess } from '../../helpers';
+
+const AddToken = () => {
+  const originInputs = {
+    name: '',
+  };
+  const [inputs, setInputs] = useState(originInputs);
+  const { name, display_name, password } = inputs;
+
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const submit = async () => {
+    if (inputs.name === '') return;
+    const res = await API.post(`/api/token/`, inputs);
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('令牌创建成功！');
+      setInputs(originInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Segment>
+        <Header as="h3">创建新的令牌</Header>
+        <Form autoComplete="off">
+          <Form.Field>
+            <Form.Input
+              label="名称"
+              name="name"
+              placeholder={'请输入名称'}
+              onChange={handleInputChange}
+              value={name}
+              autoComplete="off"
+              required
+            />
+          </Form.Field>
+          <Button type={'submit'} onClick={submit}>
+            提交
+          </Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default AddToken;

web/src/pages/Token/EditToken.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { useParams } from 'react-router-dom';
+import { API, showError, showSuccess } from '../../helpers';
+
+const EditToken = () => {
+  const params = useParams();
+  const tokenId = params.id;
+  const [loading, setLoading] = useState(true);
+  const [inputs, setInputs] = useState({
+    name: ''
+  });
+  const { name } = inputs;
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const loadToken = async () => {
+    let res = await API.get(`/api/token/${tokenId}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      data.password = '';
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    loadToken().then();
+  }, []);
+
+  const submit = async () => {
+    let res = await API.put(`/api/token/`, { ...inputs, id: parseInt(tokenId) });
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('令牌更新成功！');
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Segment loading={loading}>
+        <Header as='h3'>更新令牌信息</Header>
+        <Form autoComplete='off'>
+          <Form.Field>
+            <Form.Input
+              label='名称'
+              name='name'
+              placeholder={'请输入新的名称'}
+              onChange={handleInputChange}
+              value={name}
+              autoComplete='off'
+            />
+          </Form.Field>
+          <Button onClick={submit}>提交</Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default EditToken;