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

226 lines
5.5 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';
2016-02-14 19:19:11 +00:00
import token from '../../api/token';
2016-02-06 12:42:44 +00:00
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
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,
2016-02-16 19:06:32 +00:00
Image,
Animated
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-03-12 15:55:37 +00:00
backgroundColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
2016-02-01 20:58:00 +00:00
},
2016-02-02 14:50:42 +00:00
contentWrapper: {
flex: 0.85,
2016-02-11 20:45:40 +00:00
justifyContent: 'center',
2016-02-02 14:50:42 +00:00
alignItems: 'center'
},
2016-02-01 20:58:00 +00:00
input: {
2016-03-12 15:55:37 +00:00
fontSize: 14,
2016-02-14 19:19:11 +00:00
marginHorizontal: 25,
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: {
2016-03-12 15:55:37 +00:00
fontSize: 16,
2016-02-02 19:16:21 +00:00
},
helpText: {
2016-03-12 15:55:37 +00:00
fontSize: 12,
2016-02-03 19:01:23 +00:00
fontStyle: 'italic',
2016-02-11 20:45:40 +00:00
margin: 5,
2016-02-03 19:01:23 +00:00
padding: 5,
2016-02-02 22:26:55 +00:00
},
text: {
2016-03-12 15:55:37 +00:00
color: GlobalStyles.get('CIRCLE_NAVBAR_TEXT'),
2016-02-06 17:55:11 +00:00
},
icon: {
2016-03-12 15:55:37 +00:00
height: 75,
marginBottom: 45
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-21 12:15:54 +00:00
token: '',
2016-02-02 22:26:55 +00:00
showTokenHelp: false
2016-02-01 22:41:36 +00:00
};
2016-02-16 19:06:32 +00:00
this.animate = new Animated.Value(2);
this.viewAnimate = {
transform: [ // Array order matters
{scale: this.animate.interpolate({
inputRange: [0, 1],
outputRange: [1, 0.4],
})},
{translateY: this.animate.interpolate({
inputRange: [0, 1],
outputRange: [0, -100],
})},
]
};
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-14 19:19:11 +00:00
textChanged(CIToken) {
this.setState({ token: CIToken });
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();
this.props.nav.replace(RouteMaster.get('HOME'));
2016-02-06 12:42:44 +00:00
}
2016-02-11 20:45:40 +00:00
invalidToken() {
Alert.alert('Invalid',
'Token not accepted!',
[ {text: 'Return' }]);
}
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-11 20:45:40 +00:00
if (!this.state.token) {
this.invalidToken();
loaderHandler.hideLoader();
return;
}
2016-02-06 12:42:44 +00:00
checkToken(this.state.token).then(function (isValid) {
if (isValid) {
2016-02-14 19:19:11 +00:00
token.set(this.state.token).then(this.proceed);
2016-02-06 12:42:44 +00:00
} else {
2016-02-11 20:45:40 +00:00
this.invalidToken();
2016-02-06 12:42:44 +00:00
this.setState({
token: ''
});
}
loaderHandler.hideLoader();
2016-02-11 20:45:40 +00:00
}.bind(this)).catch(console.log);
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
2016-03-12 15:55:48 +00:00
token.get().then(function (CIToken) {
if (!CIToken) {
return;
}
checkToken(CIToken).then(function (isValid) {
this.proceed();
}.bind(this));
}.bind(this));
2016-02-16 19:06:32 +00:00
}
2016-03-12 15:59:21 +00:00
componentDidMount() {
Animated.spring(this.animate, {
toValue: 0,
tension: 30,
}).start();
}
2016-02-01 20:58:00 +00:00
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-16 19:06:32 +00:00
<Animated.Image
style={[styles.icon, this.viewAnimate]}
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-02 14:50:42 +00:00
</View>
2016-02-01 20:58:00 +00:00
);
}
};