Initial commit

web/src/components/FilesTable.js

@@ -0,0 +1,303 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Form,
+  Header,
+  Icon,
+  Pagination,
+  Popup,
+  Progress,
+  Segment,
+  Table,
+} from 'semantic-ui-react';
+import { API, copy, showError, showSuccess } from '../helpers';
+import { useDropzone } from 'react-dropzone';
+import { ITEMS_PER_PAGE } from '../constants';
+
+const FilesTable = () => {
+  const [files, setFiles] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searching, setSearching] = useState(false);
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState('0');
+
+  const loadFiles = async (startIdx) => {
+    const res = await API.get(`/api/file/?p=${startIdx}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setFiles(data);
+      } else {
+        let newFiles = files;
+        newFiles.push(...data);
+        setFiles(newFiles);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const onPaginationChange = (e, { activePage }) => {
+    (async () => {
+      if (activePage === Math.ceil(files.length / ITEMS_PER_PAGE) + 1) {
+        // In this case we have to load more data and then append them.
+        await loadFiles(activePage - 1);
+      }
+      setActivePage(activePage);
+    })();
+  };
+
+  useEffect(() => {
+    loadFiles(0)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, []);
+
+  const downloadFile = (link, filename) => {
+    let linkElement = document.createElement('a');
+    linkElement.download = filename;
+    linkElement.href = '/upload/' + link;
+    linkElement.click();
+  };
+
+  const copyLink = (link) => {
+    let url = window.location.origin + '/upload/' + link;
+    copy(url).then();
+    showSuccess('链接已复制到剪贴板');
+  };
+
+  const deleteFile = async (id, idx) => {
+    const res = await API.delete(`/api/file/${id}`);
+    const { success, message } = res.data;
+    if (success) {
+      let newFiles = [...files];
+      let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      newFiles[realIdx].deleted = true;
+      // newFiles.splice(idx, 1);
+      setFiles(newFiles);
+      showSuccess('文件已删除！');
+    } else {
+      showError(message);
+    }
+  };
+
+  const searchFiles = async () => {
+    if (searchKeyword === '') {
+      // if keyword is blank, load files instead.
+      await loadFiles(0);
+      setActivePage(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/file/search?keyword=${searchKeyword}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setFiles(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const handleKeywordChange = async (e, { value }) => {
+    setSearchKeyword(value.trim());
+  };
+
+  const sortFile = (key) => {
+    if (files.length === 0) return;
+    setLoading(true);
+    let sortedUsers = [...files];
+    sortedUsers.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedUsers[0].id === files[0].id) {
+      sortedUsers.reverse();
+    }
+    setFiles(sortedUsers);
+    setLoading(false);
+  };
+
+  const uploadFiles = async () => {
+    if (acceptedFiles.length === 0) return;
+    setUploading(true);
+    let formData = new FormData();
+    for (let i = 0; i < acceptedFiles.length; i++) {
+      formData.append('file', acceptedFiles[i]);
+    }
+    const res = await API.post(`/api/file`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (e) => {
+        let uploadProgress = ((e.loaded / e.total) * 100).toFixed(2);
+        setUploadProgress(uploadProgress);
+      },
+    });
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(`${acceptedFiles.length} 个文件上传成功！`);
+    } else {
+      showError(message);
+    }
+    setUploading(false);
+    setUploadProgress('0');
+    setSearchKeyword('');
+    loadFiles(0).then();
+    setActivePage(1);
+  };
+
+  useEffect(() => {
+    uploadFiles().then();
+  }, [acceptedFiles]);
+
+  return (
+    <>
+      <Segment
+        placeholder
+        {...getRootProps({ className: 'dropzone' })}
+        loading={uploading || loading}
+        style={{ cursor: 'pointer' }}
+      >
+        <Header icon>
+          <Icon name='file outline' />
+          拖拽上传或点击上传
+          <input {...getInputProps()} />
+        </Header>
+      </Segment>
+      {uploading ? (
+        <Progress
+          percent={uploadProgress}
+          success
+          progress='percent'
+        ></Progress>
+      ) : (
+        <></>
+      )}
+      <Form onSubmit={searchFiles}>
+        <Form.Input
+          icon='search'
+          fluid
+          iconPosition='left'
+          placeholder='搜索文件的名称，上传者以及描述信息 ...'
+          value={searchKeyword}
+          loading={searching}
+          onChange={handleKeywordChange}
+        />
+      </Form>
+
+      <Table basic>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortFile('filename');
+              }}
+            >
+              文件名
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortFile('uploader_id');
+              }}
+            >
+              上传者
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortFile('email');
+              }}
+            >
+              上传时间
+            </Table.HeaderCell>
+            <Table.HeaderCell>操作</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {files
+            .slice(
+              (activePage - 1) * ITEMS_PER_PAGE,
+              activePage * ITEMS_PER_PAGE
+            )
+            .map((file, idx) => {
+              if (file.deleted) return <></>;
+              return (
+                <Table.Row key={file.id}>
+                  <Table.Cell>
+                    <a href={'/upload/' + file.link} target='_blank'>
+                      {file.filename}
+                    </a>
+                  </Table.Cell>
+                  <Popup
+                    content={'上传者 ID：' + file.uploader_id}
+                    trigger={<Table.Cell>{file.uploader}</Table.Cell>}
+                  />
+                  <Table.Cell>{file.upload_time}</Table.Cell>
+                  <Table.Cell>
+                    <div>
+                      <Button
+                        size={'small'}
+                        positive
+                        onClick={() => {
+                          downloadFile(file.link, file.filename);
+                        }}
+                      >
+                        下载
+                      </Button>
+                      <Button
+                        size={'small'}
+                        negative
+                        onClick={() => {
+                          deleteFile(file.id, idx).then();
+                        }}
+                      >
+                        删除
+                      </Button>
+                      <Button
+                        size={'small'}
+                        onClick={() => {
+                          copyLink(file.link);
+                        }}
+                      >
+                        复制链接
+                      </Button>
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })}
+        </Table.Body>
+
+        <Table.Footer>
+          <Table.Row>
+            <Table.HeaderCell colSpan='6'>
+              <Pagination
+                floated='right'
+                activePage={activePage}
+                onPageChange={onPaginationChange}
+                size='small'
+                siblingRange={1}
+                totalPages={
+                  Math.ceil(files.length / ITEMS_PER_PAGE) +
+                  (files.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
+                }
+              />
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Footer>
+      </Table>
+    </>
+  );
+};
+
+export default FilesTable;

web/src/components/Footer.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+
+import { Container, Segment } from 'semantic-ui-react';
+
+const Footer = () => {
+  const [Footer, setFooter] = useState('');
+  useEffect(() => {
+    let savedFooter = localStorage.getItem('footer_html');
+    if (!savedFooter) savedFooter = '';
+    setFooter(savedFooter);
+  });
+
+  return (
+    <Segment vertical>
+      <Container textAlign="center">
+        {Footer === '' ? (
+          <div className="custom-footer">
+            <a
+              href="https://github.com/songquanpeng/gin-template"
+              target="_blank"
+            >
+              项目模板 {process.env.REACT_APP_VERSION}{' '}
+            </a>
+            由{' '}
+            <a href="https://github.com/songquanpeng" target="_blank">
+              JustSong
+            </a>{' '}
+            构建，源代码遵循{' '}
+            <a href="https://opensource.org/licenses/mit-license.php">
+              MIT 协议
+            </a>
+          </div>
+        ) : (
+          <div
+            className="custom-footer"
+            dangerouslySetInnerHTML={{ __html: Footer }}
+          ></div>
+        )}
+      </Container>
+    </Segment>
+  );
+};
+
+export default Footer;

web/src/components/GitHubOAuth.js

@@ -0,0 +1,57 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { API, showError, showSuccess } from '../helpers';
+import { UserContext } from '../context/User';
+
+const GitHubOAuth = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [userState, userDispatch] = useContext(UserContext);
+  const [prompt, setPrompt] = useState('处理中...');
+  const [processing, setProcessing] = useState(true);
+
+  let navigate = useNavigate();
+
+  const sendCode = async (code, count) => {
+    const res = await API.get(`/api/oauth/github?code=${code}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (message === 'bind') {
+        showSuccess('绑定成功！');
+        navigate('/setting');
+      } else {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        showSuccess('登录成功！');
+        navigate('/');
+      }
+    } else {
+      showError(message);
+      if (count === 0) {
+        setPrompt(`操作失败，重定向至登录界面中...`);
+        navigate('/setting'); // in case this is failed to bind GitHub
+        return;
+      }
+      count++;
+      setPrompt(`出现错误，第 ${count} 次重试中...`);
+      await new Promise((resolve) => setTimeout(resolve, count * 2000));
+      await sendCode(code, count);
+    }
+  };
+
+  useEffect(() => {
+    let code = searchParams.get('code');
+    sendCode(code, 0).then();
+  }, []);
+
+  return (
+    <Segment style={{ minHeight: '300px' }}>
+      <Dimmer active inverted>
+        <Loader size='large'>{prompt}</Loader>
+      </Dimmer>
+    </Segment>
+  );
+};
+
+export default GitHubOAuth;

