feat: add validation to sign in form

src/screens/SignIn.tsx

@@ -1,25 +1,37 @@
-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}
-    >
+    <ScrollView contentContainerStyle={{ flexGrow: 1 }} showsVerticalScrollIndicator={false}>
       <VStack flex={1}>
         <Image
           source={BackgroundImg}
@@ -39,39 +51,50 @@ export function SignIn() {
           </Center>
 
           <Center gap="$2">
-          <Heading color="$gray100">
-            Acesse a conta
-          </Heading>
+            <Heading color="$gray100">Acesse a conta</Heading>
 
+            <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}
+                />
+              )}
             />
 
+            <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"
-          />
+            <Button title="Acessar" onPress={handleSubmit(handleSignIn)} />
           </Center>
 
-        <Center
-          flex={1}
-          justifyContent="flex-end"
-          mt="$4"
-        >
-          <Text
-            color="$gray100"
-            fontSize="$sm"
-            mb="$3"
-            fontFamily="$body"
-          >
+          <Center flex={1} justifyContent="flex-end" mt="$4">
+            <Text color="$gray100" fontSize="$sm" mb="$3" fontFamily="$body">
               Ainda não tem acesso?
             </Text>
 
@@ -80,5 +103,5 @@ export function SignIn() {
         </VStack>
       </VStack>
     </ScrollView>
-  )
+  );
 }