validacion log in

This commit is contained in:
Maria Sanchez 2022-08-25 15:41:02 -06:00
parent fc36627951
commit 82588354e4
1 changed files with 61 additions and 10 deletions

View File

@ -23,18 +23,47 @@ const baseURL = `${API.BASE_URL}/user/loginUser`;
export default function LogIn({ navigation }) { export default function LogIn({ navigation }) {
const { addUser } = useContext(UserContext); const { addUser } = useContext(UserContext);
const [errors, setErrors] = useState({});
const [credentials, setCredentials] = useState({ const [credentials, setCredentials] = useState({
email: "lalo@lalo.com", email: "",
password: "12345" password: ""
}); });
const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value })) const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value }))
const validate = async() => {
if( credentials.email === "" && credentials.password === ""){
setErrors({ ...errors,
email: 'Debe ingresar un correo electrónico',
password: 'Debe ingresar una contraseña'
});
return false;
}else if (credentials.password === "") {
setErrors({ ...errors,
password: 'Debe ingresar una contraseña'
});
return false;
} else if(credentials.email === ""){
setErrors({ ...errors,
email: 'Debe ingresar un correo electrónico'
});
return false;
}
return true;
}
const iniciarSesion = async () => { const iniciarSesion = async () => {
const error = await validate();
console.log(error);
if (error) {
try { try {
console.log(baseURL);
await fetch(baseURL, { await fetch(baseURL, {
cache: 'no-cache', cache: 'no-cache',
method: 'POST', method: 'POST',
@ -71,9 +100,12 @@ export default function LogIn({ navigation }) {
} }
console.log(errors);
}
return ( return (
<Center w="100%"> <Center w="100%" flex={1}>
<Box safeArea p="2" py="8" w="90%" maxW="290"> <Box safeArea p="2" py="8" w="90%" maxW="290">
<Center> <Center>
@ -107,8 +139,8 @@ export default function LogIn({ navigation }) {
</Heading> </Heading>
<View style={styles.container}> <View style={styles.container}>
<VStack space={3} mt="5"> <VStack width="90%" mx="3" maxW="300px" mb={10}>
<FormControl isRequired > <FormControl isRequired isInvalid={'email' in errors}>
<FormControl.Label Text='bold'> Correo Electrónico </FormControl.Label> <FormControl.Label Text='bold'> Correo Electrónico </FormControl.Label>
<View style={styles.viewSection}> <View style={styles.viewSection}>
@ -120,10 +152,13 @@ export default function LogIn({ navigation }) {
value={credentials.email} value={credentials.email}
placeholder='Correo electrónico' placeholder='Correo electrónico'
onChangeText={onHandleChange("email")} /> onChangeText={onHandleChange("email")} />
</View>
</View>
{'email' in errors && <FormControl.ErrorMessage _text={{
fontSize: 'xs'
}}>Debe ingresar un correo electrónico</FormControl.ErrorMessage> }
</FormControl> </FormControl>
<FormControl isRequired> <FormControl isRequired isInvalid={'password' in errors}>
<FormControl.Label Text='bold'> Contraseña </FormControl.Label> <FormControl.Label Text='bold'> Contraseña </FormControl.Label>
<View style={styles.viewSection}> <View style={styles.viewSection}>
<MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle} /> <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle} />
@ -134,7 +169,12 @@ export default function LogIn({ navigation }) {
value={credentials.password} value={credentials.password}
placeholder='Contraseña' placeholder='Contraseña'
onChangeText={onHandleChange("password")} /> onChangeText={onHandleChange("password")} />
</View> </View>
{'password' in errors && <FormControl.ErrorMessage _text={{
fontSize: 'xs'
}}
>Debe ingresar una contraseña</FormControl.ErrorMessage> }
<Link <Link
_text={{ _text={{
fontSize: "xs", fontSize: "xs",
@ -180,6 +220,16 @@ const styles = StyleSheet.create({
marginBottom: 10, marginBottom: 10,
borderRadius: 4 borderRadius: 4
}, },
errorMessage: {
height: 40,
margin: 10,
padding: 5,
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
},
iconStyle: { iconStyle: {
paddingBottom: 20, paddingBottom: 20,
@ -197,6 +247,7 @@ const styles = StyleSheet.create({
}, },
container: { container: {
marginBottom: 6
} }
}) })