Menu react.js material-ui

gistfile1.txt

import React, {Component} from 'react'
import {browserHistory, Link} from 'react-router'
import './login.css';
import TextField from 'material-ui/TextField';
import Checkbox from 'material-ui/Checkbox';
import RaisedButton from 'material-ui/RaisedButton';
import PropTypes from 'prop-types';
import Snackbar from 'material-ui/Snackbar';

import {AppBar, Tabs, Tab} from 'material-ui'
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/action/search';

class Login extends Component {
    constructor(props) {
        super();
        this.state = ({
            loginValid: false,
            passValid: false,
            organizationValid: false,

            loginValue: '',
            passValue: '',
            organizationValue: '',

            loginErr: '',
            passErr: '',
            organizationErr: '',

            authBegin: false,

            open: false,


        });
    }

    validationLogin(login) {
        console.log('validation login', login.target.value);
        if (login.target.value.length > 0) {
            this.setState({
                loginValid: true,
                loginValue: login.target.value,
            })
        } else {
            this.setState({
                loginValid: false,
                loginValue: login.target.value,
            })
        }

        if (login.target.value === 'inet') {
            this.setState({
                open: true,
            });
        } else {
            this.setState({
                open: false,
            });
        }
    }

    validationPass(pass) {
        console.log('validation pass', pass.target.value, pass.target.value.length);
        if (pass.target.value.length > 0) {
            this.setState({
                passValid: true,
                passValue: pass.target.value
            })
        } else {
            this.setState({
                passValid: false,
                passValue: pass.target.value
            })
        }
    }

    validationOrganization(org) {
        console.log('organization', org.target.value)
        if (org.target.value.length > 0) {
            this.setState({
                organizationValid: true,
                organizationValue: org.target.value,
            })
        } else {
            this.setState({
                organizationValid: false,
                organizationValue: org.target.value,
            })
        }
    }

    logIn() {
        console.log('logIn', this.state.loginValid, this.state.loginValue, this.state.passValid, this.state.passValue, this.state.organizationValid, this.state.organizationValue)
        if (this.state.loginValid && this.state.loginValue.length > 0) {
            this.setState({
                loginErr: '',
            })
        } else {
            this.setState({
                loginErr: 'Dit veld is verplicht',
            })
        }
        console.log('logIn pass', this.state.passValid, this.state.passValue, this.state.passValue.length);
        if (this.state.passValid && this.state.passValue.length > 0) {
            this.setState({
                passErr: '',
            })
        } else {
            this.setState({
                passErr: 'Dit veld is verplicht',
            })
        }

        if (this.state.organizationValid && this.state.organizationValue.length > 0) {
            this.setState({
                organizationErr: '',
            })
        } else {
            this.setState({
                organizationErr: 'Dit veld is verplicht',
            })
        }

        if (this.state.loginValid && this.state.passValid && this.state.organizationValid) {
            this.props.logIn(this.state.loginValue, this.state.passValue, this.state.organizationValue);
        }
    }

    handleTouchTap = () => {
        this.setState({
            open: true,
        });
    };

    handleRequestClose = () => {
        this.setState({
            open: false,
        });
    };


    componentWillReceiveProps(nextProps) {
        console.log('nextProps', nextProps)
        if (!nextProps.loginValid) {
            this.setState({
                loginErr: 'Ongeldige gebruikersnaam',
                // loginValid: false,
            })
        } else {
            // this.setState({
            // loginErr: '',
            // loginValid: true,
            // })
        }
        if (!nextProps.passValid) {
            this.setState({
                passErr: 'Ongeldig wachtwoord',
                // passValid: false,
            })
        } else {
            // this.setState({
            //     passErr: '',
            //     passValid: true,
            // })
        }
    }

    render() {

        return (
            <div>
                <AppBar
                    title="Title"
                    style={styles.appBar}
                    iconClassNameRight="muidocs-icon-navigation-expand-more"
                    iconElementRight={<IconButton><NavigationClose /></IconButton>}
                >
                    <Tabs style={styles.tabs}>
                        <Tab label="ALL"/>
                        <Tab label="CAMERA"/>
                        <Tab label="RECENT"/>
                    </Tabs>
                </AppBar>

                <div style={mainDiv}>
                    <img src="./img/da-systems.png" alt="" style={imageWidthHeight}/>
                    <TextField
                        floatingLabelText="Inlognaam" fullWidth={true}
                        onChange={this.validationLogin.bind(this)}
                        value={this.state.loginValue}
                        errorText={this.state.loginErr}
                    />

                    <TextField
                        floatingLabelText="Wachtwoord" fullWidth={true} type="password"
                        onChange={this.validationPass.bind(this)}
                        value={this.state.passValue}
                        errorText={this.state.passErr}
                    />

                    <TextField
                        floatingLabelText="Organisatie" fullWidth={true}
                        onChange={this.validationOrganization.bind(this)}
                        value={this.state.organizationValue}
                        errorText={this.state.organizationErr}
                    />
                    <div style={styles.myWidth}>
                        <Checkbox
                            label="Gegevens onthouden"
                            style={styles.checkbox}
                        />
                    </div>
                    <RaisedButton label="LOG IN" primary={true} fullWidth={true} onClick={this.logIn.bind(this)}/>
                </div>

                <Snackbar
                    open={this.state.open}
                    message="Geen netwerkverbinding"
                    autoHideDuration={4000}
                    onRequestClose={this.handleRequestClose}
                />
            </div>
        )
    }
}


const styles = {
    block: {
        maxWidth: 250,
    },
    checkbox: {
        marginBottom: 16,
        width: '100%',
    },
    div: {
        display: 'flex',
        flexDirection: 'column',
        padding: 20,
        width: '100%',
    },
    paperLeft: {
        flex: 1,
        height: '100%',
        margin: 10,
        textAlign: 'center',
        padding: 10
    },
    paperRight: {
        height: 600,
        flex: 4,
        margin: 10,
        textAlign: 'center',
    },
    myWidth: {
        width: '100%',
        display: 'flex',
        marginTop: '15px',
        marginBottom: '15px',

    },
    appBar: {
        flexWrap: 'wrap',
    },
    tabs: {
        width: '100%',
    },
    title: {
        cursor: 'pointer',
    },

};

const imageWidthHeight = {
    marginTop: '25px',
    maxWidth: '130px',
}
const mainDiv = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginLeft: '25px',
    marginRight: '25px',
}


export default Login