online/src/login/LoginInput.js

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';

import {Input, Button, Spin, Icon} 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 {idGen} from "../func";
import {setCookie} from "../cookie";
import {loginUrl, registerUrl, getIdUrl} from '../config'
import {graphqlUrl} from "../config";

axios.defaults.withCredentials = true;


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: '',
            loginStatus: '',
            loginOnce: true,
            usernameTip: false
        }
    }

    login = () => {
        let _this = this;
        // let loginUrl = `http://localhost:8999/login`;

        if (this.state.login_username !== '' && this.state.login_password !== '' ) {
            axios.post(loginUrl, {
                '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(graphqlUrl, GET_USER, {id: res.data}).then(data => {
                            if (this._isMounted) {
                                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,color: '#1385e5'}} className='login-title'><b><FormattedMessage id="register"/>:</b></span>
                            <div style={{marginTop: 15}}>
                                <span className='login-item'><FormattedMessage id="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><FormattedMessage id="username has been used"/>!</b></span>
                                        :
                                        ''
                                }
                            </div>
                            <div style={{marginTop: 15}}>
                                <span className='login-item'><FormattedMessage id="password"/>: </span>
                                <Input
                                    placeholder=""
                                    onChange={(e) => {
                                        e.persist();
                                        this.setState({register_password: e.target.value});
                                    }}
                                    style={{width: 200}}
                                />
                            </div>
                            <div style={{marginTop: 15}}>
                                <span className='login-item'><FormattedMessage id="nickname"/>: </span>
                                <Input
                                    placeholder=""
                                    onChange={(e) => {
                                        e.persist();
                                        this.setState({register_nickname: e.target.value});
                                    }}
                                    style={{width: 200}}
                                />
                            </div>
                            <Button type='primary'
                                    style={{margin:'10px 0'}}
                                    onClick={() => {
                                request(graphqlUrl, 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(registerUrl,
                                            {
                                                '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;
        this._isMounted = true;
        axios.get(getIdUrl)
            .then((res) => {
                if (res.data !== '') {
                    setCookie("user_id", res.data);
                    _this.setState({
                            userID: res.data,
                            hasLogin: true,
                            loginOnce: false,
                            loginStatus: 'logined'
                        }, () => {
                        request(graphqlUrl, GET_USER, {id: res.data}).then(data => {
                                if (this._isMounted) {
                                    this.setState({
                                        avatar: data.user_by_id.avatar,
                                        nickname: data.user_by_id.nickname
                                    })
                                }
                            }
                        )
                    });
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }

    componentWillUnmount() {
        this._isMounted = false
    }

    render() {
        return (
            <div>
                <div className='login'>
                    {
                        this.state.hasLogin ?
                            this.state.loginOnce ?
                                this.login()
                                :
                                ''
                            :
                            <div>
                                <span style={{marginRight: 20,color: '#1385e5'}} className='login-title'><b><FormattedMessage id="login"/>:</b></span>
                                <div style={{marginTop: 10}}>
                                    <span className='login-item'><FormattedMessage id="username"/>: </span>
                                    <Input
                                        placeholder=""
                                        onChange={(e) => {
                                            e.persist();
                                            this.setState({login_username: e.target.value});
                                        }}
                                        style={{width: 200}}
                                    />
                                </div>
                                <div style={{marginTop: 10}}>
                                    <span className='login-item'><FormattedMessage id="password"/>: </span>
                                    <Input
                                        placeholder=""
                                        onChange={(e) => {
                                            e.persist();
                                            this.setState({login_password: e.target.value});
                                        }}
                                        style={{width: 200}}
                                    />
                                </div>
                                <Button type='primary'
                                        style={{margin:'10px 0'}}
                                        onClick={() => {
                                    this.setState({
                                        hasLogin: true
                                    })
                                }}>ok</Button>
                            </div>
                    }
                    {
                        this.state.loginStatus === 'logined' ?
                            <div>
                                                <span
                                                    style={{marginRight: '10px'}}><FormattedMessage
                                                    id="Welcome"/>, {this.state.nickname}</span>
                                <Button onClick={() => {
                                    this.setState({
                                        hasLogin: false,
                                        loginStatus: '',
                                        loginOnce: true
                                    });
                                    // cookie.remove('ring-session')
                                }}><FormattedMessage id="exit"/></Button>
                                <div style={{marginTop: 20}}>
                                    <Button type="primary" style={{marginRight: 10}} onClick={() => {
                                        this.props.history.push({
                                            pathname: '/login/account',
                                        })
                                    }}><FormattedMessage id="user setting"/></Button>
                                    <Button type="primary" onClick={() => {
                                        this.props.history.push({
                                            pathname: '/login/cloud',
                                        })
                                    }}><FormattedMessage id="cloud setting"/></Button>
                                </div>
                            </div>
                            :
                            this.state.loginStatus === 'failed' ?
                                <div>
                                    <span style={{marginRight: '10px'}}><FormattedMessage id="login failed"/></span>
                                    <Button
                                        style={{margin:'10px 0'}}
                                        onClick={() => {
                                        this.setState({
                                            hasLogin: false,
                                            loginStatus: '',
                                            loginOnce: true
                                        })
                                    }}><FormattedMessage id="relogin"/></Button>
                                </div>
                                :
                                ''
                    }
                </div>
                <div className='register' style={{marginTop: 20}}>
                    {
                        this.state.hasRegister ?
                            <div><FormattedMessage id="ok, login please"/></div>
                            :
                            this.state.loginStatus === 'logined' ?
                                ''
                                :
                                this.register()
                    }
                </div>
            </div>

        )
    }
}

export default LoginInput;