web/src/components/Header.js

@@ -0,0 +1,192 @@
+import React, { useContext, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { UserContext } from '../context/User';
+
+import { Button, Container, Dropdown, Icon, Menu, Segment } from 'semantic-ui-react';
+import { API, isAdmin, isMobile, showSuccess } from '../helpers';
+import '../index.css';
+
+// Header Buttons
+const headerButtons = [
+  {
+    name: '首页',
+    to: '/',
+    icon: 'home',
+  },
+  {
+    name: '文件',
+    to: '/file',
+    icon: 'file',
+    admin: true,
+  },
+  {
+    name: '用户',
+    to: '/user',
+    icon: 'user',
+    admin: true,
+  },
+  {
+    name: '设置',
+    to: '/setting',
+    icon: 'setting',
+  },
+  {
+    name: '关于',
+    to: '/about',
+    icon: 'info circle',
+  },
+];
+
+const Header = () => {
+  const [userState, userDispatch] = useContext(UserContext);
+  let navigate = useNavigate();
+
+  const [showSidebar, setShowSidebar] = useState(false);
+
+  async function logout() {
+    setShowSidebar(false);
+    await API.get('/api/user/logout');
+    showSuccess('注销成功!');
+    userDispatch({ type: 'logout' });
+    localStorage.removeItem('user');
+    navigate('/login');
+  }
+
+  const toggleSidebar = () => {
+    setShowSidebar(!showSidebar);
+  };
+
+  const renderButtons = (isMobile) => {
+    return headerButtons.map((button) => {
+      if (button.admin && !isAdmin()) return <></>;
+      if (isMobile) {
+        return (
+          <Menu.Item
+            onClick={() => {
+              navigate(button.to);
+              setShowSidebar(false);
+            }}
+          >
+            {button.name}
+          </Menu.Item>
+        );
+      }
+      return (
+        <Menu.Item key={button.name} as={Link} to={button.to}>
+          <Icon name={button.icon} />
+          {button.name}
+        </Menu.Item>
+      );
+    });
+  };
+
+  if (isMobile()) {
+    return (
+      <>
+        <Menu
+          borderless
+          size='large'
+          style={
+            showSidebar
+              ? {
+                  borderBottom: 'none',
+                  marginBottom: '0',
+                  borderTop: 'none',
+                  height: '51px',
+                }
+              : { borderTop: 'none', height: '52px' }
+          }
+        >
+          <Container>
+            <Menu.Item as={Link} to='/'>
+              <img
+                src='/logo.png'
+                alt='logo'
+                style={{ marginRight: '0.75em' }}
+              />
+              <div style={{ fontSize: '20px' }}>
+                <b>项目模板</b>
+              </div>
+            </Menu.Item>
+            <Menu.Menu position='right'>
+              <Menu.Item onClick={toggleSidebar}>
+                <Icon name={showSidebar ? 'close' : 'sidebar'} />
+              </Menu.Item>
+            </Menu.Menu>
+          </Container>
+        </Menu>
+        {showSidebar ? (
+          <Segment style={{ marginTop: 0, borderTop: '0' }}>
+            <Menu secondary vertical style={{ width: '100%', margin: 0 }}>
+              {renderButtons(true)}
+              <Menu.Item>
+                {userState.user ? (
+                  <Button onClick={logout}>注销</Button>
+                ) : (
+                  <>
+                    <Button
+                      onClick={() => {
+                        setShowSidebar(false);
+                        navigate('/login');
+                      }}
+                    >
+                      登录
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        setShowSidebar(false);
+                        navigate('/register');
+                      }}
+                    >
+                      注册
+                    </Button>
+                  </>
+                )}
+              </Menu.Item>
+            </Menu>
+          </Segment>
+        ) : (
+          <></>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Menu borderless style={{ borderTop: 'none' }}>
+        <Container>
+          <Menu.Item as={Link} to='/' className={'hide-on-mobile'}>
+            <img src='/logo.png' alt='logo' style={{ marginRight: '0.75em' }} />
+            <div style={{ fontSize: '20px' }}>
+              <b>项目模板</b>
+            </div>
+          </Menu.Item>
+          {renderButtons(false)}
+          <Menu.Menu position='right'>
+            {userState.user ? (
+              <Dropdown
+                text={userState.user.username}
+                pointing
+                className='link item'
+              >
+                <Dropdown.Menu>
+                  <Dropdown.Item onClick={logout}>注销</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            ) : (
+              <Menu.Item
+                name='登录'
+                as={Link}
+                to='/login'
+                className='btn btn-link'
+              />
+            )}
+          </Menu.Menu>
+        </Container>
+      </Menu>
+    </>
+  );
+};
+
+export default Header;

web/src/components/Loading.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Segment, Dimmer, Loader } from 'semantic-ui-react';
+
+const Loading = ({ prompt: name = 'page' }) => {
+  return (
+    <Segment style={{ height: 100 }}>
+      <Dimmer active inverted>
+        <Loader indeterminate>加载{name}中...</Loader>
+      </Dimmer>
+    </Segment>
+  );
+};
+
+export default Loading;

web/src/components/LoginForm.js

@@ -0,0 +1,198 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  Button,
+  Divider,
+  Form,
+  Grid,
+  Header,
+  Image,
+  Message,
+  Modal,
+  Segment,
+} from 'semantic-ui-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { UserContext } from '../context/User';
+import { API, showError, showSuccess } from '../helpers';
+
+const LoginForm = () => {
+  const [inputs, setInputs] = useState({
+    username: '',
+    password: '',
+    wechat_verification_code: '',
+  });
+  const [submitted, setSubmitted] = useState(false);
+  const { username, password } = inputs;
+  const [userState, userDispatch] = useContext(UserContext);
+  let navigate = useNavigate();
+
+  const [status, setStatus] = useState({});
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      setStatus(status);
+    }
+  }, []);
+
+  const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
+
+  const onGitHubOAuthClicked = () => {
+    window.open(
+      `https://github.com/login/oauth/authorize?client_id=${status.github_client_id}&scope=user:email`
+    );
+  };
+
+  const onWeChatLoginClicked = () => {
+    setShowWeChatLoginModal(true);
+  };
+
+  const onSubmitWeChatVerificationCode = async () => {
+    const res = await API.get(
+      `/api/oauth/wechat?code=${inputs.wechat_verification_code}`
+    );
+    const { success, message, data } = res.data;
+    if (success) {
+      userDispatch({ type: 'login', payload: data });
+      localStorage.setItem('user', JSON.stringify(data));
+      navigate('/');
+      showSuccess('登录成功！');
+      setShowWeChatLoginModal(false);
+    } else {
+      showError(message);
+    }
+  };
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  }
+
+  async function handleSubmit(e) {
+    setSubmitted(true);
+    if (username && password) {
+      const res = await API.post('/api/user/login', {
+        username,
+        password,
+      });
+      const { success, message, data } = res.data;
+      if (success) {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        navigate('/');
+        showSuccess('登录成功！');
+      } else {
+        showError(message);
+      }
+    }
+  }
+
+  return (
+    <Grid textAlign="center" style={{ marginTop: '48px' }}>
+      <Grid.Column style={{ maxWidth: 450 }}>
+        <Header as="h2" color="teal" textAlign="center">
+          <Image src="/logo.png" /> 用户登录
+        </Header>
+        <Form size="large">
+          <Segment>
+            <Form.Input
+              fluid
+              icon="user"
+              iconPosition="left"
+              placeholder="用户名"
+              name="username"
+              value={username}
+              onChange={handleChange}
+            />
+            <Form.Input
+              fluid
+              icon="lock"
+              iconPosition="left"
+              placeholder="密码"
+              name="password"
+              type="password"
+              value={password}
+              onChange={handleChange}
+            />
+            <Button color="teal" fluid size="large" onClick={handleSubmit}>
+              登录
+            </Button>
+          </Segment>
+        </Form>
+        <Message>
+          忘记密码？
+          <Link to="/reset" className="btn btn-link">
+            点击重置
+          </Link>
+          ； 没有账户？
+          <Link to="/register" className="btn btn-link">
+            点击注册
+          </Link>
+        </Message>
+        {status.github_oauth || status.wechat_login ? (
+          <>
+            <Divider horizontal>Or</Divider>
+            {status.github_oauth ? (
+              <Button
+                circular
+                color="black"
+                icon="github"
+                onClick={onGitHubOAuthClicked}
+              />
+            ) : (
+              <></>
+            )}
+            {status.wechat_login ? (
+              <Button
+                circular
+                color="green"
+                icon="wechat"
+                onClick={onWeChatLoginClicked}
+              />
+            ) : (
+              <></>
+            )}
+          </>
+        ) : (
+          <></>
+        )}
+        <Modal
+          onClose={() => setShowWeChatLoginModal(false)}
+          onOpen={() => setShowWeChatLoginModal(true)}
+          open={showWeChatLoginModal}
+          size={'mini'}
+        >
+          <Modal.Content>
+            <Modal.Description>
+              <Image src={status.wechat_qrcode} fluid />
+              <div style={{ textAlign: 'center' }}>
+                <p>
+                  微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
+                </p>
+              </div>
+              <Form size="large">
+                <Form.Input
+                  fluid
+                  placeholder="验证码"
+                  name="wechat_verification_code"
+                  value={inputs.wechat_verification_code}
+                  onChange={handleChange}
+                />
+                <Button
+                  color="teal"
+                  fluid
+                  size="large"
+                  onClick={onSubmitWeChatVerificationCode}
+                >
+                  登录
+                </Button>
+              </Form>
+            </Modal.Description>
+          </Modal.Content>
+        </Modal>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default LoginForm;

web/src/components/OtherSetting.js

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Divider, Form, Grid, Header, Modal } from 'semantic-ui-react';
+import { API, showError, showSuccess } from '../helpers';
+import { marked } from 'marked';
+
+const OtherSetting = () => {
+  let [inputs, setInputs] = useState({
+    Footer: '',
+    Notice: '',
+    About: '',
+  });
+  let originInputs = {};
+  let [loading, setLoading] = useState(false);
+  const [showUpdateModal, setShowUpdateModal] = useState(false);
+  const [updateData, setUpdateData] = useState({
+    tag_name: '',
+    content: '',
+  });
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.key in inputs) {
+          newInputs[item.key] = item.value;
+        }
+      });
+      setInputs(newInputs);
+      originInputs = newInputs;
+    } else {
+      showError(message);
+    }
+  };
+
+  useEffect(() => {
+    getOptions().then();
+  }, []);
+
+  const updateOption = async (key, value) => {
+    setLoading(true);
+    const res = await API.put('/api/option', {
+      key,
+      value,
+    });
+    const { success, message } = res.data;
+    if (success) {
+      setInputs((inputs) => ({ ...inputs, [key]: value }));
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const handleInputChange = async (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const submitNotice = async () => {
+    await updateOption('Notice', inputs.Notice);
+  };
+
+  const submitFooter = async () => {
+    await updateOption('Footer', inputs.Footer);
+  };
+
+  const submitAbout = async () => {
+    await updateOption('About', inputs.About);
+  };
+
+  const openGitHubRelease = () => {
+    window.location =
+      'https://github.com/songquanpeng/gin-template/releases/latest';
+  };
+
+  const checkUpdate = async () => {
+    const res = await API.get(
+      'https://api.github.com/repos/songquanpeng/gin-template/releases/latest'
+    );
+    const { tag_name, body } = res.data;
+    if (tag_name === process.env.REACT_APP_VERSION) {
+      showSuccess(`已是最新版本：${tag_name}`);
+    } else {
+      setUpdateData({
+        tag_name: tag_name,
+        content: marked.parse(body),
+      });
+      setShowUpdateModal(true);
+    }
+  };
+
+  return (
+    <Grid columns={1}>
+      <Grid.Column>
+        <Form loading={loading}>
+          <Header as='h3'>通用设置</Header>
+          <Form.Button onClick={checkUpdate}>检查更新</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='公告'
+              placeholder='在此输入新的公告内容'
+              value={inputs.Notice}
+              name='Notice'
+              onChange={handleInputChange}
+              style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitNotice}>保存公告</Form.Button>
+          <Divider />
+          <Header as='h3'>个性化设置</Header>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='关于'
+              placeholder='在此输入新的关于内容，支持 Markdown & HTML 代码'
+              value={inputs.About}
+              name='About'
+              onChange={handleInputChange}
+              style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitAbout}>保存关于</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.Input
+              label='页脚'
+              placeholder='在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码'
+              value={inputs.Footer}
+              name='Footer'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitFooter}>设置页脚</Form.Button>
+        </Form>
+      </Grid.Column>
+      <Modal
+        onClose={() => setShowUpdateModal(false)}
+        onOpen={() => setShowUpdateModal(true)}
+        open={showUpdateModal}
+      >
+        <Modal.Header>新版本：{updateData.tag_name}</Modal.Header>
+        <Modal.Content>
+          <Modal.Description>
+            <div dangerouslySetInnerHTML={{ __html: updateData.content }}></div>
+          </Modal.Description>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={() => setShowUpdateModal(false)}>关闭</Button>
+          <Button
+            content='详情'
+            onClick={() => {
+              setShowUpdateModal(false);
+              openGitHubRelease();
+            }}
+          />
+        </Modal.Actions>
+      </Modal>
+    </Grid>
+  );
+};
+
+export default OtherSetting;

