Browse Source

Initial logic to login in app.

master
GabrielTrettel 4 years ago
parent
commit
5bdb6c6201
  1. 27
      src/App.js
  2. 11
      src/app/api/auth.js
  3. 22
      src/app/auth/context.js
  4. 1
      src/app/config/dimensions.js
  5. 96
      src/app/screens/LoginScreen.js

27
src/App.js

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

11
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;

22
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 };

1
src/app/config/dimensions.js

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

96
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 { 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 ( return (
<View style={styles.containter}>
<Text>Login</Text>
</View>
<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({ const styles = StyleSheet.create({
containter: { containter: {
flex: 1,
padding: 10,
justifyContent: "center", justifyContent: "center",
alignItems: "center",
},
title: {
alignSelf: "center",
fontSize: dimensions.text.header,
marginBottom: dimensions.spacing.big_padding,
}, },
}); });
Loading…
Cancel
Save