feat: add validation to sign in form

src/screens/SignIn.tsx

@@ -1,84 +1,107 @@
-import { Center, Heading, Image, ScrollView, Text, VStack } from "@gluestack-ui/themed";
+import { Center, Heading, Image, ScrollView, Text, VStack } from '@gluestack-ui/themed';
-import { useNavigation } from "@react-navigation/native";
+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 { Input } from '@components/Input';
-import { Button } from "@components/Button";
+import { Button } from '@components/Button';
-import { AuthNavigatorRoutesProps } from "@routes/auth.routes";
+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
+    <ScrollView contentContainerStyle={{ flexGrow: 1 }} showsVerticalScrollIndicator={false}>
-      contentContainerStyle={{ flexGrow: 1 }}
+      <VStack flex={1}>
-      showsVerticalScrollIndicator={false}
+        <Image
-    >
+          source={BackgroundImg}
-    <VStack flex={1}>
+          defaultSource={BackgroundImg}
-      <Image
+          alt="Pessoas treinando"
-        source={BackgroundImg}
+          position="absolute"
-        defaultSource={BackgroundImg}
+          w="$full"
-        alt="Pessoas treinando"
+          h={624}
-        position="absolute"
+        />
-        w="$full"
-        h={624}
-      />
 
-      <VStack flex={1} px="$10" pb="$16">
+        <VStack flex={1} px="$10" pb="$16">
-        <Center my="$24">
+          <Center my="$24">
-          <Logo />
+            <Logo />
-          <Text fontSize="$sm" color="$gray100">
+            <Text fontSize="$sm" color="$gray100">
-            Treine a sua mente e o seu corpo
+              Treine a sua mente e o seu corpo
-          </Text>
+            </Text>
-        </Center>
+          </Center>
 
-        <Center gap="$2">
+          <Center gap="$2">
-          <Heading color="$gray100">
+            <Heading color="$gray100">Acesse a conta</Heading>
-            Acesse a conta
-          </Heading>
 
-          <Input
+            <Controller
-            placeholder="E-mail"
+              control={control}
-            keyboardType="email-address"
+              name="email"
-            autoCapitalize="none"
+              rules={{ required: 'Informe o e-mail.' }}
-            autoCorrect={false}
+              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
+            <Controller
-            placeholder="Senha"
+              control={control}
-            autoCapitalize="none"
+              name="password"
-            secureTextEntry
+              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
+            <Button title="Acessar" onPress={handleSubmit(handleSignIn)} />
-            title="Acessar"
+          </Center>
-          />
-        </Center>
 
-        <Center
+          <Center flex={1} justifyContent="flex-end" mt="$4">
-          flex={1}
+            <Text color="$gray100" fontSize="$sm" mb="$3" fontFamily="$body">
-          justifyContent="flex-end"
+              Ainda não tem acesso?
-          mt="$4"
+            </Text>
-        >
-          <Text
-            color="$gray100"
-            fontSize="$sm"
-            mb="$3"
-            fontFamily="$body"
-          >
-            Ainda não tem acesso?
-          </Text>
 
-          <Button title="Criar Conta" variant="outline" onPress={handleNewAccount} />
+            <Button title="Criar Conta" variant="outline" onPress={handleNewAccount} />
-        </Center>
+          </Center>
+        </VStack>
       </VStack>
-    </VStack>
     </ScrollView>
-  )
+  );
 }