Add user's avatar.

This commit is contained in:
Yang Luo 2021-02-13 14:49:31 +08:00
parent 4daa4416c1
commit 9677282017
3 changed files with 53 additions and 10 deletions

View File

@ -27,6 +27,7 @@ type User struct {
Password string `xorm:"varchar(100)" json:"password"` Password string `xorm:"varchar(100)" json:"password"`
PasswordType string `xorm:"varchar(100)" json:"passwordType"` PasswordType string `xorm:"varchar(100)" json:"passwordType"`
DisplayName string `xorm:"varchar(100)" json:"displayName"` DisplayName string `xorm:"varchar(100)" json:"displayName"`
Avatar string `xorm:"varchar(100)" json:"avatar"`
Email string `xorm:"varchar(100)" json:"email"` Email string `xorm:"varchar(100)" json:"email"`
Phone string `xorm:"varchar(100)" json:"phone"` Phone string `xorm:"varchar(100)" json:"phone"`
} }

View File

@ -17,6 +17,7 @@ import {Button, Card, Col, Input, Row, Select} from 'antd';
import * as UserBackend from "./backend/UserBackend"; import * as UserBackend from "./backend/UserBackend";
import * as OrganizationBackend from "./backend/OrganizationBackend"; import * as OrganizationBackend from "./backend/OrganizationBackend";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
import {LinkOutlined} from "@ant-design/icons";
const { Option } = Select; const { Option } = Select;
@ -102,6 +103,43 @@ class UserEditPage extends React.Component {
}} /> }} />
</Col> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
Display Name:
</Col>
<Col span={22} >
<Input value={this.state.user.displayName} onChange={e => {
this.updateUserField('displayName', e.target.value);
}} />
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
Avatar:
</Col>
<Col span={22} >
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={1}>
URL:
</Col>
<Col span={23} >
<Input prefix={<LinkOutlined/>} value={this.state.user.avatar} onChange={e => {
this.updateUserField('avatar', e.target.value);
}} />
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={1}>
Preview:
</Col>
<Col span={23} >
<a target="_blank" href={this.state.user.avatar}>
<img src={this.state.user.avatar} alt={this.state.user.avatar} height={90} style={{marginBottom: '20px'}}/>
</a>
</Col>
</Row>
</Col>
</Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}> <Col style={{marginTop: '5px'}} span={2}>
Password Type: Password Type:
@ -122,16 +160,6 @@ class UserEditPage extends React.Component {
}} /> }} />
</Col> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
Display Name:
</Col>
<Col span={22} >
<Input value={this.state.user.displayName} onChange={e => {
this.updateUserField('displayName', e.target.value);
}} />
</Col>
</Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}> <Col style={{marginTop: '5px'}} span={2}>
Email: Email:

View File

@ -49,6 +49,7 @@ class UserListPage extends React.Component {
password: "123456", password: "123456",
passwordType: "plain", passwordType: "plain",
displayName: `New User - ${this.state.users.length}`, displayName: `New User - ${this.state.users.length}`,
avatar: "https://casbin.org/img/casbin.svg",
email: "user@example.com", email: "user@example.com",
phone: "1-12345678", phone: "1-12345678",
} }
@ -144,6 +145,19 @@ class UserListPage extends React.Component {
// width: '100px', // width: '100px',
sorter: (a, b) => a.displayName.localeCompare(b.displayName), sorter: (a, b) => a.displayName.localeCompare(b.displayName),
}, },
{
title: 'Avatar',
dataIndex: 'avatar',
key: 'avatar',
width: '100px',
render: (text, record, index) => {
return (
<a target="_blank" href={text}>
<img src={text} alt={text} width={50} />
</a>
)
}
},
{ {
title: 'Email', title: 'Email',
dataIndex: 'email', dataIndex: 'email',