Merge branch 'master' of http://gogs.ioobot.com:6680/xy/online

src/gql.js

@@ -6,7 +6,15 @@
 const GET_USER = `
             query USER($id: ID!) {
                 user_by_id(id: $id) {
+                    email
+                    updatedAt
+                    password
+                    telephone
                     nickname
+                    username
+                    createdAt
+                    openid
+                    id
                     avatar
                 }
             }
@@ -15,7 +23,16 @@ const GET_USER = `
 const SEARCH_USER = `
         query USER($username: String) {
                 user_by_props(username: $username) {
+                    email
+                    updatedAt
+                    password
+                    telephone
+                    nickname
                     username
+                    createdAt
+                    openid
+                    id
+                    avatar
                 }
             }
         `;
@@ -49,6 +66,30 @@ const ADD_USER = `
 
         `;
 
+const UPDATE_USER = `
+            mutation USER($email: String, $updatedAt: String, $telephone: String, $nickname: String, $openid: String, $id: ID!, $avatar: String) {
+                update_user(
+                    id: $id
+                    email: $email 
+                    updatedAt: $updatedAt 
+                    telephone: $telephone 
+                    nickname: $nickname 
+                    openid: $openid
+                    avatar: $avatar
+                ) {
+                    email
+                    updatedAt
+                    password
+                    telephone
+                    nickname
+                    username
+                    createdAt
+                    openid
+                    id
+                    avatar
+                }
+            }
+        `;
 
 const SHOW_SCHEMA = `
             query SCHEMA($user_id: ID) {
@@ -562,6 +603,7 @@ export {
     ADD_USER,
     GET_USER,
     SEARCH_USER,
+    UPDATE_USER,
     SEARCH_SCHEMA,
     ADD_SCHEMA,
     SHOW_ALL_SCHEMA,

src/login/AccountConfig.js

@@ -5,7 +5,7 @@ import './index.css'
 import avatar from '../images/avatar.jpg';
 import classnames from 'classnames';
 import {Mutation, Query} from "react-apollo";
-import {GET_USER} from "../gql";
+import {GET_USER, UPDATE_USER} from "../gql";
 import gql from "graphql-tag";
 import {getCookie} from "../cookie";
 
@@ -15,8 +15,8 @@ class AccountConfig extends Component {
         this.state = {
             overNickname: false,
             editNickname: false,
-            overTel: false,
-            editTel: false,
+            overTelephone: false,
+            editTelephone: false,
             overEmail: false,
             editEmail: false,
             userID: ''
@@ -49,7 +49,6 @@ class AccountConfig extends Component {
                         if (error) {
                             return 'error!';
                         }
-                        console.log(data);
                         if (data.user_by_id === null) {
                             return (
                                 <Row style={{marginTop: 100}}>
@@ -61,7 +60,8 @@ class AccountConfig extends Component {
                                                         pathname: '/login',
                                                     })
                                                 }}>
-                                                    <FormattedMessage id="login"/> <Icon type="right" style={{color: '#848fa6'}}/>
+                                                    <FormattedMessage id="login"/> <Icon type="right"
+                                                                                         style={{color: '#848fa6'}}/>
                                                 </div>
                                             </Col>
                                         </Row>
@@ -80,7 +80,9 @@ class AccountConfig extends Component {
                                                 <div className={'mask-black'}>
                                                     <div className={'tip'}>
                                                         <Icon style={{fontSize: 30, display: 'block'}} type="camera"/>
-                                                        <span style={{paddingTop: 5, display: 'block'}} className={'tip-span'}><FormattedMessage id="modify avatar"/></span>
+                                                        <span style={{paddingTop: 5, display: 'block'}}
+                                                              className={'tip-span'}><FormattedMessage
+                                                            id="modify avatar"/></span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -90,7 +92,9 @@ class AccountConfig extends Component {
                                                         <Col span={20}>
                                                             {
                                                                 this.state.editNickname ?
-                                                                    <EditNickname cancelEdit={this.cancelEdit}/>
+                                                                    <EditNickname cancelEdit={this.cancelEdit}
+                                                                                  userID={userID}
+                                                                                  data={data.user_by_id}/>
                                                                     :
                                                                     <div className={'nickname'} onMouseOver={() => {
                                                                         this.setState({overNickname: true})
@@ -98,7 +102,7 @@ class AccountConfig extends Component {
                                                                         this.setState({overNickname: false})
                                                                     }}>
                                                                         {
-                                                                            data.user_by_id.nickname || '匿名'
+                                                                            data.user_by_id.nickname || 'please input'
                                                                         }
                                                                         {
                                                                             this.state.overNickname ?
@@ -112,8 +116,10 @@ class AccountConfig extends Component {
                                                                                               overNickname: false
                                                                                           })
                                                                                       }}>
-                                                                <Icon style={{fontSize: '18px'}} type="edit" theme="twoTone"/>
-                                                                <span className={'modify'}> <FormattedMessage id="modify"/></span></span>
+                                                                <Icon style={{fontSize: '18px'}} type="edit"
+                                                                      theme="twoTone"/>
+                                                                <span className={'modify'}> <FormattedMessage
+                                                                    id="modify"/></span></span>
                                                                                 :
                                                                                 ''
                                                                         }
@@ -126,7 +132,8 @@ class AccountConfig extends Component {
                                                                     pathname: '/login',
                                                                 })
                                                             }}>
-                                                                <FormattedMessage id="login"/> <Icon type="right" style={{color: '#848fa6'}}/>
+                                                                <FormattedMessage id="login"/> <Icon type="right"
+                                                                                                     style={{color: '#848fa6'}}/>
                                                             </div>
                                                         </Col>
                                                     </Row>
@@ -138,35 +145,35 @@ class AccountConfig extends Component {
                                                         </Col>
                                                         <Col span={19}>
                                                             {
-                                                                this.state.editTel ?
-                                                                    <Edit kind={'tel'} cancelEdit={this.cancelEdit}/>
+                                                                this.state.editTelephone ?
+                                                                    <Edit kind={'telephone'} cancelEdit={this.cancelEdit} userID={userID} data={data.user_by_id}/>
                                                                     :
-                                                                    <div className={'message-content'} onMouseOver={() => {
-                                                                        this.setState({overTel: true})
-                                                                    }} onMouseLeave={() => {
-                                                                        this.setState({overTel: false})
+                                                                    <div className={'message-content'}
+                                                                         onMouseOver={() => {
+                                                                             this.setState({overTelephone: true})
+                                                                         }} onMouseLeave={() => {
+                                                                        this.setState({overTelephone: false})
                                                                     }}>
                                                                         {
-                                                                            data.user_by_id.telephone || 110
+                                                                            data.user_by_id.telephone || 'please input'
                                                                         }
 
                                                                         {
-                                                                            this.state.overTel ?
+                                                                            this.state.overTelephone ?
                                                                                 <span style={{
                                                                                     paddingLeft: '5px',
                                                                                     paddingRight: '5px'
                                                                                 }}
                                                                                       onClick={() => {
                                                                                           this.setState({
-                                                                                              editTel: true,
-                                                                                              overTel: false
+                                                                                              editTelephone: true,
+                                                                                              overTelephone: false
                                                                                           })
                                                                                       }}>
                                                                 <Icon style={{fontSize: '18px'}} type="edit"
                                                                       theme="twoTone"/>
                                                                 <span className={'modify'}> <FormattedMessage
-                                                                    id="modify"/></span>
-                                                            </span>
+                                                                    id="modify"/></span></span>
                                                                                 :
                                                                                 ''
                                                                         }
@@ -177,23 +184,24 @@ class AccountConfig extends Component {
 
                                                     <Row className={'message'}>
                                                         <Col span={5}>
-                                                    <span className={'message-title'}><FormattedMessage
-                                                        id="email"/></span>
+                                                            <span className={'message-title'}><FormattedMessage
+                                                                id="email"/></span>
                                                         </Col>
 
                                                         <Col span={19}>
 
                                                             {
                                                                 this.state.editEmail ?
-                                                                    <Edit kind={'email'} cancelEdit={this.cancelEdit}/>
+                                                                    <Edit kind={'email'} cancelEdit={this.cancelEdit} userID={userID} data={data.user_by_id}/>
                                                                     :
-                                                                    <div className={'message-content'} onMouseOver={() => {
-                                                                        this.setState({overEmail: true})
-                                                                    }} onMouseLeave={() => {
+                                                                    <div className={'message-content'}
+                                                                         onMouseOver={() => {
+                                                                             this.setState({overEmail: true})
+                                                                         }} onMouseLeave={() => {
                                                                         this.setState({overEmail: false})
                                                                     }}>
                                                                         {
-                                                                            data.user_by_id.email || 'xxx@ioobot.com'
+                                                                            data.user_by_id.email || 'please input'
                                                                         }
                                                                         {
                                                                             this.state.overEmail ?
@@ -239,23 +247,63 @@ export default AccountConfig;
 class EditNickname extends Component {
     constructor(props) {
         super(props);
-        this.state = {}
+        this.state = {
+            nickname: this.props.data.nickname
+        }
+    }
+
+    componentWillReceiveProps(next) {
+        this.setState({
+            nickname: next.data.nickname
+        });
     }
 
     render() {
+        let {email, telephone, openid, avatar} = this.props.data;
+
         return (
-            <Row className={'message-top'}>
-                <Col span={5}>
-                    <span className={'message-title message-title-high'}><FormattedMessage id="nickname"/></span>
-                </Col>
-                <Col span={19}>
-                    <span className={'message-content'}>
-                        <Input/>
-                        <Button type={'primary'}><FormattedMessage id="save"/></Button>
-                        <Button onClick={() => this.props.cancelEdit('nickname')}><FormattedMessage id="cancel"/></Button>
-                    </span>
-                </Col>
-            </Row>
+            <Mutation
+                mutation={gql(UPDATE_USER)}
+                onCompleted={(data) => this.props.cancelEdit('nickname')}
+            >
+
+                {(update_schema, {loading, error}) => {
+                    if (loading)
+                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                    if (error)
+                        return 'error';
+                    let varObj = {
+                        id: this.props.userID,
+                        email,
+                        updatedAt: new Date().getTime(),
+                        telephone,
+                        openid,
+                        avatar,
+                        nickname: this.state.nickname
+                    };
+                    return (
+                        <Row className={'message-top'}>
+                            <Col span={5}>
+                                <span className={'message-title message-title-high'}><FormattedMessage
+                                    id="nickname"/></span>
+                            </Col>
+                            <Col span={19}>
+                                <span className={'message-content'}>
+                                    <Input onChange={(e) => {
+                                        this.setState({nickname: e.target.value})
+                                    }} value={this.state.nickname}/>
+                                    <Button type={'primary'} onClick={() => {
+                                        update_schema({variables: varObj});
+                                    }}><FormattedMessage id="save"/></Button>
+                                    <Button onClick={() => this.props.cancelEdit('nickname')}><FormattedMessage
+                                        id="cancel"/></Button>
+                                </span>
+                            </Col>
+                        </Row>
+                    )
+                }}
+            </Mutation>
+
         )
     }
 }
@@ -263,16 +311,58 @@ class EditNickname extends Component {
 class Edit extends Component {
     constructor(props) {
         super(props);
-        this.state = {}
+        this.state = {
+            telephone: props.data.telephone,
+            email: props.data.email,
+            avatar: props.data.avatar,
+        }
+    }
+
+    componentWillReceiveProps(next) {
+        this.setState({
+            telephone: next.data.telephone,
+            email: next.data.email,
+            avatar: next.data.avatar,
+        });
     }
 
     render() {
+        let {kind} = this.props;
+
         return (
-            <span className={'message-content'}>
-                <Input/>
-                <Button type={'primary'}><FormattedMessage id="save"/></Button>
-                <Button onClick={() => this.props.cancelEdit(this.props.kind)}><FormattedMessage id="cancel"/></Button>
-            </span>
+            <Mutation
+                mutation={gql(UPDATE_USER)}
+                onCompleted={(data) => this.props.cancelEdit(kind)}
+            >
+                {(update_schema, {loading, error}) => {
+                    if (loading)
+                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                    if (error)
+                        return 'error';
+                    let {email, telephone, openid, avatar, nickname} = this.props.data;
+
+                    let varObj = {
+                        id: this.props.userID,
+                        email,
+                        updatedAt: new Date().getTime(),
+                        telephone,
+                        openid,
+                        avatar,
+                        nickname
+                    };
+                    return (
+                        <span className={'message-content'}>
+                            <Input onChange={(e) => {
+                                this.setState({[kind]: e.target.value})
+                            }} value={this.state[kind]}/>
+                            <Button type={'primary'} onClick={() => {
+                                update_schema({variables: {...varObj, [kind]:this.state[kind]}});
+                            }}><FormattedMessage id="save"/></Button>
+                            <Button onClick={() => this.props.cancelEdit(kind)}><FormattedMessage id="cancel"/></Button>
+                        </span>
+                    )
+                }}
+            </Mutation>
         )
     }
 }

src/login/CloudConfig.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Button, Input, Spin, Icon} from 'antd';
+import {Button, Input, Spin, Icon, Row, Col} from 'antd';
 
 import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../gql";
 import {request} from 'graphql-request'
@@ -135,111 +135,133 @@ class CloudConfig extends Component {
 
     render() {
         return (
-            this.state.show ?
-                <div>
-                    <div className="column-menu" onClick={() => {
-                        this.props.history.push({
-                            pathname: '/login',
-                        })
-                    }}>
-                        <Icon type="left" style={{color: '#3187FA'}}/> <FormattedMessage id="login"/>
-                    </div>
+            this.state.userID !== '' ?
 
-                    <div style={{marginTop: 15}}>
-                        <span className='cloud-name'><FormattedMessage id="Tencent"/>: </span>
-                        <div style={{marginBottom: 15}}>
-                            <div>
-                                <div style={{marginBottom: 20}}>
-                                    <span className='item-title-cloud'>APP ID:</span>
-                                    <Input style={{width: 250}} value={this.state.tenAppID} onChange={this.inputChange('tenAppID')}/>
-                                </div>
-                                <div style={{marginBottom: 20}}>
-                                    <span className='item-title-cloud'>secret ID:</span>
-                                    <Input style={{width: 250}} value={this.state.tenID} onChange={this.inputChange('tenID')}/>
-                                </div>
-                                <div style={{marginBottom: 20}}>
-                                    <span className='item-title-cloud'>secret Key:</span>
-                                    <Input style={{width: 250}} value={this.state.tenKey} onChange={this.inputChange('tenKey')}/>
-                                </div>
-                                {
-                                    this.state.showOK === 'tencent' ?
-                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
-                                        :
-                                        this.state.showNotOK === 'tencent' ?
-                                            <span>not ok</span>
+                this.state.show ?
+                    <div>
+                        <div className="column-menu" onClick={() => {
+                            this.props.history.push({
+                                pathname: '/login',
+                            })
+                        }}>
+                            <Icon type="left" style={{color: '#3187FA'}}/> <FormattedMessage id="login"/>
+                        </div>
+
+                        <div style={{marginTop: 15}}>
+                            <span className='cloud-name'><FormattedMessage id="Tencent"/>: </span>
+                            <div style={{marginBottom: 15}}>
+                                <div>
+                                    <div style={{marginBottom: 20}}>
+                                        <span className='item-title-cloud'>APP ID:</span>
+                                        <Input style={{width: 250}} value={this.state.tenAppID} onChange={this.inputChange('tenAppID')}/>
+                                    </div>
+                                    <div style={{marginBottom: 20}}>
+                                        <span className='item-title-cloud'>secret ID:</span>
+                                        <Input style={{width: 250}} value={this.state.tenID} onChange={this.inputChange('tenID')}/>
+                                    </div>
+                                    <div style={{marginBottom: 20}}>
+                                        <span className='item-title-cloud'>secret Key:</span>
+                                        <Input style={{width: 250}} value={this.state.tenKey} onChange={this.inputChange('tenKey')}/>
+                                    </div>
+                                    {
+                                        this.state.showOK === 'tencent' ?
+                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                             :
-                                            ""
-                                }
+                                            this.state.showNotOK === 'tencent' ?
+                                                <span>not ok</span>
+                                                :
+                                                ""
+                                    }
+                                </div>
+                                <Button type='primary'
+                                        onClick={this.submit(this.state.tencentCLoudID, 'tencent', this.state.tenID, this.state.tenKey, this.state.tenAppID)}>
+                                    <FormattedMessage id="save"/>
+                                </Button>
                             </div>
-                            <Button type='primary'
-                                    onClick={this.submit(this.state.tencentCLoudID, 'tencent', this.state.tenID, this.state.tenKey, this.state.tenAppID)}>
-                                <FormattedMessage id="save"/>
-                            </Button>
                         </div>
-                    </div>
 
-                    {/*<div>*/}
-                        {/*<span className='cloud-name'><FormattedMessage id="Aliyun"/>: </span>*/}
-                        {/*<div style={{marginBottom: 15}}>*/}
-                            {/*<div>*/}
-                                {/*<div style={{marginBottom: 10}}>*/}
-                                    {/*<span className='item-title-cloud'>ID:</span>*/}
-                                    {/*<Input style={{width: 250}} value={this.state.aliID} onChange={this.inputChange('aliID')}/>*/}
-                                {/*</div>*/}
-                                {/*<div style={{marginBottom: 10}}>*/}
-                                    {/*<span className='item-title-cloud'>Key:</span>*/}
-                                    {/*<Input style={{width: 250}} value={this.state.aliKey} onChange={this.inputChange('aliKey')}/>*/}
-                                {/*</div>*/}
+                        {/*<div>*/}
+                            {/*<span className='cloud-name'><FormattedMessage id="Aliyun"/>: </span>*/}
+                            {/*<div style={{marginBottom: 15}}>*/}
+                                {/*<div>*/}
+                                    {/*<div style={{marginBottom: 10}}>*/}
+                                        {/*<span className='item-title-cloud'>ID:</span>*/}
+                                        {/*<Input style={{width: 250}} value={this.state.aliID} onChange={this.inputChange('aliID')}/>*/}
+                                    {/*</div>*/}
+                                    {/*<div style={{marginBottom: 10}}>*/}
+                                        {/*<span className='item-title-cloud'>Key:</span>*/}
+                                        {/*<Input style={{width: 250}} value={this.state.aliKey} onChange={this.inputChange('aliKey')}/>*/}
+                                    {/*</div>*/}
 
-                                {/*{*/}
-                                    {/*this.state.showOK === 'aliyun' ?*/}
-                                        {/*<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>*/}
-                                        {/*:*/}
-                                        {/*this.state.showNotOK === 'aliyun' ?*/}
-                                            {/*<span>not ok</span>*/}
+                                    {/*{*/}
+                                        {/*this.state.showOK === 'aliyun' ?*/}
+                                            {/*<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>*/}
                                             {/*:*/}
-                                            {/*""*/}
-                                {/*}*/}
+                                            {/*this.state.showNotOK === 'aliyun' ?*/}
+                                                {/*<span>not ok</span>*/}
+                                                {/*:*/}
+                                                {/*""*/}
+                                    {/*}*/}
+                                {/*</div>*/}
+                                {/*<Button type='primary'*/}
+                                        {/*onClick={this.submit(this.state.aliyunCLoudID, 'aliyun', this.state.aliID, this.state.aliKey)}>*/}
+                                    {/*<FormattedMessage id="save"/>*/}
+                                {/*</Button>*/}
                             {/*</div>*/}
-                            {/*<Button type='primary'*/}
-                                    {/*onClick={this.submit(this.state.aliyunCLoudID, 'aliyun', this.state.aliID, this.state.aliKey)}>*/}
-                                {/*<FormattedMessage id="save"/>*/}
-                            {/*</Button>*/}
                         {/*</div>*/}
-                    {/*</div>*/}
 
-                    {/*<div>*/}
-                        {/*<span className='cloud-name'><FormattedMessage id="AWS"/>: </span>*/}
-                        {/*<div style={{marginBottom: 15}}>*/}
-                            {/*<div>*/}
-                                {/*<div style={{marginBottom: 10}}>*/}
-                                    {/*<span className='item-title-cloud'>ID:</span>*/}
-                                    {/*<Input style={{width: 250}} value={this.state.aliID} onChange={this.inputChange('awsID')}/>*/}
-                                {/*</div>*/}
-                                {/*<div style={{marginBottom: 10}}>*/}
-                                    {/*<span className='item-title-cloud'>Key:</span>*/}
-                                    {/*<Input style={{width: 250}} value={this.state.aliKey} onChange={this.inputChange('awsKey')}/>*/}
-                                {/*</div>*/}
-                                {/*{*/}
-                                    {/*this.state.showOK === 'amazon' ?*/}
-                                        {/*<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>*/}
-                                        {/*:*/}
-                                        {/*this.state.showNotOK === 'amazon' ?*/}
-                                            {/*<span>not ok</span>*/}
+                        {/*<div>*/}
+                            {/*<span className='cloud-name'><FormattedMessage id="AWS"/>: </span>*/}
+                            {/*<div style={{marginBottom: 15}}>*/}
+                                {/*<div>*/}
+                                    {/*<div style={{marginBottom: 10}}>*/}
+                                        {/*<span className='item-title-cloud'>ID:</span>*/}
+                                        {/*<Input style={{width: 250}} value={this.state.aliID} onChange={this.inputChange('awsID')}/>*/}
+                                    {/*</div>*/}
+                                    {/*<div style={{marginBottom: 10}}>*/}
+                                        {/*<span className='item-title-cloud'>Key:</span>*/}
+                                        {/*<Input style={{width: 250}} value={this.state.aliKey} onChange={this.inputChange('awsKey')}/>*/}
+                                    {/*</div>*/}
+                                    {/*{*/}
+                                        {/*this.state.showOK === 'amazon' ?*/}
+                                            {/*<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>*/}
                                             {/*:*/}
-                                            {/*""*/}
-                                {/*}*/}
+                                            {/*this.state.showNotOK === 'amazon' ?*/}
+                                                {/*<span>not ok</span>*/}
+                                                {/*:*/}
+                                                {/*""*/}
+                                    {/*}*/}
+                                {/*</div>*/}
+                                {/*<Button type='primary'*/}
+                                        {/*onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>*/}
+                                    {/*<FormattedMessage id="save"/>*/}
+                                {/*</Button>*/}
                             {/*</div>*/}
-                            {/*<Button type='primary'*/}
-                                    {/*onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>*/}
-                                {/*<FormattedMessage id="save"/>*/}
-                            {/*</Button>*/}
                         {/*</div>*/}
-                    {/*</div>*/}
 
-                </div>
+                    </div>
+                    :
+                    <Spin style={{marginLeft: 3}}/>
                 :
-                <Spin style={{marginLeft: 3}}/>
+                <Row style={{marginTop: 100}}>
+                    <Col span={12} offset={6} className={'cloud-wrapper'}>
+                        <Row>
+                            <Col span={4} offset={20}>
+                                <div className="back-to-login" onClick={() => {
+                                    this.props.history.push({
+                                        pathname: '/login',
+                                    })
+                                }}>
+                                    <FormattedMessage id="login"/> <Icon type="right"
+                                                                         style={{color: '#848fa6'}}/>
+                                </div>
+                            </Col>
+                        </Row>
+                        <div className={'no-login-tip'}>
+                            <span>你还没有登录</span>
+                        </div>
+                    </Col>
+                </Row>
         )
     }
 }

src/login/LoginInput.js

@@ -83,9 +83,9 @@ class LoginInput extends Component {
 
                     return (
                         <div>
-                            <span style={{marginRight: 20}}><b><FormattedMessage id="register"/>:</b></span>
+                            <span style={{marginRight: 20}} className='login-title'><b><FormattedMessage id="register"/>:</b></span>
                             <div style={{marginTop: 10}}>
-                                <span><FormattedMessage id="username"/>: </span>
+                                <span className='login-item'><FormattedMessage id="username"/>: </span>
                                 <Input
                                     placeholder=""
                                     onChange={(e) => {
@@ -104,7 +104,7 @@ class LoginInput extends Component {
                                 }
                             </div>
                             <div style={{marginTop: 10}}>
-                                <span><FormattedMessage id="password"/>: </span>
+                                <span className='login-item'><FormattedMessage id="password"/>: </span>
                                 <Input
                                     placeholder=""
                                     onChange={(e) => {
@@ -115,7 +115,7 @@ class LoginInput extends Component {
                                 />
                             </div>
                             <div style={{marginTop: 10}}>
-                                <span><FormattedMessage id="nickname"/>: </span>
+                                <span className='login-item'><FormattedMessage id="nickname"/>: </span>
                                 <Input
                                     placeholder=""
                                     onChange={(e) => {
@@ -220,9 +220,9 @@ class LoginInput extends Component {
                                 ''
                             :
                             <div>
-                                <span style={{marginRight: 20}}><b><FormattedMessage id="login"/>:</b></span>
+                                <span style={{marginRight: 20}} className='login-title'><b><FormattedMessage id="login"/>:</b></span>
                                 <div style={{marginTop: 10}}>
-                                    <span><FormattedMessage id="username"/>: </span>
+                                    <span className='login-item'><FormattedMessage id="username"/>: </span>
                                     <Input
                                         placeholder=""
                                         onChange={(e) => {
@@ -233,7 +233,7 @@ class LoginInput extends Component {
                                     />
                                 </div>
                                 <div style={{marginTop: 10}}>
-                                    <span><FormattedMessage id="password"/>: </span>
+                                    <span className='login-item'><FormattedMessage id="password"/>: </span>
                                     <Input
                                         placeholder=""
                                         onChange={(e) => {

src/login/index.css

@@ -122,4 +122,23 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+.cloud-wrapper {
+  background-color: #f0f2f5;
+  height: 500px;
+  border: 1px solid #e6e8ed;
+  border-radius: 2px;
+  box-shadow: 0 1px 10px rgba(26,26,26,.1);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.login-item {
+  display: inline-block;
+  width: 120px;
+}
+
+.login-title {
+  font-size: 16px;
 }