Initial commit

2023-04-22 20:39:27 +08:00
commit ab1f8a2bf4
87 changed files with 6933 additions and 0 deletions
--- a/web/src/components/LoginForm.js
+++ b/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;