feat: support long OAuth buttons for providers (#106)

* Show signup preview.

* feat: support other mode,dingtalk,weibo,wechat,gitee,facebook

Signed-off-by: wasabi <690898835@qq.com>

* feat: convert svg codes into files.

Signed-off-by: wasabi <690898835@qq.com>

* feat: convert svg codes into files.

Signed-off-by: wasabi <690898835@qq.com>

Co-authored-by: Yang Luo <hsluoyz@qq.com>

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 <img src={`${StaticBaseUrl}/buttons/dingtalk.svg`} />;
+}
+
+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;

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 <img src={`${StaticBaseUrl}/buttons/facebook.svg`} />;
+}
+
+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;

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 <img src={`${StaticBaseUrl}/buttons/github.svg`} />;
+}
+
+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;

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 <img src={`${StaticBaseUrl}/buttons/gitee.svg`} />;
+}
+
+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;

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 <img src={`${StaticBaseUrl}/buttons/google.svg`} />;
+}
+
+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;

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 <GithubLoginButton text={text} align={"center"} />
+      return <GitHubLoginButton text={text} align={"left"} />
     } else if (type === "Google") {
-      return <GoogleLoginButton text={text} align={"center"} />
+      return <GoogleLoginButton text={text} align={"left"} />
     } else if (type === "QQ") {
-      return <QqLoginButton text={text} align={"center"} />
+      return <QqLoginButton text={text} align={"left"} />
+    } else if (type === "Facebook") {
+      return <FacebookLoginButton text={text} align={"left"} />
+    } else if (type === "Weibo") {
+      return <WeiboLoginButton text={text} align={"left"} />
+    } else if (type === "Gitee") {
+      return <GiteeLoginButton text={text} align={"left"} />
+    } else if (type === "WeChat") {
+      return <WechatLoginButton text={text} align={"left"} />
+    } else if (type === "DingTalk") {
+      return <DingTalkLoginButton text={text} align={"left"} />
     } else {
       return text;
     }

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 <svg xmlns="http://www.w3.org/2000/svg" height="48" width="32" viewBox="-18.15 -35.9725 157.3 215.835"><path fill="#faab07" d="M60.503 142.237c-12.533 0-24.038-4.195-31.445-10.46-3.762 1.124-8.574 2.932-11.61 5.175-2.6 1.918-2.275 3.874-1.807 4.663 2.056 3.47 35.273 2.216 44.862 1.136zm0 0c12.535 0 24.039-4.195 31.447-10.46 3.76 1.124 8.573 2.932 11.61 5.175 2.598 1.918 2.274 3.874 1.805 4.663-2.056 3.47-35.272 2.216-44.862 1.136zm0 0"/><path d="M60.576 67.119c20.698-.14 37.286-4.147 42.907-5.683 1.34-.367 2.056-1.024 2.056-1.024.005-.189.085-3.37.085-5.01C105.624 27.768 92.58.001 60.5 0 28.42.001 15.375 27.769 15.375 55.401c0 1.642.08 4.822.086 5.01 0 0 .583.615 1.65.913 5.19 1.444 22.09 5.65 43.312 5.795zm56.245 23.02c-1.283-4.129-3.034-8.944-4.808-13.568 0 0-1.02-.126-1.537.023-15.913 4.623-35.202 7.57-49.9 7.392h-.153c-14.616.175-33.774-2.737-49.634-7.315-.606-.175-1.802-.1-1.802-.1-1.774 4.624-3.525 9.44-4.808 13.568-6.119 19.69-4.136 27.838-2.627 28.02 3.239.392 12.606-14.821 12.606-14.821 0 15.459 13.957 39.195 45.918 39.413h.848c31.96-.218 45.917-23.954 45.917-39.413 0 0 9.368 15.213 12.607 14.822 1.508-.183 3.491-8.332-2.627-28.021"/><path fill="#fff" d="M49.085 40.824c-4.352.197-8.07-4.76-8.304-11.063-.236-6.305 3.098-11.576 7.45-11.773 4.347-.195 8.064 4.76 8.3 11.065.238 6.306-3.097 11.577-7.446 11.771m31.133-11.063c-.233 6.302-3.951 11.26-8.303 11.063-4.35-.195-7.684-5.465-7.446-11.77.236-6.305 3.952-11.26 8.3-11.066 4.352.197 7.686 5.468 7.449 11.773"/><path fill="#faab07" d="M87.952 49.725C86.79 47.15 75.077 44.28 60.578 44.28h-.156c-14.5 0-26.212 2.87-27.375 5.446a.863.863 0 00-.085.367.88.88 0 00.16.496c.98 1.427 13.985 8.487 27.3 8.487h.156c13.314 0 26.319-7.058 27.299-8.487a.873.873 0 00.16-.498.856.856 0 00-.085-.365"/><path d="M54.434 29.854c.199 2.49-1.167 4.702-3.046 4.943-1.883.242-3.568-1.58-3.768-4.07-.197-2.492 1.167-4.704 3.043-4.944 1.886-.244 3.574 1.58 3.771 4.07m11.956.833c.385-.689 3.004-4.312 8.427-2.993 1.425.347 2.084.857 2.223 1.057.205.296.262.718.053 1.286-.412 1.126-1.263 1.095-1.734.875-.305-.142-4.082-2.66-7.562 1.097-.24.257-.668.346-1.073.04-.407-.308-.574-.93-.334-1.362"/><path fill="#fff" d="M60.576 83.08h-.153c-9.996.12-22.116-1.204-33.854-3.518-1.004 5.818-1.61 13.132-1.09 21.853 1.316 22.043 14.407 35.9 34.614 36.1h.82c20.208-.2 33.298-14.057 34.616-36.1.52-8.723-.087-16.035-1.092-21.854-11.739 2.315-23.862 3.64-33.86 3.518"/><path fill="#eb1923" d="M32.102 81.235v21.693s9.937 2.004 19.893.616V83.535c-6.307-.357-13.109-1.152-19.893-2.3"/><path fill="#eb1923" d="M105.539 60.412s-19.33 6.102-44.963 6.275h-.153c-25.591-.172-44.896-6.255-44.962-6.275L8.987 76.57c16.193 4.882 36.261 8.028 51.436 7.845h.153c15.175.183 35.242-2.963 51.437-7.845zm0 0"/></svg>;
+  return <img src={`${StaticBaseUrl}/buttons/qq.svg`} />;
 }
 
 const config = {

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 <img src={`${StaticBaseUrl}/buttons/wechat.svg`} />;
+}
+
+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;

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 <img src={`${StaticBaseUrl}/buttons/weibo.svg`} />;
+}
+
+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;