From ff54eb0c2fb14ca8842a6a41cc0b57699ddf21cf Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Wed, 30 Oct 2024 10:55:41 -0300
Subject: [PATCH] feat: add validation to sign in form

---
 src/screens/SignIn.tsx | 145 ++++++++++++++++++++++++-----------------
 1 file changed, 84 insertions(+), 61 deletions(-)

diff --git a/src/screens/SignIn.tsx b/src/screens/SignIn.tsx
index 167e797..c81aebf 100644
--- a/src/screens/SignIn.tsx
+++ b/src/screens/SignIn.tsx
@@ -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>
-  )
+  );
 }