feat: able to set the token's expiration time and number of uses

2025-11-11 08:33:41 +08:00 · 2023-04-24 20:52:40 +08:00
parent c0bb2338de
commit 918ba60802
7 changed files with 228 additions and 42 deletions
--- a/web/src/pages/Token/AddToken.js
+++ b/web/src/pages/Token/AddToken.js
@@ -1,21 +1,48 @@
 import React, { useState } from 'react';
 import { Button, Form, Header, Segment } from 'semantic-ui-react';
-import { API, showError, showSuccess } from '../../helpers';
+import { API, showError, showSuccess, timestamp2string } from '../../helpers';

 const AddToken = () => {
  const originInputs = {
    name: '',
+    remain_times: -1,
+    expired_time: -1
  };
  const [inputs, setInputs] = useState(originInputs);
-  const { name, display_name, password } = inputs;
+  const { name, remain_times, expired_time } = inputs;

  const handleInputChange = (e, { name, value }) => {
    setInputs((inputs) => ({ ...inputs, [name]: value }));
  };

+  const setExpiredTime = (month, day, hour, minute) => {
+    let now = new Date();
+    let timestamp = now.getTime() / 1000;
+    let seconds = month * 30 * 24 * 60 * 60;
+    seconds += day * 24 * 60 * 60;
+    seconds += hour * 60 * 60;
+    seconds += minute * 60;
+    if (seconds !== 0) {
+      timestamp += seconds;
+      setInputs({ ...inputs, expired_time: timestamp2string(timestamp) });
+    } else {
+      setInputs({ ...inputs, expired_time: -1 });
+    }
+  };
+
  const submit = async () => {
    if (inputs.name === '') return;
-    const res = await API.post(`/api/token/`, inputs);
+    let localInputs = inputs;
+    localInputs.remain_times = parseInt(localInputs.remain_times);
+    if (localInputs.expired_time !== -1) {
+      let time = Date.parse(localInputs.expired_time);
+      if (isNaN(time)) {
+        showError('过期时间格式错误！');
+        return;
+      }
+      localInputs.expired_time = Math.ceil(time / 1000);
+    }
+    const res = await API.post(`/api/token/`, localInputs);
    const { success, message } = res.data;
    if (success) {
      showSuccess('令牌创建成功！');
@@ -28,19 +55,54 @@ const AddToken = () => {
  return (
    <>
      <Segment>
-        <Header as="h3">创建新的令牌</Header>
-        <Form autoComplete="off">
+        <Header as='h3'>创建新的令牌</Header>
+        <Form autoComplete='off'>
          <Form.Field>
            <Form.Input
-              label="名称"
-              name="name"
+              label='名称'
+              name='name'
              placeholder={'请输入名称'}
              onChange={handleInputChange}
              value={name}
-              autoComplete="off"
+              autoComplete='off'
              required
            />
          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='剩余次数'
+              name='remain_times'
+              placeholder={'请输入剩余次数，-1 表示无限制'}
+              onChange={handleInputChange}
+              value={remain_times}
+              autoComplete='off'
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='过期时间'
+              name='expired_time'
+              placeholder={'请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制'}
+              onChange={handleInputChange}
+              value={expired_time}
+              autoComplete='off'
+            />
+          </Form.Field>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(0, 0, 0, 0);
+          }}>永不过期</Button>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(1, 0, 0, 0);
+          }}>一个月后过期</Button>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(0, 1, 0, 0);
+          }}>一天后过期</Button>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(0, 0, 1, 0);
+          }}>一小时后过期</Button>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(0, 0, 0, 1);
+          }}>一分钟后过期</Button>
          <Button type={'submit'} onClick={submit}>
            提交
          </Button>
--- a/web/src/pages/Token/EditToken.js
+++ b/web/src/pages/Token/EditToken.js
@@ -1,25 +1,45 @@
 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';
+import { API, showError, showSuccess, timestamp2string } from '../../helpers';

 const EditToken = () => {
  const params = useParams();
  const tokenId = params.id;
  const [loading, setLoading] = useState(true);
  const [inputs, setInputs] = useState({
-    name: ''
+    name: '',
+    remain_times: -1,
+    expired_time: -1
  });
-  const { name } = inputs;
+  const { name, remain_times, expired_time } = inputs;
+
  const handleInputChange = (e, { name, value }) => {
    setInputs((inputs) => ({ ...inputs, [name]: value }));
  };

+  const setExpiredTime = (month, day, hour, minute) => {
+    let now = new Date();
+    let timestamp = now.getTime() / 1000;
+    let seconds = month * 30 * 24 * 60 * 60;
+    seconds += day * 24 * 60 * 60;
+    seconds += hour * 60 * 60;
+    seconds += minute * 60;
+    if (seconds !== 0) {
+      timestamp += seconds;
+      setInputs({ ...inputs, expired_time: timestamp2string(timestamp) });
+    } else {
+      setInputs({ ...inputs, expired_time: -1 });
+    }
+  };
+
  const loadToken = async () => {
    let res = await API.get(`/api/token/${tokenId}`);
    const { success, message, data } = res.data;
    if (success) {
-      data.password = '';
+      if (data.expired_time !== -1) {
+        data.expired_time = timestamp2string(data.expired_time);
+      }
      setInputs(data);
    } else {
      showError(message);
@@ -31,7 +51,17 @@ const EditToken = () => {
  }, []);

  const submit = async () => {
-    let res = await API.put(`/api/token/`, { ...inputs, id: parseInt(tokenId) });
+    let localInputs = inputs;
+    localInputs.remain_times = parseInt(localInputs.remain_times);
+    if (localInputs.expired_time !== -1) {
+      let time = Date.parse(localInputs.expired_time);
+      if (isNaN(time)) {
+        showError('过期时间格式错误！');
+        return;
+      }
+      localInputs.expired_time = Math.ceil(time / 1000);
+    }
+    let res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(tokenId) });
    const { success, message } = res.data;
    if (success) {
      showSuccess('令牌更新成功！');
@@ -55,6 +85,41 @@ const EditToken = () => {
              autoComplete='off'
            />
          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='剩余次数'
+              name='remain_times'
+              placeholder={'请输入剩余次数，-1 表示无限制'}
+              onChange={handleInputChange}
+              value={remain_times}
+              autoComplete='off'
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='过期时间'
+              name='expired_time'
+              placeholder={'请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制'}
+              onChange={handleInputChange}
+              value={expired_time}
+              autoComplete='off'
+            />
+          </Form.Field>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(0, 0, 0, 0);
+          }}>永不过期</Button>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(1, 0, 0, 0);
+          }}>一个月后过期</Button>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(0, 1, 0, 0);
+          }}>一天后过期</Button>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(0, 0, 1, 0);
+          }}>一小时后过期</Button>
+          <Button type={'button'} onClick={() => {
+            setExpiredTime(0, 0, 0, 1);
+          }}>一分钟后过期</Button>
          <Button onClick={submit}>提交</Button>
        </Form>
      </Segment>