From 9de2d21e1a13111276873ccf132f84eb9d275e09 Mon Sep 17 00:00:00 2001
From: "1808837298@qq.com" <1808837298@qq.com>
Date: Wed, 6 Mar 2024 16:53:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E5=BE=AE=E4=BF=A1?=
 =?UTF-8?q?=E5=85=AC=E4=BC=97=E5=8F=B7=E6=89=AB=E7=A0=81=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=20(close=20#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/LoginForm.js  | 85 +++++++++++++++-----------------
 web/src/components/WeChatIcon.js | 24 +++++++++
 2 files changed, 64 insertions(+), 45 deletions(-)
 create mode 100644 web/src/components/WeChatIcon.js

diff --git a/web/src/components/LoginForm.js b/web/src/components/LoginForm.js
index eb94784..c8f0536 100644
--- a/web/src/components/LoginForm.js
+++ b/web/src/components/LoginForm.js
@@ -4,12 +4,13 @@ import { UserContext } from '../context/User';
 import { API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning } from '../helpers';
 import { onGitHubOAuthClicked } from './utils';
 import Turnstile from "react-turnstile";
-import { Layout, Card, Image, Form, Button, Divider, Modal } from "@douyinfe/semi-ui";
+import { Layout, Card, Image, Form, Button, Divider, Modal, Icon } 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 TelegramLoginButton from 'react-telegram-login';
 
 import { IconGithubLogo } from '@douyinfe/semi-icons';
+import WeChatIcon from './WeChatIcon';
 
 const LoginForm = () => {
     const [inputs, setInputs] = useState({
@@ -179,16 +180,16 @@ const LoginForm = () => {
                                             ) : (
                                                 <></>
                                             )}
-                                            {/*{status.wechat_login ? (*/}
-                                            {/*    <Button*/}
-                                            {/*        circular*/}
-                                            {/*        color='green'*/}
-                                            {/*        icon='wechat'*/}
-                                            {/*        onClick={onWeChatLoginClicked}*/}
-                                            {/*    />*/}
-                                            {/*) : (*/}
-                                            {/*    <></>*/}
-                                            {/*)}*/}
+                                            {status.wechat_login ? (
+                                                <Button
+                                                    type='primary'
+                                                    style={{color: 'rgba(var(--semi-green-5), 1)'}}
+                                                    icon={<Icon svg={<WeChatIcon />} />}
+                                                    onClick={onWeChatLoginClicked}
+                                                />
+                                            ) : (
+                                                <></>
+                                            )}
 
                                             {status.telegram_oauth ? (
                                                 <TelegramLoginButton dataOnauth={onTelegramLoginClicked} botName={status.telegram_bot_name} />
@@ -200,40 +201,34 @@ const LoginForm = () => {
                                 ) : (
                                     <></>
                                 )}
-                                {/*<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*/}
-                                {/*                    field={'wechat_verification_code'}*/}
-                                {/*                    placeholder='验证码'*/}
-                                {/*                    name='wechat_verification_code'*/}
-                                {/*                    value={inputs.wechat_verification_code}*/}
-                                {/*                    onChange={handleChange}*/}
-                                {/*                />*/}
-                                {/*                <Button*/}
-                                {/*                    color=''*/}
-                                {/*                    fluid*/}
-                                {/*                    size='large'*/}
-                                {/*                    onClick={onSubmitWeChatVerificationCode}*/}
-                                {/*                >*/}
-                                {/*                    登录*/}
-                                {/*                </Button>*/}
-                                {/*            </Form>*/}
-                                {/*        </Modal.Description>*/}
-                                {/*    </Modal.Content>*/}
-                                {/*</Modal>*/}
+                                <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>
                             </Card>
                             {turnstileEnabled ? (
                                 <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
diff --git a/web/src/components/WeChatIcon.js b/web/src/components/WeChatIcon.js
new file mode 100644
index 0000000..8d7f6dd
--- /dev/null
+++ b/web/src/components/WeChatIcon.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Icon } from '@douyinfe/semi-ui';
+
+const WeChatIcon = () => {
+  function CustomIcon() {
+    return <svg t='1709714447384' className='icon' viewBox='0 0 1024 1024' version='1.1'
+                xmlns='http://www.w3.org/2000/svg' p-id='5091' width='16' height='16'>
+      <path
+        d='M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z'
+        p-id='5092'></path>
+      <path
+        d='M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 2.4 0 4.7-0.9 6.4-2.6 1.7-1.7 2.6-4 2.6-6.4 0-2.2-0.9-4.4-1.4-6.6-0.3-1.2-7.6-28.3-12.2-45.3-0.5-1.9-0.9-3.8-0.9-5.7 0.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9z m179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-0.1 19.8-16.2 35.9-36 35.9z'
+        p-id='5093'></path>
+    </svg>;
+  }
+
+  return (
+    <div>
+      <Icon svg={<CustomIcon />} />
+    </div>
+  );
+};
+
+export default WeChatIcon;