Skip to content

Instantly share code, notes, and snippets.

@romreed
Created May 21, 2017 20:22
Show Gist options
  • Save romreed/e629bdea524395ca63b2d7e02eb1f3ac to your computer and use it in GitHub Desktop.
Save romreed/e629bdea524395ca63b2d7e02eb1f3ac to your computer and use it in GitHub Desktop.
Menu react.js material-ui
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment