ajiehatajie/loginscreen.js

## loginscreen.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,View,TextInput,StatusBar,TouchableOpacity,Image,Alert,AsyncStorage
} from 'react-native'
import { Container, Header, Title,
    Content, Footer, FooterTab, Button, Left, Right, Body,
     Icon, Text,Item ,Input} from 'native-base';

import Api from '../services/Api';
import Toast from 'react-native-simple-toast';
import { Actions } from 'react-native-router-flux';
import t from 'tcomb-form-native';
const imagesoure = require('../../assets/bogor.png')
const resizeMode = 'center';
const Form = t.form.Form;


const LoginForm = t.struct({
    email: t.String,
    password: t.String

  });

  var createOptions = {
    auto: 'placeholders',
    fields: {
        password: {
            secureTextEntry:true,
            blurOnSubmit: true,
          },
        email: {
            keyboardType:'email-address',
            blurOnSubmit: true,
          }
    }

  }
class LoginScreen extends Component {

    constructor(props){
        super(props)
        this.state = {
          email: '',
          password:'',
          temp_api_token:'',
          temp_email:'',
          temp_kecamatan:'',
          temp_name:''
        }

    }

    async login() {
        const value = this._form.getValue(); // use that ref to get the form value

        let email=value.email;
        let password=value.password;


        try{
            let res = await Api.Login(email,password);
            if (!res) {
                Toast.show("email dan password tidak sesuai",Toast.LONG)
            } else {
                console.log(res.data)
                let data_history = {
                    temp_email: res.data.email,
                    temp_name : res.data.name,
                    temp_api_token : res.data.api_token,
                    temp_kecamatan : res.data.kecamatan_id,
                    temp_jabatan : res.data.jabatan_id,
                    temp_id      : res.data.id
                }

                AsyncStorage.setItem('@loginUser',JSON.stringify(data_history))

                this.saveItem('id_token',res.data.api_token)
                Actions.root({ type: "reset", data : data_history })
                Actions.refresh({key: 'main', hideNavBar: true})

            }

        }catch(e) {
            console.log(e)

        }

    }

    async saveItem(item, selectedValue) {
        try {
          await AsyncStorage.setItem(item, selectedValue);
        } catch (error) {
          console.error('AsyncStorage error: ' + error.message);
        }
    }

    Pindah() {
        //Actions.replace({sceneKey:'appScenes'})
        Actions.home()
        //Actions.jump()
        //Actions.callback({key:'appScenes',type:'jump'});
    }
    render() {
        return (
            <Container>
            <Header>

               <Body>
               <Title>E-Disukaraja</Title>
               </Body>

           </Header>
           <Content>
                <Form
                    ref={c => this._form = c} // assign a ref
                    type={LoginForm}  options={createOptions}
                    />
                  <TouchableOpacity style={styles.button} onPress={this.login.bind(this)}>
               <Text style={styles.buttonText}>
                     Masuk
                </Text>
             </TouchableOpacity>


            </Content>

       </Container>


        );
    }
}

LoginScreen.propTypes = {

};


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#2c3e50',
    },
    loginContainer:{
        alignItems: 'center',
        flexGrow: 1,
        backgroundColor: '#3498db',
    },
    logoContainer:{
        alignItems: 'center',
        flexGrow: 1,
        justifyContent: 'center',
        backgroundColor: '#3498db',
    },
    logo: {
        position: 'absolute',
        width: 500,
        height: 200
    },
    inputBox: {
      width:300,
      backgroundColor:'rgba(255, 255,255,0.2)',
      borderRadius: 25,
      paddingHorizontal:16,
      fontSize:16,
      color:'#ffffff',
      marginVertical: 10,
    },
    button: {
      width:300,
      backgroundColor:'#1c313a',
       borderRadius: 25,
        marginVertical: 10,
        paddingVertical: 13
    },
    buttonText: {
      fontSize:16,
      fontWeight:'500',
      color:'#ffffff',
      textAlign:'center'
    }

  });


