fix: oauth aff

web/src/components/RegisterForm.js

@@ -1,10 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
+import { API, getLogo, showError, showInfo, showSuccess, updateAPI } from '../helpers';
 import Turnstile from 'react-turnstile';
-import { Button, Card, Form, Layout } from '@douyinfe/semi-ui';
+import { Button, Card, Divider, Form, Icon, Layout, Modal } from '@douyinfe/semi-ui';
 import Title from '@douyinfe/semi-ui/lib/es/typography/title';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
+import { IconGithubLogo } from '@douyinfe/semi-icons';
+import { onGitHubOAuthClicked, onLinuxDOOAuthClicked } from './utils.js';
+import LinuxDoIcon from './LinuxDoIcon.js';
+import WeChatIcon from './WeChatIcon.js';
+import TelegramLoginButton from 'react-telegram-login/src';
+import { setUserData } from '../helpers/data.js';
 
 const RegisterForm = () => {
   const [inputs, setInputs] = useState({
@@ -20,7 +26,11 @@ const RegisterForm = () => {
   const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
   const [turnstileToken, setTurnstileToken] = useState('');
   const [loading, setLoading] = useState(false);
+  const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
+  const [status, setStatus] = useState({});
+  let navigate = useNavigate();
   const logo = getLogo();
+
   let affCode = new URLSearchParams(window.location.search).get('aff');
   if (affCode) {
     localStorage.setItem('aff', affCode);
@@ -30,6 +40,7 @@ const RegisterForm = () => {
     let status = localStorage.getItem('status');
     if (status) {
       status = JSON.parse(status);
+      setStatus(status);
       setShowEmailVerification(status.email_verification);
       if (status.turnstile_check) {
         setTurnstileEnabled(true);
@@ -38,7 +49,32 @@ const RegisterForm = () => {
     }
   });
 
-  let navigate = useNavigate();
+
+  const onWeChatLoginClicked = () => {
+    setShowWeChatLoginModal(true);
+  };
+
+  const onSubmitWeChatVerificationCode = async () => {
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    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));
+      setUserData(data);
+      updateAPI();
+      navigate('/');
+      showSuccess('登录成功！');
+      setShowWeChatLoginModal(false);
+    } else {
+      showError(message);
+    }
+  };
 
   function handleChange(name, value) {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
@@ -189,14 +225,127 @@ const RegisterForm = () => {
                     </Link>
                   </Text>
                 </div>
+                {status.github_oauth ||
+                status.wechat_login ||
+                status.telegram_oauth ||
+                status.linuxdo_oauth ? (
+                  <>
+                    <Divider margin='12px' align='center'>
+                      第三方登录
+                    </Divider>
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        marginTop: 20,
+                      }}
+                    >
+                      {status.github_oauth ? (
+                        <Button
+                          type='primary'
+                          icon={<IconGithubLogo />}
+                          onClick={() =>
+                            onGitHubOAuthClicked(status.github_client_id)
+                          }
+                        />
+                      ) : (
+                        <></>
+                      )}
+                      {status.linuxdo_oauth ? (
+                        <Button
+                          icon={<LinuxDoIcon />}
+                          onClick={() =>
+                            onLinuxDOOAuthClicked(status.linuxdo_client_id)
+                          }
+                        />
+                      ) : (
+                        <></>
+                      )}
+                      {status.wechat_login ? (
+                        <Button
+                          type='primary'
+                          style={{ color: 'rgba(var(--semi-green-5), 1)' }}
+                          icon={<Icon svg={<WeChatIcon />} />}
+                          onClick={onWeChatLoginClicked}
+                        />
+                      ) : (
+                        <></>
+                      )}
+                    </div>
+                    {status.telegram_oauth ? (
+                      <>
+                        <div
+                          style={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            marginTop: 5,
+                          }}
+                        >
+                          <TelegramLoginButton
+                            dataOnauth={onTelegramLoginClicked}
+                            botName={status.telegram_bot_name}
+                          />
+                        </div>
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </>
+                ) : (
+                  <></>
+                )}
               </Card>
-              {turnstileEnabled ? (
-                <Turnstile
-                  sitekey={turnstileSiteKey}
-                  onVerify={(token) => {
-                    setTurnstileToken(token);
+              <Modal
+                title='微信扫码登录'
+                visible={showWeChatLoginModal}
+                maskClosable={true}
+                onOk={onSubmitWeChatVerificationCode}
+                onCancel={() => setShowWeChatLoginModal(false)}
+                okText={'登录'}
+                size={'small'}
+                centered={true}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItem: 'center',
+                    flexDirection: 'column',
                   }}
-                />
+                >
+                  <img src={status.wechat_qrcode} />
+                </div>
+                <div style={{ textAlign: 'center' }}>
+                  <p>
+                    微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
+                  </p>
+                </div>
+                <Form size='large'>
+                  <Form.Input
+                    field={'wechat_verification_code'}
+                    placeholder='验证码'
+                    label={'验证码'}
+                    value={inputs.wechat_verification_code}
+                    onChange={(value) =>
+                      handleChange('wechat_verification_code', value)
+                    }
+                  />
+                </Form>
+              </Modal>
+              {turnstileEnabled ? (
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    marginTop: 20,
+                  }}
+                >
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                </div>
               ) : (
                 <></>
               )}