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 state;
}
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);
    }

    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 })
        console.log(JSON.stringify(this.state))
    }

    handleSubmit(e) {
        e.preventDefault();
        const { username, password } = this.state;
        const { authenticateUserAction } = this.props;
        authenticateUserAction(username, password);
        console.log(username)
        console.log(password)
        console.log("Pushed Submit")
    }

    render() {

        var showDialog = this.props.showLoginDialog
        if (showDialog === undefined) {
            showDialog = false
        }
        return (
            <div>
                <Button variant="primary" onClick={this.handleShow} id="OpenLoginDialogButton">
                    Login
                </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>Email address</Form.Label>
                                <Form.Control type="email" placeholder="Enter email" 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
}, dispatch)

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