83 lines
No EOL
4 KiB
JavaScript
83 lines
No EOL
4 KiB
JavaScript
import { StyleSheet, Text, View, SafeAreaView, KeyboardAvoidingView, Image, TextInput, Pressable } from 'react-native'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { Fontisto } from '@expo/vector-icons';
|
|
import { Entypo } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import axios from "axios";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
|
|
const login = () => {
|
|
const router = useRouter();
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
useEffect(() => {
|
|
const checkLoginStatus = async() => {
|
|
try {
|
|
const token = await AsyncStorage.getItem("authToken");
|
|
if(token){
|
|
router.replace("/(tabs)/home")
|
|
}
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
};
|
|
checkLoginStatus();
|
|
}, [])
|
|
|
|
const handleLogin = () => {
|
|
const user = {
|
|
email: email,
|
|
password: password,
|
|
};
|
|
axios.post("http://localhost:3030/login", user).then((res) => {
|
|
const token = res.data.token;
|
|
AsyncStorage.setItem("authToken", JSON.stringify(token));
|
|
router.replace("/(tabs)/home")
|
|
})
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={{flex:1, backgroundColor: "white", alignItems: "center", justifyContent:"center"}}>
|
|
<View>
|
|
<View style={{alignItems: "center"}}>
|
|
<Image
|
|
style={{width: 150, height: 150, resizeMode: "containe"}}
|
|
source={{
|
|
uri:"./assets/images/logo.png",
|
|
}}
|
|
/>
|
|
</View>
|
|
<Text style={{fontSize: 24, fontWeight: 600, color: "#222831", marginTop: 20}}>Keep Tracking</Text>
|
|
</View>
|
|
<KeyboardAvoidingView>
|
|
<View style={{alignItems: "center"}}>
|
|
<Text style={{fontSize: 16, fontWeight: 600, color: "black", marginTop: 20}}>Welcome back!</Text>
|
|
</View>
|
|
<View style={{marginTop: 50}}>
|
|
<View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5}}>
|
|
<Fontisto name="email" size={16} color="#31363F" />
|
|
<TextInput value={email} onChangeText={(text) => setEmail(text)} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your email'/>
|
|
</View>
|
|
<View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5, marginTop: 10}}>
|
|
<Entypo name="key" size={16} color="#31363F" />
|
|
<TextInput value={password} onChangeText={(text) => setPassword(text)} secureTextEntry={true} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your password'/>
|
|
</View>
|
|
<View style={{marginTop:10}}>
|
|
<Text style={{color: "#61677A", fontSize: 12 }}>Forgot password?</Text>
|
|
</View>
|
|
<View style={{marginTop: 50}}/>
|
|
<Pressable onPress={handleLogin} style={{backgroundColor: "#61677A", padding:10, borderRadius:5, alignItems: "center"}}>
|
|
<Text style={{color: "#D8D9DA", fontSize: 16, fontWeight: 600}}>Login</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => router.replace("/register")} style={{marginTop: 10}}>
|
|
<Text style={{fontSize: 12, textAlign:"center"}}>Don't have an account? <Text style={{fontWeight: 700}}>Register</Text></Text>
|
|
</Pressable>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
export default login
|
|
|
|
const styles = StyleSheet.create({}) |