muayjtp/react_native
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated register and login functionality

Browse source
This commit is contained in:
Juthatip McDevitt 2024-07-17 00:22:47 -05:00
parent 014ca66466
commit 4bad07751a
5 changed files with 133 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
todo_app/api/models/todo.js
View file

@ -0,0 +1,28 @@
const mongoose = require("mongoose");
const todoSchema = new mongoose.Schema({
title:{
type: String,
required: true,
},
status:{
type: String,
enum: ["pending", "completed"],
default: "pending"
},
category:{
type: String,
required: true
},
dueDate:{
type: String,
required: true,
},
createdAt:{
type: Date,
default: Date.now
}
});
const Todo= mongoose.model("Todo", todoSchema);
module.exports = Todo

40
todo_app/app/(authenticate)/login.js
View file

@ -1,13 +1,42 @@
import { StyleSheet, Text, View, SafeAreaView, KeyboardAvoidingView, Image, TextInput, Pressable } from 'react-native'
import React, { useState } from 'react'
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('');
const router = useRouter();
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", token);
router.replace("/(tabs)/home")
})
};
return (
<SafeAreaView style={{flex:1, backgroundColor: "white", alignItems: "center", justifyContent:"center"}}>
@ -35,12 +64,11 @@ const login = () => {
<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={{flexDirection: "row", alignItems: "center", justifyContent:"space-between", marginTop:10}}>
<Text style={{fontSize: 12}}>Keep me login</Text>
<Text style={{color: "#61677A", fontSize: 12}}>Forgot password?</Text>
<View style={{marginTop:10}}>
<Text style={{color: "#61677A", fontSize: 12 }}>Forgot password?</Text>
</View>
<View style={{marginTop: 50}}/>
<Pressable style={{backgroundColor: "#61677A", padding:10, borderRadius:5, alignItems: "center"}}>
<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}}>

34
todo_app/app/(authenticate)/register.js
View file

@ -1,14 +1,35 @@
import { StyleSheet, Text, View, SafeAreaView, KeyboardAvoidingView, Image, TextInput, Pressable } from 'react-native'
import { StyleSheet, Text, View, SafeAreaView, KeyboardAvoidingView, Image, TextInput, Pressable, Alert } from 'react-native'
import React, { useState } from 'react'
import { Fontisto } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import axios from "axios";
const register = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const router = useRouter();
const handleRegister = () => {
const user = {
name: name,
email: email,
password: password,
}
axios.post("http://localhost:3030/register", user).then((res) => {
console.log(res);
Alert.alert("Registration succeeded!");
setEmail('');
setPassword('');
setName('');
}).catch((error) => {
Alert.alert("Registration failed!");
console.log("error", error);
})
}
return (
<SafeAreaView style={{flex:1, backgroundColor: "white", alignItems: "center", justifyContent:"center"}}>
<View>
@ -26,19 +47,28 @@ const register = () => {
<View style={{alignItems: "center"}}>
<Text style={{fontSize: 16, fontWeight: 600, color: "black", marginTop: 20}}>Register</Text>
</View>
<View style={{marginTop: 50}}>
<View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5}}>
<AntDesign name="user" size={16} color="#31363F" />
<TextInput value={name} onChangeText={(text) => setName(text)} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Username'/>
</View>
<View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5, marginTop: 10}}>
<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: 50}}/>
<Pressable style={{backgroundColor: "#61677A", padding:10, borderRadius:5, alignItems: "center"}}>
<Pressable onPress={handleRegister} style={{backgroundColor: "#61677A", padding:10, borderRadius:5, alignItems: "center"}}>
<Text style={{color: "#D8D9DA", fontSize: 16, fontWeight: 600}}>Register</Text>
</Pressable>
<Pressable onPress={() => router.replace("/login")} style={{marginTop: 10}}>
<Text style={{fontSize: 12, textAlign:"center"}}>Already have an account? <Text style={{fontWeight: 700}}>Login</Text></Text>
</Pressable>

4
todo_app/app/(tabs)/home/_layout.js
View file

@ -1,9 +1,13 @@
import {Stack} from "expo-router";
import {ModalPortal} from "react-native-modals"
export default function Layout(){
return(
<>
<Stack screenOptions={{headerShown:false}}>
<Stack.Screen name="index"/>
</Stack>
<ModalPortal />
</>
)
}

39
todo_app/app/(tabs)/home/index.js
View file

@ -1,11 +1,13 @@
import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Image, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
import React, { useState } from 'react'
import { AntDesign } from '@expo/vector-icons';
import { BottomModal, ModalContent, ModalTitle, SlideAnimation } from 'react-native-modals';
const index = () => {
const todo = [
const todo = [];
const [modalVisible, setModalVisible] = useState(false);
const [addToDo, setAddToDo] = useState('');
];
return (
<>
<View style={{marginHorizontal:20, marginVertical:20, alignItems: "center", flexDirection: "row", gap: 10}}>
@ -18,7 +20,7 @@ const index = () => {
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center", marginRight: "auto"}}>
<Text style={{color: "white", textAlign: "center"}}>Personal</Text>
</Pressable>
<Pressable>
<Pressable onPress={() => setModalVisible(!modalVisible)}>
<AntDesign name="plus" size={24} color="black" />
</Pressable>
</View>
@ -34,14 +36,35 @@ const index = () => {
uri:"./assets/images/to-do.png",
}}
/>
<Text style={{fontSize:16, fontWeight:600, marginTop: 20, textAlign:"center"}}>Hooray! No task for today</Text>
<Pressable style={{backgroundColor: "black", marginTop: 20, padding:5, borderRadius: 5}}>
<Text style={{fontSize:16, fontWeight:600, textAlign:"center", color: "white"}}>Add task <AntDesign name="plus" size={16} color="white" /></Text>
<Text style={{fontSize:16, fontWeight:600, marginTop: 20, textAlign:"center"}}>Hooray! There is no tasks</Text>
<Pressable onPress={() => setModalVisible(!modalVisible)} style={{backgroundColor: "black", marginTop: 20, padding:5, borderRadius: 5}}>
<Text style={{fontSize:14, fontWeight:600, textAlign:"center", color: "white"}}>Add task <AntDesign name="plus" size={16} color="white" /></Text>
</Pressable>
</View>
)}
</View>
</ScrollView>
<BottomModal
onBackdropPress={() => setModalVisible(!modalVisible)}
onHardwareBackPress={() => setModalVisible(!modalVisible)}
swipeDirection={['up', 'down']}
swipeThreshold={200}
modalTitle={<ModalTitle title="Add Task"/>}
modalAnimation={
new SlideAnimation({
slideFrom: 'bottom',
})
}
visible={modalVisible}
onTouchOutside={() => setModalVisible(!modalVisible)}
>
<ModalContent style={{width:"100%", height:200}}>
<View style={{marginTop: 10}}>
<TextInput value={addToDo} onChangeText={(text) => setAddToDo(text)} style={{padding:10, borderColor: "#61677A", borderRadius:5, borderWidth:1, flex:1, outlineStyle: 'none', color: "#31363F"}} placeholder='Add your new task'/>
</View>
</ModalContent>
</BottomModal>
</>
)
}