export default LoginScreen;
	import React, { Component } from 'react';
	import PropTypes from 'prop-types';
	import {
	StyleSheet,View,TextInput,StatusBar,TouchableOpacity,Image,Alert,AsyncStorage
	} from 'react-native'
	import { Container, Header, Title,
	Content, Footer, FooterTab, Button, Left, Right, Body,
	Icon, Text,Item ,Input} from 'native-base';

	import Api from '../services/Api';
	import Toast from 'react-native-simple-toast';
	import { Actions } from 'react-native-router-flux';
	import t from 'tcomb-form-native';
	const imagesoure = require('../../assets/bogor.png')
	const resizeMode = 'center';
	const Form = t.form.Form;


	const LoginForm = t.struct({
	email: t.String,
	password: t.String

	});

	var createOptions = {
	auto: 'placeholders',
	fields: {
	password: {
	secureTextEntry:true,
	blurOnSubmit: true,
	},
	email: {
	keyboardType:'email-address',
	blurOnSubmit: true,
	}
	}

	}
	class LoginScreen extends Component {

	constructor(props){
	super(props)
	this.state = {
	email: '',
	password:'',
	temp_api_token:'',
	temp_email:'',
	temp_kecamatan:'',
	temp_name:''
	}

	}

	async login() {
	const value = this._form.getValue(); // use that ref to get the form value

	let email=value.email;
	let password=value.password;


	try{
	let res = await Api.Login(email,password);
	if (!res) {
	Toast.show("email dan password tidak sesuai",Toast.LONG)
	} else {
	console.log(res.data)
	let data_history = {
	temp_email: res.data.email,
	temp_name : res.data.name,
	temp_api_token : res.data.api_token,
	temp_kecamatan : res.data.kecamatan_id,
	temp_jabatan : res.data.jabatan_id,
	temp_id : res.data.id
	}

	AsyncStorage.setItem('@loginUser',JSON.stringify(data_history))

	this.saveItem('id_token',res.data.api_token)
	Actions.root({ type: "reset", data : data_history })
	Actions.refresh({key: 'main', hideNavBar: true})

	}

	}catch(e) {
	console.log(e)

	}

	}

	async saveItem(item, selectedValue) {
	try {
	await AsyncStorage.setItem(item, selectedValue);
	} catch (error) {
	console.error('AsyncStorage error: ' + error.message);
	}
	}

	Pindah() {
	//Actions.replace({sceneKey:'appScenes'})
	Actions.home()
	//Actions.jump()
	//Actions.callback({key:'appScenes',type:'jump'});
	}
	render() {
	return (
	<Container>
	<Header>

	<Body>
	<Title>E-Disukaraja</Title>
	</Body>

	</Header>
	<Content>
	<Form
	ref={c => this._form = c} // assign a ref
	type={LoginForm} options={createOptions}
	/>
	<TouchableOpacity style={styles.button} onPress={this.login.bind(this)}>
	<Text style={styles.buttonText}>
	Masuk
	</Text>
	</TouchableOpacity>


	</Content>

	</Container>


	);
	}
	}

	LoginScreen.propTypes = {

	};



	const styles = StyleSheet.create({
	container: {
	flex: 1,
	backgroundColor: '#2c3e50',
	},
	loginContainer:{
	alignItems: 'center',
	flexGrow: 1,
	backgroundColor: '#3498db',
	},
	logoContainer:{
	alignItems: 'center',
	flexGrow: 1,
	justifyContent: 'center',
	backgroundColor: '#3498db',
	},
	logo: {
	position: 'absolute',
	width: 500,
	height: 200
	},
	inputBox: {
	width:300,
	backgroundColor:'rgba(255, 255,255,0.2)',
	borderRadius: 25,
	paddingHorizontal:16,
	fontSize:16,
	color:'#ffffff',
	marginVertical: 10,
	},
	button: {
	width:300,
	backgroundColor:'#1c313a',
	borderRadius: 25,
	marginVertical: 10,
	paddingVertical: 13
	},
	buttonText: {
	fontSize:16,
	fontWeight:'500',
	color:'#ffffff',
	textAlign:'center'
	}

	});


	export default LoginScreen;