llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 13:20:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: [SAML + long button crash] fix Disabling "Enable password" leads to white app page when SAML provider is active (#1691)

Browse Source 
* fix: saml long button crush

* fix: sue svg

* Update Setting.js

* Update LoginButton.js

* Update ProviderButton.js

---------

Co-authored-by: hsluoyz <hsluoyz@qq.com>
This commit is contained in:
Yaodong Yu
2023-03-26 23:56:43 +08:00
committed by GitHub
parent a8937d3046
commit fd61b963d5
2 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/auth/LoginButton.js
View File

@ -14,11 +14,10 @@
import i18next from "i18next";
import {createButton} from "react-social-login-buttons";
import {StaticBaseUrl} from "../Setting";
function LoginButton({type, align = "center", style = {background: "#ffffff", color: "#000000"}, activeStyle = {background: "#ededee"}}) {
function LoginButton({type, logoUrl, align = "center", style = {background: "#ffffff", color: "#000000"}, activeStyle = {background: "#ededee"}}) {
function Icon({width = 24, height = 24, color}) {
return <img src={`${StaticBaseUrl}/buttons/${type.toLowerCase()}.svg`} alt={`Sign in with ${type}`} style={{width: width, height: height}} />;
return <img src={logoUrl} alt={`Sign in with ${type}`} style={{width: width, height: height}} />;
}
const config = {
text: `Sign in with ${type}`,

92
web/src/auth/ProviderButton.js
View File

@ -44,62 +44,62 @@ import * as AuthBackend from "./AuthBackend";
import {getEvent} from "./Util";
import {Modal} from "antd";
function getSigninButton(type) {
const text = i18next.t("login:Sign in with {type}").replace("{type}", type);
if (type === "GitHub") {
function getSigninButton(provider) {
const text = i18next.t("login:Sign in with {type}").replace("{type}", provider.type);
if (provider.type === "GitHub") {
return <GithubLoginButton text={text} align={"center"} />;
} else if (type === "Google") {
} else if (provider.type === "Google") {
return <GoogleLoginButton text={text} align={"center"} />;
} else if (type === "QQ") {
} else if (provider.type === "QQ") {
return <QqLoginButton text={text} align={"center"} />;
} else if (type === "Facebook") {
} else if (provider.type === "Facebook") {
return <FacebookLoginButton text={text} align={"center"} />;
} else if (type === "Weibo") {
} else if (provider.type === "Weibo") {
return <WeiboLoginButton text={text} align={"center"} />;
} else if (type === "Gitee") {
} else if (provider.type === "Gitee") {
return <GiteeLoginButton text={text} align={"center"} />;
} else if (type === "WeChat") {
} else if (provider.type === "WeChat") {
return <WechatLoginButton text={text} align={"center"} />;
} else if (type === "DingTalk") {
} else if (provider.type === "DingTalk") {
return <DingTalkLoginButton text={text} align={"center"} />;
} else if (type === "LinkedIn") {
} else if (provider.type === "LinkedIn") {
return <LinkedInLoginButton text={text} align={"center"} />;
} else if (type === "WeCom") {
} else if (provider.type === "WeCom") {
return <WeComLoginButton text={text} align={"center"} />;
} else if (type === "Lark") {
} else if (provider.type === "Lark") {
return <LarkLoginButton text={text} align={"center"} />;
} else if (type === "GitLab") {
} else if (provider.type === "GitLab") {
return <GitLabLoginButton text={text} align={"center"} />;
} else if (type === "Adfs") {
} else if (provider.type === "Adfs") {
return <AdfsLoginButton text={text} align={"center"} />;
} else if (type === "Casdoor") {
} else if (provider.type === "Casdoor") {
return <CasdoorLoginButton text={text} align={"center"} />;
} else if (type === "Baidu") {
} else if (provider.type === "Baidu") {
return <BaiduLoginButton text={text} align={"center"} />;
} else if (type === "Alipay") {
} else if (provider.type === "Alipay") {
return <AlipayLoginButton text={text} align={"center"} />;
} else if (type === "Infoflow") {
} else if (provider.type === "Infoflow") {
return <InfoflowLoginButton text={text} align={"center"} />;
} else if (type === "Apple") {
} else if (provider.type === "Apple") {
return <AppleLoginButton text={text} align={"center"} />;
} else if (type === "AzureAD") {
} else if (provider.type === "AzureAD") {
return <AzureADLoginButton text={text} align={"center"} />;
} else if (type === "Slack") {
} else if (provider.type === "Slack") {
return <SlackLoginButton text={text} align={"center"} />;
} else if (type === "Steam") {
} else if (provider.type === "Steam") {
return <SteamLoginButton text={text} align={"center"} />;
} else if (type === "Bilibili") {
} else if (provider.type === "Bilibili") {
return <BilibiliLoginButton text={text} align={"center"} />;
} else if (type === "Okta") {
} else if (provider.type === "Okta") {
return <OktaLoginButton text={text} align={"center"} />;
} else if (type === "Douyin") {
} else if (provider.type === "Douyin") {
return <DouyinLoginButton text={text} align={"center"} />;
} else {
return <LoginButton key={type} type={type} />;
return <LoginButton key={provider.type} type={provider.type} logoUrl={getProviderLogoURL(provider)} />;
}
}
function getSamlUrl(provider, location) {
function goToSamlUrl(provider, location) {
const params = new URLSearchParams(location.search);
const clientId = params.get("client_id") ?? "";
const state = params.get("state");
@ -149,12 +149,11 @@ export function renderProviderLogo(provider, application, width, margin, size, l
}
} else if (provider.category === "SAML") {
return (
<a key={provider.displayName} onClick={() => getSamlUrl(provider, location)}>
<a key={provider.displayName} onClick={() => goToSamlUrl(provider, location)}>
<img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
</a>
);
}
} else if (provider.type === "Custom") {
// style definition
const text = i18next.t("login:Sign in with {type}").replace("{type}", provider.displayName);
@ -173,7 +172,7 @@ export function renderProviderLogo(provider, application, width, margin, size, l
);
} else if (provider.category === "SAML") {
return (
<a key={provider.displayName} onClick={() => getSamlUrl(provider, location)} style={customAStyle}>
<a key={provider.displayName} onClick={() => goToSamlUrl(provider, location)} style={customAStyle}>
<button style={customButtonStyle}>
<img width={26} src={getProviderLogoURL(provider)} alt={provider.displayName} style={customImgStyle} />
<span style={customSpanStyle}>{text}</span>
@ -182,14 +181,27 @@ export function renderProviderLogo(provider, application, width, margin, size, l
);
}
} else {
return (
<div key={provider.displayName} style={{marginBottom: "10px"}}>
<a href={Provider.getAuthUrl(application, provider, "signup")}>
{
getSigninButton(provider.type)
}
</a>
</div>
);
// big button, for disable password signin
if (provider.category === "SAML") {
return (
<div key={provider.displayName} style={{marginBottom: "10px"}}>
<a onClick={() => goToSamlUrl(provider, location)}>
{
getSigninButton(provider)
}
</a>
</div>
);
} else {
return (
<div key={provider.displayName} style={{marginBottom: "10px"}}>
<a href={Provider.getAuthUrl(application, provider, "signup")}>
{
getSigninButton(provider)
}
</a>
</div>
);
}
}
}