feat: improve the token edit page

web/src/App.js

@@ -18,7 +18,6 @@ import { StatusContext } from './context/Status';
 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';
 
@@ -116,7 +115,7 @@ function App() {
         path='/token/add'
         element={
           <Suspense fallback={<Loading></Loading>}>
-            <AddToken />
+            <EditToken />
           </Suspense>
         }
       />

web/src/pages/Token/AddToken.js

@@ -1,115 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
-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, 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;
-    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('令牌创建成功！');
-      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>
-          <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>
-        </Form>
-      </Segment>
-    </>
-  );
-};
-
-export default AddToken;

web/src/pages/Token/EditToken.js

@@ -6,12 +6,14 @@ import { API, showError, showSuccess, timestamp2string } from '../../helpers';
 const EditToken = () => {
   const params = useParams();
   const tokenId = params.id;
-  const [loading, setLoading] = useState(true);
+  const isEdit = tokenId !== undefined;
-  const [inputs, setInputs] = useState({
+  const [loading, setLoading] = useState(isEdit);
+  const originInputs = {
     name: '',
     remain_times: -1,
     expired_time: -1
-  });
+  };
+  const [inputs, setInputs] = useState(originInputs);
   const { name, remain_times, expired_time } = inputs;
 
   const handleInputChange = (e, { name, value }) => {
@@ -47,10 +49,13 @@ const EditToken = () => {
     setLoading(false);
   };
   useEffect(() => {
-    loadToken().then();
+    if (isEdit) {
+      loadToken().then();
+    }
   }, []);
 
   const submit = async () => {
+    if (!isEdit && inputs.name === '') return;
     let localInputs = inputs;
     localInputs.remain_times = parseInt(localInputs.remain_times);
     if (localInputs.expired_time !== -1) {
@@ -61,10 +66,20 @@ const EditToken = () => {
       }
       localInputs.expired_time = Math.ceil(time / 1000);
     }
-    let res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(tokenId) });
+    let res;
+    if (isEdit) {
+      res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(tokenId) });
+    } else {
+      res = await API.post(`/api/token/`, localInputs);
+    }
     const { success, message } = res.data;
     if (success) {
-      showSuccess('令牌更新成功！');
+      if (isEdit) {
+        showSuccess('令牌更新成功！');
+      } else {
+        showSuccess('令牌创建成功！');
+        setInputs(originInputs);
+      }
     } else {
       showError(message);
     }
@@ -73,16 +88,17 @@ const EditToken = () => {
   return (
     <>
       <Segment loading={loading}>
-        <Header as='h3'>更新令牌信息</Header>
+        <Header as='h3'>{isEdit ? "更新令牌信息" : "创建新的令牌"}</Header>
         <Form autoComplete='off'>
           <Form.Field>
             <Form.Input
               label='名称'
               name='name'
-              placeholder={'请输入新的名称'}
+              placeholder={'请输入名称'}
               onChange={handleInputChange}
               value={name}
               autoComplete='off'
+              required={!isEdit}
             />
           </Form.Field>
           <Form.Field>
@@ -93,6 +109,7 @@ const EditToken = () => {
               onChange={handleInputChange}
               value={remain_times}
               autoComplete='off'
+              type='number'
             />
           </Form.Field>
           <Form.Field>
@@ -103,6 +120,7 @@ const EditToken = () => {
               onChange={handleInputChange}
               value={expired_time}
               autoComplete='off'
+              type='datetime-local'
             />
           </Form.Field>
           <Button type={'button'} onClick={() => {