feat: login page integrated

app/login.tsx

@@ -1,22 +1,46 @@
-import { View, Text } from 'react-native'
-import React, { useEffect } from 'react'
+import { View, Text, SafeAreaView, TextInput, Button} from 'react-native'
+import React, { useEffect, useState } from 'react'
 import { useAuth } from './contexts/AuthContext'
 import { Redirect } from 'expo-router';
+import { FontAwesome } from "@expo/vector-icons";
+import { Input } from '../components';
 
 export default function login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("")
   const {authState, onLogin} = useAuth();
-  useEffect(() => {
-    login()
-  }, [])
+  // const {authState, onLogin} = useAuth();
+  // useEffect(() => {
+  //   login()
+  // }, [])
 
 
   const login = async() => {
-    onLogin!("test", "test");
+    await onLogin!(email, password);
   }
+
+
   return (
-    <View>
-      <Text>login</Text>
-      <Redirect href={"/"}></Redirect>
-    </View>
-  )
+      
+      <SafeAreaView style={{flex: 1, justifyContent: "center"}}>
+        {authState?.authenticated && 
+        <Redirect href={"/"}></Redirect>}
+          <Input
+              placeholder={'Email'}
+              label='Email or Username'
+              leftIcon={<FontAwesome name="user" size={20} />}
+              onChangeHandler={setEmail}
+          />
+          <Input
+              placeholder={'Enter Password'}
+              label='Password'
+              leftIcon={<FontAwesome name="key" size={20} />}
+              rightIcon={<FontAwesome name="key" size={20} />}
+              onChangeHandler={setPassword}
+              secure = {true}
+          />
+          <Button title='login' onPress={login}></Button>
+      </SafeAreaView>
+      
+  );
 }