Contruindo tela de login e Registro

android/app/src/main/AndroidManifest.xml

@@ -14,7 +14,6 @@
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize"
         android:exported="true">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

package.json

@@ -10,10 +10,15 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.18.1",
     "@types/node": "^18.16.0",
+    "@types/yup": "^0.32.0",
+    "axios": "^1.4.0",
     "formik": "^2.2.9",
     "react": "18.2.0",
-    "react-native": "0.71.7"
+    "react-native": "0.71.7",
+    "react-native-toast-message": "^2.1.6",
+    "yup": "^1.1.1"
   },
   "devDependencies": {
     "@appbalance/ui": "^1.0.8",
@@ -38,6 +43,7 @@
     "react-native-screens": "^3.20.0",
     "react-native-svg": "^13.9.0",
     "react-native-svg-transformer": "^1.0.0",
+    "react-native-vector-icons": "^9.2.0",
     "react-test-renderer": "18.2.0",
     "styled-components": "^5.3.10",
     "typescript": "4.8.4"

src/commons/constants/env.ts

@@ -0,0 +1,10 @@
+const STAGE = {
+  // API
+
+  __DEV__: {
+    BASE_API:
+      'https://xfdewphuedg6qmsoha4ngq3kha0gkxdq.lambda-url.sa-east-1.on.aws',
+  },
+};
+
+export { STAGE };

src/components/Input/@types/index.ts

@@ -1,9 +1,12 @@
+import React from 'react';
 import { TextInputProps } from 'react-native';
 
 export interface InputProps extends TextInputProps {
   placeholder: string | undefined;
   onChangeText: (text: string) => void;
   value: string | undefined;
+  height?: string;
   marginBottom?: string;
   labelColor?: string;
+  IconRight?: any;
 }

src/components/Input/index.tsx

@@ -3,26 +3,43 @@ import React from 'react';
 import * as S from './styles';
 
 import { InputProps } from './@types';
+import { Text, View } from 'react-native';
+
+import Button from '../elements/Button';
 
 const Input = ({
   value,
+  height,
   placeholder,
   onChangeText,
   marginBottom,
   labelColor,
+  IconRight,
   ...props
 }: InputProps) => {
   return (
-    <S.InputContainer marginBottom={marginBottom}>
-      {!!value?.length && (
-        <S.Label labelColor={labelColor}>{placeholder}</S.Label>
+    <S.InputContainer marginBottom={marginBottom} height={height}>
+      <View style={{ flexDirection: 'column', width: '90%' }}>
+        {!!value?.length && (
+          <S.Label labelColor={labelColor}>{placeholder}</S.Label>
+        )}
+        <S.Input
+          placeholder={placeholder}
+          onChangeText={onChangeText}
+          value={value}
+          {...props}
+        />
+      </View>
+      {IconRight && (
+        <View
+          style={{
+            justifyContent: 'center',
+          }}>
+          <Button height="20px" width="20px" variant="text">
+            <Text>O</Text>
+          </Button>
+        </View>
       )}
-      <S.Input
-        placeholder={placeholder}
-        onChangeText={onChangeText}
-        value={value}
-        {...props}
-      />
     </S.InputContainer>
   );
 };

src/components/Input/styles.ts

@@ -1,8 +1,12 @@
 import styled from 'styled-components/native';
 
-export const InputContainer = styled.View<{ marginBottom?: string }>`
-  display: flex;
-  flex-direction: column;
+export const InputContainer = styled.View<{
+  marginBottom?: string;
+  height?: string;
+}>`
+  height: ${({ height }) => (height ? height : 'auto')};
+  min-height: 50px;
+  flex-direction: row;
   border-bottom-width: 1px;
   border-bottom-color: #141b41;
 
@@ -14,8 +18,7 @@ export const Label = styled.Text<{ labelColor?: string }>`
 `;
 
 export const Input = styled.TextInput`
-  width: 100%;
-  height: 50px;
+  width: 80%;
   padding-left: 10px;
   color: black;
 `;

src/pages/Login/index.tsx

@@ -1,68 +1,112 @@
 import React from 'react';
 
 import {
-  Image,
   KeyboardAvoidingView,
   Platform,
   SafeAreaView,
   ScrollView,
-  // View,
 } from 'react-native';
 import { Formik } from 'formik';
 
 import * as S from './styles';
 import Input from '../../components/Input';
 import Typography from '../../components/elements/Typography';
 import LogoPurple from '../../assets/icons/logoPurple.svg';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import Button from '../../components/elements/Button';
+import { theme } from '../../commons/styles/theme';
+import { useLogin } from './useLogin';
+import Toast from 'react-native-toast-message';
+
+type RootStackParamList = {
+  Home: undefined;
+  Profile: { userId: string };
+  Feed: { sort: 'latest' | 'top' } | undefined;
+};
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>;
+
+type ProfileScrrenProps = Props['navigation'];
 
 function Login() {
+  const navigation = useNavigation<ProfileScrrenProps>();
+  const { onSubmit } = useLogin();
+
   const initialValues = {
     email: '',
     password: '',
   };
 
   return (
-    <Formik initialValues={initialValues} onSubmit={() => { }}>
-      {({ handleChange, values }) => (
-        <SafeAreaView style={{ flex: 1 }}>
-          <KeyboardAvoidingView
-            behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-            style={{ height: 'auto' }}
-            keyboardVerticalOffset={0}>
-            <ScrollView style={{ height: '100%' }}>
-              <S.ContainerLogo>
-                <LogoPurple width={150} height={300} />
-              </S.ContainerLogo>
-              <S.ContainerForms>
-                <Input
-                  placeholder="E-mail"
-                  value={values.email}
-                  onChangeText={handleChange('email')}
-                  marginBottom="40px"
-                  placeholderTextColor="#141b4153"
-                  labelColor="#141b4153"
-                />
-                <Input
-                  placeholder="Senha"
-                  value={values.password}
-                  onChangeText={handleChange('password')}
-                  placeholderTextColor="#141b4153"
-                  labelColor="#141b4153"
-                />
-                <S.ContainerResetPassoword>
-                  <Typography>Esqueceu sua senha?</Typography>
-                  <S.ButtonResetPassword>Redefinir</S.ButtonResetPassword>
-                </S.ContainerResetPassoword>
-              </S.ContainerForms>
-              <S.ContainerRegister>
-                <Typography>Ainda não tem cadastro?</Typography>
-                <S.ButtonRegister>Cadastre-se.</S.ButtonRegister>
-              </S.ContainerRegister>
-            </ScrollView>
-          </KeyboardAvoidingView>
-        </SafeAreaView>
-      )}
-    </Formik>
+    <>
+      <Formik initialValues={initialValues} onSubmit={onSubmit}>
+        {({ isSubmitting, handleChange, values, isValid, handleSubmit }) => (
+          <SafeAreaView style={{ flex: 1 }}>
+            <KeyboardAvoidingView
+              behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+              keyboardVerticalOffset={0}>
+              <ScrollView style={{ height: '100%' }}>
+                <S.ContainerLogo>
+                  <LogoPurple width={150} height={300} />
+                </S.ContainerLogo>
+                <S.ContainerForms>
+                  <Input
+                    placeholder="E-mail"
+                    value={values.email}
+                    onChangeText={handleChange('email')}
+                    marginBottom="40px"
+                    placeholderTextColor="#141b4153"
+                    labelColor="#141b4153"
+                  />
+
+                  <Input
+                    placeholder="Senha"
+                    height="60px"
+                    value={values.password}
+                    onChangeText={handleChange('password')}
+                    placeholderTextColor="#141b4153"
+                    labelColor="#141b4153"
+                    IconRight
+                    secureTextEntry
+                  />
+                  {/* <InputPassWord /> */}
+                  <S.ContainerResetPassword>
+                    <Typography>Esqueceu sua senha?</Typography>
+                    <S.ButtonResetPassword>Redefinir</S.ButtonResetPassword>
+                  </S.ContainerResetPassword>
+                  <S.ContainerButton>
+                    <Button
+                      variant="contained"
+                      fontSize="18px"
+                      height="40px"
+                      width="170px"
+                      color={theme.palette.colors.white.main}
+                      // disabled={isSubmitting || !isValid}
+                      onPress={handleSubmit}>
+                      Entrar
+                    </Button>
+                  </S.ContainerButton>
+                </S.ContainerForms>
+                <S.ContainerRegister>
+                  <Typography>Ainda não tem cadastro?</Typography>
+                  <S.ButtonRegister
+                    onPress={() => navigation.navigate('Register')}>
+                    Cadastre-se.
+                  </S.ButtonRegister>
+                </S.ContainerRegister>
+              </ScrollView>
+            </KeyboardAvoidingView>
+          </SafeAreaView>
+        )}
+      </Formik>
+      <Toast
+        // config={TypeToast}
+        position="bottom"
+        bottomOffset={50}
+        visibilityTime={4000}
+      />
+    </>
   );
 }
 

src/pages/Login/styles.ts

@@ -4,13 +4,14 @@ import { theme } from '../../commons/styles/theme';
 
 export const Container = styled.View`
   flex: 1;
+  background-color: aqua;
 `;
 
 export const ContainerForms = styled.View`
   justify-content: center;
   margin: 20px;
   flex: 1;
-  height: 200px;
+  height: 280px;
 `;
 
 export const ContainerLogo = styled.View`
@@ -22,13 +23,19 @@ export const ContainerLogo = styled.View`
   margin-top: 10%;
 `;
 
-export const ContainerResetPassoword = styled.View`
+export const ContainerResetPassword = styled.View`
   flex-direction: row;
 
   height: 50px;
   align-items: center;
 `;
 
+export const ContainerButton = styled.View`
+  height: 80px;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
 export const ButtonResetPassword = styled(Button).attrs({
   variant: 'text',
   color: theme.palette.colors.primary.main,
@@ -49,6 +56,6 @@ export const ContainerRegister = styled.View`
   flex-direction: row;
   justify-content: center;
   flex: 1;
-  height: 200px;
+  height: 150px;
   align-items: flex-end;
 `;

src/pages/Login/useLogin/index.ts

@@ -0,0 +1,36 @@
+import { ToastAndroid } from 'react-native';
+import Toast from 'react-native-toast-message';
+import { authenticateUser } from '../../../services/auth';
+
+interface IValues {
+  email: string;
+  password: string;
+}
+
+export const useLogin = () => {
+  const showToast = () => {
+    Toast.show({
+      type: 'success',
+      text1: ' 👋 Bem vindo ao balance',
+    });
+  };
+
+  // const showToastAndroid = () => {
+  //   ToastAndroid.show('Bem vindo ao balance', ToastAndroid.SHORT);
+  // };
+
+  const onSubmit = async ({ email, password }: IValues, { setSubmitting }) => {
+    showToast();
+    // showToastAndroid();
+    const response = await authenticateUser({ email, password });
+    console.log('Executei', response);
+    if (!response.token) {
+      setSubmitting(true);
+      return;
+    }
+  };
+
+  return {
+    onSubmit,
+  };
+};