web/src/components/PasswordResetConfirm.js

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
+import { API, copy, showError, showSuccess } from '../helpers';
+import { useSearchParams } from 'react-router-dom';
+
+const PasswordResetConfirm = () => {
+  const [inputs, setInputs] = useState({
+    email: '',
+    token: '',
+  });
+  const { email, token } = inputs;
+
+  const [loading, setLoading] = useState(false);
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => {
+    let token = searchParams.get('token');
+    let email = searchParams.get('email');
+    setInputs({
+      token,
+      email,
+    });
+  }, []);
+
+  async function handleSubmit(e) {
+    if (!email) return;
+    setLoading(true);
+    const res = await API.post(`/api/user/reset`, {
+      email,
+      token,
+    });
+    const { success, message } = res.data;
+    if (success) {
+      let password = res.data.data;
+      await copy(password);
+      showSuccess(`密码已重置并已复制到剪贴板：${password}`);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  }
+
+  return (
+    <Grid textAlign='center' style={{ marginTop: '48px' }}>
+      <Grid.Column style={{ maxWidth: 450 }}>
+        <Header as='h2' color='teal' textAlign='center'>
+          <Image src='/logo.png' /> 密码重置确认
+        </Header>
+        <Form size='large'>
+          <Segment>
+            <Form.Input
+              fluid
+              icon='mail'
+              iconPosition='left'
+              placeholder='邮箱地址'
+              name='email'
+              value={email}
+              readOnly
+            />
+            <Button
+              color='teal'
+              fluid
+              size='large'
+              onClick={handleSubmit}
+              loading={loading}
+            >
+              提交
+            </Button>
+          </Segment>
+        </Form>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default PasswordResetConfirm;

web/src/components/PasswordResetForm.js

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
+import { API, showError, showInfo, showSuccess } from '../helpers';
+import Turnstile from 'react-turnstile';
+
+const PasswordResetForm = () => {
+  const [inputs, setInputs] = useState({
+    email: '',
+  });
+  const { email } = inputs;
+
+  const [loading, setLoading] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+  }, []);
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  }
+
+  async function handleSubmit(e) {
+    if (!email) return;
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/reset_password?email=${email}&turnstile=${turnstileToken}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('重置邮件发送成功，请检查邮箱！');
+      setInputs({ ...inputs, email: '' });
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  }
+
+  return (
+    <Grid textAlign='center' style={{ marginTop: '48px' }}>
+      <Grid.Column style={{ maxWidth: 450 }}>
+        <Header as='h2' color='teal' textAlign='center'>
+          <Image src='/logo.png' /> 密码重置
+        </Header>
+        <Form size='large'>
+          <Segment>
+            <Form.Input
+              fluid
+              icon='mail'
+              iconPosition='left'
+              placeholder='邮箱地址'
+              name='email'
+              value={email}
+              onChange={handleChange}
+            />
+            {turnstileEnabled ? (
+              <Turnstile
+                sitekey={turnstileSiteKey}
+                onVerify={(token) => {
+                  setTurnstileToken(token);
+                }}
+              />
+            ) : (
+              <></>
+            )}
+            <Button
+              color='teal'
+              fluid
+              size='large'
+              onClick={handleSubmit}
+              loading={loading}
+            >
+              提交
+            </Button>
+          </Segment>
+        </Form>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default PasswordResetForm;

web/src/components/PersonalSetting.js

@@ -0,0 +1,213 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Divider, Form, Header, Image, Modal } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { API, copy, showError, showInfo, showSuccess } from '../helpers';
+import Turnstile from 'react-turnstile';
+
+const PersonalSetting = () => {
+  const [inputs, setInputs] = useState({
+    wechat_verification_code: '',
+    email_verification_code: '',
+    email: '',
+  });
+  const [status, setStatus] = useState({});
+  const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
+  const [showEmailBindModal, setShowEmailBindModal] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      setStatus(status);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+  }, []);
+
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const generateToken = async () => {
+    const res = await API.get('/api/user/token');
+    const { success, message, data } = res.data;
+    if (success) {
+      await copy(data);
+      showSuccess(`令牌已重置并已复制到剪贴板：${data}`);
+    } else {
+      showError(message);
+    }
+  };
+
+  const bindWeChat = async () => {
+    if (inputs.wechat_verification_code === '') return;
+    const res = await API.get(
+      `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('微信账户绑定成功！');
+      setShowWeChatBindModal(false);
+    } else {
+      showError(message);
+    }
+  };
+
+  const openGitHubOAuth = () => {
+    window.open(
+      `https://github.com/login/oauth/authorize?client_id=${status.github_client_id}&scope=user:email`
+    );
+  };
+
+  const sendVerificationCode = async () => {
+    if (inputs.email === '') return;
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('验证码发送成功，请检查邮箱！');
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const bindEmail = async () => {
+    if (inputs.email_verification_code === '') return;
+    setLoading(true);
+    const res = await API.get(
+      `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('邮箱账户绑定成功！');
+      setShowEmailBindModal(false);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div style={{ lineHeight: '40px' }}>
+      <Header as='h3'>通用设置</Header>
+      <Button as={Link} to={`/user/edit/`}>
+        更新个人信息
+      </Button>
+      <Button onClick={generateToken}>生成访问令牌</Button>
+      <Divider />
+      <Header as='h3'>账号绑定</Header>
+      <Button
+        onClick={() => {
+          setShowWeChatBindModal(true);
+        }}
+      >
+        绑定微信账号
+      </Button>
+      <Modal
+        onClose={() => setShowWeChatBindModal(false)}
+        onOpen={() => setShowWeChatBindModal(true)}
+        open={showWeChatBindModal}
+        size={'mini'}
+      >
+        <Modal.Content>
+          <Modal.Description>
+            <Image src={status.wechat_qrcode} fluid />
+            <div style={{ textAlign: 'center' }}>
+              <p>
+                微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
+              </p>
+            </div>
+            <Form size='large'>
+              <Form.Input
+                fluid
+                placeholder='验证码'
+                name='wechat_verification_code'
+                value={inputs.wechat_verification_code}
+                onChange={handleInputChange}
+              />
+              <Button color='teal' fluid size='large' onClick={bindWeChat}>
+                绑定
+              </Button>
+            </Form>
+          </Modal.Description>
+        </Modal.Content>
+      </Modal>
+      <Button onClick={openGitHubOAuth}>绑定 GitHub 账号</Button>
+      <Button
+        onClick={() => {
+          setShowEmailBindModal(true);
+        }}
+      >
+        绑定邮箱地址
+      </Button>
+      <Modal
+        onClose={() => setShowEmailBindModal(false)}
+        onOpen={() => setShowEmailBindModal(true)}
+        open={showEmailBindModal}
+        size={'tiny'}
+        style={{ maxWidth: '450px' }}
+      >
+        <Modal.Header>绑定邮箱地址</Modal.Header>
+        <Modal.Content>
+          <Modal.Description>
+            <Form size='large'>
+              <Form.Input
+                fluid
+                placeholder='输入邮箱地址'
+                onChange={handleInputChange}
+                name='email'
+                type='email'
+                action={
+                  <Button onClick={sendVerificationCode} disabled={loading}>
+                    获取验证码
+                  </Button>
+                }
+              />
+              <Form.Input
+                fluid
+                placeholder='验证码'
+                name='email_verification_code'
+                value={inputs.email_verification_code}
+                onChange={handleInputChange}
+              />
+              {turnstileEnabled ? (
+                <Turnstile
+                  sitekey={turnstileSiteKey}
+                  onVerify={(token) => {
+                    setTurnstileToken(token);
+                  }}
+                />
+              ) : (
+                <></>
+              )}
+              <Button
+                color='teal'
+                fluid
+                size='large'
+                onClick={bindEmail}
+                loading={loading}
+              >
+                绑定
+              </Button>
+            </Form>
+          </Modal.Description>
+        </Modal.Content>
+      </Modal>
+    </div>
+  );
+};
+
+export default PersonalSetting;

web/src/components/PrivateRoute.js

@@ -0,0 +1,13 @@
+import { Navigate } from 'react-router-dom';
+
+import { history } from '../helpers';
+
+
+function PrivateRoute({ children }) {
+  if (!localStorage.getItem('user')) {
+    return <Navigate to='/login' state={{ from: history.location }} />;
+  }
+  return children;
+}
+
+export { PrivateRoute };

web/src/components/RegisterForm.js

@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Form,
+  Grid,
+  Header,
+  Image,
+  Message,
+  Segment,
+} from 'semantic-ui-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { API, showError, showInfo, showSuccess } from '../helpers';
+import Turnstile from 'react-turnstile';
+
+const RegisterForm = () => {
+  const [inputs, setInputs] = useState({
+    username: '',
+    password: '',
+    password2: '',
+    email: '',
+    verification_code: '',
+  });
+  const { username, password, password2 } = inputs;
+  const [showEmailVerification, setShowEmailVerification] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      setShowEmailVerification(status.email_verification);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+  });
+
+  let navigate = useNavigate();
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    console.log(name, value);
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  }
+
+  async function handleSubmit(e) {
+    if (password.length < 8) {
+      showInfo('密码长度不得小于 8 位！');
+      return;
+    }
+    if (password !== password2) {
+      showInfo('两次输入的密码不一致');
+      return;
+    }
+    if (username && password) {
+      if (turnstileEnabled && turnstileToken === '') {
+        showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+        return;
+      }
+      setLoading(true);
+      const res = await API.post(
+        `/api/user/register?turnstile=${turnstileToken}`,
+        inputs
+      );
+      const { success, message } = res.data;
+      if (success) {
+        navigate('/login');
+        showSuccess('注册成功！');
+      } else {
+        showError(message);
+      }
+      setLoading(false);
+    }
+  }
+
+  const sendVerificationCode = async () => {
+    if (inputs.email === '') return;
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('验证码发送成功，请检查你的邮箱！');
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Grid textAlign='center' style={{ marginTop: '48px' }}>
+      <Grid.Column style={{ maxWidth: 450 }}>
+        <Header as='h2' color='teal' textAlign='center'>
+          <Image src='/logo.png' /> 新用户注册
+        </Header>
+        <Form size='large'>
+          <Segment>
+            <Form.Input
+              fluid
+              icon='user'
+              iconPosition='left'
+              placeholder='输入用户名，最长 12 位'
+              onChange={handleChange}
+              name='username'
+            />
+            <Form.Input
+              fluid
+              icon='lock'
+              iconPosition='left'
+              placeholder='输入密码，最短 8 位，最长 20 位'
+              onChange={handleChange}
+              name='password'
+              type='password'
+            />
+            <Form.Input
+              fluid
+              icon='lock'
+              iconPosition='left'
+              placeholder='输入密码，最短 8 位，最长 20 位'
+              onChange={handleChange}
+              name='password2'
+              type='password'
+            />
+            {showEmailVerification ? (
+              <>
+                <Form.Input
+                  fluid
+                  icon='mail'
+                  iconPosition='left'
+                  placeholder='输入邮箱地址'
+                  onChange={handleChange}
+                  name='email'
+                  type='email'
+                  action={
+                    <Button onClick={sendVerificationCode} disabled={loading}>
+                      获取验证码
+                    </Button>
+                  }
+                />
+                <Form.Input
+                  fluid
+                  icon='lock'
+                  iconPosition='left'
+                  placeholder='输入验证码'
+                  onChange={handleChange}
+                  name='verification_code'
+                />
+              </>
+            ) : (
+              <></>
+            )}
+            {turnstileEnabled ? (
+              <Turnstile
+                sitekey={turnstileSiteKey}
+                onVerify={(token) => {
+                  setTurnstileToken(token);
+                }}
+              />
+            ) : (
+              <></>
+            )}
+            <Button
+              color='teal'
+              fluid
+              size='large'
+              onClick={handleSubmit}
+              loading={loading}
+            >
+              注册
+            </Button>
+          </Segment>
+        </Form>
+        <Message>
+          已有账户？
+          <Link to='/login' className='btn btn-link'>
+            点击登录
+          </Link>
+        </Message>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default RegisterForm;

web/src/components/SystemSetting.js

@@ -0,0 +1,384 @@
+import React, { useEffect, useState } from 'react';
+import { Divider, Form, Grid, Header, Message } from 'semantic-ui-react';
+import { API, removeTrailingSlash, showError } from '../helpers';
+
+const SystemSetting = () => {
+  let [inputs, setInputs] = useState({
+    PasswordLoginEnabled: '',
+    PasswordRegisterEnabled: '',
+    EmailVerificationEnabled: '',
+    GitHubOAuthEnabled: '',
+    GitHubClientId: '',
+    GitHubClientSecret: '',
+    Notice: '',
+    SMTPServer: '',
+    SMTPAccount: '',
+    SMTPToken: '',
+    ServerAddress: '',
+    Footer: '',
+    WeChatAuthEnabled: '',
+    WeChatServerAddress: '',
+    WeChatServerToken: '',
+    WeChatAccountQRCodeImageURL: '',
+    TurnstileCheckEnabled: '',
+    TurnstileSiteKey: '',
+    TurnstileSecretKey: '',
+    RegisterEnabled: '',
+  });
+  let originInputs = {};
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        newInputs[item.key] = item.value;
+      });
+      setInputs(newInputs);
+      originInputs = newInputs;
+    } else {
+      showError(message);
+    }
+  };
+
+  useEffect(() => {
+    getOptions().then();
+  }, []);
+
+  const updateOption = async (key, value) => {
+    setLoading(true);
+    switch (key) {
+      case 'PasswordLoginEnabled':
+      case 'PasswordRegisterEnabled':
+      case 'EmailVerificationEnabled':
+      case 'GitHubOAuthEnabled':
+      case 'WeChatAuthEnabled':
+      case 'TurnstileCheckEnabled':
+      case 'RegisterEnabled':
+        value = inputs[key] === 'true' ? 'false' : 'true';
+        break;
+      default:
+        break;
+    }
+    const res = await API.put('/api/option', {
+      key,
+      value,
+    });
+    const { success, message } = res.data;
+    if (success) {
+      setInputs((inputs) => ({ ...inputs, [key]: value }));
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const handleInputChange = async (e, { name, value }) => {
+    if (
+      name === 'Notice' ||
+      name.startsWith('SMTP') ||
+      name === 'ServerAddress' ||
+      name === 'GitHubClientId' ||
+      name === 'GitHubClientSecret' ||
+      name === 'WeChatServerAddress' ||
+      name === 'WeChatServerToken' ||
+      name === 'WeChatAccountQRCodeImageURL' ||
+      name === 'TurnstileSiteKey' ||
+      name === 'TurnstileSecretKey'
+    ) {
+      setInputs((inputs) => ({ ...inputs, [name]: value }));
+    } else {
+      await updateOption(name, value);
+    }
+  };
+
+  const submitServerAddress = async () => {
+    let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
+    await updateOption('ServerAddress', ServerAddress);
+  };
+
+  const submitSMTP = async () => {
+    if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
+      await updateOption('SMTPServer', inputs.SMTPServer);
+    }
+    if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
+      await updateOption('SMTPAccount', inputs.SMTPAccount);
+    }
+    if (
+      originInputs['SMTPToken'] !== inputs.SMTPToken &&
+      inputs.SMTPToken !== ''
+    ) {
+      await updateOption('SMTPToken', inputs.SMTPToken);
+    }
+  };
+
+  const submitWeChat = async () => {
+    if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
+      await updateOption(
+        'WeChatServerAddress',
+        removeTrailingSlash(inputs.WeChatServerAddress)
+      );
+    }
+    if (
+      originInputs['WeChatAccountQRCodeImageURL'] !==
+      inputs.WeChatAccountQRCodeImageURL
+    ) {
+      await updateOption(
+        'WeChatAccountQRCodeImageURL',
+        inputs.WeChatAccountQRCodeImageURL
+      );
+    }
+    if (
+      originInputs['WeChatServerToken'] !== inputs.WeChatServerToken &&
+      inputs.WeChatServerToken !== ''
+    ) {
+      await updateOption('WeChatServerToken', inputs.WeChatServerToken);
+    }
+  };
+
+  const submitGitHubOAuth = async () => {
+    if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
+      await updateOption('GitHubClientId', inputs.GitHubClientId);
+    }
+    if (
+      originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret &&
+      inputs.GitHubClientSecret !== ''
+    ) {
+      await updateOption('GitHubClientSecret', inputs.GitHubClientSecret);
+    }
+  };
+
+  const submitTurnstile = async () => {
+    if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
+      await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
+    }
+    if (
+      originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey &&
+      inputs.TurnstileSecretKey !== ''
+    ) {
+      await updateOption('TurnstileSecretKey', inputs.TurnstileSecretKey);
+    }
+  };
+
+  return (
+    <Grid columns={1}>
+      <Grid.Column>
+        <Form loading={loading}>
+          <Header as='h3'>通用设置</Header>
+          <Form.Group widths='equal'>
+            <Form.Input
+              label='服务器地址'
+              placeholder='例如：https://yourdomain.com'
+              value={inputs.ServerAddress}
+              name='ServerAddress'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitServerAddress}>
+            更新服务器地址
+          </Form.Button>
+          <Divider />
+          <Header as='h3'>配置登录注册</Header>
+          <Form.Group inline>
+            <Form.Checkbox
+              checked={inputs.PasswordLoginEnabled === 'true'}
+              label='允许通过密码进行登录'
+              name='PasswordLoginEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.PasswordRegisterEnabled === 'true'}
+              label='允许通过密码进行注册'
+              name='PasswordRegisterEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.EmailVerificationEnabled === 'true'}
+              label='通过密码注册时需要进行邮箱验证'
+              name='EmailVerificationEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.GitHubOAuthEnabled === 'true'}
+              label='允许通过 GitHub 账户登录 & 注册'
+              name='GitHubOAuthEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.WeChatAuthEnabled === 'true'}
+              label='允许通过微信登录 & 注册'
+              name='WeChatAuthEnabled'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Group inline>
+            <Form.Checkbox
+              checked={inputs.RegisterEnabled === 'true'}
+              label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）'
+              name='RegisterEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.TurnstileCheckEnabled === 'true'}
+              label='启用 Turnstile 用户校验'
+              name='TurnstileCheckEnabled'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Divider />
+          <Header as='h3'>
+            配置 SMTP
+            <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='SMTP 服务器地址'
+              name='SMTPServer'
+              onChange={handleInputChange}
+              autoComplete='off'
+              value={inputs.SMTPServer}
+              placeholder='例如：smtp.qq.com'
+            />
+            <Form.Input
+              label='SMTP 账户'
+              name='SMTPAccount'
+              onChange={handleInputChange}
+              autoComplete='off'
+              value={inputs.SMTPAccount}
+              placeholder='通常是邮箱地址'
+            />
+            <Form.Input
+              label='SMTP 访问凭证'
+              name='SMTPToken'
+              onChange={handleInputChange}
+              type='password'
+              autoComplete='off'
+              value={inputs.SMTPToken}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
+          <Divider />
+          <Header as='h3'>
+            配置 GitHub OAuth App
+            <Header.Subheader>
+              用以支持通过 GitHub 进行登录注册，
+              <a href='https://github.com/settings/developers' target='_blank'>
+                点击此处
+              </a>
+              管理你的 GitHub OAuth App
+            </Header.Subheader>
+          </Header>
+          <Message>
+            Homepage URL 填 <code>{inputs.ServerAddress}</code>
+            ，Authorization callback URL 填{' '}
+            <code>{`${inputs.ServerAddress}/oauth/github`}</code>
+          </Message>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='GitHub Client ID'
+              name='GitHubClientId'
+              onChange={handleInputChange}
+              autoComplete='off'
+              value={inputs.GitHubClientId}
+              placeholder='输入你注册的 GitHub OAuth APP 的 ID'
+            />
+            <Form.Input
+              label='GitHub Client Secret'
+              name='GitHubClientSecret'
+              onChange={handleInputChange}
+              type='password'
+              autoComplete='off'
+              value={inputs.GitHubClientSecret}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitGitHubOAuth}>
+            保存 GitHub OAuth 设置
+          </Form.Button>
+          <Divider />
+          <Header as='h3'>
+            配置 WeChat Server
+            <Header.Subheader>
+              用以支持通过微信进行登录注册，
+              <a
+                href='https://github.com/songquanpeng/wechat-server'
+                target='_blank'
+              >
+                点击此处
+              </a>
+              了解 WeChat Server
+            </Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='WeChat Server 服务器地址'
+              name='WeChatServerAddress'
+              placeholder='例如：https://yourdomain.com'
+              onChange={handleInputChange}
+              autoComplete='off'
+              value={inputs.WeChatServerAddress}
+            />
+            <Form.Input
+              label='WeChat Server 访问凭证'
+              name='WeChatServerToken'
+              type='password'
+              onChange={handleInputChange}
+              autoComplete='off'
+              value={inputs.WeChatServerToken}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+            <Form.Input
+              label='微信公众号二维码图片链接'
+              name='WeChatAccountQRCodeImageURL'
+              onChange={handleInputChange}
+              autoComplete='off'
+              value={inputs.WeChatAccountQRCodeImageURL}
+              placeholder='输入一个图片链接'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitWeChat}>
+            保存 WeChat Server 设置
+          </Form.Button>
+          <Divider />
+          <Header as='h3'>
+            配置 Turnstile
+            <Header.Subheader>
+              用以支持用户校验，
+              <a href='https://dash.cloudflare.com/' target='_blank'>
+                点击此处
+              </a>
+              管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
+            </Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='Turnstile Site Key'
+              name='TurnstileSiteKey'
+              onChange={handleInputChange}
+              autoComplete='off'
+              value={inputs.TurnstileSiteKey}
+              placeholder='输入你注册的 Turnstile Site Key'
+            />
+            <Form.Input
+              label='Turnstile Secret Key'
+              name='TurnstileSecretKey'
+              onChange={handleInputChange}
+              type='password'
+              autoComplete='off'
+              value={inputs.TurnstileSecretKey}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitTurnstile}>
+            保存 Turnstile 设置
+          </Form.Button>
+        </Form>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default SystemSetting;

web/src/components/UsersTable.js

@@ -0,0 +1,300 @@
+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 { ITEMS_PER_PAGE } from '../constants';
+
+function renderRole(role) {
+  switch (role) {
+    case 1:
+      return <Label>普通用户</Label>;
+    case 10:
+      return <Label color='yellow'>管理员</Label>;
+    case 100:
+      return <Label color='orange'>超级管理员</Label>;
+    default:
+      return <Label color='red'>未知身份</Label>;
+  }
+}
+
+const UsersTable = () => {
+  const [users, setUsers] = 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 res = await API.get(`/api/user/?p=${startIdx}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setUsers(data);
+      } else {
+        let newUsers = users;
+        newUsers.push(...data);
+        setUsers(newUsers);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const onPaginationChange = (e, { activePage }) => {
+    (async () => {
+      if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
+        // In this case we have to load more data and then append them.
+        await loadUsers(activePage - 1);
+      }
+      setActivePage(activePage);
+    })();
+  };
+
+  useEffect(() => {
+    loadUsers(0)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, []);
+
+  const manageUser = (username, action, idx) => {
+    (async () => {
+      const res = await API.post('/api/user/manage', {
+        username,
+        action,
+      });
+      const { success, message } = res.data;
+      if (success) {
+        showSuccess('操作成功完成！');
+        let user = res.data.data;
+        let newUsers = [...users];
+        let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+        if (action === 'delete') {
+          newUsers[realIdx].deleted = true;
+        } else {
+          newUsers[realIdx].status = user.status;
+          newUsers[realIdx].role = user.role;
+        }
+        setUsers(newUsers);
+      } else {
+        showError(message);
+      }
+    })();
+  };
+
+  const renderStatus = (status) => {
+    switch (status) {
+      case 1:
+        return <Label basic>已激活</Label>;
+      case 2:
+        return (
+          <Label basic color='red'>
+            已封禁
+          </Label>
+        );
+      default:
+        return (
+          <Label basic color='grey'>
+            未知状态
+          </Label>
+        );
+    }
+  };
+
+  const searchUsers = async () => {
+    if (searchKeyword === '') {
+      // if keyword is blank, load files instead.
+      await loadUsers(0);
+      setActivePage(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setUsers(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const handleKeywordChange = async (e, { value }) => {
+    setSearchKeyword(value.trim());
+  };
+
+  const sortUser = (key) => {
+    if (users.length === 0) return;
+    setLoading(true);
+    let sortedUsers = [...users];
+    sortedUsers.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedUsers[0].id === users[0].id) {
+      sortedUsers.reverse();
+    }
+    setUsers(sortedUsers);
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <Form onSubmit={searchUsers}>
+        <Form.Input
+          icon='search'
+          fluid
+          iconPosition='left'
+          placeholder='搜索用户的 ID，用户名，显示名称，以及邮箱地址 ...'
+          value={searchKeyword}
+          loading={searching}
+          onChange={handleKeywordChange}
+        />
+      </Form>
+
+      <Table basic>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortUser('username');
+              }}
+            >
+              用户名
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortUser('display_name');
+              }}
+            >
+              显示名称
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortUser('email');
+              }}
+            >
+              邮箱地址
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortUser('role');
+              }}
+            >
+              用户角色
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortUser('status');
+              }}
+            >
+              状态
+            </Table.HeaderCell>
+            <Table.HeaderCell>操作</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {users
+            .slice(
+              (activePage - 1) * ITEMS_PER_PAGE,
+              activePage * ITEMS_PER_PAGE
+            )
+            .map((user, idx) => {
+              if (user.deleted) return <></>;
+              return (
+                <Table.Row key={user.id}>
+                  <Table.Cell>{user.username}</Table.Cell>
+                  <Table.Cell>{user.display_name}</Table.Cell>
+                  <Table.Cell>{user.email ? user.email : '无'}</Table.Cell>
+                  <Table.Cell>{renderRole(user.role)}</Table.Cell>
+                  <Table.Cell>{renderStatus(user.status)}</Table.Cell>
+                  <Table.Cell>
+                    <div>
+                      <Button
+                        size={'small'}
+                        positive
+                        onClick={() => {
+                          manageUser(user.username, 'promote', idx);
+                        }}
+                      >
+                        提升
+                      </Button>
+                      <Button
+                        size={'small'}
+                        color={'yellow'}
+                        onClick={() => {
+                          manageUser(user.username, 'demote', idx);
+                        }}
+                      >
+                        降级
+                      </Button>
+                      <Button
+                        size={'small'}
+                        negative
+                        onClick={() => {
+                          manageUser(user.username, 'delete', idx);
+                        }}
+                      >
+                        删除
+                      </Button>
+                      <Button
+                        size={'small'}
+                        onClick={() => {
+                          manageUser(
+                            user.username,
+                            user.status === 1 ? 'disable' : 'enable',
+                            idx
+                          );
+                        }}
+                      >
+                        {user.status === 1 ? '禁用' : '启用'}
+                      </Button>
+                      <Button
+                        size={'small'}
+                        as={Link}
+                        to={'/user/edit/' + user.id}
+                      >
+                        编辑
+                      </Button>
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })}
+        </Table.Body>
+
+        <Table.Footer>
+          <Table.Row>
+            <Table.HeaderCell colSpan='6'>
+              <Button size='small' as={Link} to='/user/add' loading={loading}>
+                添加新的用户
+              </Button>
+              <Pagination
+                floated='right'
+                activePage={activePage}
+                onPageChange={onPaginationChange}
+                size='small'
+                siblingRange={1}
+                totalPages={
+                  Math.ceil(users.length / ITEMS_PER_PAGE) +
+                  (users.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
+                }
+              />
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Footer>
+      </Table>
+    </>
+  );
+};
+
+export default UsersTable;