This repository has been archived on 2023-03-26. You can view files and clone it, but cannot push or open issues or pull requests.
Sphere/app/components/routes/login.js

197 lines
4.9 KiB
JavaScript
Raw Normal View History

2016-02-01 20:58:00 +00:00
import React from 'react-native';
import GlobalStyles from '../../settings/styles';
2016-02-02 22:26:55 +00:00
import TokenHelp from '../login/token-help';
2016-02-04 20:14:45 +00:00
import RouteMaster from './RouteMaster';
2016-02-06 12:42:44 +00:00
import { checkToken } from '../../api/CircleCI';
import { set } from '../../api/token';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
import BusyIndicator from 'react-native-busy-indicator';
2016-02-04 18:08:36 +00:00
const dismissKeyboard = require('dismissKeyboard');
2016-02-01 20:58:00 +00:00
const {
StyleSheet,
Text,
View,
TextInput,
TouchableHighlight,
ScrollView,
2016-02-02 22:26:55 +00:00
BackAndroid,
2016-02-06 12:42:44 +00:00
TouchableWithoutFeedback,
2016-02-06 17:55:11 +00:00
Alert,
Image
2016-02-01 20:58:00 +00:00
} = React;
const styles = StyleSheet.create({
container: {
2016-02-02 14:50:42 +00:00
flex: 1,
2016-02-06 15:49:57 +00:00
backgroundColor: GlobalStyles.get('CIRCLE_BG'),
2016-02-01 20:58:00 +00:00
},
2016-02-02 14:50:42 +00:00
contentWrapper: {
flex: 0.85,
2016-02-02 19:16:21 +00:00
justifyContent: 'flex-start',
2016-02-02 14:50:42 +00:00
alignItems: 'center'
},
2016-02-01 20:58:00 +00:00
input: {
2016-02-06 17:55:11 +00:00
marginHorizontal: 10,
2016-02-02 19:16:21 +00:00
fontSize: 15,
2016-02-02 14:50:42 +00:00
textAlign: 'center'
2016-02-01 20:58:00 +00:00
},
loginButton: {
2016-02-04 18:24:52 +00:00
flex: 0.92,
2016-02-02 22:26:55 +00:00
backgroundColor: GlobalStyles.get('CIRCLE_GREEN'),
2016-02-04 18:08:36 +00:00
borderColor: GlobalStyles.get('CIRCLE_GREEN'),
},
button: {
2016-02-01 20:58:00 +00:00
justifyContent: 'center',
alignItems: 'center',
2016-02-02 22:26:55 +00:00
padding: 10,
borderWidth: 2,
2016-02-04 18:08:36 +00:00
borderRadius: 12,
margin: 5
2016-02-01 20:58:00 +00:00
},
2016-02-04 18:08:36 +00:00
buttonText: {
2016-02-02 19:16:21 +00:00
fontSize: 18,
2016-02-06 18:53:54 +00:00
color: '#FFF'
2016-02-01 20:58:00 +00:00
},
2016-02-02 14:50:42 +00:00
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
2016-02-04 18:08:36 +00:00
margin: 5
2016-02-02 14:50:42 +00:00
},
2016-02-02 19:16:21 +00:00
heading: {
fontSize: 18,
margin: 8,
2016-02-10 21:53:01 +00:00
marginTop: 20
2016-02-02 19:16:21 +00:00
},
helpText: {
2016-02-02 22:26:55 +00:00
fontSize: 11,
2016-02-03 19:01:23 +00:00
fontStyle: 'italic',
padding: 5,
2016-02-10 21:53:01 +00:00
marginBottom: 50
2016-02-02 22:26:55 +00:00
},
text: {
2016-02-06 15:49:57 +00:00
color: GlobalStyles.get('CIRCLE_TEXT')
2016-02-06 17:55:11 +00:00
},
icon: {
flex: 1,
2016-02-10 21:53:01 +00:00
margin: 15,
marginVertical: 35
2016-02-01 20:58:00 +00:00
}
});
export default class Login extends React.Component {
constructor() {
super();
2016-02-01 22:41:36 +00:00
this.state = {
2016-02-02 22:26:55 +00:00
token: '',
showTokenHelp: false
2016-02-01 22:41:36 +00:00
};
this.validate = this.validate.bind(this);
2016-02-03 19:01:23 +00:00
this.textChanged = this.textChanged.bind(this);
2016-02-02 22:26:55 +00:00
this.showTokenHelp = this.showTokenHelp.bind(this);
this.hideTokenHelp = this.hideTokenHelp.bind(this);
2016-02-04 18:08:36 +00:00
this.showAbout = this.showAbout.bind(this);
2016-02-06 12:42:44 +00:00
this.proceed = this.proceed.bind(this);
2016-02-01 20:58:00 +00:00
}
2016-02-03 19:01:23 +00:00
textChanged(token) {
this.setState({ token });
2016-02-01 22:41:36 +00:00
}
2016-02-01 20:58:00 +00:00
2016-02-06 12:42:44 +00:00
proceed() {
2016-02-06 19:23:11 +00:00
this.hideTokenHelp();
2016-02-06 12:42:44 +00:00
this.props.nav.push(RouteMaster.get('HOME'));
}
2016-02-01 22:41:36 +00:00
validate() {
2016-02-06 12:42:44 +00:00
loaderHandler.showLoader('Loading');
2016-02-02 22:26:55 +00:00
dismissKeyboard();
2016-02-06 12:42:44 +00:00
checkToken(this.state.token).then(function (isValid) {
if (isValid) {
Alert.alert('Valid',
'Token accepted!',
[ {text: 'OK' }]);
set(this.state.token).then(this.proceed);
} else {
Alert.alert('Invalid',
'Token not accepted!',
[ {text: 'Return' }]);
this.setState({
token: ''
});
}
loaderHandler.hideLoader();
}.bind(this));
2016-02-02 22:26:55 +00:00
}
2016-02-04 18:08:36 +00:00
showAbout() {
2016-02-04 20:14:45 +00:00
this.props.nav.push(RouteMaster.get('INFO'));
2016-02-04 18:08:36 +00:00
}
2016-02-02 22:26:55 +00:00
showTokenHelp() {
dismissKeyboard();
this.setState({
showTokenHelp: true
});
}
hideTokenHelp() {
this.setState({
showTokenHelp: false
});
2016-02-01 20:58:00 +00:00
}
2016-02-02 19:16:21 +00:00
componentWillUnmount() {
BackAndroid.removeEventListener('hardwareBackPress', () => { return true; }); // Re-enable back button
}
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}>
2016-02-06 17:55:11 +00:00
<Image
style={styles.icon}
2016-02-06 18:53:54 +00:00
source={require('../../img/circle-ci-logo@light.png')}
2016-02-06 17:55:11 +00:00
resizeMode="contain"/>
2016-02-02 22:26:55 +00:00
<Text style={[styles.heading, styles.text]}>
2016-02-02 19:16:21 +00:00
Please enter your CircleCI token
2016-02-02 14:50:42 +00:00
</Text>
<TextInput
2016-02-02 22:26:55 +00:00
style={[styles.input, styles.text]}
2016-02-03 19:01:23 +00:00
onChangeText={this.textChanged}
2016-02-02 19:16:21 +00:00
value={this.state.token}
2016-02-02 14:50:42 +00:00
onSubmitEditing={this.validate}
2016-02-02 19:16:21 +00:00
placeholder="CircleCI Token"
2016-02-02 22:26:55 +00:00
placeholderTextColor="#A7A7A7"
2016-02-02 19:16:21 +00:00
autoCorrect={false}
2016-02-02 14:50:42 +00:00
/>
2016-02-02 22:26:55 +00:00
<TouchableWithoutFeedback onPress={this.showTokenHelp}>
<Text style={[styles.helpText, styles.text]}>
What's this?
</Text>
</TouchableWithoutFeedback>
2016-02-02 14:50:42 +00:00
</View>
</ScrollView>
<View style={styles.buttonContainer}>
2016-02-02 22:26:55 +00:00
<TouchableHighlight
2016-02-04 18:08:36 +00:00
style={[styles.button, styles.loginButton]}
2016-02-02 22:26:55 +00:00
onPress={this.validate}
2016-02-06 15:49:57 +00:00
underlayColor={GlobalStyles.get('CIRCLE_BG')}>
<Text style={[styles.text, styles.buttonText]}>
2016-02-01 20:58:00 +00:00
Authenticate
</Text>
</TouchableHighlight>
</View>
2016-02-02 22:26:55 +00:00
<TokenHelp open={this.state.showTokenHelp} onClose={this.hideTokenHelp} />
2016-02-06 12:42:44 +00:00
<BusyIndicator />
2016-02-02 14:50:42 +00:00
</View>
2016-02-01 20:58:00 +00:00
);
}
};