userSessionWidget.js

import Button from "react-bootstrap/esm/Button";
import Modal from "react-bootstrap/Modal";
import Form from 'react-bootstrap/Form';

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import * as authenticationActions from '../../actions/AuthenticationActions'

const mapStateToProps = state => {
    return {
        showLoginDialog: state.AuthenticationReducer.showLoginDialog,
        user: state.AuthenticationReducer.user
    };
}

class userSessionWidget extends Component {

    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: ''
        };
        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleLogout = this.handleLogout.bind(this);
    }

    handleShow(e) {
        e.preventDefault();
        const { showLoginDialogAction } = this.props;
        showLoginDialogAction();
    }

    handleClose() {
        const { hideLoginDialogAction } = this.props;
        hideLoginDialogAction();
    }

    handleChange(e) {
        const { name, value } = e.target;
        this.setState({ [name]: value })
    }

    handleSubmit(e) {
        e.preventDefault();
        const { username, password } = this.state;
        const { authenticateUserAction } = this.props;
        authenticateUserAction(username, password);
    }

    handleLogout(e) {
        e.preventDefault()
        const { logout } = this.props;
        logout()
    }

    render() {
        const user = this.props.user
        let button;
        if (!user) {
            button = <Button variant="primary" onClick={this.handleShow} id="OpenLoginDialogButton">
                Login
            </Button>
        } else {
            button = <Button variant="primary" onClick={this.handleLogout} id="LogoutButton">
                Logout
            </Button>
        }

        var showDialog = this.props.showLoginDialog
        if (showDialog === undefined) {
            showDialog = false
        }
        return (
            <div>
                {button}

                <Modal show={showDialog} onHide={this.handleClose} id="LoginDialog">
                    <Modal.Header closeButton>
                        <Modal.Title>Login</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Form>
                            <Form.Group className="mb-3">
                                <Form.Label>Username</Form.Label>
                                <Form.Control type="text" placeholder="Bitte User-ID eingeben" name='username' onChange={this.handleChange} id="LoginDialogUserIDText" />
                            </Form.Group>

                            <Form.Group className="mb-3">
                                <Form.Label>Password</Form.Label>
                                <Form.Control type="password" placeholder="Password" name='password' onChange={this.handleChange} id="LoginDialogPasswordText" />
                            </Form.Group>
                            <Button variant="primary" type="submit" onClick={this.handleSubmit} id="PerformLoginButton">
                                Submit
                            </Button>
                        </Form>
                    </Modal.Body>

                    <Modal.Footer>
                        Passwort vergessen?
                    </Modal.Footer>
                </Modal>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => bindActionCreators({
    showLoginDialogAction: authenticationActions.getShowLoginDialogAction,
    hideLoginDialogAction: authenticationActions.getHideLoginDialogAction,
    authenticateUserAction: authenticationActions.authenticateUser,
    logout: authenticationActions.getLogoutAction
}, dispatch)

const ConnectedUserSessionWidget = connect(mapStateToProps, mapDispatchToProps)(userSessionWidget)
export default ConnectedUserSessionWidget