{"size": 2572, "ext": "js", "max_stars_repo_path": "src/app/pages/LoginCodePage/LoginCodePage.js", "max_stars_repo_name": "brianneisler/moltres-template", "max_stars_repo_stars_event_min_datetime": "2020-07-31T12:21:26.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-01T22:16:16.000Z", "max_issues_repo_path": "src/app/pages/LoginCodePage/LoginCodePage.js", "max_issues_repo_name": "brianneisler/moltres-template", "max_issues_repo_issues_event_min_datetime": "2021-02-23T05:24:21.000Z", "max_issues_repo_issues_event_max_datetime": "2021-02-23T05:24:21.000Z", "max_forks_repo_path": "src/app/pages/LoginCodePage/LoginCodePage.js", "max_forks_repo_name": "brianneisler/moltres-template", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 3, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 24.7307692308, "max_line_length": 78, "alphanum_fraction": 0.6111975117}
import React from 'react'
import { StyleSheet } from 'react-native'

import { SubmissionError, validateOneTimeCode } from '../../../utils/form'
import { compose } from '../../../utils/lang'
import {
  connect,
  defaultProps,
  memo,
  setDisplayName,
  withActions,
  withHandlers,
  withReduxForm
} from '../../../utils/react'
import {
  FieldTextInput,
  PageContainer,
  Text,
  TouchableOpacity,
  View
} from '../../components'
import { selectAfterLogin } from '../../modules/auth'
import {
  actions as authSMSActions,
  selectAuthSMSChallengeId
} from '../../modules/auth_sms'
import { pushRouteAction } from '../../modules/router/actions'
import { Styles } from '../../styles'

const AUTH_SMS_FORM = 'authSMSForm'

const enhance = compose(
  setDisplayName('LoginCodePage'),
  defaultProps({
    styles: {
      ...Styles,
      ...StyleSheet.create({
        form: {
          maxWidth: 400,
          padding: 15,
          width: '100%'
        },
        textInputStyle: {
          marginBottom: 10,
          marginTop: 10
        }
      })
    }
  }),
  withActions({
    authWithSMSCode: authSMSActions.authWithSMSCode,
    pushRoute: pushRouteAction
  }),
  connect((state) => ({
    afterLogin: selectAfterLogin(state),
    smsChallengeId: selectAuthSMSChallengeId(state)
  })),
  withReduxForm(
    {
      form: AUTH_SMS_FORM
    },
    ({ authWithSMSCode, smsChallengeId }) => ({
      onSubmit: ({ code }) =>
        authWithSMSCode({ code, smsChallengeId }).catch((error) => {
          throw new SubmissionError({ code: error.message })
        })
    })
  ),
  withHandlers({
    handleButtonPress: ({ submit }) => () => submit(AUTH_SMS_FORM)
  }),
  memo
)

const LoginCodePage = enhance(({ handleButtonPress, styles, submitting }) => {
  const disabled = submitting
  return (
    <PageContainer>
      <View style={styles.form}>
        <FieldTextInput
          autoFocus={true}
          disabled={disabled}
          keyboardType="number-pad"
          label="Please enter your auth code"
          name="code"
          onSubmitEditing={handleButtonPress}
          textContentType="oneTimeCode"
          textInputStyle={styles.textInputStyle}
          validate={[validateOneTimeCode]}
        />
        <TouchableOpacity
          disabled={disabled}
          onPress={handleButtonPress}
          style={[styles.button, disabled ? styles.disabled : styles.enabled]}
        >
          <Text style={styles.buttonText}>Submit</Text>
        </TouchableOpacity>
      </View>
    </PageContainer>
  )
})

export default LoginCodePage
