BotZ/bot.z_web/src/Logoff.js

import React from 'react';
import { Spinner, Button } from 'react-bootstrap';
import ModalBox from './ModalBox.js';
import './App.css';
import './bootstrap.min.css';


class LogoffPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {logged_in: props.loggedIn, loading: false};
    }

    componentDidMount() {
        fetch(this.props.targetUrl + '/status', {credentials: 'include'})
            .then(response => response.json())
            .then(data => this.setState({
                loggedIn: data.logged_in
            }));
    }

    handleToggle = (event) => {
        this.setState({loading: true})

        fetch(this.props.targetUrl + '/logout', {
            method: 'POST',
            credentials: 'include'
        })
            .then(response => response.json())
            .then(data => this.setState({
                loggedIn: data.logged_in, loading: false
            }));
    }

    buttonValue() {
        if (this.state.loggedIn) {
            return "LOGOUT";
        } else {
            return "LOGIN";
        }
    }

    dynButton() {
        const logout = (
            <ModalBox
                title="Logoff"
                data=<Button variant="primary" type="button" onClick={this.handleToggle}>{this.buttonValue()}</Button>
            />
        );

        const loading =
            <ModalBox
                title="Logout"
                data=<Spinner animation="border" variant="primary" />
            />;

        if (this.state.loading) {
            return loading;
        } else {
            return logout;
        }
    }

    render() {
        if (this.state.loggedIn) {
            return this.dynButton();
        } else {
            return (<ModalBox title="Logout" data=<h2>You have to login first!</h2> />);
        }
    }
}

export default LogoffPage;