fix: login / signin frontend router (#1244)

* fix: go to link

* fix: remove gotologin

* fix: redirect to login page

* fix: redirect to login page

* remove comments

* fix: formats

* fix: formats

* Update Setting.js

Co-authored-by: hsluoyz <hsluoyz@qq.com>

web/src/Setting.js

@@ -12,9 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from "react";
+import {Link, useHistory} from "react-router-dom";
 import {Tag, Tooltip, message} from "antd";
 import {QuestionCircleTwoTone} from "@ant-design/icons";
-import React from "react";
 import {isMobile as isMobileDevice} from "react-device-detect";
 import "./i18n";
 import i18next from "i18next";
@@ -22,7 +23,6 @@ import copy from "copy-to-clipboard";
 import {authConfig} from "./auth/Auth";
 import {Helmet} from "react-helmet";
 import * as Conf from "./Conf";
-import {Link} from "react-router-dom";
 import * as path from "path-browserify";
 
 export const ServerUrl = "";
@@ -743,26 +743,31 @@ export function renderLogo(application) {
   }
 }
 
-export function goToLogin(ths, application) {
+export function getLoginLink(application) {
+  let url;
   if (application === null) {
-    return;
+    url = null;
-  }
+  } else if (!application.enablePassword && window.location.pathname.includes("/auto-signup/oauth/authorize")) {
-
+    url = window.location.href.replace("/auto-signup/oauth/authorize", "/login/oauth/authorize");
-  if (!application.enablePassword && window.location.pathname.includes("/auto-signup/oauth/authorize")) {
+  } else if (authConfig.appName === application.name) {
-    const link = window.location.href.replace("/auto-signup/oauth/authorize", "/login/oauth/authorize");
+    url = "/login";
-    goToLink(link);
+  } else if (application.signinUrl === "") {
-    return;
+    url = path.join(application.homepageUrl, "login");
-  }
-
-  if (authConfig.appName === application.name) {
-    goToLinkSoft(ths, "/login");
   } else {
-    if (application.signinUrl === "") {
+    url = application.signinUrl;
-      goToLink(path.join(application.homepageUrl, "login"));
-    } else {
-      goToLink(application.signinUrl);
-    }
   }
+  return url;
+}
+
+export function renderLoginLink(application, text) {
+  const url = getLoginLink(application);
+  return renderLink(url, text, null);
+}
+
+export function redirectToLoginPage(application) {
+  const loginLink = getLoginLink(application);
+  const history = useHistory();
+  history.push(loginLink);
 }
 
 function renderLink(url, text, onClick) {

web/src/auth/ForgetPage.js

@@ -166,7 +166,7 @@ class ForgetPage extends React.Component {
     values.userOwner = this.state.application?.organizationObj.name;
     UserBackend.setPassword(values.userOwner, values.username, "", values?.newPassword).then(res => {
       if (res.status === "ok") {
-        Setting.goToLogin(this, this.state.application);
+        Setting.redirectToLoginPage(this.state.application);
       } else {
         Setting.showMessage("error", i18next.t(`signup:${res.msg}`));
       }

web/src/auth/LoginPage.js

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import React from "react";
-import {Link} from "react-router-dom";
 import {Button, Checkbox, Col, Form, Input, Result, Row, Spin, Tabs} from "antd";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as UserWebauthnBackend from "../backend/UserWebauthnBackend";
@@ -302,13 +301,11 @@ class LoginPage extends React.Component {
           title="Sign Up Error"
           subTitle={"The application does not allow to sign up new account"}
           extra={[
-            <Link key="login" onClick={() => {
+            <Button type="primary" key="signin" onClick={() => Setting.redirectToLoginPage(application)}>
-              Setting.goToLogin(this, application);
+              {
-            }}>
+                i18next.t("login:Sign In")
-              <Button type="primary" key="signin">
+              }
-                Sign In
+            </Button>,
-              </Button>
-            </Link>,
           ]}
         >
         </Result>
@@ -468,11 +465,9 @@ class LoginPage extends React.Component {
       return (
         <div style={{float: "right"}}>
           {i18next.t("signup:Have account?")}&nbsp;
-          <Link onClick={() => {
+          {
-            Setting.goToLogin(this, application);
+            Setting.renderLoginLink(application, i18next.t("signup:sign in now"))
-          }}>
+          }
-            {i18next.t("signup:sign in now")}
-          </Link>
         </div>
       );
     } else {

web/src/auth/PromptPage.js

@@ -190,7 +190,7 @@ class PromptPage extends React.Component {
           if (redirectUrl !== "" && redirectUrl !== null) {
             Setting.goToLink(redirectUrl);
           } else {
-            Setting.goToLogin(this, this.getApplicationObj());
+            Setting.redirectToLoginPage(this.getApplicationObj());
           }
         } else {
           Setting.showMessage("error", `Failed to log out: ${res.msg}`);
@@ -234,10 +234,10 @@ class PromptPage extends React.Component {
           title="Sign Up Error"
           subTitle={"You are unexpected to see this prompt page"}
           extra={[
-            <Button type="primary" key="signin" onClick={() => {
+            <Button type="primary" key="signin" onClick={() => Setting.redirectToLoginPage(application)}>
-              Setting.goToLogin(this, application);
+              {
-            }}>
+                i18next.t("login:Sign In")
-              Sign In
+              }
             </Button>,
           ]}
         >

web/src/auth/ResultPage.js

@@ -69,7 +69,7 @@ class ResultPage extends React.Component {
               if (linkInStorage !== null && linkInStorage !== "") {
                 Setting.goToLink(linkInStorage);
               } else {
-                Setting.goToLogin(this, application);
+                Setting.redirectToLoginPage(application);
               }
             }}>
               {i18next.t("login:Sign In")}

web/src/auth/SignupPage.js

@@ -541,10 +541,10 @@ class SignupPage extends React.Component {
           title="Sign Up Error"
           subTitle={"The application does not allow to sign up new account"}
           extra={[
-            <Button type="primary" key="signin" onClick={() => {
+            <Button type="primary" key="signin" onClick={() => Setting.redirectToLoginPage(application)}>
-              Setting.goToLogin(this, application);
+              {
-            }}>
+                i18next.t("login:Sign In")
-              Sign In
+              }
             </Button>,
           ]}
         >
@@ -600,7 +600,7 @@ class SignupPage extends React.Component {
             if (linkInStorage !== null && linkInStorage !== "") {
               Setting.goToLink(linkInStorage);
             } else {
-              Setting.goToLogin(this, application);
+              Setting.redirectToLoginPage(application);
             }
           }}>
             {i18next.t("signup:sign in now")}