learning/ignitegym
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add validation to sign in form

Browse source
This commit is contained in:
Vinicius Souza 2024-10-30 10:55:41 -03:00
parent fb21229cf6
commit ff54eb0c2f
1 changed files with 84 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
src/screens/SignIn.tsx
View file

@ -1,84 +1,107 @@
import { Center, Heading, Image, ScrollView, Text, VStack } from "@gluestack-ui/themed";
import { useNavigation } from "@react-navigation/native";
import { Center, Heading, Image, ScrollView, Text, VStack } from '@gluestack-ui/themed';
import { useNavigation } from '@react-navigation/native';
import { Controller, useForm } from 'react-hook-form';
import BackgroundImg from '@assets/background.png';
import Logo from '@assets/logo.svg';
import { Input } from "@components/Input";
import { Button } from "@components/Button";
import { AuthNavigatorRoutesProps } from "@routes/auth.routes";
import { Input } from '@components/Input';
import { Button } from '@components/Button';
import { AuthNavigatorRoutesProps } from '@routes/auth.routes';
type FormData = {
email: string;
password: string;
};
export function SignIn() {
const navigation = useNavigation<AuthNavigatorRoutesProps>();
const {
control,
handleSubmit,
formState: { errors },
} = useForm<FormData>();
function handleNewAccount() {
navigation.navigate('SignUp');
}
function handleSignIn({ email, password }: FormData) {
console.debug(email, password);
}
return (
<ScrollView
contentContainerStyle={{ flexGrow: 1 }}
showsVerticalScrollIndicator={false}
>
<VStack flex={1}>
<Image
source={BackgroundImg}
defaultSource={BackgroundImg}
alt="Pessoas treinando"
position="absolute"
w="$full"
h={624}
/>
<ScrollView contentContainerStyle={{ flexGrow: 1 }} showsVerticalScrollIndicator={false}>
<VStack flex={1}>
<Image
source={BackgroundImg}
defaultSource={BackgroundImg}
alt="Pessoas treinando"
position="absolute"
w="$full"
h={624}
/>
<VStack flex={1} px="$10" pb="$16">
<Center my="$24">
<Logo />
<Text fontSize="$sm" color="$gray100">
Treine a sua mente e o seu corpo
</Text>
</Center>
<VStack flex={1} px="$10" pb="$16">
<Center my="$24">
<Logo />
<Text fontSize="$sm" color="$gray100">
Treine a sua mente e o seu corpo
</Text>
</Center>
<Center gap="$2">
<Heading color="$gray100">
Acesse a conta
</Heading>
<Center gap="$2">
<Heading color="$gray100">Acesse a conta</Heading>
<Input
placeholder="E-mail"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
/>
<Controller
control={control}
name="email"
rules={{ required: 'Informe o e-mail.' }}
render={({ field: { onBlur, onChange, value } }) => (
<Input
placeholder="E-mail"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
errorMessage={errors.email?.message}
onBlur={onBlur}
onChangeText={onChange}
value={value}
/>
)}
/>
<Input
placeholder="Senha"
autoCapitalize="none"
secureTextEntry
/>
<Controller
control={control}
name="password"
rules={{ required: 'Informe a senha.' }}
render={({ field: { onBlur, onChange, value } }) => (
<Input
placeholder="Senha"
autoCapitalize="none"
secureTextEntry
errorMessage={errors.password?.message}
onBlur={onBlur}
onChangeText={onChange}
value={value}
onSubmitEditing={handleSubmit(handleSignIn)}
returnKeyType="send"
/>
)}
/>
<Button
title="Acessar"
/>
</Center>
<Button title="Acessar" onPress={handleSubmit(handleSignIn)} />
</Center>
<Center
flex={1}
justifyContent="flex-end"
mt="$4"
>
<Text
color="$gray100"
fontSize="$sm"
mb="$3"
fontFamily="$body"
>
Ainda não tem acesso?
</Text>
<Center flex={1} justifyContent="flex-end" mt="$4">
<Text color="$gray100" fontSize="$sm" mb="$3" fontFamily="$body">
Ainda não tem acesso?
</Text>
<Button title="Criar Conta" variant="outline" onPress={handleNewAccount} />
</Center>
<Button title="Criar Conta" variant="outline" onPress={handleNewAccount} />
</Center>
</VStack>
</VStack>
</VStack>
</ScrollView>
)
);
}