feat: allow user to select organization in login page when using shared app (#4053)

web/src/Setting.js

@@ -1296,6 +1296,9 @@ export function renderSignupLink(application, text) {
   } else {
     if (application.signupUrl === "") {
       url = `/signup/${application.name}`;
+      if (application.isShared) {
+        url = `/signup/${application.name}-org-${application.organization}`;
+      }
     } else {
       url = application.signupUrl;
     }

web/src/auth/LoginPage.js

@@ -595,6 +595,32 @@ class LoginPage extends React.Component {
     return null;
   }
 
+  switchLoginOrganization(name) {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    const clientId = searchParams.get("client_id");
+    if (clientId) {
+      const clientIdSplited = clientId.split("-org-");
+      searchParams.set("client_id", `${clientIdSplited[0]}-org-${name}`);
+
+      Setting.goToLink(`/login/oauth/authorize?${searchParams.toString()}`);
+      return;
+    }
+
+    const application = this.getApplicationObj();
+    if (window.location.pathname.startsWith("/login/saml/authorize")) {
+      Setting.goToLink(`/login/saml/authorize/${name}/${application.name}-org-${name}`);
+      return;
+    }
+
+    if (window.location.pathname.startsWith("/cas")) {
+      Setting.goToLink(`/cas/${application.name}-org-${name}/${name}/login`);
+      return;
+    }
+
+    Setting.goToLink(`/login/${name}?orgChoiceMode=None`);
+  }
+
   renderFormItem(application, signinItem) {
     if (!signinItem.visible && signinItem.name !== "Forgot password?") {
       return null;
@@ -648,6 +674,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 +779,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>")}} />
@@ -848,6 +880,17 @@ class LoginPage extends React.Component {
           {this.renderFooter(application, signinItem)}
         </div>
       );
+    } else if (signinItem.name === "Select organization") {
+      return (
+        <Form.Item>
+          <div key={resultItemKey} style={{width: "100%"}} className="login-organization-select">
+            <OrganizationSelect style={{width: "100%"}} initValue={application.organization}
+              onSelect={(value) => {
+                this.switchLoginOrganization(value);
+              }} />
+          </div>
+        </Form.Item>
+      );
     }
   }
 
@@ -896,10 +939,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 +1278,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 +1443,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 +1462,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) {

web/src/table/SigninTable.js

@@ -119,6 +119,7 @@ class SigninTable extends React.Component {
             {name: "Signup link", displayName: i18next.t("general:Signup link")},
             {name: "Captcha", displayName: i18next.t("general:Captcha")},
             {name: "Auto sign in", displayName: i18next.t("login:Auto sign in")},
+            {name: "Select organization", displayName: i18next.t("login:Select organization")},
           ];
 
           const getItemDisplayName = (text) => {