UserControl.jsx

import React from 'react';
import { Form } from 'react-bootstrap'

import Notification from '../../Tools/Notification'

import AuthServices from '../../Services/AuthServices'

import BaseControl from '../BaseControl.jsx'



export default class UserControl extends BaseControl {

    constructor(props) {
        super(props, "UserControl");

        this.state = { UserName: "" };//, AuthResult: "" };
        this.authServices = new AuthServices();

        if (this.authServices.IsAuth())
            this.authServices.GetUserInfoAsync().then(function (data) {

                if (data.Successe) {
                    this.setState({ UserName: data.UserName });// AuthResult: "" });
                    this.EventRegister.EventAction("OnAuthChange");
                    this.EventRegister.EventAction("OnItemsChange_Main");
                    this.EventRegister.EventAction("OnItemsChange_Move");
                }
                else {
                    this.setState({ UserName: "" });//, AuthResult: data.ResMsg });
                    Notification.MesEr(data.ResMessage, "Auth");
                }

            }.bind(this));
    }

    //Кнопка входа
    AuthClick() {
        let login = this.refs.Login.value;
        let password = this.refs.Password.value;

        this.authServices.AuthAsync(login, password)
            .then(function (data) {

                if (data.Successe) {
                    this.setState({ UserName: data.UserName });//, AuthResult: "" });
                    this.EventRegister.EventAction("OnAuthChange");
                    this.EventRegister.EventAction("OnItemsChange_Main");
                    this.EventRegister.EventAction("OnItemsChange_Move");
                }
                else {
                    this.setState({ UserName: "" });//, AuthResult: data.ResMsg });
                    Notification.MesEr(data.ResMessage, "Auth");
                }

            }.bind(this));
    }

    //Кнопка выхода
    LogoutClick() {
        this.authServices.Logout();
        this.setState({ UserName: "" });//, AuthResult: "" });

        this.EventRegister.EventAction("OnAuthChange");
        this.EventRegister.EventAction("OnItemsChange_Main");
        this.EventRegister.EventAction("OnItemsChange_Move");
    }


    render() {
        let state = this.state;

        return (
            <div>
                {this.authServices.IsAuth()
                    ?
                    <div>
                        <p>Вы авторизованы. Пользователь: {state.UserName}.</p>
                        <button onClick={this.LogoutClick}>Logout</button>
                    </div>
                    :
                    <div>
                        <p>Вы не авторизованы {state.UserName}.  Вход:</p>
                        {/*{state.AuthResult != "" ? <p>{state.AuthResult}</p> : ""}*/}

                        {/*<Form.Label>Email address</Form.Label>*/}
                        <Form.Control ref="Login" type="text" placeholder="Enter login" />
                        <Form.Text className="text-muted">
                            We'll never share your login with anyone else.
                        </Form.Text>
                        <br />
                        {/*<Form.Label>Password</Form.Label>*/}
                        <Form.Control ref="Password" type="password" placeholder="Password" />
                        <br />
                        <button onClick={this.AuthClick}>Auth</button>
                    </div>
                }
            </div>
        );
    }
}