feat: add gitlab provider (#273)

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

web/src/ProviderEditPage.js

@@ -77,6 +77,7 @@ class ProviderEditPage extends React.Component {
           {id: 'LinkedIn', name: 'LinkedIn'},
           {id: 'WeCom', name: 'WeCom'},
           {id: 'Lark', name: 'Lark'},
+          {id: 'GitLab', name: 'GitLab'},
         ]
       );
     } else if (provider.category === "Email") {

web/src/auth/GitLabLoginButton.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/gitlab.svg`} alt="Sign in with GitLab" style={{width: 24, height: 24}} />;
+}
+
+const config = {
+    text: "Sign in with GitLab",
+    icon: Icon,
+    iconFormat: name => `fa fa-${name}`,
+    style: {background: "rgb(255,255,255)", color: "#000000"},
+    activeStyle: {background: "rgb(100,150,250)"},
+};
+
+const GitLabLoginButton = createButton(config);
+
+export default GitLabLoginButton;

web/src/auth/LoginPage.js

@@ -32,6 +32,7 @@ import i18next from "i18next";
 import LinkedInLoginButton from "./LinkedInLoginButton";
 import WeComLoginButton from "./WeComLoginButton";
 import LarkLoginButton from "./LarkLoginButton";
+import GitLabLoginButton from "./GitLabLoginButton";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -170,6 +171,8 @@ class LoginPage extends React.Component {
       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"} />
     }
 
     return text;

web/src/auth/Provider.js

@@ -55,10 +55,14 @@ const LinkedInAuthLogo = `${StaticBaseUrl}/img/social_linkedin.png`;
 const WeComAuthUri = "https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect";
 const WeComAuthLogo = `${StaticBaseUrl}/img/social_wecom.png`;
 
-// const WeComAuthScope = "";
+// const LarkAuthScope = "";
 const LarkAuthUri = "https://open.feishu.cn/open-apis/authen/v1/index";
 const LarkAuthLogo = `${StaticBaseUrl}/img/social_lark.png`;
 
+const GitLabAuthScope = "read_user+profile";
+const GitLabAuthUri = "https://gitlab.com/oauth/authorize";
+const GitLabAuthLogo = `${StaticBaseUrl}/img/social_gitlab.png`;
+
 export function getAuthLogo(provider) {
   if (provider.type === "Google") {
     return GoogleAuthLogo;
@@ -82,6 +86,8 @@ export function getAuthLogo(provider) {
     return WeComAuthLogo;
   } else if (provider.type === "Lark") {
     return LarkAuthLogo;
+  } else if (provider.type === "GitLab") {
+    return GitLabAuthLogo;
   }
 }
 
@@ -114,5 +120,7 @@ export function getAuthUrl(application, provider, method) {
     return `${WeComAuthUri}?appid=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&usertype=member`
   } else if (provider.type === "Lark") {
     return `${LarkAuthUri}?app_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}`
+  } else if (provider.type === "GitLab") {
+    return `${GitLabAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${GitLabAuthScope}`
   }
 }