feat: support scanning code to login in the login page (#4052)

web/src/auth/LoginPage.js

@@ -648,6 +648,9 @@ class LoginPage extends React.Component {
       )
       ;
     } else if (signinItem.name === "Username") {
+      if (this.state.loginMethod === "wechat") {
+        return (<WeChatLoginPanel application={application} loginMethod={this.state.loginMethod} />);
+      }
       return (
         <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
@@ -750,6 +753,9 @@ class LoginPage extends React.Component {
     } else if (signinItem.name === "Agreement") {
       return AgreementModal.isAgreementRequired(application) ? AgreementModal.renderAgreementFormItem(application, true, {}, this) : null;
     } else if (signinItem.name === "Login button") {
+      if (this.state.loginMethod === "wechat") {
+        return null;
+      }
       return (
         <Form.Item key={resultItemKey} className="login-button-box">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
@@ -896,10 +902,6 @@ class LoginPage extends React.Component {
         loginWidth += 10;
       }
 
-      if (this.state.loginMethod === "wechat") {
-        return (<WeChatLoginPanel application={application} renderFormItem={this.renderFormItem.bind(this)} loginMethod={this.state.loginMethod} loginWidth={loginWidth} renderMethodChoiceBox={this.renderMethodChoiceBox.bind(this)} />);
-      }
-
       return (
         <Form
           name="normal_login"
@@ -1239,6 +1241,7 @@ class LoginPage extends React.Component {
       [generateItemKey("WebAuthn", "None"), {label: i18next.t("login:WebAuthn"), key: "webAuthn"}],
       [generateItemKey("LDAP", "None"), {label: i18next.t("login:LDAP"), key: "ldap"}],
       [generateItemKey("Face ID", "None"), {label: i18next.t("login:Face ID"), key: "faceId"}],
+      [generateItemKey("WeChat", "Tab"), {label: i18next.t("login:WeChat"), key: "wechat"}],
       [generateItemKey("WeChat", "None"), {label: i18next.t("login:WeChat"), key: "wechat"}],
     ]);
 
@@ -1403,6 +1406,8 @@ class LoginPage extends React.Component {
       );
     }
 
+    const wechatSigninMethods = application.signinMethods?.filter(method => method.name === "WeChat" && method.rule === "Login page");
+
     return (
       <React.Fragment>
         <CustomGithubCorner />
@@ -1420,6 +1425,15 @@ class LoginPage extends React.Component {
                 }
               </div>
             </div>
+            {
+              wechatSigninMethods?.length > 0 ? (<div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+                <div>
+                  <h3 style={{textAlign: "center", width: 320}}>{i18next.t("provider:Please use WeChat to scan the QR code and follow the official account for sign in")}</h3>
+                  <WeChatLoginPanel application={application} loginMethod={this.state.loginMethod} />
+                </div>
+              </div>
+              ) : null
+            }
           </div>
         </div>
       </React.Fragment>

web/src/auth/WeChatLoginPanel.js

@@ -78,13 +78,10 @@ class WeChatLoginPanel extends React.Component {
   }
 
   render() {
-    const {application, loginWidth = 320} = this.props;
+    const {loginWidth = 320} = this.props;
     const {status, qrCode} = this.state;
     return (
       <div style={{width: loginWidth, margin: "0 auto", textAlign: "center", marginTop: 16}}>
-        {application.signinItems?.filter(item => item.name === "Logo").map(signinItem => this.props.renderFormItem(application, signinItem))}
-        {this.props.renderMethodChoiceBox()}
-        {application.signinItems?.filter(item => item.name === "Languages").map(signinItem => this.props.renderFormItem(application, signinItem))}
         <div style={{marginTop: 2}}>
           <QRCode style={{margin: "auto", marginTop: "20px", marginBottom: "20px"}} bordered={false} status={status} value={qrCode ?? " "} size={230} />
           <div style={{marginTop: 8}}>

web/src/table/SigninMethodTable.js

@@ -96,6 +96,8 @@ class SigninMethodTable extends React.Component {
                 this.updateField(table, index, "displayName", value);
                 if (value === "Verification code" || value === "Password") {
                   this.updateField(table, index, "rule", "All");
+                } else if (value === "WeChat") {
+                  this.updateField(table, index, "rule", "Tab");
                 } else {
                   this.updateField(table, index, "rule", "None");
                 }
@@ -139,6 +141,11 @@ class SigninMethodTable extends React.Component {
               {id: "Non-LDAP", name: i18next.t("general:Non-LDAP")},
               {id: "Hide password", name: i18next.t("general:Hide password")},
             ];
+          } else if (record.name === "WeChat") {
+            options = [
+              {id: "Tab", name: i18next.t("general:Tab")},
+              {id: "Login page", name: i18next.t("general:Login page")},
+            ];
           }
 
           if (options.length === 0) {