Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import { connect } from 'react-redux';
- import {
- AppRegistry,
- StyleSheet,
- TextInput,
- View,
- Alert,
- Button,
- Text,
- AsyncStorage,
- Image,
- TouchableOpacity,
- ActivityIndicator,
- KeyboardAvoidingView
- } from 'react-native';
- import axios from 'axios';
- import Ionicons from 'react-native-vector-icons/Ionicons';
- import Setting from '../../Setting';
- class LoginScreen extends Component {
- constructor(props) {
- super(props)
- this.state = {
- username: '',
- password: '',
- isLoading: false
- }
- this.root = this.props.component.root;
- //save token
- //this.root.saveToken('asdasd');
- //ambil token
- //this.root.state.token
- }
- UserLoginFunction = (username,password) => {
- // const { username } = this.state;
- // const { password } = this.state;
- this.setState({
- isLoading: true
- });
- axios({
- method: 'get',
- url: Setting.baseUrl + '/auth/login',
- params: {
- email: username,
- password: password,
- }
- }).then((response) => {
- const token = response.data.data.token;
- if (token != '') {
- let str = token;
- this.root.saveToken(str)
- }
- else {
- Alert.alert(response);
- }
- this.setState({
- isLoading: false
- });
- }).catch((error) => {
- alert("Username / Password salah !");
- this.setState({
- isLoading: false
- });
- });
- }
- render() {
- return (
- <View style={{flexDirection:'column',flex:1,maxHeight:600}}>
- <View style={{
- alignItems:'center',alignContent:'center',flexDirection:'column',flex:1
- }}>
- {/* gambar backgroundColor */}
- <Image
- source={require('../../img/background.jpg')}
- style={{
- position: 'absolute',
- width: '100%',
- height: '100%',
- resizeMode:'cover'
- }}/>
- {/* gambar logo */}
- <Image
- style ={{
- width:120,height:120,marginTop:80
- }}
- source = {require('./../../img/icon.png')}
- />
- {/* username */}
- <View style={{marginTop:150}}/>
- <View style={{
- flexDirection:'row',marginLeft:20,marginRight:20, borderColor:'#F2526E',borderWidth:1,borderRadius:5,
- paddingLeft:20,alignContent:'center',alignItems:'center',width:270,backgroundColor:'#fff'
- }}>
- <Ionicons name='ios-person-outline'
- color={'#F2526E'}
- size={30}
- MarginLeft={10}/>
- <TextInput
- placeholder="Username"
- onChangeText={username => this.setState({ username })}
- underlineColorAndroid='transparent'
- style={styles.Textform}
- />
- </View>
- {/* end of username */}
- {/* password */}
- <View style={{
- marginTop:10,
- flexDirection:'row',marginLeft:20,marginRight:20, borderColor:'#F2526E',borderWidth:1,borderRadius:5,
- paddingLeft:20,alignContent:'center',alignItems:'center',width:270,backgroundColor:'#fff'
- }}>
- <Ionicons name='ios-lock-outline'
- color={'#F2526E'}
- size={30}
- MarginLeft={10}/>
- <TextInput
- placeholder="password"
- onChangeText={username => this.setState({ username })}
- underlineColorAndroid='transparent'
- style={styles.Textform}
- secureTextEntry={true}
- />
- </View>
- {/* end of passsword */}
- <View style={{marginTop:20}}></View>
- {this.state.isLoading == true && (
- <View style={styles.container}>
- <ActivityIndicator size="large" />
- </View>
- )}
- {this.state.isLoading == false && (
- <TouchableOpacity onPress={()=>{this.UserLoginFunction(this.state.username,this.state.password)}}>
- <View style={styles.button}>
- <Text style={styles.TextInputStyleClass}>
- Login
- </Text>
- </View>
- </TouchableOpacity>
- )}
- {this.state.isLoading == false && (
- <TouchableOpacity onPress={() => {
- this.props.component.root.navigate('Register', {
- });
- }}>
- <View style={styles.buttonRegister}>
- <Text style={styles.TextInputStyleClass}>
- Register
- </Text>
- </View>
- </TouchableOpacity>
- )}
- {/* end of parent */}
- <Text
- style={{
- fontSize:10,
- width:270,
- textAlign:'center',
- color: '#F2526E'
- }}>
- dengan masuk berarti anda sudah menyetujui syarat dan ketentuan kami
- </Text>
- </View>
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- alignItems: "center"
- },
- TextInputStyleClass:{
- flex:1,
- fontSize:20,
- color:'#FFF',
- textAlign:'center',
- justifyContent:'center',
- marginTop:10,
- // alignItems:'center',
- },
- Textform:{
- flex:1,
- fontSize:17,
- color:'#F2526E',
- marginLeft:20
- },
- button:{
- backgroundColor:'#F2526E',
- borderColor:'#F2526E',
- borderRadius:5,
- width:270,
- height:50,
- marginBottom:15,
- },
- buttonRegister:{
- backgroundColor:'#2ECC71',
- borderColor:'#2ECC71',
- borderRadius:5,
- width:270,
- height:50,
- marginBottom:15
- },
- });
- function mapStateToProps(state) {
- return {
- component: state.component,
- }
- }
- function mapDispatchToProps(dispatch) {
- return {
- setRoot: (root) => dispatch({
- type: 'set_root',
- root: root
- })
- }
- }
- export default connect(
- mapStateToProps,
- mapDispatchToProps
- )(LoginScreen);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement