From 4bad07751aaeb02d41d90b66d6e4c78989e4e4b3 Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Wed, 17 Jul 2024 00:22:47 -0500 Subject: [PATCH] updated register and login functionality --- todo_app/api/models/todo.js | 28 +++++++++++++++++ todo_app/app/(authenticate)/login.js | 40 +++++++++++++++++++++---- todo_app/app/(authenticate)/register.js | 36 ++++++++++++++++++++-- todo_app/app/(tabs)/home/_layout.js | 10 +++++-- todo_app/app/(tabs)/home/index.js | 39 +++++++++++++++++++----- 5 files changed, 133 insertions(+), 20 deletions(-) diff --git a/todo_app/api/models/todo.js b/todo_app/api/models/todo.js index e69de29..3e7a615 100644 --- a/todo_app/api/models/todo.js +++ b/todo_app/api/models/todo.js @@ -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 \ No newline at end of file diff --git a/todo_app/app/(authenticate)/login.js b/todo_app/app/(authenticate)/login.js index 6cdc981..f5325de 100644 --- a/todo_app/app/(authenticate)/login.js +++ b/todo_app/app/(authenticate)/login.js @@ -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 ( @@ -35,12 +64,11 @@ const login = () => { setPassword(text)} secureTextEntry={true} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your password'/> - - Keep me login - Forgot password? + + Forgot password? - + Login router.replace("/register")} style={{marginTop: 10}}> diff --git a/todo_app/app/(authenticate)/register.js b/todo_app/app/(authenticate)/register.js index dc2dde6..f100300 100644 --- a/todo_app/app/(authenticate)/register.js +++ b/todo_app/app/(authenticate)/register.js @@ -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 ( @@ -26,19 +47,28 @@ const register = () => { Register + + + setName(text)} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Username'/> + + setEmail(text)} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your email'/> - + + setPassword(text)} secureTextEntry={true} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your password'/> + - + + Register + router.replace("/login")} style={{marginTop: 10}}> Already have an account? Login diff --git a/todo_app/app/(tabs)/home/_layout.js b/todo_app/app/(tabs)/home/_layout.js index d63d903..1157070 100644 --- a/todo_app/app/(tabs)/home/_layout.js +++ b/todo_app/app/(tabs)/home/_layout.js @@ -1,9 +1,13 @@ import {Stack} from "expo-router"; +import {ModalPortal} from "react-native-modals" export default function Layout(){ return( - - - + <> + + + + + ) } \ No newline at end of file diff --git a/todo_app/app/(tabs)/home/index.js b/todo_app/app/(tabs)/home/index.js index 1471299..337617f 100644 --- a/todo_app/app/(tabs)/home/index.js +++ b/todo_app/app/(tabs)/home/index.js @@ -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 ( <> @@ -18,7 +20,7 @@ const index = () => { Personal - + setModalVisible(!modalVisible)}> @@ -34,14 +36,35 @@ const index = () => { uri:"./assets/images/to-do.png", }} /> - Hooray! No task for today - - Add task + Hooray! There is no tasks + setModalVisible(!modalVisible)} style={{backgroundColor: "black", marginTop: 20, padding:5, borderRadius: 5}}> + Add task )} + + setModalVisible(!modalVisible)} + onHardwareBackPress={() => setModalVisible(!modalVisible)} + swipeDirection={['up', 'down']} + swipeThreshold={200} + modalTitle={} + modalAnimation={ + new SlideAnimation({ + slideFrom: 'bottom', + }) + } + visible={modalVisible} + onTouchOutside={() => setModalVisible(!modalVisible)} + > + + + setAddToDo(text)} style={{padding:10, borderColor: "#61677A", borderRadius:5, borderWidth:1, flex:1, outlineStyle: 'none', color: "#31363F"}} placeholder='Add your new task'/> + + + ) }