From 8543d09d054a1686760a805abc605fe835ea945b Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Sun, 14 Feb 2021 10:20:42 +0800
Subject: [PATCH] Improve UI.

---
 web/src/OrganizationEditPage.js |  2 +-
 web/src/OrganizationListPage.js |  2 +-
 web/src/ProviderEditPage.js     | 23 ++++++++++++++++-------
 web/src/ProviderListPage.js     |  8 +++++++-
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/web/src/OrganizationEditPage.js b/web/src/OrganizationEditPage.js
index 7586b0c1..70226e80 100644
--- a/web/src/OrganizationEditPage.js
+++ b/web/src/OrganizationEditPage.js
@@ -87,7 +87,7 @@ class OrganizationEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
-            Website Url:
+            Website URL:
           </Col>
           <Col span={22} >
             <Input value={this.state.organization.websiteUrl} onChange={e => {
diff --git a/web/src/OrganizationListPage.js b/web/src/OrganizationListPage.js
index 854d3edf..3bd8f804 100644
--- a/web/src/OrganizationListPage.js
+++ b/web/src/OrganizationListPage.js
@@ -114,7 +114,7 @@ class OrganizationListPage extends React.Component {
         sorter: (a, b) => a.displayName.localeCompare(b.displayName),
       },
       {
-        title: 'Website Url',
+        title: 'Website URL',
         dataIndex: 'websiteUrl',
         key: 'websiteUrl',
         width: '300px',
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index 28a30203..f0a5e043 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -13,10 +13,12 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, Row} from 'antd';
+import {Button, Card, Col, Input, Row, Select} from 'antd';
 import * as ProviderBackend from "./backend/ProviderBackend";
 import * as Setting from "./Setting";
 
+const { Option } = Select;
+
 class ProviderEditPage extends React.Component {
   constructor(props) {
     super(props);
@@ -87,17 +89,24 @@ class ProviderEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
-            type:
+            Type:
           </Col>
           <Col span={22} >
-            <Input value={this.state.provider.type} onChange={e => {
-              this.updateProviderField('type', e.target.value);
-            }} />
+            <Select virtual={false} style={{width: '100%'}} value={this.state.provider.type} onChange={(value => {this.updateProviderField('type', value);})}>
+              {
+                [
+                  {id: 'google', name: 'Google'},
+                  {id: 'github', name: 'GitHub'},
+                  {id: 'qq', name: 'QQ'},
+                  {id: 'wechat', name: 'WeChat'},
+                ].map((providerType, index) => <Option key={index} value={providerType.id}>{providerType.name}</Option>)
+              }
+            </Select>
           </Col>
         </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
-            Client Id:
+            Client ID:
           </Col>
           <Col span={22} >
             <Input value={this.state.provider.clientId} onChange={e => {
@@ -117,7 +126,7 @@ class ProviderEditPage extends React.Component {
         </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
-            Provider Url:
+            Provider URL:
           </Col>
           <Col span={22} >
             <Input value={this.state.provider.providerUrl} onChange={e => {
diff --git a/web/src/ProviderListPage.js b/web/src/ProviderListPage.js
index 01b62a17..ac39346d 100644
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@@ -18,6 +18,7 @@ import {Button, Col, Popconfirm, Row, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as ProviderBackend from "./backend/ProviderBackend";
+import * as Auth from "./common/Auth";
 
 class ProviderListPage extends React.Component {
   constructor(props) {
@@ -120,8 +121,13 @@ class ProviderListPage extends React.Component {
         title: 'Type',
         dataIndex: 'type',
         key: 'type',
-        width: '150px',
+        width: '80px',
         sorter: (a, b) => a.type.localeCompare(b.type),
+        render: (text, record, index) => {
+          return (
+            <img width={30} height={30} src={Auth.getAuthLogo(record)} alt={record.displayName} />
+          )
+        }
       },
       {
         title: 'Client Id',