Bài 8: Thao tác dữ liệu với textinput

2023-05-05 07:39:03
import React, { useState } from "react";
import { Alert, Image, SafeAreaView, StatusBar, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
import Icon from 'react-native-vector-icons/Fontisto';
import CheckBox from '@react-native-community/checkbox';
const LoginScreen = ()=>{
    const [isCheck,setIsCheck] = useState(false);
    const [email,setEmail] = useState('');
    const [password,setPassword] = useState('');
    const [checkEmail,setCheckEmail]=useState(true);
    const [errorPassword,setErrorPassword]=useState('');
    const onSubmit = ()=>{
       let formData = {
            _email:email,
            _passwrod:password,
            _checkBox:isCheck
       }

       let regexEmail = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);

       if(!regexEmail.test(formData._email)){
            setCheckEmail(false);
       } else{
            setCheckEmail(true);
       }

       formData._passwrod === '' ? setErrorPassword('Bát koong rỗng') : setErrorPassword('');
       
    }

    return (
        
        <SafeAreaView style={styles.container}>
            <StatusBar backgroundColor={'#ffffff'} barStyle="dark-content"></StatusBar>
                <View style={styles.title}>
                    <Text style={{fontWeight:'bold',fontSize:30,color:'black'}}>Login</Text>
                    
                        <Text>By signing in you are agreeing </Text>
                        <View style={{flexDirection:'row'}}>
                            <Text>our </Text><TouchableOpacity onPress={()=>Alert.alert('sau này tao làm chuyển')}>
                                <Text style={{color:'#1bcdff'}}>Term and privacy policy</Text></TouchableOpacity>
                         </View>
                   
                </View>
                <View style={styles.form}>
                        <View style={styles.group}>
                            <Icon name="email" style={styles.icon} />
                            <TextInput placeholder="Email Address" style={styles.ip} onChangeText={(value)=>setEmail(value)}></TextInput>
                            <Text style={{color:'red'}}>{!checkEmail?'Sai định dạng email':''}</Text>
                        </View>

                        <View style={styles.group}>
                            <Icon name="locked" style={styles.icon} />
                            <TextInput placeholder="Nhập Bát" style={styles.ip} secureTextEntry={true} onChangeText={(value)=>setPassword(value)}></TextInput>
                            <Text style={{color:'red'}}>{errorPassword}</Text>
                        </View>

                        <View style={styles.group1}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <CheckBox
                                        disabled={false}
                                        value={isCheck}
                                        onValueChange={() => setIsCheck(!isCheck)}
                                        tintColors={{true:'#1bcdff'}}
                                />
                                <Text>Ghi nhớ Bát</Text>
                            </View>
                            <View>
                                <TouchableOpacity onPress={()=>Alert.alert('sau này tao làm chuyển')}>
                                <Text style={{color:'#1bcdff'}}>Quên Bát</Text></TouchableOpacity>
                            </View>
                            
                        </View>
                        <TouchableOpacity style={styles.btn} onPress={()=>onSubmit()}>
                                <Text style={{color:'#ffffff',fontWeight:'bold'}}>Login</Text>
                        </TouchableOpacity>
                </View>
               
            <View>
                <Image source={require('../assets/footer.png')} style={{width:'100%'}}/>
            </View>
            
        </SafeAreaView>
       
    )
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#ffffff',
      
    },
    title:{
        marginTop:30,
        alignItems:'center'
    },
    form:{
        marginTop:30,
        paddingHorizontal:30
    },
    group:{
        marginTop:15
    },
    ip:{
        borderBottomWidth:1,
        backgroundColor:'#fff',
        borderColor:'gray',
        paddingLeft:35
        
    },
    icon:{
        fontSize:25,
        position:'absolute',
        top:10,
        zIndex:1000
    },
    group1:{
        marginTop:20,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    },
    btn:{
        marginTop:30,
        backgroundColor:'#1bcdff',
        paddingVertical:15,
        alignItems:'center',
        borderRadius:10
    }
})
export default LoginScreen;