mirror of
https://github.com/casdoor/casdoor.git
synced 2025-05-23 02:35:49 +08:00
fix: show social buttons on signup page (#962)
This commit is contained in:
Ryao
GitHub
parent
98ef766fb4
commit
ea326b3513
@ -20,35 +20,13 @@ import * as UserWebauthnBackend from "../backend/UserWebauthnBackend";
|
||||
import * as AuthBackend from "./AuthBackend";
|
||||
import * as ApplicationBackend from "../backend/ApplicationBackend";
|
||||
import * as Provider from "./Provider";
|
||||
import * as ProviderButton from "./ProviderButton";
|
||||
import * as Util from "./Util";
|
||||
import * as Setting from "../Setting";
|
||||
import SelfLoginButton from "./SelfLoginButton";
|
||||
import {GithubLoginButton, GoogleLoginButton} from "react-social-login-buttons";
|
||||
import FacebookLoginButton from "./FacebookLoginButton";
|
||||
import QqLoginButton from "./QqLoginButton";
|
||||
import DingTalkLoginButton from "./DingTalkLoginButton";
|
||||
import GiteeLoginButton from "./GiteeLoginButton";
|
||||
import WechatLoginButton from "./WechatLoginButton";
|
||||
import WeiboLoginButton from "./WeiboLoginButton";
|
||||
import i18next from "i18next";
|
||||
import LinkedInLoginButton from "./LinkedInLoginButton";
|
||||
import WeComLoginButton from "./WeComLoginButton";
|
||||
import LarkLoginButton from "./LarkLoginButton";
|
||||
import GitLabLoginButton from "./GitLabLoginButton";
|
||||
import AdfsLoginButton from "./AdfsLoginButton";
|
||||
import BaiduLoginButton from "./BaiduLoginButton";
|
||||
import AlipayLoginButton from "./AlipayLoginButton";
|
||||
import CasdoorLoginButton from "./CasdoorLoginButton";
|
||||
import InfoflowLoginButton from "./InfoflowLoginButton";
|
||||
import AppleLoginButton from "./AppleLoginButton";
|
||||
import AzureADLoginButton from "./AzureADLoginButton";
|
||||
import SlackLoginButton from "./SlackLoginButton";
|
||||
import SteamLoginButton from "./SteamLoginButton";
|
||||
import OktaLoginButton from "./OktaLoginButton";
|
||||
import DouyinLoginButton from "./DouyinLoginButton";
|
||||
import CustomGithubCorner from "../CustomGithubCorner";
|
||||
import {CountDownInput} from "../common/CountDownInput";
|
||||
import BilibiliLoginButton from "./BilibiliLoginButton";
|
||||
|
||||
const {TabPane} = Tabs;
|
||||
|
||||
@ -270,61 +248,6 @@ class LoginPage extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
getSigninButton(type) {
|
||||
const text = i18next.t("login:Sign in with {type}").replace("{type}", type);
|
||||
if (type === "GitHub") {
|
||||
return <GithubLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Google") {
|
||||
return <GoogleLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "QQ") {
|
||||
return <QqLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Facebook") {
|
||||
return <FacebookLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Weibo") {
|
||||
return <WeiboLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Gitee") {
|
||||
return <GiteeLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "WeChat") {
|
||||
return <WechatLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "DingTalk") {
|
||||
return <DingTalkLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "LinkedIn") {
|
||||
return <LinkedInLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "WeCom") {
|
||||
return <WeComLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Lark") {
|
||||
return <LarkLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "GitLab") {
|
||||
return <GitLabLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Adfs") {
|
||||
return <AdfsLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Casdoor") {
|
||||
return <CasdoorLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Baidu") {
|
||||
return <BaiduLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Alipay") {
|
||||
return <AlipayLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Infoflow") {
|
||||
return <InfoflowLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Apple") {
|
||||
return <AppleLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "AzureAD") {
|
||||
return <AzureADLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Slack") {
|
||||
return <SlackLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Steam") {
|
||||
return <SteamLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Bilibili") {
|
||||
return <BilibiliLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Okta") {
|
||||
return <OktaLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Douyin") {
|
||||
return <DouyinLoginButton text={text} align={"center"} />;
|
||||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
getSamlUrl(provider) {
|
||||
const params = new URLSearchParams(this.props.location.search);
|
||||
let clientId = params.get("client_id");
|
||||
@ -342,35 +265,6 @@ class LoginPage extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
renderProviderLogo(provider, application, width, margin, size) {
|
||||
if (size === "small") {
|
||||
if (provider.category === "OAuth") {
|
||||
return (
|
||||
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
|
||||
<img width={width} height={width} src={Setting.getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
|
||||
</a>
|
||||
);
|
||||
} else if (provider.category === "SAML") {
|
||||
return (
|
||||
<a key={provider.displayName} onClick={this.getSamlUrl.bind(this, provider)}>
|
||||
<img width={width} height={width} src={Setting.getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
} else {
|
||||
return (
|
||||
<div key={provider.displayName} style={{marginBottom: "10px"}}>
|
||||
<a href={Provider.getAuthUrl(application, provider, "signup")}>
|
||||
{
|
||||
this.getSigninButton(provider.type)
|
||||
}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
isProviderVisible(providerItem) {
|
||||
if (this.state.mode === "signup") {
|
||||
return Setting.isProviderVisibleForSignUp(providerItem);
|
||||
@ -526,7 +420,7 @@ class LoginPage extends React.Component {
|
||||
<Form.Item>
|
||||
{
|
||||
application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
|
||||
return this.renderProviderLogo(providerItem.provider, application, 30, 5, "small");
|
||||
return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "small");
|
||||
})
|
||||
}
|
||||
</Form.Item>
|
||||
@ -547,7 +441,7 @@ class LoginPage extends React.Component {
|
||||
<br />
|
||||
{
|
||||
application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
|
||||
return this.renderProviderLogo(providerItem.provider, application, 40, 10, "big");
|
||||
return ProviderButton.renderProviderLogo(providerItem.provider, application, 40, 10, "big");
|
||||
})
|
||||
}
|
||||
<div>
|
||||
|
||||
125
web/src/auth/ProviderButton.js
Normal file
125
web/src/auth/ProviderButton.js
Normal file
@ -0,0 +1,125 @@
|
||||
// Copyright 2021 The Casdoor Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import React from "react";
|
||||
import i18next from "i18next";
|
||||
import * as Provider from "./Provider";
|
||||
import {getProviderLogoURL} from "../Setting";
|
||||
import {GithubLoginButton, GoogleLoginButton} from "react-social-login-buttons";
|
||||
import QqLoginButton from "./QqLoginButton";
|
||||
import FacebookLoginButton from "./FacebookLoginButton";
|
||||
import WeiboLoginButton from "./WeiboLoginButton";
|
||||
import GiteeLoginButton from "./GiteeLoginButton";
|
||||
import WechatLoginButton from "./WechatLoginButton";
|
||||
import DingTalkLoginButton from "./DingTalkLoginButton";
|
||||
import LinkedInLoginButton from "./LinkedInLoginButton";
|
||||
import WeComLoginButton from "./WeComLoginButton";
|
||||
import LarkLoginButton from "./LarkLoginButton";
|
||||
import GitLabLoginButton from "./GitLabLoginButton";
|
||||
import AdfsLoginButton from "./AdfsLoginButton";
|
||||
import CasdoorLoginButton from "./CasdoorLoginButton";
|
||||
import BaiduLoginButton from "./BaiduLoginButton";
|
||||
import AlipayLoginButton from "./AlipayLoginButton";
|
||||
import InfoflowLoginButton from "./InfoflowLoginButton";
|
||||
import AppleLoginButton from "./AppleLoginButton";
|
||||
import AzureADLoginButton from "./AzureADLoginButton";
|
||||
import SlackLoginButton from "./SlackLoginButton";
|
||||
import SteamLoginButton from "./SteamLoginButton";
|
||||
import BilibiliLoginButton from "./BilibiliLoginButton";
|
||||
import OktaLoginButton from "./OktaLoginButton";
|
||||
import DouyinLoginButton from "./DouyinLoginButton";
|
||||
|
||||
function getSigninButton(type) {
|
||||
const text = i18next.t("login:Sign in with {type}").replace("{type}", type);
|
||||
if (type === "GitHub") {
|
||||
return <GithubLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Google") {
|
||||
return <GoogleLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "QQ") {
|
||||
return <QqLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Facebook") {
|
||||
return <FacebookLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Weibo") {
|
||||
return <WeiboLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Gitee") {
|
||||
return <GiteeLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "WeChat") {
|
||||
return <WechatLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "DingTalk") {
|
||||
return <DingTalkLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "LinkedIn") {
|
||||
return <LinkedInLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "WeCom") {
|
||||
return <WeComLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Lark") {
|
||||
return <LarkLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "GitLab") {
|
||||
return <GitLabLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Adfs") {
|
||||
return <AdfsLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Casdoor") {
|
||||
return <CasdoorLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Baidu") {
|
||||
return <BaiduLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Alipay") {
|
||||
return <AlipayLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Infoflow") {
|
||||
return <InfoflowLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Apple") {
|
||||
return <AppleLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "AzureAD") {
|
||||
return <AzureADLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Slack") {
|
||||
return <SlackLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Steam") {
|
||||
return <SteamLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Bilibili") {
|
||||
return <BilibiliLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Okta") {
|
||||
return <OktaLoginButton text={text} align={"center"} />;
|
||||
} else if (type === "Douyin") {
|
||||
return <DouyinLoginButton text={text} align={"center"} />;
|
||||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
export function renderProviderLogo(provider, application, width, margin, size) {
|
||||
if (size === "small") {
|
||||
if (provider.category === "OAuth") {
|
||||
return (
|
||||
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
|
||||
<img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
|
||||
</a>
|
||||
);
|
||||
} else if (provider.category === "SAML") {
|
||||
return (
|
||||
<a key={provider.displayName} onClick={this.getSamlUrl.bind(this, provider)}>
|
||||
<img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
} else {
|
||||
return (
|
||||
<div key={provider.displayName} style={{marginBottom: "10px"}}>
|
||||
<a href={Provider.getAuthUrl(application, provider, "signup")}>
|
||||
{
|
||||
getSigninButton(provider.type)
|
||||
}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -17,6 +17,7 @@ import {Link} from "react-router-dom";
|
||||
import {Button, Checkbox, Col, Form, Input, Modal, Result, Row} from "antd";
|
||||
import * as Setting from "../Setting";
|
||||
import * as AuthBackend from "./AuthBackend";
|
||||
import * as ProviderButton from "./ProviderButton";
|
||||
import i18next from "i18next";
|
||||
import * as Util from "./Util";
|
||||
import {authConfig} from "./Auth";
|
||||
@ -179,6 +180,14 @@ class SignupPage extends React.Component {
|
||||
this.form.current.scrollToField(errorFields[0].name);
|
||||
}
|
||||
|
||||
isProviderVisible(providerItem) {
|
||||
if (this.state.mode === "signup") {
|
||||
return Setting.isProviderVisibleForSignUp(providerItem);
|
||||
} else {
|
||||
return Setting.isProviderVisibleForSignIn(providerItem);
|
||||
}
|
||||
}
|
||||
|
||||
renderFormItem(application, signupItem) {
|
||||
if (!signupItem.visible) {
|
||||
return null;
|
||||
@ -582,6 +591,11 @@ class SignupPage extends React.Component {
|
||||
{i18next.t("signup:sign in now")}
|
||||
</a>
|
||||
</Form.Item>
|
||||
{
|
||||
application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
|
||||
return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "small");
|
||||
})
|
||||
}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user