From 6a7ac35e65fe7c98cf86b0916b0ac279d7656c63 Mon Sep 17 00:00:00 2001
From: DacongDA <dacongda1@sina.com>
Date: Tue, 5 Mar 2024 18:46:28 +0800
Subject: [PATCH] fix: fix wechat media account can not bind issue (#2774)

* fix: fix wechat media account can not bind

* fix: improve code format
---
 web/src/auth/ProviderButton.js | 31 ++++---------------------------
 web/src/auth/Util.js           | 31 ++++++++++++++++++++++++++++---
 web/src/common/OAuthWidget.js  | 17 ++++++++++++++---
 3 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/web/src/auth/ProviderButton.js b/web/src/auth/ProviderButton.js
index 18355ead..c7562c54 100644
--- a/web/src/auth/ProviderButton.js
+++ b/web/src/auth/ProviderButton.js
@@ -42,9 +42,7 @@ import OktaLoginButton from "./OktaLoginButton";
 import DouyinLoginButton from "./DouyinLoginButton";
 import LoginButton from "./LoginButton";
 import * as AuthBackend from "./AuthBackend";
-import * as Setting from "../Setting";
-import {getEvent} from "./Util";
-import {Modal} from "antd";
+import {WechatOfficialAccountModal} from "./Util";
 
 function getSigninButton(provider) {
   const text = i18next.t("login:Sign in with {type}").replace("{type}", provider.displayName !== "" ? provider.displayName : provider.type);
@@ -141,32 +139,11 @@ export function renderProviderLogo(provider, application, width, margin, size, l
   if (size === "small") {
     if (provider.category === "OAuth") {
       if (provider.type === "WeChat" && provider.clientId2 !== "" && provider.clientSecret2 !== "" && provider.disableSsl === true && !navigator.userAgent.includes("MicroMessenger")) {
-        const info = async() => {
-          AuthBackend.getWechatQRCode(`${provider.owner}/${provider.name}`).then(
-            async res => {
-              if (res.status !== "ok") {
-                Setting.showMessage("error", res?.msg);
-                return;
-              }
-
-              const t1 = setInterval(await getEvent, 1000, application, provider, res.data2);
-              {Modal.info({
-                title: i18next.t("provider:Please use WeChat to scan the QR code and follow the official account for sign in"),
-                content: (
-                  <div style={{marginRight: "34px"}}>
-                    <img src = {"data:image/png;base64," + res.data} alt="Wechat QR code" style={{width: "100%"}} />
-                  </div>
-                ),
-                onOk() {
-                  window.clearInterval(t1);
-                },
-              });}
-            }
-          );
-        };
         return (
           <a key={provider.displayName} >
-            <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} className="provider-img" style={{margin: margin}} onClick={info} />
+            <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} className="provider-img" style={{margin: margin}} onClick={() => {
+              WechatOfficialAccountModal(application, provider, "signup");
+            }} />
           </a>
         );
       } else {
diff --git a/web/src/auth/Util.js b/web/src/auth/Util.js
index 2d20893c..05509d05 100644
--- a/web/src/auth/Util.js
+++ b/web/src/auth/Util.js
@@ -13,11 +13,12 @@
 // limitations under the License.
 
 import React from "react";
-import {Alert, Button, Result} from "antd";
+import {Alert, Button, Modal, Result} from "antd";
 import i18next from "i18next";
 import {getWechatMessageEvent} from "./AuthBackend";
 import * as Setting from "../Setting";
 import * as Provider from "./Provider";
+import * as AuthBackend from "./AuthBackend";
 
 export function renderMessage(msg) {
   if (msg !== null) {
@@ -188,12 +189,36 @@ export function getQueryParamsFromState(state) {
   }
 }
 
-export function getEvent(application, provider, ticket) {
+export function getEvent(application, provider, ticket, method) {
   getWechatMessageEvent(ticket)
     .then(res => {
       if (res.data === "SCAN" || res.data === "subscribe") {
         const code = res?.data2;
-        Setting.goToLink(Provider.getAuthUrl(application, provider, "signup", code));
+        Setting.goToLink(Provider.getAuthUrl(application, provider, method ?? "signup", code));
       }
     });
 }
+
+export async function WechatOfficialAccountModal(application, provider, method) {
+  AuthBackend.getWechatQRCode(`${provider.owner}/${provider.name}`).then(
+    async res => {
+      if (res.status !== "ok") {
+        Setting.showMessage("error", res?.msg);
+        return;
+      }
+
+      const t1 = setInterval(await getEvent, 1000, application, provider, res.data2, method);
+      {Modal.info({
+        title: i18next.t("provider:Please use WeChat to scan the QR code and follow the official account for sign in"),
+        content: (
+          <div style={{marginRight: "34px"}}>
+            <img src = {"data:image/png;base64," + res.data} alt="Wechat QR code" style={{width: "100%"}} />
+          </div>
+        ),
+        onOk() {
+          window.clearInterval(t1);
+        },
+      });}
+    }
+  );
+}
diff --git a/web/src/common/OAuthWidget.js b/web/src/common/OAuthWidget.js
index 6dc0305c..a0f06d2b 100644
--- a/web/src/common/OAuthWidget.js
+++ b/web/src/common/OAuthWidget.js
@@ -21,6 +21,7 @@ import * as Provider from "../auth/Provider";
 import * as AuthBackend from "../auth/AuthBackend";
 import {goToWeb3Url} from "../auth/ProviderButton";
 import AccountAvatar from "../account/AccountAvatar";
+import {WechatOfficialAccountModal} from "../auth/Util";
 
 class OAuthWidget extends React.Component {
   constructor(props) {
@@ -197,9 +198,19 @@ class OAuthWidget extends React.Component {
               provider.category === "Web3" ? (
                 <Button style={{marginLeft: "20px", width: linkButtonWidth}} type="primary" disabled={user.id !== account.id} onClick={() => goToWeb3Url(application, provider, "link")}>{i18next.t("user:Link")}</Button>
               ) : (
-                <a key={provider.displayName} href={user.id !== account.id ? null : Provider.getAuthUrl(application, provider, "link")}>
-                  <Button style={{marginLeft: "20px", width: linkButtonWidth}} type="primary" disabled={user.id !== account.id}>{i18next.t("user:Link")}</Button>
-                </a>
+                provider.type === "WeChat" && provider.clientId2 !== "" && provider.clientSecret2 !== "" && provider.disableSsl === true && !navigator.userAgent.includes("MicroMessenger") ? (
+                  <a key={provider.displayName}>
+                    <Button style={{marginLeft: "20px", width: linkButtonWidth}} type="primary" disabled={user.id !== account.id} onClick={
+                      () => {
+                        WechatOfficialAccountModal(application, provider, "link");
+                      }
+                    }>{i18next.t("user:Link")}</Button>
+                  </a>
+                ) : (
+                  <a key={provider.displayName} href={user.id !== account.id ? null : Provider.getAuthUrl(application, provider, "link")}>
+                    <Button style={{marginLeft: "20px", width: linkButtonWidth}} type="primary" disabled={user.id !== account.id}>{i18next.t("user:Link")}</Button>
+                  </a>
+                )
               )
             ) : (
               <Button disabled={!providerItem.canUnlink && !Setting.isAdminUser(account)} style={{marginLeft: "20px", width: linkButtonWidth}} onClick={() => this.unlinkUser(provider.type, linkedValue)}>{i18next.t("user:Unlink")}</Button>