feat: fix CAS logout failure caused by Beego session update problem (#3194)

* feat: fix the cas logout failure caused by beego session update problem

* fix: simplify the implementation of logout timer

* fix: change the location of the login success code

* fix: add i18n to CasLogout.js

web/src/UserEditPage.js

@@ -1050,6 +1050,13 @@ class UserEditPage extends React.Component {
             <MfaAccountTable
               title={i18next.t("user:MFA accounts")}
               table={this.state.user.mfaAccounts}
+              qrUrl={
+                "casdoor-app://login/into?serverUrl=" + window.location.origin +
+                "&clientId=" + this.state.application.clientId +
+                "&organizationName=" + this.state.organizationName +
+                "&appName=" + this.state.user.signupApplication
+              }
+              icon={this.state.user.avatar}
               onUpdateTable={(table) => {this.updateUserField("mfaAccounts", table);}}
             />
           </Col>

web/src/auth/CasLogout.js

@@ -34,25 +34,42 @@ class CasLogout extends React.Component {
 
   UNSAFE_componentWillMount() {
     const params = new URLSearchParams(this.props.location.search);
+    const logoutInterval = 100;
+
+    const logoutTimeOut = (redirectUri) => {
+      setTimeout(() => {
+        AuthBackend.getAccount().then((accountRes) => {
+          if (accountRes.status === "ok") {
+            AuthBackend.logout().then((logoutRes) => {
+              if (logoutRes.status === "ok") {
+                logoutTimeOut(logoutRes.data2);
+              } else {
+                Setting.showMessage("error", `${i18next.t("login:Failed to log out")}: ${logoutRes.msg}`);
+              }
+            });
+          } else {
+            Setting.showMessage("success", i18next.t("application:Logged out successfully"));
+            this.props.onUpdateAccount(null);
+            if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
+              Setting.goToLink(redirectUri);
+            } else if (params.has("service")) {
+              Setting.goToLink(params.get("service"));
+            } else {
+              Setting.goToLinkSoft(this, `/cas/${this.state.owner}/${this.state.applicationName}/login`);
+            }
+          }
+        });
+      }, logoutInterval);
+    };
 
     AuthBackend.logout()
       .then((res) => {
         if (res.status === "ok") {
-          Setting.showMessage("success", "Logged out successfully");
-          this.props.onUpdateAccount(null);
-          const redirectUri = res.data2;
-          if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
-            Setting.goToLink(redirectUri);
-          } else if (params.has("service")) {
-            Setting.goToLink(params.get("service"));
-          } else {
-            Setting.goToLinkSoft(this, `/cas/${this.state.owner}/${this.state.applicationName}/login`);
-          }
+          logoutTimeOut(res.data2);
         } else {
-          Setting.showMessage("error", `Failed to log out: ${res.msg}`);
+          Setting.showMessage("error", `${i18next.t("login:Failed to log out")}: ${res.msg}`);
         }
       });
-
   }
 
   render() {

web/src/table/MfaAccountTable.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
-import {Button, Col, Image, Input, Row, Table, Tooltip} from "antd";
+import {Button, Col, Image, Input, Popover, QRCode, Row, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
 import i18next from "i18next";
 
@@ -23,6 +23,8 @@ class MfaAccountTable extends React.Component {
     super(props);
     this.state = {
       classes: props,
+      qrUrl: this.props.qrUrl,
+      icon: this.props.icon,
       mfaAccounts: this.props.table !== null ? this.props.table.map((item, index) => {
         item.key = index;
         return item;
@@ -158,6 +160,15 @@ class MfaAccountTable extends React.Component {
           <div>
             {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
             <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
+            <Popover trigger="focus" content={
+              <QRCode
+                value={this.state.qrUrl}
+                icon={this.state.icon}
+                bordered={false}
+              />
+            }>
+              <Button style={{marginLeft: "5px"}} type="primary" size="small">{i18next.t("general:QR Code")}</Button>
+            </Popover>
           </div>
         )}
       />