add modify username, unfinished

src/login/AccountConfig.js

@@ -1,15 +1,23 @@
 import React, {Component} from 'react';
-import {Icon, Row, Col} from 'antd';
+import {Icon, Row, Col, Input, Button} from 'antd';
 import './index.css'
 import avatar from '../images/avatar.jpg';
 
 class AccountConfig extends Component {
     constructor(props) {
         super(props);
-        this.state = {};
+        this.state = {
+            enterNickname: false,
+            editNickname: false
+        };
 
     }
 
+    cancelEditNickname = () => {
+      this.setState({
+          editNickname: false
+      })
+    };
 
     render() {
         return (
@@ -26,18 +34,36 @@ class AccountConfig extends Component {
                         </div>
                         <Row>
                             <Col span={20} offset={4} className={'message-wrapper'}>
-                                <div className={'message-top'}>
-                                    <div className={'nickname'}>
-                                        xy
-                                    </div>
-                                    <div className="back-to-login" onClick={() => {
-                                        this.props.history.push({
-                                            pathname: '/login',
-                                        })
-                                    }}>
-                                        login <Icon type="right" style={{color: '#848fa6'}}/>
-                                    </div>
-                                </div>
+                                <Row className={'message-top'}>
+                                    <Col span={22}>
+                                        {
+                                            this.state.editNickname?
+                                                <EditNickname cancelEditNickname={this.cancelEditNickname}/>
+                                                :
+                                                <div className={'nickname'} onMouseOver={()=>{this.setState({enterNickname: true})}} onMouseLeave={()=>{this.setState({enterNickname: false})}}>
+                                                    xy
+                                                    {
+                                                        this.state.enterNickname?
+                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}} onClick={()=>{this.setState({editNickname:true})}}>
+                                                            <Icon style={{fontSize: '18px'}} type="edit" theme="twoTone"/>
+                                                            <span className={'modify'}> modify</span>
+                                                        </span>
+                                                            :
+                                                            ''
+                                                    }
+                                                </div>
+                                        }
+                                    </Col>
+                                    <Col span={2}>
+                                        <div className="back-to-login" onClick={() => {
+                                            this.props.history.push({
+                                                pathname: '/login',
+                                            })
+                                        }}>
+                                            login <Icon type="right" style={{color: '#848fa6'}}/>
+                                        </div>
+                                    </Col>
+                                </Row>
 
                                 <Row className={'message'}>
                                     <Col span={5}>
@@ -68,4 +94,29 @@ class AccountConfig extends Component {
 
 export default AccountConfig;
 
+class EditNickname extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <Row className={'message'}>
+                <Col span={5}>
+                    <span className={'message-title'}>username</span>
+                </Col>
+                <Col span={19}>
+                    <span className={'message-content'}>
+                        <Input/>
+                        <Button type={'primary'}>save</Button>
+                        <Button onClick={this.props.cancelEditNickname}>cancel</Button>
+                    </span>
+                </Col>
 
+            </Row>
+        )
+    }
+}

src/login/Login.js

@@ -2,11 +2,13 @@ import React, {Component} from 'react';
 import LoginInput from './LoginInput';
 import CloudConfig from "./CloudConfig";
 import AccountConfig from "./AccountConfig";
+import classnames from 'classnames';
 
 import {Layout} from 'antd';
 import './index.css';
 
 const {Content} = Layout;
+
 class Login extends Component {
     constructor() {
         super();
@@ -25,18 +27,16 @@ class Login extends Component {
     render() {
         return (
             <Layout style={{padding: '24px', zIndex: '0'}}>
-                <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
-
-                        {
-                            this.props.match.params.setting ?
-                                this.props.match.params.setting === 'account' ?
-                                    <AccountConfig history={this.props.history}/>
-                                    :
-                                    <CloudConfig userID={this.state.userID} history={this.props.history}/>
+                <Content className={classnames('content', {'account': this.props.match.params.setting === 'account'})}>
+                    {
+                        this.props.match.params.setting ?
+                            this.props.match.params.setting === 'account' ?
+                                <AccountConfig history={this.props.history}/>
                                 :
-                                <LoginInput history={this.props.history} getUserId={this.getUserId}/>
-                        }
-
+                                <CloudConfig userID={this.state.userID} history={this.props.history}/>
+                            :
+                            <LoginInput history={this.props.history} getUserId={this.getUserId}/>
+                    }
                 </Content>
             </Layout>
         )

src/login/index.css

@@ -1,26 +1,42 @@
+.content {
+  padding: 24px;
+  min-height: 280px;
+  background: #fff
+}
+
+.account {
+  background: none;
+}
+
 .item-title-cloud {
   display: inline-block;
   width: 50px;
 }
 
 .login-wrapper {
-  background-color: #f6f6f6;
+  background-color: #ffffff;
   height: 500px;
   border-radius: 2px;
-  box-shadow: 0 1px 3px rgba(26,26,26,.1);
+  box-shadow: 0 1px 10px rgba(26,26,26,.1);
   box-sizing: border-box;
 }
 
 .message-wrapper {
   margin-top: 10px;
   padding-right: 13px;
-  /*background-color: white;*/
 }
 
 .nickname {
   display: inline-block;
   font-weight: 600;
   font-size: 26px;
+  padding-right: 50px;
+}
+
+.modify {
+  font-weight: normal;
+  font-size: 16px;
+  color: #258fff;
 }
 
 .back-to-login {
@@ -45,6 +61,7 @@
   border: 4px solid #fff;
   border-radius: 8px;
   background-size: 100% 100%;
+  box-shadow: 0 1px 3px rgba(26,26,26,.1);
 }
 
 .mask-black {