llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-09-06 01:40:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: show placeholder QR code with loading instead of "Loading" text in QR code login page (#4031)

Browse Source
This commit is contained in:
DacongDA
2025-08-02 15:58:49 +08:00
committed by GitHub
parent 462ecce43b
commit d537377b31
5 changed files with 17 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/auth/Util.js
View File

@@ -13,7 +13,7 @@
// limitations under the License.
import React from "react";
import {Alert, Button, Modal, Result} from "antd";
import {Alert, Button, Modal, QRCode, Result} from "antd";
import i18next from "i18next";
import {getWechatMessageEvent} from "./AuthBackend";
import * as Setting from "../Setting";
@@ -217,7 +217,7 @@ export async function WechatOfficialAccountModal(application, provider, method)
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%"}} />
<QRCode style={{padding: "20px", margin: "auto"}} bordered={false} value={res.data} size={230} />
</div>
),
onOk() {

33
web/src/auth/WeChatLoginPanel.js
View File

@@ -16,13 +16,14 @@ import React from "react";
import * as AuthBackend from "./AuthBackend";
import i18next from "i18next";
import * as Util from "./Util";
import {QRCode} from "antd";
class WeChatLoginPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
qrCode: null,
loading: false,
status: "loading",
ticket: null,
};
this.pollingTimer = null;
@@ -57,20 +58,20 @@ class WeChatLoginPanel extends React.Component {
const {application} = this.props;
const wechatProviderItem = application?.providers?.find(p => p.provider?.type === "WeChat");
if (wechatProviderItem) {
this.setState({loading: true, qrCode: null, ticket: null});
this.setState({status: "loading", qrCode: null, ticket: null});
AuthBackend.getWechatQRCode(`${wechatProviderItem.provider.owner}/${wechatProviderItem.provider.name}`).then(res => {
if (res.status === "ok" && res.data) {
this.setState({qrCode: res.data, loading: false, ticket: res.data2});
this.setState({qrCode: res.data, status: "active", ticket: res.data2});
this.clearPolling();
this.pollingTimer = setInterval(() => {
Util.getEvent(application, wechatProviderItem.provider, res.data2, "signup");
}, 1000);
} else {
this.setState({qrCode: null, loading: false, ticket: null});
this.setState({qrCode: null, status: "expired", ticket: null});
this.clearPolling();
}
}).catch(() => {
this.setState({qrCode: null, loading: false, ticket: null});
this.setState({qrCode: null, status: "expired", ticket: null});
this.clearPolling();
});
}
@@ -78,26 +79,20 @@ class WeChatLoginPanel extends React.Component {
render() {
const {application, loginWidth = 320} = this.props;
const {loading, qrCode} = this.state;
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))}
{loading ? (
<div style={{marginTop: 16}}>
<span>{i18next.t("login:Loading")}</span>
<div style={{marginTop: 2}}>
<QRCode style={{margin: "auto", marginTop: "20px", marginBottom: "20px"}} bordered={false} status={status} value={qrCode ?? " "} size={230} />
<div style={{marginTop: 8}}>
<a onClick={e => {e.preventDefault(); this.fetchQrCode();}}>
{i18next.t("login:Refresh")}
</a>
</div>
) : qrCode ? (
<div style={{marginTop: 2}}>
<img src={`data:image/png;base64,${qrCode}`} alt="WeChat QR code" style={{width: 250, height: 250}} />
<div style={{marginTop: 8}}>
<a onClick={e => {e.preventDefault(); this.fetchQrCode();}}>
{i18next.t("login:Refresh")}
</a>
</div>
</div>
) : null}
</div>
</div>
);
}