online/src/components/login/Login.js

import React, {Component} from 'react';

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';

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
        }
    }


    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}`)
            .then((res) => {
                _this.setState({
                    userID: res.data,
                    loginStatus: 'logined',
                    loginOnce: false
                });

                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) => {
                                        // antd 获取不到 target，百度来的下面这句代码
                                        e.persist();
                                        this.setState({register_password: e.target.value});
                                    }}
                                    style={{width: 200}}
                                />
                            </div>
                            <div style={{marginTop: 10}}>
                                <span>nickname: </span>
                                <Input
                                    placeholder=""
                                    onChange={(e) => {
                                        // antd 获取不到 target，百度来的下面这句代码
                                        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.get(`${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 !== '') {
                    _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) => {
                                                            // antd 获取不到 target，百度来的下面这句代码
                                                            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>
            </div>
        )
    }
}

export default Login;