llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 21:30:24 +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 i18next from "i18next";
import {createButton} from "react-social-login-buttons"; 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}) { 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 = { const config = {
text: `Sign in with ${type}`, text: `Sign in with ${type}`,

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

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