

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;