Add provider table.

object/application.go

@@ -24,16 +24,16 @@ type Application struct {
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
 	CreatedTime string `xorm:"varchar(100)" json:"createdTime"`
 
-	DisplayName     string        `xorm:"varchar(100)" json:"displayName"`
+	DisplayName     string         `xorm:"varchar(100)" json:"displayName"`
-	Logo            string        `xorm:"varchar(100)" json:"logo"`
+	Logo            string         `xorm:"varchar(100)" json:"logo"`
-	HomepageUrl     string        `xorm:"varchar(100)" json:"homepageUrl"`
+	HomepageUrl     string         `xorm:"varchar(100)" json:"homepageUrl"`
-	Description     string        `xorm:"varchar(100)" json:"description"`
+	Description     string         `xorm:"varchar(100)" json:"description"`
-	Organization    string        `xorm:"varchar(100)" json:"organization"`
+	Organization    string         `xorm:"varchar(100)" json:"organization"`
-	EnablePassword  bool          `json:"enablePassword"`
+	EnablePassword  bool           `json:"enablePassword"`
-	EnableSignUp    bool          `json:"enableSignUp"`
+	EnableSignUp    bool           `json:"enableSignUp"`
-	Providers       []string      `xorm:"varchar(1000)" json:"providers"`
+	Providers       []ProviderItem `xorm:"varchar(1000)" json:"providers"`
-	ProviderObjs    []*Provider   `xorm:"-" json:"providerObjs"`
+	ProviderObjs    []*Provider    `xorm:"-" json:"providerObjs"`
-	OrganizationObj *Organization `xorm:"-" json:"organizationObj"`
+	OrganizationObj *Organization  `xorm:"-" json:"organizationObj"`
 
 	ClientId       string   `xorm:"varchar(100)" json:"clientId"`
 	ClientSecret   string   `xorm:"varchar(100)" json:"clientSecret"`
@@ -68,8 +68,8 @@ func extendApplicationWithProviders(application *Application) {
 	}
 
 	application.ProviderObjs = []*Provider{}
-	for _, providerName := range application.Providers {
+	for _, providerItem := range application.Providers {
-		if provider, ok := m[providerName]; ok {
+		if provider, ok := m[providerItem.Name]; ok {
 			application.ProviderObjs = append(application.ProviderObjs, provider)
 		}
 	}
@@ -183,8 +183,8 @@ func (application *Application) getProviderByCategory(category string) *Provider
 		m[provider.Name] = provider
 	}
 
-	for _, providerName := range application.Providers {
+	for _, providerItem := range application.Providers {
-		if provider, ok := m[providerName]; ok {
+		if provider, ok := m[providerItem.Name]; ok {
 			return provider
 		}
 	}

object/init.go

@@ -66,7 +66,7 @@ func initBuiltInApplication() {
 		Organization:   "built-in",
 		EnablePassword: true,
 		EnableSignUp:   true,
-		Providers:      []string{},
+		Providers:      []ProviderItem{},
 		RedirectUris:   []string{},
 		ExpireInHours:  168,
 	}

object/provider.go

@@ -19,6 +19,13 @@ import (
 	"xorm.io/core"
 )
 
+type ProviderItem struct {
+	Name      string `json:"name"`
+	CanSignUp bool   `json:"canSignUp"`
+	CanSignIn bool   `json:"canSignIn"`
+	CanUnbind bool   `json:"canUnbind"`
+}
+
 type Provider struct {
 	Owner       string `xorm:"varchar(100) notnull pk" json:"owner"`
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`

web/src/ApplicationEditPage.js

@@ -23,6 +23,7 @@ import SignupPage from "./auth/SignupPage";
 import LoginPage from "./auth/LoginPage";
 import i18next from "i18next";
 import UrlTable from "./UrlTable";
+import ProviderTable from "./ProviderTable";
 
 const { Option } = Select;
 
@@ -272,15 +273,12 @@ class ApplicationEditPage extends React.Component {
             {i18next.t("general:Providers")}:
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: '100%'}}
+            <ProviderTable
-                    value={this.state.application.providers}
+              title={i18next.t("general:Providers")}
-                    onChange={value => {
+              table={this.state.application.providers}
-                      this.updateApplicationField('providers', value);
+              providers={this.state.providers}
-                    }} >
+              onUpdateTable={(value) => { this.updateApplicationField('providers', value)}}
-              {
+            />
-                this.state.providers.map((provider, index) => <Option key={index} value={provider.name}>{provider.name}</Option>)
-              }
-            </Select>
           </Col>
         </Row>
         <Row style={{marginTop: '20px'}} >

web/src/ProviderTable.js

@@ -0,0 +1,177 @@
+// 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 React from "react";
+import {DownOutlined, DeleteOutlined, UpOutlined, LinkOutlined} from '@ant-design/icons';
+import {Button, Col, Input, Row, Select, Switch, Table, Tooltip} from 'antd';
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+const { Option } = Select;
+
+class ProviderTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  updateTable(table) {
+    this.props.onUpdateTable(table);
+  }
+
+  updateField(table, index, key, value) {
+    table[index][key] = value;
+    this.updateTable(table);
+  }
+
+  addRow(table) {
+    let row = {name: "", canSignUp: false, canSignIn: true, canUnbind: true};
+    if (table === undefined) {
+      table = [];
+    }
+    table = Setting.addRow(table, row);
+    this.updateTable(table);
+  }
+
+  deleteRow(table, i) {
+    table = Setting.deleteRow(table, i);
+    this.updateTable(table);
+  }
+
+  upRow(table, i) {
+    table = Setting.swapRow(table, i - 1, i);
+    this.updateTable(table);
+  }
+
+  downRow(table, i) {
+    table = Setting.swapRow(table, i, i + 1);
+    this.updateTable(table);
+  }
+
+  renderTable(table) {
+    const columns = [
+      {
+        title: i18next.t("provider:Name"),
+        dataIndex: 'name',
+        key: 'name',
+        render: (text, record, index) => {
+          return (
+            <Select virtual={false} style={{width: '100%'}}
+                    value={text}
+                    onChange={value => {
+                      this.updateField(table, index, 'name', value);
+                    }} >
+              {
+                this.props.providers.map((provider, index) => <Option key={index} value={provider.name}>{provider.name}</Option>)
+              }
+            </Select>
+          )
+          return (
+            <Input prefix={<LinkOutlined/>} value={text} onChange={e => {
+              this.updateField(table, index, 'name', e.target.value);
+            }} />
+          )
+        }
+      },
+      {
+        title: i18next.t("provider:canSignUp"),
+        dataIndex: 'canSignUp',
+        key: 'canSignUp',
+        width: '120px',
+        render: (text, record, index) => {
+          return (
+            <Switch checked={text} onChange={checked => {
+              this.updateField(table, index, 'canSignUp', checked);
+            }} />
+          )
+        }
+      },
+      {
+        title: i18next.t("provider:canSignIn"),
+        dataIndex: 'canSignIn',
+        key: 'canSignIn',
+        width: '120px',
+        render: (text, record, index) => {
+          return (
+            <Switch checked={text} onChange={checked => {
+              this.updateField(table, index, 'canSignIn', checked);
+            }} />
+          )
+        }
+      },
+      {
+        title: i18next.t("provider:canUnbind"),
+        dataIndex: 'canUnbind',
+        key: 'canUnbind',
+        width: '120px',
+        render: (text, record, index) => {
+          return (
+            <Switch checked={text} onChange={checked => {
+              this.updateField(table, index, 'canUnbind', checked);
+            }} />
+          )
+        }
+      },
+      {
+        title: i18next.t("general:Action"),
+        key: 'action',
+        width: '100px',
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Tooltip placement="bottomLeft" title={i18next.t("general:Up")}>
+                <Button style={{marginRight: "5px"}} disabled={index === 0} icon={<UpOutlined />} size="small" onClick={() => this.upRow(table, index)} />
+              </Tooltip>
+              <Tooltip placement="topLeft" title={i18next.t("general:Down")}>
+                <Button style={{marginRight: "5px"}} disabled={index === table.length - 1} icon={<DownOutlined />} size="small" onClick={() => this.downRow(table, index)} />
+              </Tooltip>
+              <Tooltip placement="topLeft" title={i18next.t("general:Delete")}>
+                <Button icon={<DeleteOutlined />} size="small" onClick={() => this.deleteRow(table, index)} />
+              </Tooltip>
+            </div>
+          );
+        }
+      },
+    ];
+
+    return (
+      <Table rowKey="index" columns={columns} dataSource={table} size="middle" bordered pagination={false}
+             title={() => (
+               <div>
+                 {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
+                 <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
+               </div>
+             )}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Row style={{marginTop: '20px'}} >
+          <Col span={24}>
+            {
+              this.renderTable(this.props.table)
+            }
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default ProviderTable;