refactor: bind quota to account instead of token (close #64, #31)

web/src/pages/Token/EditToken.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Header, Segment } from 'semantic-ui-react';
 import { useParams } from 'react-router-dom';
-import { API, isAdmin, showError, showSuccess, timestamp2string } from '../../helpers';
+import { API, showError, showSuccess, timestamp2string } from '../../helpers';
 
 const EditToken = () => {
   const params = useParams();
@@ -14,7 +14,6 @@ const EditToken = () => {
     expired_time: -1,
     unlimited_quota: false
   };
-  const isAdminUser = isAdmin();
   const [inputs, setInputs] = useState(originInputs);
   const { name, remain_quota, expired_time, unlimited_quota } = inputs;
 
@@ -107,25 +106,21 @@ const EditToken = () => {
               required={!isEdit}
             />
           </Form.Field>
-          {
-            isAdminUser && <>
-              <Form.Field>
-                <Form.Input
-                  label='额度'
-                  name='remain_quota'
-                  placeholder={'请输入额度'}
-                  onChange={handleInputChange}
-                  value={remain_quota}
-                  autoComplete='new-password'
-                  type='number'
-                  disabled={unlimited_quota}
-                />
-              </Form.Field>
-              <Button type={'button'} style={{marginBottom: '14px'}} onClick={() => {
-                setUnlimitedQuota();
-              }}>{unlimited_quota ? '取消无限额度' : '设置为无限额度'}</Button>
-            </>
-          }
+          <Form.Field>
+            <Form.Input
+              label='额度'
+              name='remain_quota'
+              placeholder={'请输入额度'}
+              onChange={handleInputChange}
+              value={remain_quota}
+              autoComplete='new-password'
+              type='number'
+              disabled={unlimited_quota}
+            />
+          </Form.Field>
+          <Button type={'button'} style={{ marginBottom: '14px' }} onClick={() => {
+            setUnlimitedQuota();
+          }}>{unlimited_quota ? '取消无限额度' : '设置为无限额度'}</Button>
           <Form.Field>
             <Form.Input
               label='过期时间'

web/src/pages/TopUp/index.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Grid, Header, Segment, Statistic } from 'semantic-ui-react';
+import { API, showError, showSuccess } from '../../helpers';
+
+const TopUp = () => {
+  const [redemptionCode, setRedemptionCode] = useState('');
+  const [topUpLink, setTopUpLink] = useState('');
+  const [userQuota, setUserQuota] = useState(0);
+
+  const topUp = async () => {
+    if (redemptionCode === '') {
+      return;
+    }
+    const res = await API.post('/api/user/topup', {
+      key: redemptionCode
+    });
+    const { success, message, data } = res.data;
+    if (success) {
+      showSuccess('充值成功！');
+      setUserQuota((quota) => {
+        return quota + data;
+      });
+      setRedemptionCode('');
+    } else {
+      showError(message);
+    }
+  };
+
+  const openTopUpLink = () => {
+    if (!topUpLink) {
+      showError('超级管理员未设置充值链接！');
+      return;
+    }
+    window.open(topUpLink, '_blank');
+  };
+
+  const getUserQuota = async ()=>{
+    let res  = await API.get(`/api/user/self`);
+    const {success, message, data} = res.data;
+    if (success) {
+      setUserQuota(data.quota);
+    } else {
+      showError(message);
+    }
+  }
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      if (status.top_up_link) {
+        setTopUpLink(status.top_up_link);
+      }
+    }
+    getUserQuota().then();
+  }, []);
+
+  return (
+    <Segment>
+      <Header as='h3'>充值额度</Header>
+      <Grid columns={2} stackable>
+        <Grid.Column>
+          <Form>
+            <Form.Input
+              placeholder='兑换码'
+              name='redemptionCode'
+              value={redemptionCode}
+              onChange={(e) => {
+                setRedemptionCode(e.target.value);
+              }}
+            />
+            <Button color='green' onClick={openTopUpLink}>
+              获取兑换码
+            </Button>
+            <Button color='yellow' onClick={topUp}>
+              充值
+            </Button>
+          </Form>
+        </Grid.Column>
+        <Grid.Column>
+          <Statistic.Group widths='one'>
+            <Statistic>
+              <Statistic.Value>{userQuota}</Statistic.Value>
+              <Statistic.Label>剩余额度</Statistic.Label>
+            </Statistic>
+          </Statistic.Group>
+        </Grid.Column>
+      </Grid>
+    </Segment>
+  );
+};
+
+
+export default TopUp;