Initial logic to login in app.

src/App.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useContext } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 
 import navigationTheme from "./app/navigation/navigationTheme";
@@ -7,24 +7,31 @@ import openDatabase from "./app/database/database-connection";
 
 import initDatabase from "./app/database/database-init";
 import FlashMessage from "react-native-flash-message";
-import { createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator } from "@react-navigation/stack";
 import AppNavigator from "./app/navigation/AppNavigator";
 import EventLocationProvider from "./app/context/EventLocationContext";
 import CurrentLocationProvider from "./app/context/CurrentLocationContext";
+import AuthNavigator from "./app/navigation/AuthNavigator";
+import { AuthContextProvider } from "./app/auth/context";
 
 export default function App() {
+  const [user, AuthProvider] = AuthContextProvider();
+  console.log("asidhisdhaisu " + JSON.stringify(user));
+
   global.userDataBase = openDatabase();
   initDatabase(global.userDataBase);
   const Stack = createStackNavigator();
 
   return (
+    <AuthProvider>
       <CurrentLocationProvider>
         <EventLocationProvider>
           <NavigationContainer theme={navigationTheme}>
-          <AppNavigator />
+            {user !== undefined ? <AppNavigator /> : <AuthNavigator />}
             <FlashMessage position="top" />
           </NavigationContainer>
         </EventLocationProvider>
       </CurrentLocationProvider>
+    </AuthProvider>
   );
 }

src/app/api/auth.js

@@ -0,0 +1,11 @@
+function login(name, password) {
+  // NOTE: Change to API in future
+
+  return {
+    name: "Fulano De Tal",
+    email: "fulano@detal.com",
+    ID: "1",
+  };
+}
+
+export default login;

src/app/auth/context.js

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+
+const AuthContext = React.createContext();
+
+function AuthContextProvider() {
+  const [user, setUser] = useState();
+
+  const provider = ({ children }) => (
+    <AuthContext.Provider
+      value={{
+        user,
+        setUser,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+
+  return [user, provider];
+}
+
+export { AuthContextProvider, AuthContext };

src/app/config/dimensions.js

@@ -12,6 +12,7 @@ const dimensions = {
   },
 
   spacing: {
+    big_padding: 30,
     normal_padding: 10,
     minimal_padding: 5,
   },

src/app/screens/LoginScreen.js

@@ -1,18 +1,100 @@
-import React from "react";
+import React, { useState, useContext } from "react";
 import { StyleSheet, View, Text } from "react-native";
+import * as Yup from "yup";
+import {
+  Form,
+  SubmitButton,
+  FormField,
+  ErrorMessage,
+} from "../components/forms";
+import Screen from "../components/Screen";
+import colors from "../config/colors";
+import { dimensions } from "../config/dimensions";
+import { TouchableNativeFeedback } from "react-native-gesture-handler";
+import login from "../api/auth";
+import { AuthContext } from "../auth/context";
 
-export default function LoginScreen() {
+const phoneRegex = RegExp(
+  /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
+);
+
+const validationSchema = Yup.object().shape({
+  name: Yup.string()
+    .matches(phoneRegex, "Número inválido")
+    .required("O número de telefone é obrigatório"),
+  password: Yup.string()
+    .required("A senha é obrigatória")
+    .min(8, "Senha muito curta, minimo 8 caracteres")
+    .matches(/[a-zA-Z]/, "A senha só pode conter letras"),
+});
+
+export default function LoginScreen(props) {
+  const authContext = useContext(AuthContext);
+
+  const handleSubmit = (name, password, setLoginFailed) => {
+    const result = login(name, password);
+
+    if (!result) return setLoginFailed(true);
+    setLoginFailed(false);
+    authContext.setUser(result);
+  };
+
+  const [loginFailed, setLoginFailed] = useState(false);
   return (
-    <View style={styles.containter}>
-      <Text>Login</Text>
+    <Screen style={styles.containter}>
+      <Form
+        initialValues={{
+          name: "",
+          password: "",
+        }}
+        validationSchema={validationSchema}
+        onSubmit={({ name, password }) =>
+          handleSubmit(name, password, setLoginFailed)
+        }
+      >
+        <Text style={styles.title}>Pega Chuva</Text>
+
+        <ErrorMessage error="Email ou senha inválidos" visible={loginFailed} />
+        <FormField
+          maxLength={12}
+          name="name"
+          keyboardType="numeric"
+          numberOfLines={1}
+          placeholder="Número de telefone celular"
+        />
+
+        <FormField
+          maxLength={12}
+          name="password"
+          numberOfLines={1}
+          placeholder="Senha"
+        />
+
+        <SubmitButton title="entrar" backgroundColor={colors.primary} />
+
+        <TouchableNativeFeedback
+          onPress={() => {
+            props.navigation.navigate("Register");
+          }}
+        >
+          <View flexDirection="row" alignSelf="center">
+            <Text>Não tem uma conta? </Text>
+            <Text style={{ color: colors.lightBlue }}>Cadastre-se</Text>
           </View>
+        </TouchableNativeFeedback>
+      </Form>
+    </Screen>
   );
 }
 
 const styles = StyleSheet.create({
   containter: {
-    flex: 1,
+    padding: 10,
     justifyContent: "center",
-    alignItems: "center",
+  },
+  title: {
+    alignSelf: "center",
+    fontSize: dimensions.text.header,
+    marginBottom: dimensions.spacing.big_padding,
   },
 });