Sphere/app/components/routes/login.js

import React from 'react-native';
import GlobalStyles from '../../settings/styles';

const {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight,
  ScrollView,
  BackAndroid
} = React;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  contentWrapper: {
    flex: 0.85,
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  input: {
    marginHorizontal: 15,
    fontSize: 15,
    textAlign: 'center'
  },
  loginButton: {
    flex: 1,
    backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10
  },
  loginButtonText: {
    fontSize: 18,
    color: 'white',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    paddingVertical: 15
  },
  title: {
    fontSize: 30,
    margin: 13
  },
  heading: {
    fontSize: 18,
    margin: 8,
    marginVertical: 20
  },
  helpText: {
    fontSize: 12,
  }
});

export default class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      token: ''
    };
    this.validate = this.validate.bind(this);
    this.updateState = this.updateState.bind(this);
  }

  updateState(key, value) {
    let state = this.state;
    state[key] = value;
    this.setState(state);
  }

  validate() {
  }

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

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

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Text style={styles.title}>
            Sphere
          </Text>
        </View>
        <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
            <View style={styles.contentWrapper}>
              <Text style={styles.heading}>
                Please enter your CircleCI token
              </Text>
              <TextInput
                style={styles.input}
                onChangeText={(token) => this.updateState('token', token)}
                value={this.state.token}
                onSubmitEditing={this.validate}
                placeholder="CircleCI Token"
                autoCorrect={false}
              />
              <Text style={styles.helpText}>
                What's this?
              </Text>
            </View>
        </ScrollView>
        <View style={styles.buttonContainer}>
          <TouchableHighlight style={styles.loginButton} onPress={this.validate}>
            <Text style={styles.loginButtonText}>
              Authenticate
            </Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
};