import React, { Component } from 'react';
import {Modal, Form, FormGroup, FormControl, Button} from 'react-bootstrap';

class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };
    }

    handleInputChange = (event) => {
        if (event.target.name === 'username') {
            this.setState({username: event.target.value});
        }
        else if (event.target.name === 'password') {
            this.setState({password: event.target.value});
        }
    }

    handleLogin = (event) => {
        event.preventDefault();
        console.log('username: ' + this.state.username + ' password: ' + this.state.password); //TODO: remove
        //TODO: Login request to backend
    }

    render() {
        return (
            <div>
                <Form className="navbar-form navbar-right" onSubmit={this.handleLogin}>
                    <FormGroup>
                        <FormControl
                            type="text"
                            placeholder="Email"
                            name="username"
                            autoFocus
                            autoComplete="off"
                            onChange={this.handleInputChange}
                        />
                    </FormGroup>
                    {' '}
                    <FormGroup>
                        <FormControl
                            type="password"
                            placeholder="Password"
                            name="password"
                            onChange={this.handleInputChange}
                        />
                        <a><div className="forgot-password">Forgot password?</div></a>
                    </FormGroup>
                    {' '}
                    <Button
                        type="submit"
                        bsStyle="primary"
                    >
                        Log in
                    </Button>
                </Form>
            </div>
        );
    }
}

export default LoginForm;

@@ -269,26 +269,267 @@
 word: ''
-%0A        %7D
+,%0A            isModalOpen: false,%0A            emailPasswordReset: ''%0A        %7D;%0A    %7D%0A%0A    hideModal = () =%3E %7B%0A        this.setState(%7B%0A            isModalOpen: false%0A        %7D);%0A    %7D%0A%0A    showModal = () =%3E %7B%0A        this.setState(%7BisModalOpen: true%7D)
 ;%0A    %7D%0A
@@ -801,24 +801,239 @@
 ;%0A        %7D%0A
+        else if (event.target.name === 'email-password-reset') %7B%0A            this.setState(%7BemailPasswordReset: event.target.value%7D);%0A            console.log(this.state.emailPasswordReset); //TODO: remove%0A        %7D%0A
     %7D%0A%0A    h
@@ -1244,24 +1244,195 @@
 kend%0A    %7D%0A%0A
+    handlePasswordReset = (event) =%3E %7B%0A        event.preventDefault();%0A        console.log('password-reset-mail: ' + this.state.emailPasswordReset); //TODO: remove%0A    %7D%0A%0A
     render()
@@ -2314,16 +2314,41 @@
       %3Ca
+ onClick=%7Bthis.showModal%7D
 %3E%3Cdiv cl
@@ -2674,16 +2674,1331 @@
 %3C/Form%3E%0A
+                %3CModal show=%7Bthis.state.isModalOpen%7D onHide=%7Bthis.hideModal%7D%3E%0A                    %3CModal.Header closeButton%3E%0A                        %3CModal.Title%3EForgot password%3C/Modal.Title%3E%0A                    %3C/Modal.Header%3E%0A                    %3CModal.Body%3E%0A                        %3Cp%3EEnter your email address and we will send you a link to reset your password.%3C/p%3E%0A                        %3CForm onSubmit=%7Bthis.handlePasswordReset%7D%3E%0A                            %3CFormGroup%3E%0A                                %3CFormControl%0A                                    type=%22text%22%0A                                    placeholder=%22Enter your email address%22%0A                                    name=%22email-password-reset%22%0A                                    autoComplete=%22off%22%0A                                    onChange=%7Bthis.handleInputChange%7D%0A                                /%3E%0A                            %3C/FormGroup%3E%0A                            %3CButton%0A                                className=%22center-block%22%0A                                type=%22submit%22%0A                                bsStyle=%22primary%22%0A                            %3E%0A                                Send password reset email%0A                            %3C/Button%3E%0A                        %3C/Form%3E%0A                    %3C/Modal.Body%3E%0A                %3C/Modal%3E%0A
         

Add password reset modal