add required login

ArtisanConnect/app/(auth)/login.jsx

@@ -0,0 +1,114 @@
+import React, {useState} from 'react';
+import {StyleSheet, ActivityIndicator, SafeAreaView, View} from 'react-native';
+import {useAuthStore} from '@/store/authStore';
+import {useRouter, Link} from 'expo-router';
+
+import {Box} from "@/components/ui/box"
+import {Button, ButtonText, ButtonIcon} from "@/components/ui/button"
+import {Center} from "@/components/ui/center"
+import {Heading} from "@/components/ui/heading"
+import {Input, InputField} from "@/components/ui/input"
+import {Text} from "@/components/ui/text"
+import {VStack} from "@/components/ui/vstack"
+import {HStack} from "@/components/ui/hstack"
+import {ArrowRightIcon} from "@/components/ui/icon"
+import {Divider} from '@/components/ui/divider';
+import {Ionicons} from "@expo/vector-icons";
+
+export default function Login() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const {signIn, isLoading} = useAuthStore();
+    const router = useRouter();
+
+    const handleInternalLogin = async () => {
+        if (!email || !password) {
+            alert('Proszę wprowadzić email i hasło.');
+            return;
+        }
+
+        try {
+            await signIn(email, password);
+            alert(`Zalogowano jako ${email}`);
+            router.replace('/');
+        } catch (e) {
+            alert("Błąd logowania: " + (e.response?.data?.message || e.message));
+        }
+    }
+
+    if (isLoading) {
+        return (
+            <View style={styles.container}>
+                <ActivityIndicator size="large"/>
+            </View>
+        );
+    }
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <Center>
+                <Box className="p-5 max-w-96 border border-background-300 rounded-lg">
+                    <VStack className="pb-4" space="xs">
+                        <Heading className="leading-[30px]">Logowanie</Heading>
+                        <Box className="flex flex-row">
+                            {/* <Link href="/registration" asChild> */}
+                                <Button variant="link" size="sm" className="p-0" onPress={() => router.replace("/registration")}>
+                                    <ButtonText style={styles.signupbutton}>Nie masz jeszcze konta? Załóz je
+                                        tutaj!</ButtonText>
+                                    <ButtonIcon className="mr-1" size="md" as={ArrowRightIcon}/>
+                                </Button>
+                            {/* </Link> */}
+                        </Box>
+                    </VStack>
+                    <VStack space="xl" className="py-2">
+                        <Input>
+                            <InputField className="py-2" placeholder="Login" onChangeText={setEmail}/>
+                        </Input>
+                        <Input>
+                            <InputField type="password" className="py-2" placeholder="Hasło"
+                                        onChangeText={setPassword}/>
+                        </Input>
+                    </VStack>
+                    <VStack space="lg" className="pt-4">
+                        <Button size="sm" onPress={handleInternalLogin}>
+                            <ButtonText>Zaloguj się</ButtonText>
+                        </Button>
+                    </VStack>
+
+                    <HStack alignItems="center" space="sm" className="pt-6 pb-6">
+                        <Divider flex={1}/>
+                        <Text fontSize="$sm" className="text-gray-300">
+                            lub
+                        </Text>
+                        <Divider flex={1}/>
+                    </HStack>
+                    <Button size="sm">
+                        <Ionicons name="logo-google" color="#fff"/>
+                    </Button>
+                </Box>
+            </Center>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        padding: 20,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 5,
+        marginBottom: 15,
+        padding: 10,
+    },
+    errorText: {
+        color: 'red',
+        marginBottom: 10,
+    },
+    signupbutton: {
+        fontWeight: '300',
+    },
+});