Sphere/app/components/routes/login.js

import React from 'react-native';
import GlobalStyles from '../../settings/styles';
import TokenHelp from '../login/token-help';
import RouteMaster from './RouteMaster';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
import { connect } from 'react-redux';
import { login }from '../../actions';

const dismissKeyboard = require('dismissKeyboard');

const {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight,
  ScrollView,
  BackAndroid,
  TouchableWithoutFeedback,
  Alert,
  Image,
  Animated
} = React;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
  },
  contentWrapper: {
    flex: 0.85,
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    fontSize: 14,
    marginHorizontal: 25,
  },
  loginButton: {
    flex: 0.92,
    backgroundColor: GlobalStyles.get('CIRCLE_GREEN'),
    borderColor: GlobalStyles.get('CIRCLE_GREEN'),
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderWidth: 2,
    borderRadius: 12,
    margin: 5
  },
  buttonText: {
    fontSize: 18,
    color: '#FFF'
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    margin: 5
  },
  heading: {
    fontSize: 16,
  },
  helpText: {
    fontSize: 12,
    fontStyle: 'italic',
    margin: 5,
    padding: 5,
  },
  text: {
    color: GlobalStyles.get('CIRCLE_NAVBAR_TEXT'),
  },
  icon: {
    height: 75,
    marginBottom: 45
  }
});

export class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      token: '',
      showTokenHelp: false
    };
    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],
        })},
      ]
    };
    this.validate = this.validate.bind(this);
    this.textChanged = this.textChanged.bind(this);
    this.showTokenHelp = this.showTokenHelp.bind(this);
    this.hideTokenHelp = this.hideTokenHelp.bind(this);
    this.showAbout = this.showAbout.bind(this);
  }

  textChanged(CIToken) {
    this.setState({ token: CIToken });
  }

  invalidToken() {
    Alert.alert('Invalid',
      'Token not accepted!',
      [ {text: 'Return' }]);
  }

  validate() {
    loaderHandler.showLoader('Loading');
    dismissKeyboard();
    if (!this.state.token) {
      this.invalidToken();
      loaderHandler.hideLoader();
      return;
    }
    this.props.login(this.state.token, this.props.nav.push.bind(this.props.nav, RouteMaster.get('HOME')));
  }

  showAbout() {
    this.props.nav.push(RouteMaster.get('INFO'));
  }

  showTokenHelp() {
    dismissKeyboard();
    this.setState({
      showTokenHelp: true
    });
  }

  hideTokenHelp() {
    this.setState({
      showTokenHelp: false
    });
  }

  componentWillUnmount() {
    BackAndroid.removeEventListener('hardwareBackPress', () => { return true; });  // Re-enable back button
  }

  componentWillMount() {
    BackAndroid.addEventListener('hardwareBackPress', () => { return true; });  // Disable back button
  }

  componentDidMount() {
    Animated.spring(this.animate, {
      toValue: 0,
      tension: 30,
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
            <View style={styles.contentWrapper}>
              <Animated.Image
                style={[styles.icon, this.viewAnimate]}
                source={require('../../img/circle-ci-logo@light.png')}
                resizeMode="contain"/>
              <Text style={[styles.heading, styles.text]}>
                Please enter your CircleCI token
              </Text>
              <TextInput
                style={[styles.text, styles.input]}
                onChangeText={this.textChanged}
                value={this.state.token}
                onSubmitEditing={this.validate}
                placeholder="CircleCI Token"
                placeholderTextColor="#A7A7A7"
                autoCapitalize={'none'}
                autoCorrect={false}
              />
              <TouchableWithoutFeedback onPress={this.showTokenHelp}>
                <Text style={[styles.helpText, styles.text]}>
                  What's this?
                </Text>
              </TouchableWithoutFeedback>
            </View>
        </ScrollView>
        <View style={styles.buttonContainer}>
          <TouchableHighlight
            style={[styles.button, styles.loginButton]}
            onPress={this.validate}
            underlayColor={GlobalStyles.get('CIRCLE_BG')}>
            <Text style={[styles.text, styles.buttonText]}>
              Authenticate
            </Text>
          </TouchableHighlight>
        </View>
        <TokenHelp open={this.state.showTokenHelp} onClose={this.hideTokenHelp} />
      </View>
    );
  }
};

function mapStateToProps(state) {
  return {
    token: state.user.get('token')
  };
}

export default connect(mapStateToProps, { login }) (Login);