Able to manage channels now

web/src/pages/Channel/AddChannel.js

@@ -1,26 +1,27 @@
 import React, { useState } from 'react';
 import { Button, Form, Header, Segment } from 'semantic-ui-react';
 import { API, showError, showSuccess } from '../../helpers';
+import { CHANNEL_OPTIONS } from '../../constants';
 
 const AddChannel = () => {
   const originInputs = {
-    username: '',
-    display_name: '',
-    password: '',
+    name: '',
+    type: 1,
+    key: ''
   };
   const [inputs, setInputs] = useState(originInputs);
-  const { username, display_name, password } = inputs;
+  const { name, type, key } = 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);
+    if (inputs.name === '' || inputs.key === '') return;
+    const res = await API.post(`/api/channel/`, inputs);
     const { success, message } = res.data;
     if (success) {
-      showSuccess('用户账户创建成功！');
+      showSuccess('渠道创建成功！');
       setInputs(originInputs);
     } else {
       showError(message);
@@ -30,38 +31,37 @@ const AddChannel = () => {
   return (
     <>
       <Segment>
-        <Header as="h3">创建新用户账户</Header>
-        <Form autoComplete="off">
+        <Header as='h3'>创建新的渠道</Header>
+        <Form autoComplete='off'>
+          <Form.Field>
+            <Form.Select
+              label='类型'
+              name='type'
+              options={CHANNEL_OPTIONS}
+              value={inputs.type}
+              onChange={handleInputChange}
+            />
+          </Form.Field>
           <Form.Field>
             <Form.Input
-              label="用户名"
-              name="username"
-              placeholder={'请输入用户名'}
+              label='名称'
+              name='name'
+              placeholder={'请输入名称'}
               onChange={handleInputChange}
-              value={username}
-              autoComplete="off"
+              value={name}
+              autoComplete='off'
               required
             />
           </Form.Field>
           <Form.Field>
             <Form.Input
-              label="显示名称"
-              name="display_name"
-              placeholder={'请输入显示名称'}
+              label='密钥'
+              name='key'
+              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"
+              value={key}
+              // type='password'
+              autoComplete='off'
               required
             />
           </Form.Field>

web/src/pages/Channel/EditChannel.js

@@ -2,32 +2,23 @@ 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 { CHANNEL_OPTIONS } from '../../constants';
 
 const EditChannel = () => {
   const params = useParams();
-  const userId = params.id;
+  const channelId = params.id;
   const [loading, setLoading] = useState(true);
   const [inputs, setInputs] = useState({
-    username: '',
-    display_name: '',
-    password: '',
-    github_id: '',
-    wechat_id: '',
-    email: '',
+    name: '',
+    key: '',
+    type: 1,
   });
-  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 loadChannel = async () => {
+    let res = await API.get(`/api/channel/${channelId}`);
     const { success, message, data } = res.data;
     if (success) {
       data.password = '';
@@ -38,19 +29,14 @@ const EditChannel = () => {
     setLoading(false);
   };
   useEffect(() => {
-    loadUser().then();
+    loadChannel().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);
-    }
+    let res = await API.put(`/api/channel/`, { ...inputs, id: parseInt(channelId) });
     const { success, message } = res.data;
     if (success) {
-      showSuccess('用户信息更新成功！');
+      showSuccess('渠道更新成功！');
     } else {
       showError(message);
     }
@@ -59,69 +45,38 @@ const EditChannel = () => {
   return (
     <>
       <Segment loading={loading}>
-        <Header as='h3'>更新用户信息</Header>
+        <Header as='h3'>更新渠道信息</Header>
         <Form autoComplete='off'>
           <Form.Field>
-            <Form.Input
-              label='用户名'
-              name='username'
-              placeholder={'请输入新的用户名'}
+            <Form.Select
+              label='类型'
+              name='type'
+              options={CHANNEL_OPTIONS}
+              value={inputs.type}
               onChange={handleInputChange}
-              value={username}
-              autoComplete='off'
             />
           </Form.Field>
           <Form.Field>
             <Form.Input
-              label='密码'
-              name='password'
-              type={'password'}
-              placeholder={'请输入新的密码'}
+              label='名称'
+              name='name'
+              placeholder={'请输入新的名称'}
               onChange={handleInputChange}
-              value={password}
+              value={inputs.name}
               autoComplete='off'
             />
           </Form.Field>
           <Form.Field>
             <Form.Input
-              label='显示名称'
-              name='display_name'
-              placeholder={'请输入新的显示名称'}
+              label='密钥'
+              name='key'
+              placeholder={'请输入新的密钥'}
               onChange={handleInputChange}
-              value={display_name}
+              value={inputs.key}
+              // type='password'
               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>