diff --git a/web/src/auth/DingTalkLoginButton.js b/web/src/auth/DingTalkLoginButton.js new file mode 100644 index 00000000..8dc7defb --- /dev/null +++ b/web/src/auth/DingTalkLoginButton.js @@ -0,0 +1,32 @@ +// Copyright 2021 The casbin 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 {createButton} from "react-social-login-buttons"; +import {StaticBaseUrl} from "../Setting"; + +function Icon({ width = 24, height = 24, color }) { + return ; +} + +const config = { + text: "Sign in with DingTalk", + icon: Icon, + iconFormat: name => `fa fa-${name}`, + style: {background: "#0191e0"}, + activeStyle: {background: "rgb(76,143,208)"}, +}; + +const DingTalkLoginButton = createButton(config); + +export default DingTalkLoginButton; diff --git a/web/src/auth/FacebookLoginButton.js b/web/src/auth/FacebookLoginButton.js new file mode 100644 index 00000000..90f4599a --- /dev/null +++ b/web/src/auth/FacebookLoginButton.js @@ -0,0 +1,32 @@ +// Copyright 2021 The casbin 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 {createButton} from "react-social-login-buttons"; +import {StaticBaseUrl} from "../Setting"; + +function Icon({ width = 24, height = 24, color }) { + return ; +} + +const config = { + text: "Sign in with Facebook", + icon: Icon, + iconFormat: name => `fa fa-${name}`, + style: {background: "#3b5998"}, + activeStyle: {background: "#2b3f65"}, +}; + +const FacebookLoginButton = createButton(config); + +export default FacebookLoginButton; diff --git a/web/src/auth/GitHubLoginButton.js b/web/src/auth/GitHubLoginButton.js new file mode 100644 index 00000000..f3048812 --- /dev/null +++ b/web/src/auth/GitHubLoginButton.js @@ -0,0 +1,32 @@ +// Copyright 2021 The casbin 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 {createButton} from "react-social-login-buttons"; +import {StaticBaseUrl} from "../Setting"; + +function Icon({ width = 24, height = 24, color }) { + return ; +} + +const config = { + text: "Sign in with GitHub", + icon: Icon, + iconFormat: name => `fa fa-${name}`, + style: {background: "#333333"}, + activeStyle: {background: "#393934"}, +}; + +const GitHubLoginButton = createButton(config); + +export default GitHubLoginButton; diff --git a/web/src/auth/GiteeLoginButton.js b/web/src/auth/GiteeLoginButton.js new file mode 100644 index 00000000..72ab2f37 --- /dev/null +++ b/web/src/auth/GiteeLoginButton.js @@ -0,0 +1,32 @@ +// Copyright 2021 The casbin 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 {createButton} from "react-social-login-buttons"; +import {StaticBaseUrl} from "../Setting"; + +function Icon({ width = 24, height = 24, color }) { + return ; +} + +const config = { + text: "Sign in with Gitee", + icon: Icon, + iconFormat: name => `fa fa-${name}`, + style: {background: "#c71d23"}, + activeStyle: {background: "#f01130"}, +}; + +const GiteeLoginButton = createButton(config); + +export default GiteeLoginButton; diff --git a/web/src/auth/GoogleLoginButton.js b/web/src/auth/GoogleLoginButton.js new file mode 100644 index 00000000..472a5ed2 --- /dev/null +++ b/web/src/auth/GoogleLoginButton.js @@ -0,0 +1,32 @@ +// Copyright 2021 The casbin 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 {createButton} from "react-social-login-buttons"; +import {StaticBaseUrl} from "../Setting"; + +function Icon({ width = 24, height = 24, color }) { + return ; +} + +const config = { + text: "Sign in with Google", + icon: Icon, + iconFormat: name => `fa fa-${name}`, + style: {background: "#ffffff", color: "#000000"}, + activeStyle: {background: "#eff0ee"}, +}; + +const GoogleLoginButton = createButton(config); + +export default GoogleLoginButton; diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js index e1689c65..7479d0a2 100644 --- a/web/src/auth/LoginPage.js +++ b/web/src/auth/LoginPage.js @@ -21,8 +21,14 @@ import * as ApplicationBackend from "../backend/ApplicationBackend"; import * as Provider from "./Provider"; import * as Util from "./Util"; import * as Setting from "../Setting"; -import {GithubLoginButton, GoogleLoginButton} from "react-social-login-buttons"; +import FacebookLoginButton from "./FacebookLoginButton"; +import GitHubLoginButton from "./GitHubLoginButton"; +import GoogleLoginButton from "./GoogleLoginButton"; import QqLoginButton from "./QqLoginButton"; +import DingTalkLoginButton from "./DingTalkLoginButton"; +import GiteeLoginButton from "./GiteeLoginButton"; +import WechatLoginButton from "./WechatLoginButton"; +import WeiboLoginButton from "./WeiboLoginButton"; import i18next from "i18next"; class LoginPage extends React.Component { @@ -111,11 +117,21 @@ class LoginPage extends React.Component { getSigninButton(type) { const text = i18next.t("login:Sign in with {type}").replace("{type}", type); if (type === "GitHub") { - return + return } else if (type === "Google") { - return + return } else if (type === "QQ") { - return + return + } else if (type === "Facebook") { + return + } else if (type === "Weibo") { + return + } else if (type === "Gitee") { + return + } else if (type === "WeChat") { + return + } else if (type === "DingTalk") { + return } else { return text; } diff --git a/web/src/auth/QqLoginButton.js b/web/src/auth/QqLoginButton.js index a775c8ac..7dae0245 100644 --- a/web/src/auth/QqLoginButton.js +++ b/web/src/auth/QqLoginButton.js @@ -13,9 +13,10 @@ // limitations under the License. import {createButton} from "react-social-login-buttons"; +import {StaticBaseUrl} from "../Setting"; function Icon({ width = 24, height = 24, color }) { - return ; + return ; } const config = { diff --git a/web/src/auth/WechatLoginButton.js b/web/src/auth/WechatLoginButton.js new file mode 100644 index 00000000..175373e5 --- /dev/null +++ b/web/src/auth/WechatLoginButton.js @@ -0,0 +1,32 @@ +// Copyright 2021 The casbin 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 {createButton} from "react-social-login-buttons"; +import {StaticBaseUrl} from "../Setting"; + +function Icon({ width = 24, height = 24, color }) { + return ; +} + +const config = { + text: "Sign in with Wechat", + icon: Icon, + iconFormat: name => `fa fa-${name}`, + style: {background: "#06d30a"}, + activeStyle: {background: "#05c109"}, +}; + +const WechatLoginButton = createButton(config); + +export default WechatLoginButton; diff --git a/web/src/auth/WeiboLoginButton.js b/web/src/auth/WeiboLoginButton.js new file mode 100644 index 00000000..e946e0d4 --- /dev/null +++ b/web/src/auth/WeiboLoginButton.js @@ -0,0 +1,32 @@ +// Copyright 2021 The casbin 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 {createButton} from "react-social-login-buttons"; +import {StaticBaseUrl} from "../Setting"; + +function Icon({ width = 24, height = 24, color }) { + return ; +} + +const config = { + text: "Sign in with Weibo", + icon: Icon, + iconFormat: name => `fa fa-${name}`, + style: {background: "#e62329"}, + activeStyle: {background: "#e54329"}, +}; + +const WeiboLoginButton = createButton(config); + +export default WeiboLoginButton;