Sign up generated by CraneAi

Signup.jsx

import React from 'react';
import PropTypes from 'prop-types';
import {
  Container, Content, Text, Form, Item, Label, Input, Button,
} from 'native-base';
import { Actions } from 'react-native-router-flux';
import Loading from './Loading';
import Messages from './Messages';
import { translate } from '../../i18n';
import Header from './Header';
import Spacer from './Spacer';
import Colors from '../../../native-base-theme/variables/commonColor';


class SignUp extends React.Component {
  static propTypes = {
    error: PropTypes.string,
    loading: PropTypes.bool.isRequired,
    onFormSubmit: PropTypes.func.isRequired,
    locale: PropTypes.string
  }

  static defaultProps = {
    error: null,
    success: null,
    locale: null
  }

  constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.navigateLogin = this.navigateLogin.bind(this);
    this.navigatePrivacy = this.navigatePrivacy.bind(this);
  }

  handleChange = (name, val) => {
    this.setState({
      [name]: val,
    });
  }

  handleSubmit = () => {
    const { onFormSubmit } = this.props;
    onFormSubmit(this.state)
      .then(() => Actions.login())
      .catch(e => console.log(`Error: ${e}`));
  }

  navigateLogin = () => {
    const { onFormSubmit } = this.props;
    Actions.login()
  }

  navigatePrivacy = () => {

  }
  
  render() {
    const { 
      loading, 
      error, 
      locale 
    } = this.props;

    if (loading) return <Loading />;

    return (
      <Container>
        <Content padder>


        <Spacer size={100} />

          <Header
            title="Sign Up"
          />

          {error && <Messages message={error} />}

          <Form>
            <Item stackedLabel>
              <Label>
                Name
              </Label>
              <Input onChangeText={v => this.handleChange('firstName', v)} />
            </Item>


            <Item stackedLabel>
              <Label>
                Email
              </Label>
              <Input
                autoCapitalize="none"
                keyboardType="email-address"
                onChangeText={v => this.handleChange('email', v)}
              />
            </Item>

            <Item stackedLabel>
              <Label>
                Password
              </Label>
              <Input 
                secureTextEntry 
                onChangeText={v => this.handleChange('password', v)} 
                />
            </Item>


            <Spacer size={50} />


            <Button 
              block 
              large
              onPress={this.handleSubmit}
              >
              <Text>
                Sign Up
              </Text>
            </Button>


         
            <Button 
              block
              info
              transparent 
              onPress={this.navigateLogin}
            >
            <Text>
              {translate('Already have an account? Sign In', locale)}
              </Text>
              </Button>
         

            <Spacer size={180} />
         
            <Button 
              block
              info
              transparent 
              small 
              onPress={this.navigatePrivacy}
            >
            <Text>
              {translate('By creating an account you agree to our Terms & Privacy', locale)}
              </Text>
              </Button>
              
            

          </Form>
        </Content>
      </Container>
    );
  }
}

export default SignUp;