Improve UI.

This commit is contained in:
Yang Luo 2021-02-14 10:20:42 +08:00
parent 2dd4afbe7b
commit 8543d09d05
4 changed files with 25 additions and 10 deletions

View File

@ -87,7 +87,7 @@ class OrganizationEditPage extends React.Component {
</Row> </Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}> <Col style={{marginTop: '5px'}} span={2}>
Website Url: Website URL:
</Col> </Col>
<Col span={22} > <Col span={22} >
<Input value={this.state.organization.websiteUrl} onChange={e => { <Input value={this.state.organization.websiteUrl} onChange={e => {

View File

@ -114,7 +114,7 @@ class OrganizationListPage extends React.Component {
sorter: (a, b) => a.displayName.localeCompare(b.displayName), sorter: (a, b) => a.displayName.localeCompare(b.displayName),
}, },
{ {
title: 'Website Url', title: 'Website URL',
dataIndex: 'websiteUrl', dataIndex: 'websiteUrl',
key: 'websiteUrl', key: 'websiteUrl',
width: '300px', width: '300px',

View File

@ -13,10 +13,12 @@
// limitations under the License. // limitations under the License.
import React from "react"; 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 ProviderBackend from "./backend/ProviderBackend";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
const { Option } = Select;
class ProviderEditPage extends React.Component { class ProviderEditPage extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -87,17 +89,24 @@ class ProviderEditPage extends React.Component {
</Row> </Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}> <Col style={{marginTop: '5px'}} span={2}>
type: Type:
</Col> </Col>
<Col span={22} > <Col span={22} >
<Input value={this.state.provider.type} onChange={e => { <Select virtual={false} style={{width: '100%'}} value={this.state.provider.type} onChange={(value => {this.updateProviderField('type', value);})}>
this.updateProviderField('type', e.target.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> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}> <Col style={{marginTop: '5px'}} span={2}>
Client Id: Client ID:
</Col> </Col>
<Col span={22} > <Col span={22} >
<Input value={this.state.provider.clientId} onChange={e => { <Input value={this.state.provider.clientId} onChange={e => {
@ -117,7 +126,7 @@ class ProviderEditPage extends React.Component {
</Row> </Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}> <Col style={{marginTop: '5px'}} span={2}>
Provider Url: Provider URL:
</Col> </Col>
<Col span={22} > <Col span={22} >
<Input value={this.state.provider.providerUrl} onChange={e => { <Input value={this.state.provider.providerUrl} onChange={e => {

View File

@ -18,6 +18,7 @@ import {Button, Col, Popconfirm, Row, Table} from 'antd';
import moment from "moment"; import moment from "moment";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
import * as ProviderBackend from "./backend/ProviderBackend"; import * as ProviderBackend from "./backend/ProviderBackend";
import * as Auth from "./common/Auth";
class ProviderListPage extends React.Component { class ProviderListPage extends React.Component {
constructor(props) { constructor(props) {
@ -120,8 +121,13 @@ class ProviderListPage extends React.Component {
title: 'Type', title: 'Type',
dataIndex: 'type', dataIndex: 'type',
key: 'type', key: 'type',
width: '150px', width: '80px',
sorter: (a, b) => a.type.localeCompare(b.type), 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', title: 'Client Id',