import React, { useCallback, useRef } from 'react'; import { Image, View, KeyboardAvoidingView, ScrollView, Platform, TextInput, Alert, } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { Form } from '@unform/mobile'; import { FormHandles } from '@unform/core'; import * as Yup from 'yup'; import Icon from 'react-native-vector-icons/Feather'; import getValidationErrors from '../../utils/getValidationErrors'; import { useAuth } from '../../hooks/auth'; import Button from '../../components/Button'; import Input from '../../components/Input'; import logoImg from '../../assets/logo.png'; import { Container, Title, ForgotPassword, ForgotPasswordText, CreateAccountButton, CreateAccountButtonText, } from './styles'; interface SignInFormData { email: string; password: string; } const SignIn: React.FC = () => { const { signIn } = useAuth(); const navigation = useNavigation(); const passwordInputRef = useRef<TextInput>(null); const formRef = useRef<FormHandles>(null); const handleSignIn = useCallback( async (data: SignInFormData) => { try { formRef.current?.setErrors({}); const schema = Yup.object().shape({ email: Yup.string() .email('Digite email válido') .required('Email obrigatório'), password: Yup.string().required('Senha obrigatória'), }); await schema.validate(data, { abortEarly: false, }); await signIn({ email: data.email, password: data.password, }); } catch (err) { if (err instanceof Yup.ValidationError) { const errors = getValidationErrors(err); formRef.current?.setErrors(errors); return; } Alert.alert('Erro na autenticação', 'Ocorreu um erro ao fazer login'); } }, [signIn], ); return ( <> <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined} > <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ flex: 1 }} > <Container> <Image source={logoImg} /> <View> <Title>Faça seu logon</Title> </View> <Form ref={formRef} onSubmit={handleSignIn}> <Input autoCorrect={false} autoCapitalize="none" keyboardType="email-address" name="email" icon="mail" placeholder="E-mail" returnKeyType="next" onSubmitEditing={() => { passwordInputRef.current?.focus(); }} /> <Input ref={passwordInputRef} secureTextEntry name="password" icon="lock" placeholder="Senha" returnKeyType="send" onSubmitEditing={() => formRef.current?.submitForm()} /> <Button onPress={() => formRef.current?.submitForm()}> Entrar </Button> </Form> <ForgotPassword> <ForgotPasswordText>Esqueci minha senha</ForgotPasswordText> </ForgotPassword> </Container> </ScrollView> </KeyboardAvoidingView> <CreateAccountButton onPress={() => { navigation.navigate('SignUp'); }} > <Icon name="log-in" size={20} color="#ff9000" /> <CreateAccountButtonText>Criar uma conta</CreateAccountButtonText> </CreateAccountButton> </> ); }; export default SignIn;