Untitled

import React, { Component } from 'react';
import { View, ActivityIndicator, AsyncStorage, StatusBar, ToastAndroid, Keyboard, TouchableOpacity } from 'react-native';
import {
  Container, Header, Content, Form, Item, Input, Label, Button, Text, Title, Left, Body, Right, Icon,
  Card, CardItem,
} from 'native-base';
import { StackNavigator, NavigationActions } from "react-navigation";
// import Storage from 'react-native-storage';
import axios from 'axios';
import styles from './styles';
// import Storage from 'react-native-storage';


export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      hidePassword: true,
      errorText : '',
      focus : ''
    };
    this.LoginUser = this.LoginUser.bind(this);

  }
  managePasswordVisibility = () =>
  {
    this.setState({ hidePassword: !this.state.hidePassword });
  }

  //
  onChangeTextPassword = (password, hidePassword) => {
    if (!password) {
      this.setState({
        errorText: 'Tidak Boleh kosong',
      })
    }
    else if (password.length < 12 && password.length > 0) {
      this.setState({
        errorText: 'Minimal Panjang Huruf 12 karakter'
      })
    }
    else if (password.length > 20 && password) {
      this.setState({
        errorText: 'Maksimal Panjang Huruf 20 karakter'
      })
    } else if (hidePassword) {
      this.setState({
        hidePassword: hidePassword
      })
    } else {
      this.setState({
        errorText: ''
      })
    }
  }

  //
  onFocus(){
    this.setState({
      focus: true
  })
}

  render() {
    let { email, password, } = this.state;
    let styleemail = email ? styles.a : styles.b;
    let iconemail = email ? styles.c : styles.d;
    let stylesPass = password ? styles.a : styles.b;
    let iconsPass = password ? styles.c : styles.d;
    return (
      <Container>
        <Header style={styles.header}>
          <StatusBar
            backgroundColor="#0000cc"
            barStyle="light-content"
          />
          <Left />
          {/*<Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>*/}
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <Content style={styles.content} >
          <Content style={styles.login}>
            <Form>
              {/* <Item floatingLabel style={styles.Lname}>
                <Icon active name="ios-mail-outline" style={iconemail} />
                <Label style={styleemail}>User Email</Label>
                <Input
                  onChangeText={(email) => this.setState({ email })}
                  value={this.state.email}
                  returnKeyType="next"
                />
              </Item> */}
              <Item floatingLabel style={styles.Lname}>
              <Icon active name="ios-lock-outline" style={iconsPass} />
                <Label style={stylesPass}>User Password</Label>
                <Input
                    onChangeText={(text) => {
                    this.onChangeTextPassword(text);
                    this.setState({
                      password: text
                    })
                  }}
                  value={this.state.password}
                  secureTextEntry={this.state.hidePassword}
                 />
              </Item>
              {this.state.errorText ? this.state.hidePassword ?
              <Content style={{ marginRight: 15, alignSelf: 'flex-end' }} >
                  <TouchableOpacity onPress={this.managePasswordVisibility}>
                    <Text note style = {{color :'blue' }} >
                      {this.state.hidePassword ? 'Lihat Password' : 'Sembunyikan Password'}
                    </Text>
                  </TouchableOpacity>
                </Content>
              :
              <Text>{this.state.errorText}</Text>
              }
                {/* <Content style={{ marginRight: 15, alignSelf: 'flex-end' }} >
                  <TouchableOpacity onPress={this.managePasswordVisibility}>
                    <Text note style = {{color :'blue' }} >
                      {this.state.hidePassword ? 'Lihat Password' : 'Sembunyikan Password'}
                    </Text>
                  </TouchableOpacity>
                </Content> */}


                {/* <Content style={{ marginRight: 15, alignSelf: 'flex-end' }} >
                  <TouchableOpacity onPress={this.managePasswordVisibility}>
                    <Text>
                      {this.state.hidePassword ? 'Lihat Password' : 'Tutup Password'}
                    </Text>
                  </TouchableOpacity>
                </Content> */}

              {/* <Item floatingLabel style={styles.Lname}>
              <Icon name='ios-lock-outline' />
                <Label style={stylesPass}>User Password</Label>
                <Input
                  onChangeText={(password) => this.setState({ password })}
                  value={this.state.password}
                  returnKeyType="next"
                  autoCorrect={false}
                  returnKeyType="go"
                  secureTextEntry={this.state.hidePassword}
                />

                <text>User Password</text>
              </Item> */}

              {/* <TouchableOpacity activeOpacity = { 0.8 } onPress = { this.managePasswordVisibility }>
             {  this.state.hidePassword  ? <Icon name = 'ios-lock-outline' /> : <Icon name = 'ios-unlock-outline' />  }
          </TouchableOpacity> */}
              {/* <Item floatingLabel style={styles.Lpassword}>
                <Icon active name="ios-lock-outline" style={iconsPass} />
                <Label style={stylesPass}>User Password</Label>
                <Input
                  onChangeText={(password) => this.setState({ password })}
                  value={this.state.password}
                  returnKeyType="next"
                  autoCorrect={false}
                  returnKeyType="go"
                  // ref={(input)=> this.passwordInput = input}
                  secureTextEntry  = { this.state.hidePassword }
                />
                <TouchableOpacity >
                  <text>asdasd</text>
                </It>
              </Item> */}
            </Form>
            <Button block style={styles.button}
              onPress={this.LoginUser}
            >
              <Text>Login</Text>
            </Button>
            {/*
 <Button style={styles.Ltext}>
                 <Text style={{color: '#000000'}} >atau</Text>
                </Button>
              <Button iconLeft block style={styles.fb}>
                <Icon name='logo-facebook' />
                  <Text>Login With Facebook</Text>
              </Button>
              <Button iconLeft block transparent danger style={styles.google}>
                    <Icon name='logo-googleplus' />
                      <Text>Login With Google</Text>
              </Button>
            */}

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