Skip to content

Instantly share code, notes, and snippets.

@ribeiroevandro
Last active January 4, 2020 13:01
Show Gist options
  • Save ribeiroevandro/cc24737976881838551862f2ffcc4515 to your computer and use it in GitHub Desktop.
Save ribeiroevandro/cc24737976881838551862f2ffcc4515 to your computer and use it in GitHub Desktop.
import React, { useState, useEffect, useRef } from "react";
import {
View,
Image,
StyleSheet,
TextInput,
Text,
StatusBar,
TouchableOpacity,
AsyncStorage,
Alert,
TouchableWithoutFeedback,
Keyboard
} from "react-native";
import api from "../services/api";
import logo from "../assets/img-login.png";
export default function Login({ navigation }) {
const pwdRef = useRef(null);
const [email, setEmail] = useState("");
const [pwd, setPwd] = useState("");
const [userLogged, setUserLogged] = useState(false);
const [user, setUser] = useState({});
// ENABLE ON PRODUCTION
async function checkUser() {
const isUser = await AsyncStorage.getItem('_id');
return isUser !== null;
}
useEffect(() => {
checkUser()
.then(() => {
setUserLogged(true)
})
.then(() => {
if(userLogged) {
navigation.navigate('TaskList', { name: user.name, _id: user._id })
}
})
}, []);
// ENABLE ON PRODCTION END
async function handleSubmit() {
try {
const response = await api.get("/sessions", { email });
let { _id, name } = response.data;
const firstName = name.replace(/ .*/, "");
if(_id) {
await AsyncStorage.setItem('user', JSON.stringify({
firstName, _id
}));
navigation.navigate('TaskList', { name: user.firstName, _id: user._id })
}
} catch (error) {
console.log(error)
Alert.alert("Wrong email or password");
}
}
function handleFocusPwd() {
return pwdRef.current.focus()
}
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<StatusBar barStyle="dark-content" translucent />
<Image source={logo} />
<View style={styles.form}>
<TextInput
style={styles.input}
placeholder="email"
placeholderTextColor="#BCBCBC"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing={handleFocusPwd}
underlineColorAndroid="transparent"
value={email}
onChangeText={setEmail}
returnKeyType="next"
/>
<TextInput
style={styles.input}
placeholder="password"
placeholderTextColor="#BCBCBC"
secureTextEntry
autoCorrect={false}
value={pwd}
onChangeText={setPwd}
clearTextOnFocus={false}
underlineColorAndroid="transparent"
returnKeyType="done"
ref={pwdRef}
/>
</View>
<View style={styles.signupContainer}>
<Text>No account? </Text>
<Text
onPress={() => navigation.navigate("SignUp")}
style={styles.signup}
>
Signup
</Text>
</View>
<TouchableOpacity
onPress={handleSubmit}
style={styles.button}
activeOpacity={0.9}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
//justifyContent: 'center',
alignItems: "center",
marginTop: 30
},
form: {
alignSelf: "stretch",
paddingHorizontal: 30,
marginTop: 30
},
input: {
backgroundColor: "#EEEEEE",
borderWidth: 1,
borderColor: "#fff",
borderRadius: 5,
paddingHorizontal: 20,
fontSize: 18,
color: "#444",
marginBottom: 20,
height: 50
},
signupContainer: {
flexDirection: "row",
marginLeft: "auto",
paddingHorizontal: 30
},
signup: {
color: "#1EB36B"
},
button: {
height: 67,
backgroundColor: "#1EB36B",
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
marginTop: "auto",
alignSelf: "stretch",
margin: 30
},
buttonText: {
color: "#fff",
fontSize: 24,
fontWeight: "bold"
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment