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

src/components/app/App.jsx

@@ -68,6 +68,15 @@ class App extends Component {
         });
     };
 
+    switchMenuTab = (menuName, e) => {
+        this.setState({
+            [menuName]: e.key,
+        });
+        if(e.key === "graphql-service"){
+            this.setState({sideBar: "ecommerce"});
+        }
+    };
+
     switchSidebar = (value) => {
         this.setState({
             sideBar:value,
@@ -121,7 +130,7 @@ class App extends Component {
             <Router>
                 <Layout style={{minHeight: '100vh'}}>
                     <Header className="header" style={{position: 'fixed', zIndex: 1, width: '100%'}}>
-                        <Link to="/"   onClick={() => this.switchMenuLevel('menuLevel1', "graphql-service")}>
+                        <Link to="/"   onClick={() => this.setState({menuLevel1:"graphql-service",sideBar:"ecommerce"})}>
                             <div className="logo-wrapper">
                                 <div className='logo'/>
                             </div>
@@ -132,7 +141,7 @@ class App extends Component {
                             // defaultSelectedKeys={['graphql-service']}
                             selectedKeys={[this.state.menuLevel1]}
                             style={{lineHeight: '64px'}}
-                            onClick={(e) => this.switchMenu('menuLevel1', e)}
+                            onClick={(e) => this.switchMenuTab('menuLevel1', e)}
                         >
                             <Menu.Item key="graphql-service">
                                 <Link to="/graphql-service/trial-case/index"><FormattedMessage id="Graphql Service"/></Link>
@@ -320,7 +329,8 @@ class App extends Component {
                                 <Route path="/graphql-service/my-create/:case" component={UserCreate}/>
                                 <Route path="/wechat-service/:sidebar/:case" component={WechatService}/>
                                 <Route path="/quant-service/:sidebar/:case" component={QuantService}/>
-                                <Route path="/login(/:setting)" component={Login}/>
+                                <Route path="/login/:setting" component={Login}/>
+                                <Route path="/login" component={Login}/>
                                 <Redirect path="*" to="/"/>
                             </Switch>
                         </Layout>

src/components/cloudFunction/CloudFunction.jsx

@@ -1,58 +0,0 @@
-import React, {Component} from 'react';
-
-import {Layout, Menu  } from 'antd';
-
-import Deploy from '../common/deploy/Deploy';
-import Api from "./api/Api";
-
-const { Content } = Layout;
-
-class CloudFunction extends Component {
-    constructor() {
-        super();
-        this.state = {
-            menuLevel2: "deploy",
-        }
-    }
-
-    switchMenu = (menuName, e) => {
-        // console.log('menuName', menuName, 'e', e);
-        this.setState({
-            [menuName]: e.key,
-        });
-    };
-
-    render() {
-        return (
-            <div>
-                <Menu
-                    mode="horizontal"
-                    defaultSelectedKeys={['deploy']}
-                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
-                    onClick={(e) => this.switchMenu('menuLevel2', e)}
-                    selectedKeys={[this.state.menuLevel2]}
-                >
-                    <Menu.Item key="deploy">deploy</Menu.Item>
-                    <Menu.Item key="api">API</Menu.Item>
-                </Menu>
-
-                <Layout style={{ padding: '24px', zIndex: '0'}}>
-                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
-                        {(() => {
-                            switch (this.state.menuLevel2) {
-                                case 'deploy':
-                                    return <Deploy />;
-                                case 'api':
-                                    return <Api />;
-                                default:
-                                    return <Deploy />
-                            }
-                        })()}
-                    </Content>
-                </Layout>
-            </div>
-        )
-    }
-}
-
-export default CloudFunction;

src/components/cloudFunction/api/Api.jsx

@@ -1,23 +0,0 @@
-import React, {Component} from 'react';
-
-import {  Pagination } from 'antd';
-
-export default class Api extends Component {
-    constructor() {
-        super();
-        this.state = {
-            locale: null,
-        };
-    }
-
-    render() {
-        return (
-            <div className="locale-components">
-                <div className="example">
-                    antd ui 组件中英切换
-                    <Pagination defaultCurrent={1} total={50} showSizeChanger />
-                </div>
-            </div>
-        );
-    }
-}

src/components/common/schema/Table.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Layout, Select, Input, Icon, Button, notification, Spin} from 'antd';
+import {Layout, Select, Input, Icon, Button, notification, Spin, Modal} from 'antd';
 import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../gql";
 import gql from "graphql-tag";
 
@@ -9,6 +9,7 @@ import {getCookie} from "../../cookie";
 
 const Option = Select.Option;
 const {Content} = Layout;
+const confirm = Modal.confirm;
 
 class Table extends Component {
     constructor(props) {
@@ -261,8 +262,40 @@ class UpdateTableButton extends Component {
 
     }
 
+    showConfirm = (schemaName,schemaID) => {
+        let _this = this;
+
+        if(this.props.add !== 'add') {
+            this.props.history.push({
+                pathname: `/graphql-service/my-create/${schemaName}`,
+                state:{
+                    schemaName,
+                    schemaID
+                }
+            });
+        }else{
+            confirm({
+                title: '添加成功',
+                content: '继续添加数据表？',
+                onOk() {
+                    console.log('继续添加');
+                },
+                onCancel() {
+                    _this.props.history.push({
+                        pathname: `/graphql-service/my-create/${schemaName}`,
+                        state:{
+                            schemaName,
+                            schemaID
+                        }
+                    });
+                }
+            });
+        }
+    };
+
     render() {
         let schemaID = this.props.schemaID;
+        let schemaName = this.props.schemaName;
         let userID = this.props.userID;
 
         let varobj = {
@@ -289,6 +322,7 @@ class UpdateTableButton extends Component {
                         return (
                             <Mutation
                                 mutation={gql(UPDATE_SCHEMA)}
+                                onCompleted={()=>this.showConfirm(schemaName,schemaID)}
                                 refetchQueries={[{query: gql(SHOW_TABLE), variables: {schema_id: schemaID}}]}
                             >
 
@@ -349,16 +383,16 @@ class UpdateTableButton extends Component {
                                                         schemaData: JSON.stringify(schemaCols)
                                                     }
                                                 });
-                                                this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols)
-                                                if(this.props.add !== 'add') {
-                                                    this.props.history.push({
-                                                        pathname: `/graphql-service/my-create/${this.props.schemaName}`,
-                                                        state:{
-                                                            schemaName:this.props.schemaName,
-                                                            schemaID:this.props.schemaID
-                                                        }
-                                                    });
-                                                }
+                                                this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols);
+                                                // if(this.props.add !== 'add') {
+                                                //     this.props.history.push({
+                                                //         pathname: `/graphql-service/my-create/${this.props.schemaName}`,
+                                                //         state:{
+                                                //             schemaName:this.props.schemaName,
+                                                //             schemaID:this.props.schemaID
+                                                //         }
+                                                //     });
+                                                // }
                                             }}>
                                                 save
                                             </Button>

src/components/login/AccountConfig.js

@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import {Button} from 'antd';
+
+
+
+class AccountConfig extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        };
+
+    }
+
+
+    render() {
+        return (
+            <div>
+                <Button type={'primary'} onClick={()=>{
+                    this.props.history.push({
+                        pathname: '/login',
+                    })
+                }}>back</Button>
+            </div>
+        )
+    }
+}
+
+export default AccountConfig;
+
+

src/components/login/Config.js → src/components/login/CloudConfig.js

@@ -3,12 +3,13 @@ import {Button, Input, Spin, Icon} from 'antd';
 
 import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../gql";
 import {request} from 'graphql-request'
+import {getCookie} from '../cookie';
 
 const idGen = (kind) => {
     return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
 };
 
-class Config extends Component {
+class CloudConfig extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -24,8 +25,9 @@ class Config extends Component {
             awsCLoudID: '',
             awsID: '',
             awsKey: '',
+            userID: getCookie('user_id')
         };
-        request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: props.userID}).then(
+        request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: this.state.userID}).then(
             data => {
                 let tencent = data.cloud_by_props.find(cloud => cloud.cloudName === 'tencent');
                 let aliyun = data.cloud_by_props.find(cloud => cloud.cloudName === 'aliyun');
@@ -60,7 +62,7 @@ class Config extends Component {
             if (id === '') {
                 let varObj = {
                     id: idGen('cloud'),
-                    user_id: this.props.userID,
+                    user_id: this.state.userID,
                     appId: '',
                     cloudName,
                     secretId,
@@ -129,6 +131,13 @@ class Config extends Component {
         return (
             this.state.show ?
                 <div>
+                    <div>
+                        <Button type={'primary'} onClick={()=>{
+                            this.props.history.push({
+                                pathname: '/login',
+                            })
+                        }}>back</Button>
+                    </div>
                     <div>
                         <span className='cloud-name'>Tencent: </span>
                         <div style={{marginBottom: 15}}>
@@ -211,6 +220,6 @@ class Config extends Component {
     }
 }
 
-export default Config;
+export default CloudConfig;
 
 

src/components/login/Login.js

@@ -1,313 +1,36 @@
 import React, {Component} from 'react';
+import LoginInput from './LoginInput';
+import CloudConfig from "./CloudConfig";
+import AccountConfig from "./AccountConfig";
 
-import {Layout, Input, Button, Spin} from 'antd';
-import Config from './Config'
-import {ADD_USER, GET_USER, SEARCH_USER} from "../gql";
-import {Mutation} from "react-apollo";
-import axios from 'axios';
-import {request} from 'graphql-request'
-import gql from "graphql-tag";
-// todo: _.debounce 的引入
-import _ from 'lodash';
-
-import {setCookie} from "../cookie";
-
-axios.defaults.withCredentials = true;
-
-const {Content} = Layout;
-const idGen = (kind) => {
-    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
-};
 
 class Login extends Component {
     constructor() {
         super();
         this.state = {
-            userID: '',
-            hasLogin: false,
-            hasRegister: false,
-            nickname: 'its a default nickname',
-            avatar: '',
-            register_username: '',
-            register_password: '',
-            register_nickname: '',
-            login_username: '',
-            login_password: '',
-            login_url: 'http://123.206.193.98:8999/login',
-            register_url: 'http://123.206.193.98:8999/resetpassword',
-            getID_url: 'http://123.206.193.98:8999/getuserid',
-            loginStatus: '',
-            loginOnce: true,
-            usernameTip: false
+            userID: ''
         }
     }
 
-
-    login = () => {
-        let _this = this;
-        // todo: should be post
-        // axios.get(`${this.state.login_url}?user-name=${this.state.login_username}&password=${this.state.login_password}`)
-
-        axios.post(this.state.login_url,
-            {
-                'user-name': this.state.login_username,
-                password: this.state.login_password
-            })
-            .then((res) => {
-            console.log('login result',res);
-                _this.setState({
-                    userID: res.data,
-                    loginStatus: 'logined',
-                    loginOnce: false
-                });
-                setCookie("user_id",res.data);
-
-                request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
-                        this.setState({
-                            avatar: data.user_by_id.avatar,
-                            nickname: data.user_by_id.nickname
-                        })
-                    }
-                )
-
-            })
-            .catch((err) => {
-                _this.setState({
-                    loginStatus: 'failed',
-                    loginOnce: false
-                });
-            });
+    getUserId = (id) => {
+        this.setState({
+            userID: id
+        })
     };
 
-    register = () => {
-        return (
-            <Mutation mutation={gql(ADD_USER)}>
-                {(create_user, {loading, error}) => {
-                    if (error)
-                        return 'error';
-                    if (loading)
-                        return <Spin style={{marginLeft: 3}}/>;
-
-                    return (
-                        <div>
-                            <span style={{marginRight: 20}}><b>register:</b></span>
-                            <div style={{marginTop: 10}}>
-                                <span>username: </span>
-                                <Input
-                                    placeholder=""
-                                    onChange={(e) => {
-                                        // antd 获取不到 target，百度来的下面这句代码
-                                        e.persist();
-                                        this.setState({register_username: e.target.value});
-
-                                    }}
-                                    style={{width: 200}}
-                                />
-                                {
-                                    this.state.usernameTip ?
-                                        <span><b>username has been used!</b></span>
-                                        :
-                                        ''
-                                }
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <span>password: </span>
-                                <Input
-                                    placeholder=""
-                                    onChange={(e) => {
-                                        e.persist();
-                                        this.setState({register_password: e.target.value});
-                                    }}
-                                    style={{width: 200}}
-                                />
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <span>nickname: </span>
-                                <Input
-                                    placeholder=""
-                                    onChange={(e) => {
-                                        e.persist();
-                                        this.setState({register_nickname: e.target.value});
-                                    }}
-                                    style={{width: 200}}
-                                />
-                            </div>
-                            <Button type='primary' onClick={() => {
-                                request('http://123.206.193.98:3000/graphql', SEARCH_USER, {username: this.state.register_username}).then(data => {
-                                    if (data.user_by_props.length === 0) {
-                                        let id = idGen('user');
-                                        let _this = this;
-                                        create_user({
-                                            variables: {
-                                                id,
-                                                email: '',
-                                                updatedAt: '',
-                                                password: '',
-                                                telephone: '',
-                                                nickname: this.state.register_nickname,
-                                                username: this.state.register_username,
-                                                createdAt: new Date().getTime(),
-                                                openid: '',
-                                                avatar: ''
-                                            }
-                                        });
-                                        axios.post(this.state.register_url,
-                                            {
-                                                'user-id': id,
-                                                password: this.state.register_password,
-                                                token:'WXgraphql4Io'
-                                            })
-                                            .then(function (response) {
-                                                if (response.status === 200)
-                                                    _this.setState({
-                                                        hasRegister: true
-                                                    })
-                                            })
-                                            .catch(function (error) {
-                                                console.log(error);
-                                            });
-                                    } else {
-                                        this.setState({
-                                            usernameTip: true
-                                        });
-                                        setTimeout(() => {
-                                            this.setState({
-                                                usernameTip: false
-                                            });
-                                        }, 1500)
-                                    }
-                                });
-
-                            }}>ok</Button>
-                        </div>
-                    );
-                }}
-            </Mutation>
-
-        )
-    };
-
-    componentWillMount() {
-        let _this = this;
-        axios.get(this.state.getID_url)
-            .then((res) => {
-                if (res.data !== '') {
-                    setCookie("user_id",res.data);
-                    _this.setState({
-                            userID: res.data,
-                            hasLogin: true,
-                            loginOnce: false,
-                            loginStatus: 'logined'
-                        }, () => {
-                            request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
-                                    this.setState({
-                                        avatar: data.user_by_id.avatar,
-                                        nickname: data.user_by_id.nickname
-                                    })
-                                }
-                            )
-                        }
-                    )
-                }
-            })
-            .catch((err) => {
-                console.log(err);
-            });
-    }
 
     render() {
         return (
             <div>
-                <Layout style={{padding: '24px', zIndex: '0'}}>
-                    <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
-                        {
-                            <div>
-                                <div className='login'>
-                                    {
-                                        this.state.hasLogin ?
-                                            this.state.loginOnce ?
-                                                this.login()
-                                                :
-                                                ''
-                                            :
-                                            <div>
-                                                <span style={{marginRight: 20}}><b>login:</b></span>
-                                                <div style={{marginTop: 10}}>
-                                                    <span>username: </span>
-                                                    <Input
-                                                        placeholder=""
-                                                        onChange={(e) => {
-                                                            e.persist();
-                                                            this.setState({login_username: e.target.value});
-                                                        }}
-                                                        style={{width: 200}}
-                                                    />
-                                                </div>
-                                                <div style={{marginTop: 10}}>
-                                                    <span>password: </span>
-                                                    <Input
-                                                        placeholder=""
-                                                        onChange={(e) => {
-                                                            e.persist();
-                                                            this.setState({login_password: e.target.value});
-                                                        }}
-                                                        style={{width: 200}}
-                                                    />
-                                                </div>
-                                                <Button type='primary' onClick={() => {
-                                                    this.setState({
-                                                        hasLogin: true
-                                                    })
-                                                }}>ok</Button>
-                                            </div>
-                                    }
-                                    {
-                                        this.state.loginStatus === 'logined' ?
-                                            <div>
-                                                <span
-                                                    style={{marginRight: '10px'}}>welcome, {this.state.nickname}</span>
-                                                <Button onClick={() => {
-                                                    this.setState({
-                                                        hasLogin: false,
-                                                        loginStatus: '',
-                                                        loginOnce: true
-                                                    });
-                                                    // cookie.remove('ring-session')
-                                                }}>exit</Button>
-                                                <Config userID={this.state.userID}/>
-                                            </div>
-                                            :
-                                            this.state.loginStatus === 'failed' ?
-                                                <div>
-                                                    <span style={{marginRight: '10px'}}>login failed</span>
-                                                    <Button onClick={() => {
-                                                        this.setState({
-                                                            hasLogin: false,
-                                                            loginStatus: '',
-                                                            loginOnce: true
-                                                        })
-                                                    }}>relogin</Button>
-                                                </div>
-                                                :
-                                                ''
-                                    }
-                                </div>
-                                <div className='register' style={{marginTop: 20}}>
-                                    {
-                                        this.state.hasRegister ?
-                                            <div>ok, login please</div>
-                                            :
-                                            this.state.loginStatus === 'logined' ?
-                                                ''
-                                                :
-                                                this.register()
-                                    }
-                                </div>
-
-                            </div>
-                        }
-                    </Content>
-                </Layout>
+                {
+                    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}/>
+                        :
+                        <LoginInput history={this.props.history} getUserId={this.getUserId}/>
+                }
             </div>
         )
     }

src/components/login/LoginInput.js

@@ -0,0 +1,322 @@
+import React, {Component} from 'react';
+
+import {Layout, Input, Button, Spin} from 'antd';
+import {ADD_USER, GET_USER, SEARCH_USER} from "../gql";
+import {Mutation} from "react-apollo";
+import axios from 'axios';
+import {request} from 'graphql-request'
+import gql from "graphql-tag";
+// todo: _.debounce 的引入
+import _ from 'lodash';
+
+import {setCookie} from "../cookie";
+
+axios.defaults.withCredentials = true;
+
+const {Content} = Layout;
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
+class LoginInput extends Component {
+    constructor() {
+        super();
+        this.state = {
+            userID: '',
+            hasLogin: false,
+            hasRegister: false,
+            nickname: 'its a default nickname',
+            avatar: '',
+            register_username: '',
+            register_password: '',
+            register_nickname: '',
+            login_username: '',
+            login_password: '',
+            login_url: 'http://123.206.193.98:8999/login',
+            register_url: 'http://123.206.193.98:8999/resetpassword',
+            getID_url: 'http://123.206.193.98:8999/getuserid',
+            loginStatus: '',
+            loginOnce: true,
+            usernameTip: false
+        }
+    }
+
+
+    login = () => {
+        let _this = this;
+
+        axios.post(this.state.login_url, {
+            'user-name': this.state.login_username,
+            password: this.state.login_password
+        })
+            .then((res) => {
+                _this.setState({
+                    userID: res.data,
+                    loginStatus: 'logined',
+                    loginOnce: false
+                });
+                setCookie("user_id", res.data);
+                _this.props.getUserId(res.data);
+                request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
+                        this.setState({
+                            avatar: data.user_by_id.avatar,
+                            nickname: data.user_by_id.nickname
+                        })
+                    }
+                )
+            })
+            .catch((err) => {
+                _this.setState({
+                    loginStatus: 'failed',
+                    loginOnce: false
+                });
+            });
+    };
+
+    register = () => {
+        return (
+            <Mutation mutation={gql(ADD_USER)}>
+                {(create_user, {loading, error}) => {
+                    if (error)
+                        return 'error';
+                    if (loading)
+                        return <Spin style={{marginLeft: 3}}/>;
+
+                    return (
+                        <div>
+                            <span style={{marginRight: 20}}><b>register:</b></span>
+                            <div style={{marginTop: 10}}>
+                                <span>username: </span>
+                                <Input
+                                    placeholder=""
+                                    onChange={(e) => {
+                                        // antd 获取不到 target，百度来的下面这句代码
+                                        e.persist();
+                                        this.setState({register_username: e.target.value});
+
+                                    }}
+                                    style={{width: 200}}
+                                />
+                                {
+                                    this.state.usernameTip ?
+                                        <span><b>username has been used!</b></span>
+                                        :
+                                        ''
+                                }
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <span>password: </span>
+                                <Input
+                                    placeholder=""
+                                    onChange={(e) => {
+                                        e.persist();
+                                        this.setState({register_password: e.target.value});
+                                    }}
+                                    style={{width: 200}}
+                                />
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <span>nickname: </span>
+                                <Input
+                                    placeholder=""
+                                    onChange={(e) => {
+                                        e.persist();
+                                        this.setState({register_nickname: e.target.value});
+                                    }}
+                                    style={{width: 200}}
+                                />
+                            </div>
+                            <Button type='primary' onClick={() => {
+                                request('http://123.206.193.98:3000/graphql', SEARCH_USER, {username: this.state.register_username}).then(data => {
+                                    if (data.user_by_props.length === 0) {
+                                        let id = idGen('user');
+                                        let _this = this;
+                                        create_user({
+                                            variables: {
+                                                id,
+                                                email: '',
+                                                updatedAt: '',
+                                                password: '',
+                                                telephone: '',
+                                                nickname: this.state.register_nickname,
+                                                username: this.state.register_username,
+                                                createdAt: new Date().getTime(),
+                                                openid: '',
+                                                avatar: ''
+                                            }
+                                        });
+                                        axios.post(this.state.register_url,
+                                            {
+                                                'user-id': id,
+                                                password: this.state.register_password,
+                                                token: 'WXgraphql4Io'
+                                            })
+                                            .then(function (response) {
+                                                if (response.status === 200)
+                                                    _this.setState({
+                                                        hasRegister: true
+                                                    })
+                                            })
+                                            .catch(function (error) {
+                                                console.log(error);
+                                            });
+                                    } else {
+                                        this.setState({
+                                            usernameTip: true
+                                        });
+                                        setTimeout(() => {
+                                            this.setState({
+                                                usernameTip: false
+                                            });
+                                        }, 1500)
+                                    }
+                                });
+
+                            }}>ok</Button>
+                        </div>
+                    );
+                }}
+            </Mutation>
+
+        )
+    };
+
+    componentWillMount() {
+        let _this = this;
+        axios.get(this.state.getID_url)
+            .then((res) => {
+                if (res.data !== '') {
+                    setCookie("user_id", res.data);
+                    _this.setState({
+                            userID: res.data,
+                            hasLogin: true,
+                            loginOnce: false,
+                            loginStatus: 'logined'
+                        }, () => {
+                            request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
+                                    this.setState({
+                                        avatar: data.user_by_id.avatar,
+                                        nickname: data.user_by_id.nickname
+                                    })
+                                }
+                            )
+                        }
+                    )
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+
+    render() {
+        return (
+            <div>
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
+                        {
+                            <div>
+                                <div className='login'>
+                                    {
+                                        this.state.hasLogin ?
+                                            this.state.loginOnce ?
+                                                this.login()
+                                                :
+                                                ''
+                                            :
+                                            <div>
+                                                <span style={{marginRight: 20}}><b>login:</b></span>
+                                                <div style={{marginTop: 10}}>
+                                                    <span>username: </span>
+                                                    <Input
+                                                        placeholder=""
+                                                        onChange={(e) => {
+                                                            e.persist();
+                                                            this.setState({login_username: e.target.value});
+                                                        }}
+                                                        style={{width: 200}}
+                                                    />
+                                                </div>
+                                                <div style={{marginTop: 10}}>
+                                                    <span>password: </span>
+                                                    <Input
+                                                        placeholder=""
+                                                        onChange={(e) => {
+                                                            e.persist();
+                                                            this.setState({login_password: e.target.value});
+                                                        }}
+                                                        style={{width: 200}}
+                                                    />
+                                                </div>
+                                                <Button type='primary' onClick={() => {
+                                                    this.setState({
+                                                        hasLogin: true
+                                                    })
+                                                }}>ok</Button>
+                                            </div>
+                                    }
+                                    {
+                                        this.state.loginStatus === 'logined' ?
+                                            <div>
+                                                <span
+                                                    style={{marginRight: '10px'}}>welcome, {this.state.nickname}</span>
+                                                <Button onClick={() => {
+                                                    this.setState({
+                                                        hasLogin: false,
+                                                        loginStatus: '',
+                                                        loginOnce: true
+                                                    });
+                                                    // cookie.remove('ring-session')
+                                                }}>exit</Button>
+                                                <div style={{marginTop: 20}}>
+                                                    <Button type="primary" style={{marginRight: 10}} onClick={() => {
+                                                        this.props.history.push({
+                                                            pathname: '/login/account',
+                                                        })
+                                                    }}>user setting</Button>
+                                                    <Button type="primary" onClick={() => {
+                                                        this.props.history.push({
+                                                            pathname: '/login/cloud',
+                                                        })
+                                                    }}>cloud setting</Button>
+                                                </div>
+                                            </div>
+                                            :
+                                            this.state.loginStatus === 'failed' ?
+                                                <div>
+                                                    <span style={{marginRight: '10px'}}>login failed</span>
+                                                    <Button onClick={() => {
+                                                        this.setState({
+                                                            hasLogin: false,
+                                                            loginStatus: '',
+                                                            loginOnce: true
+                                                        })
+                                                    }}>relogin</Button>
+                                                </div>
+                                                :
+                                                ''
+                                    }
+                                </div>
+                                <div className='register' style={{marginTop: 20}}>
+                                    {
+                                        this.state.hasRegister ?
+                                            <div>ok, login please</div>
+                                            :
+                                            this.state.loginStatus === 'logined' ?
+                                                ''
+                                                :
+                                                this.register()
+                                    }
+                                </div>
+
+                            </div>
+                        }
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default LoginInput;
+

src/components/monitorNotify/MonitorNotify.jsx

@@ -1,62 +0,0 @@
-import React, {Component} from 'react';
-
-import {Layout, Menu} from 'antd';
-import CaseNotification from "../common/caseNotification/CaseNotification";
-import Notification from "./notification/Notification";
-import GraphqlTrigger from "./graphqlTrigger/GraphqlTrigger";
-import StockSignal from "./stockSignal/StockSignal";
-
-const { Content } = Layout;
-
-class MonitorNotify extends Component {
-    constructor() {
-        super();
-        this.state = {
-            menuLevel2: "notification",
-        }
-    }
-
-    switchMenu = (menuName, e) => {
-        // console.log('menuName', menuName, 'e', e);
-        this.setState({
-            [menuName]: e.key,
-        });
-    };
-
-    render() {
-        return (
-            <div>
-                <Menu
-                    mode="horizontal"
-                    defaultSelectedKeys={['notification']}
-                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
-                    onClick={(e) => this.switchMenu('menuLevel2', e)}
-                    selectedKeys={[this.state.menuLevel2]}
-                >
-                    <Menu.Item key="notification">notification</Menu.Item>
-                    <Menu.Item key="graphql-trigger">graphql trigger</Menu.Item>
-                    <Menu.Item key="stock-signal">stock signal</Menu.Item>
-                </Menu>
-
-                <Layout style={{ padding: '24px', zIndex: '0'}}>
-                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
-                        {(() => {
-                            switch (this.state.menuLevel2) {
-                                case 'notification':
-                                    return <Notification />;
-                                case 'graphql-trigger':
-                                    return <GraphqlTrigger />;
-                                case 'stock-signal':
-                                    return <StockSignal />;
-                                default:
-                                    return <Notification />
-                            }
-                        })()}
-                    </Content>
-                </Layout>
-            </div>
-        )
-    }
-}
-
-export default MonitorNotify;

src/components/monitorNotify/graphqlTrigger/GraphqlTrigger.jsx

@@ -1,15 +0,0 @@
-import React, {Component} from 'react';
-
-class GraphqlTrigger extends Component {
-
-
-    render() {
-        return (
-            <div>
-                Graphql Trigger
-            </div>
-        )
-    }
-}
-
-export default GraphqlTrigger;

src/components/monitorNotify/notification/Notification.jsx

@@ -1,15 +0,0 @@
-import React, {Component} from 'react';
-
-class Notification extends Component {
-
-
-    render() {
-        return (
-            <div>
-                <p>Notification</p>
-            </div>
-        )
-    }
-}
-
-export default Notification;

src/components/monitorNotify/stockSignal/StockSignal.jsx

@@ -1,14 +0,0 @@
-import React, {Component} from 'react';
-
-class StockSignal extends Component {
-
-    render() {
-        return (
-            <div>
-                Stock Signal
-            </div>
-        )
-    }
-}
-
-export default StockSignal;