login 修改

src/components/app/App.jsx

@@ -320,7 +320,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/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;
+