2016-02-01 20:58:00 +00:00
|
|
|
import React from 'react-native';
|
|
|
|
import GlobalStyles from '../../settings/styles';
|
|
|
|
|
|
|
|
const {
|
|
|
|
StyleSheet,
|
|
|
|
Text,
|
|
|
|
View,
|
|
|
|
TextInput,
|
|
|
|
TouchableHighlight,
|
|
|
|
ScrollView,
|
|
|
|
BackAndroid
|
|
|
|
} = React;
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
container: {
|
2016-02-02 14:50:42 +00:00
|
|
|
flex: 1,
|
2016-02-01 20:58:00 +00:00
|
|
|
backgroundColor: '#F5FCFF',
|
|
|
|
},
|
2016-02-02 14:50:42 +00:00
|
|
|
contentWrapper: {
|
|
|
|
flex: 0.85,
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
|
|
|
},
|
2016-02-01 20:58:00 +00:00
|
|
|
input: {
|
2016-02-02 14:50:42 +00:00
|
|
|
marginHorizontal: 10,
|
2016-02-01 20:58:00 +00:00
|
|
|
height: 50,
|
|
|
|
borderColor: 'gray',
|
2016-02-02 14:50:42 +00:00
|
|
|
borderWidth: 1,
|
|
|
|
textAlign: 'center'
|
2016-02-01 20:58:00 +00:00
|
|
|
},
|
|
|
|
loginButton: {
|
2016-02-02 14:50:42 +00:00
|
|
|
flex: 1,
|
2016-02-01 20:58:00 +00:00
|
|
|
backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
},
|
|
|
|
loginButtonText: {
|
|
|
|
fontSize: 16,
|
|
|
|
color: 'white',
|
|
|
|
},
|
2016-02-02 14:50:42 +00:00
|
|
|
buttonContainer: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
height: 80,
|
|
|
|
justifyContent: 'center',
|
|
|
|
padding: 10
|
|
|
|
},
|
2016-02-01 20:58:00 +00:00
|
|
|
title: {
|
|
|
|
fontSize: 25,
|
|
|
|
margin: 13
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
export default class Login extends React.Component {
|
|
|
|
constructor() {
|
|
|
|
super();
|
2016-02-01 22:41:36 +00:00
|
|
|
this.state = {
|
|
|
|
|
|
|
|
};
|
|
|
|
this.validate = this.validate.bind(this);
|
|
|
|
this.updateState = this.updateState.bind(this);
|
2016-02-01 20:58:00 +00:00
|
|
|
}
|
|
|
|
|
2016-02-01 22:41:36 +00:00
|
|
|
updateState(key, value) {
|
|
|
|
let state = this.state;
|
|
|
|
state[key] = value;
|
|
|
|
this.setState(state);
|
|
|
|
}
|
2016-02-01 20:58:00 +00:00
|
|
|
|
2016-02-01 22:41:36 +00:00
|
|
|
validate() {
|
2016-02-01 20:58:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
BackAndroid.addEventListener('hardwareBackPress', () => { return true; }); // Disable back button
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
2016-02-02 14:50:42 +00:00
|
|
|
<View style={styles.container}>
|
|
|
|
<ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
|
|
|
|
<View style={styles.contentWrapper}>
|
|
|
|
<Text style={styles.title}>
|
|
|
|
Login to continue
|
|
|
|
</Text>
|
|
|
|
<TextInput
|
|
|
|
style={styles.input}
|
|
|
|
onChangeText={(password) => this.updateState('password', password)}
|
|
|
|
value={this.state.password}
|
|
|
|
onSubmitEditing={this.validate}
|
|
|
|
placeholder="Password"
|
|
|
|
autoCorrect={true}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
|
|
|
|
</ScrollView>
|
|
|
|
<View style={styles.buttonContainer}>
|
|
|
|
<TouchableHighlight style={styles.loginButton} onPress={this.validate}>
|
2016-02-01 20:58:00 +00:00
|
|
|
<Text style={styles.loginButtonText}>
|
|
|
|
Authenticate
|
|
|
|
</Text>
|
|
|
|
</TouchableHighlight>
|
|
|
|
</View>
|
2016-02-02 14:50:42 +00:00
|
|
|
</View>
|
2016-02-01 20:58:00 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|