<commit_before>import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { View, TouchableOpacity, TextInput, Animated } from 'react-native'
import DefaultText from '../DefaultText'
import colors from '../../util/colors'
import merge from '../../util/merge'
import animateTo from '../../util/animateTo'
import { horizontalAbsolutePosition } from '../../util/StyleUtils'
import * as actions from '../../store/reducer/login'
import commonStyle from '../style'
import KeyboardComponent from '../KeyboardComponent'

const style = {
  loginContainer: {
    backgroundColor: 'white',
    ...commonStyle.shadow
  },
  loginButton: {
    flex: 1,
    height: 68,
    padding: 20,
  },
  loginButtonText: {
    fontSize: 24,
    textAlign: 'center'
  },
  input: {
    height: 68,
    fontSize: 20,
    color: colors.bristolBlue,
    backgroundColor: 'white',
    textAlign: 'center'
  },
  separator: {
    height: 1,
    backgroundColor: colors.gray5
  }
}

// Cyclos doesn't like special characters or empty usernames :(
const isValid = (username) => username && !username.match(/\W/)

class Login extends KeyboardComponent {
  constructor(props) {
    super()
    this.state.username = props.loggedInUsername
  }

  selectPasswordField() {
    this.passwordInputRef.focus()
  }

  componentDidUpdate(lastProps) {
    if (this.props.loginFormOpen && !lastProps.loginFormOpen) {
      const bottom = new Animated.Value(-204)
      this.setState({ bottom })
      animateTo(bottom, 0, 500)
    }
    if (!this.props.loginFormOpen && lastProps.loginFormOpen) {
      this.setState({ password: undefined })
    }
  }

  login() {
    this.props.login(this.state.username, this.state.password)
  }

  passwordUpdated(newPassword) {
    this.setState({ password: <PASSWORD> })
  }

  usernameUpdated(newUsername) {
    this.setState({ username: newUsername })
  }

  render() {
    const { hideUsernameInput } = this.props
    const loginView = (
      <Animated.View style={{ ...horizontalAbsolutePosition(0, 0), bottom: this.state.keyboardHeight, height: hideUsernameInput ? 136 : 204 }}>
        <Animated.View style={merge(style.loginContainer, { bottom: this.state.bottom })}>
          <TouchableOpacity style={{ ...style.loginButton, backgroundColor: isValid(this.state.username) ? colors.bristolBlue : colors.offWhite }}
              accessibilityLabel={'Login Button'}
              onPress={() => isValid(this.state.username) && this.login()}>
            <DefaultText style={{ ...style.loginButtonText, color: isValid(this.state.username) ? 'white' : 'black' }}>Log in</DefaultText>
          </TouchableOpacity>
          { hideUsernameInput
            ? undefined
            : <TextInput style={style.input}
                accessibilityLabel={'Input Username'}
                autoFocus={true}
                onChangeText={(text) => this.usernameUpdated(text)}
                onSubmitEditing={this.selectPasswordField.bind(this)}
                placeholder={'Username'}
                placeholderTextColor={colors.gray4}
                selectTextOnFocus={true} />
          }
          <View style={style.separator}/>
          <TextInput style={style.input}
              ref={(ref) => this.passwordInputRef = ref}
              accessibilityLabel={'Input Password'}
              autoFocus={hideUsernameInput}<commit_msg>validate password<commit_after>import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { View, TouchableOpacity, TextInput, Animated } from 'react-native'
import DefaultText from '../DefaultText'
import colors from '../../util/colors'
import merge from '../../util/merge'
import animateTo from '../../util/animateTo'
import { horizontalAbsolutePosition } from '../../util/StyleUtils'
import * as actions from '../../store/reducer/login'
import commonStyle from '../style'
import KeyboardComponent from '../KeyboardComponent'

const style = {
  loginContainer: {
    backgroundColor: 'white',
    ...commonStyle.shadow
  },
  loginButton: {
    flex: 1,
    height: 68,
    padding: 20,
  },
  loginButtonText: {
    fontSize: 24,
    textAlign: 'center'
  },
  input: {
    height: 68,
    fontSize: 20,
    color: colors.bristolBlue,
    backgroundColor: 'white',
    textAlign: 'center'
  },
  separator: {
    height: 1,
    backgroundColor: colors.gray5
  }
}

// Cyclos doesn't like special characters or empty usernames :(
const detailsValid = (username, password) => username && !username.match(/\W/) && password && password.indexOf(' ') === -1

class Login extends KeyboardComponent {
  constructor(props) {
    super()
    this.state.username = props.loggedInUsername
  }

  selectPasswordField() {
    this.passwordInputRef.focus()
  }

  componentDidUpdate(lastProps) {
    if (this.props.loginFormOpen && !lastProps.loginFormOpen) {
      const bottom = new Animated.Value(-204)
      this.setState({ bottom })
      animateTo(bottom, 0, 500)
    }
    if (!this.props.loginFormOpen && lastProps.loginFormOpen) {
      this.setState({ password: <PASSWORD> })
    }
  }

  login() {
    this.props.login(this.state.username, this.state.password)
  }

  passwordUpdated(newPassword) {
    this.setState({ password: <PASSWORD> })
  }

  usernameUpdated(newUsername) {
    this.setState({ username: newUsername })
  }

  render() {
    const { hideUsernameInput } = this.props
    const loginView = (
      <Animated.View style={{ ...horizontalAbsolutePosition(0, 0), bottom: this.state.keyboardHeight, height: hideUsernameInput ? 136 : 204 }}>
        <Animated.View style={merge(style.loginContainer, { bottom: this.state.bottom })}>
          <TouchableOpacity style={{ ...style.loginButton, backgroundColor: detailsValid(this.state.username, this.state.password) ? colors.bristolBlue : colors.offWhite }}
              accessibilityLabel={'Login Button'}
              onPress={() => detailsValid(this.state.username, this.state.password) && this.login()}>
            <DefaultText style={{ ...style.loginButtonText, color: detailsValid(this.state.username, this.state.password) ? 'white' : 'black' }}>Log in</DefaultText>
          </TouchableOpacity>
          { hideUsernameInput
            ? undefined
            : <TextInput style={style.input}
                accessibilityLabel={'Input Username'}
                autoFocus={true}
                onChangeText={(text) => this.usernameUpdated(text)}
                onSubmitEditing={this.selectPasswordField.bind(this)}
                placeholder={'Username'}
                placeholderTextColor={colors.gray4}
                selectTextOnFocus={true} />
          }
          <View style={style.separator}/>
          <TextInput style={style.input}
              ref={(ref) => this.passwordInputRef = ref}
              accessibilityLabel={'Input Password'}
              autoFocus={hideUsernameInput}
{'fraction_non_alphanumeric': 0.13540462427745664, 'fraction_numerical': 0.00852601156069364, 'mean_word_length': 2.8947664603263927, 'pattern_counts': {'":': 0, '<': 24, '<?xml version=': 0, '>': 30, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2192681', 'n_tokens_mistral': 2000, 'n_tokens_neox': 1946, 'n_words': 415}