MainStyle
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
button: {
width: "100%",
marginTop: 10
},
cancelButton: {
backgroundColor: "#c00"
},
container: {
flex: 1,
backgroundColor: '#ccc',
justifyContent: 'center',
backgroundColor: "#009CF5",
},
maskedInput: {
flexGrow: 1,
height: 40,
fontSize: 18,
borderBottomColor: "#999",
borderBottomWidth: 1,
borderStyle: "solid",
alignSelf: "flex-start"
},
containerMask: {
flexDirection: "row",
marginBottom: 5,
marginLeft: 10,
marginRight: 10
},
errorMessage: {
alignSelf: "flex-start",
marginLeft: 15,
color: "#f00",
fontSize: 12
}
});
export default styles
Pagina de login
import AsyncStorage from "@react-native-async-storage/async-storage";
import React, { useEffect, useState } from "react";
import { Alert, Image, StyleSheet, View } from "react-native";
import { Button, Card, Input } from "react-native-elements";
import { ActivityIndicator } from "react-native-paper";
import usuarioService from "../services/UsuarioService";
import styles from "../style/MainStyle";
import { Divider } from '@rneui/themed';
export default function Login({ navigation }) {
const [email, setEmail] = useState(null);
const [password, setPassword] = useState(null);
const [isLoading, setLoading] = useState(false);
const [isLoadingToken, setLoadingToken] = useState(true);
const entrar = () => {
let data = {
username: email,
password: password,
};
usuarioService
.login(data)
.then((response) => {
setLoading(false);
navigation.reset({
index: 0,
routes: [{ name: "Principal" }],
});
})
.catch((error) => {
setLoading(false);
Alert.alert("Usuário não existe");
});
};
const logarComToken = (token) => {
setLoadingToken(true);
let data = {
token: token,
};
usuarioService
.loginComToken(data)
.then((response) => {
setLoadingToken(false);
navigation.reset({
index: 0,
routes: [{ name: "Principal" }],
});
})
.catch((error) => {
setLoadingToken(false);
});
};
const cadastrar = () => {
navigation.navigate("Cadastro");
};
useEffect(() => {
AsyncStorage.getItem("TOKEN").then((token) => {
logarComToken(token);
});
}, []);
return (
<View style={[styles.container, specificStyle.specificContainer]}>
{!isLoadingToken && (
<>
<Image
style={specificStyle.imgUm}
source={require("../assets/keeper.png")}
/>
<Card containerStyle={specificStyle.card}>
<Card.Title
style={{
height: 30,
marginLeft: 10,
color: "#2D2D2D",
fontSize: 13,
fontStyle: "normal",
fontWeight: "400",
lineHeight: 15,
display: "flex",
alignItems: "center",
paddingTop: 10,
}}
>
Bem vindo a Keeper
</Card.Title>
<Card.Title
style={{
height: 50,
color: "#2D2D2D",
fontSize: 26,
fontStyle: "normal",
fontWeight: "700",
lineHeight: 30,
display: "flex",
alignItems: "center",
paddingTop: 10,
}}
>
Entre em sua conta
</Card.Title>
<Input
placeholder="Seu e-mail"
onChangeText={(value) => setEmail(value)}
keyboardType="email-address"
/>
<Input
placeholder="Sua senha"
onChangeText={(value) => setPassword(value)}
secureTextEntry={true}
/>
{!isLoading && (
<Button
title="Entrar na minha conta"
buttonStyle={specificStyle.buttonCadastrar}
onPress={() => entrar()}
/>
)}
<Card.Title
style={{
width: "100%",
marginTop: 10,
backgroundColor: "#FFFFFF",
color: "#009CF5",
fontSize: 15,
fontStyle: "normal",
fontWeight: "400",
display: "flex",
alignItems: "center",
}}
onPress={() => cadastrar()}
>
Esqueceu a senha
</Card.Title>
<Image
style={specificStyle.img}
source={require("../assets/impressao_digital.png")}
/>
<Card.Title
style={{
width: "35%",
marginLeft: 110,
backgroundColor: "#FFFFFF",
color: "#009CF5",
fontSize: 15,
fontStyle: "normal",
fontWeight: "400",
display: "flex",
alignItems: "center",
}}
onPress={() => cadastrar()}
>
Entre utilizando sua digital
</Card.Title>
<View style={specificStyle.vertical}>
<Button
containerStyle={{
width: 170,
marginHorizontal: 50,
marginVertical: 10,
}}
title="Primeiro acesso ?"
type="clear"
titleStyle={{ color: "#000000" }}
/>
<Divider orientation="vertical" />
<Button
title="Cadastre-se"
buttonStyle={{
borderColor: "rgba(78, 116, 289, 1)",
}}
type="outline"
raised
titleStyle={{ color: "#000000" }}
containerStyle={{
width: 150,
marginHorizontal: 50,
marginVertical: 10,
}}
/>
</View>
</Card>
{isLoading && <ActivityIndicator />}
</>
)}
</View>
);
}
const specificStyle = StyleSheet.create({
imgUm: {
alignSelf: "center",
marginTop: -95,
},
img: {
alignSelf: "center",
marginTop: 30,
},
card: {
marginTop: 50,
marginLeft: 20,
borderRadius: 20,
backgroundColor: "#FFFFFF",
},
specificContainer: {
backgroundColor: "#009CF5",
},
buttonSenha: {
width: "100%",
marginTop: 10,
backgroundColor: "#FFFFFF",
color: "#000000",
},
vertical: {
display: "flex",
flexDirection: "row",
justifyContent: "space-evenly",
},
});
Em cima do Keeper, está branco. o que falta para ficar tudo azul ?
