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>
+      
+  );
 }

components/index.tsx

@@ -6,10 +6,15 @@ import Welcome from "./home/Welcome/Welcome"
 import Plus from "./common/plus/plus"
 import SearchBar from "./common/searchBar/SearchBar"
 
+
+//login
+import Input from "./login/input"
+
 export {
   ExpenseItem,
   Welcome,
   Plus,
-  SearchBar
+  SearchBar,
+  Input,
 }
 

components/login/input.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
+import { TextInputEndEditingEventData } from 'react-native/Libraries/Components/TextInput/TextInput';
+
+interface InputProps {
+  label? : string,
+  outlined? : boolean,
+  placeholder?: string, 
+  leftIcon?: any, 
+  rightIcon?: any, 
+  numLines?: number, 
+  onChangeHandler?: (text: string)=>void, 
+  secure?: boolean, 
+  validate?: (e : NativeSyntheticEvent<TextInputEndEditingEventData>)=>void, // ob die line "gecheckt" werden soll
+  errorMessage? : any, //error msg 
+  errorColor?: string,
+  bgColor?: string,
+}
+
+function Input({
+  label,
+  outlined,
+  placeholder,
+  leftIcon,
+  rightIcon,
+  numLines,
+  onChangeHandler,
+  secure,
+  validate,
+  errorMessage,
+  errorColor,
+  bgColor
+} : InputProps) {
+    const containerBorder = outlined ? styles.outlined : styles.standard
+    if(numLines == undefined){
+      numLines = 1
+    }
+    return (
+        <View style={{padding:10}}>
+            <Text style={styles.label}>{label}</Text>
+            <View 
+                style={[styles.container, containerBorder, {backgroundColor: bgColor ? bgColor : "white"}]}>
+                    <View style={{paddingRight:10}}>{leftIcon}</View>
+                
+                <TextInput secureTextEntry={secure} placeholder={
+                    placeholder ? placeholder : label ? 'Enter ${label}' : ''
+                }
+                onChangeText={onChangeHandler}
+                onEndEditing={validate}
+                multiline={numLines > 1 ? true : false}
+                numberOfLines={numLines}
+                style={{flex: 4}}
+                />
+                {rightIcon}
+            </View>
+            <Text style={{color: errorColor? errorColor: "red"}}>{errorMessage}</Text>
+        </View>
+        
+    )
+}
+
+const styles = StyleSheet.create({
+    label: {
+        fontWeight: '500',
+    },
+    container: {
+        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'white'
+    },
+    outlined: {
+        borderColor: 'darkgrey',
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    standard: {
+        borderBottomColor: 'darkgrey',
+        borderBottomWidth: 1,
+    },
+
+})
+
+export default Input;