add required login

ArtisanConnect/api/notices.jsx

@@ -1,12 +1,21 @@
 import axios from "axios";
 import FormData from 'form-data'
+import {useAuthStore} from "@/store/authStore";
 
-const API_URL = "https://testowe.zikor.pl/api/v1";
+// const API_URL = "https://testowe.zikor.pl/api/v1";
 
-// const API_URL = "http://172.20.10.2:8080/api/v1";
+const API_URL = "http://10.0.2.2:8080/api/v1";
 
 export async function listNotices() {
-    const response = await fetch(`${API_URL}/notices/get/all`);
+    const { token } = useAuthStore.getState();
+    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+
+    console.log(token);
+
+    const response = await fetch(`${API_URL}/notices/get/all`, {
+        headers: headers
+    });
+    console.log(response);
     const data = await response.json();
     if (!response.ok) {
         throw new Error(response.toString());
@@ -17,11 +26,11 @@ export async function listNotices() {
 export async function getNoticeById(noticeId) {
     const response = await fetch(`${API_URL}/notices/get/${noticeId}`);
 
-  const data = await response.json();
-  if (!response.ok) {
-    throw new Error("Error");
-  }
-  return data;
+    const data = await response.json();
+    if (!response.ok) {
+        throw new Error("Error");
+    }
+    return data;
 }
 
 export async function createNotice(notice) {

ArtisanConnect/app.json

@@ -38,7 +38,8 @@
         {
           "cameraPermission": "Please allow $(PRODUCT_NAME) to access your camera"
         }
-      ]
+      ],
+      "expo-web-browser"
     ]
   }
-}
+}

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

ArtisanConnect/app/(tabs)/_layout.jsx

@@ -1,64 +1,64 @@
-import { Tabs } from "expo-router";
-import { Ionicons } from "@expo/vector-icons";
+import {Tabs} from "expo-router";
+import {Ionicons} from "@expo/vector-icons";
 
 export default function TabLayout() {
-  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: "rgb(var(--color-primary-500))",
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Home",
-          tabBarLabel: "Home",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="home-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="notices"
-        options={{
-          title: "Ogłoszenia",
-          tabBarLabel: "Ogłoszenia",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="list-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="notice/create"
-        options={{
-          title: "Dodaj",
-          tabBarLabel: "Dodaj",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="add-circle-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="wishlist"
-        options={{
-          title: "Ulubione",
-          tabBarLabel: "Ulubione",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="heart-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="dashboard"
-        options={{
-          headerShown: false, // Ukryj nagłówek dla Drawer
-          title: "Konto",
-          tabBarLabel: "Konto",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="person-outline" size={size} color={color} />
-          ),
-        }}
-      />
-    </Tabs>
-  );
+    return (
+        <Tabs
+            screenOptions={{
+                tabBarActiveTintColor: "rgb(var(--color-primary-500))",
+            }}
+        >
+            <Tabs.Screen
+                name="index"
+                options={{
+                    title: "Home",
+                    tabBarLabel: "Home",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="home-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="notices"
+                options={{
+                    title: "Ogłoszenia",
+                    tabBarLabel: "Ogłoszenia",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="list-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="notice/create"
+                options={{
+                    title: "Dodaj",
+                    tabBarLabel: "Dodaj",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="add-circle-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="wishlist"
+                options={{
+                    title: "Ulubione",
+                    tabBarLabel: "Ulubione",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="heart-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="dashboard"
+                options={{
+                    headerShown: false, 
+                    title: "Konto",
+                    tabBarLabel: "Konto",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="person-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+        </Tabs>
+    );
 }

ArtisanConnect/app/(tabs)/index.jsx

@@ -5,8 +5,24 @@ import { NoticeSection } from "@/components/NoticeSection";
 import { UserSection } from "@/components/UserSection";
 import { SearchSection } from "@/components/SearchSection";
 import { FlatList } from 'react-native';
-
+import { useAuthStore } from "@/store/authStore";
+import { useRouter } from "expo-router";
+import { useEffect, useState } from "react";
 export default function Home() {
+const token = useAuthStore((state) => state.token);
+  const router = useRouter();
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, []);
+
+  useEffect(() => {
+    if (isReady && !token) {
+      router.replace("/login");
+    }
+  }, [isReady, token, router]);
+
   const notices = useNoticesStore((state) => state.notices);
    const latestNotices = [...notices]
     .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
@@ -14,6 +30,7 @@ export default function Home() {
       const recomendedNotices = [...notices]
     .sort(() => Math.random() - 0.5)
     .slice(0, 6);
+
   return (
     <View>
     <SearchSection/>

ArtisanConnect/app/(tabs)/notices.jsx

@@ -1,6 +1,6 @@
 import { FlatList, Text, ActivityIndicator, RefreshControl, Dimensions } from "react-native";
 import { useState, useEffect } from "react";
-import { Ionicons } from "@expo/vector-icons";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNoticesStore } from "@/store/noticesStore";
 import { NoticeCard } from "@/components/NoticeCard";
 import { useLocalSearchParams, useRouter } from "expo-router";
@@ -11,9 +11,13 @@ import { listCategories } from "@/api/categories";
 import { FormControl, FormControlLabel } from "@/components/ui/form-control";
 import { Input, InputField } from "@/components/ui/input";
 import { HStack } from "@/components/ui/hstack";
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { KeyboardAvoidingView, Platform } from "react-native";
 import {
     Actionsheet,
     ActionsheetContent,
+    ActionsheetItem,
+    ActionsheetItemText,
     ActionsheetDragIndicator,
     ActionsheetDragIndicatorWrapper,
     ActionsheetBackdrop,
@@ -30,6 +34,7 @@ import {
     SelectDragIndicatorWrapper,
     SelectItem,
 } from "@/components/ui/select";
+import { ScrollView } from "react-native-gesture-handler";
 
 export default function Notices() {
     // Hooks
@@ -38,6 +43,7 @@ export default function Notices() {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
     const [showActionsheet, setShowActionsheet] = useState(false);
+    const [showSortSheet, setShowSortSheet] = useState(false);
     const [categories, setCategories] = useState([]);
     const [filteredNotices, setFilteredNotices] = useState([]);
     const params = useLocalSearchParams();
@@ -72,13 +78,32 @@ export default function Notices() {
             result = result.filter(notice => notice.category === params.category);
         }
 
-        if (params.sort === "latest") {
-            result = [...result].sort(
-                (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
-            );
+        if (params.sort) {
+            if( params.sort == "latest"){
+                result = [...result].sort(
+                    (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
+                );
+            }else if (params.sort == "oldest") {
+                result = [...result].sort(
+                    (a, b) => new Date(a.publishDate) - new Date(b.publishDate)
+                );
+            }else if (params.sort == "cheapest") {
+                result = [...result].sort((a, b) => {
+                    const priceA = parseFloat(a.price);
+                    const priceB = parseFloat(b.price);
+                    return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
+                });
+            }else if (params.sort == "expensive") {
+                result = [...result].sort((a, b) => {
+                    const priceA = parseFloat(a.price);
+                    const priceB = parseFloat(b.price);
+                    return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
+                });
+            }
+
         }
 
-        if(params.priceFrom) {
+        if (params.priceFrom) {
             result = result.filter(notice => {
                 const price = parseFloat(notice.price);
                 const priceFrom = parseFloat(params.priceFrom);
@@ -94,16 +119,21 @@ export default function Notices() {
             });
         }
 
-        
+
         if (params.search) {
             const searchTerm = params.search.toLowerCase();
-            result = result.filter(notice =>{
-                 return notice.title.toLowerCase().includes(searchTerm);
+            result = result.filter(notice => {
+                return notice.title.toLowerCase().includes(searchTerm);
             });
         }
 
         setFilteredNotices(result);
-    }, );
+    }, [notices,
+    params.category,
+    params.sort,
+    params.priceFrom,
+    params.priceTo,
+    params.search]);
 
 
     let filterActive = !!params.category || !!params.sort || !!params.priceFrom || !!params.priceTo || !!params.search;
@@ -129,7 +159,7 @@ export default function Notices() {
     };
 
     const handlePriceFrom = (value) => {
-         router.replace({
+        router.replace({
             pathname: "/notices",
             params: { ...params, priceFrom: value }
         });
@@ -144,6 +174,14 @@ export default function Notices() {
 
     const handleClose = () => setShowActionsheet(false);
 
+    const handleSort = (value) => {
+        router.replace({
+            pathname: "/notices",
+            params: { ...params, sort: value }
+        });
+        setShowSortSheet(false);
+    }
+
     const onRefresh = async () => {
         setRefreshing(true);
         try {
@@ -172,10 +210,15 @@ export default function Notices() {
     return (
         <>
             <Box style={{ flexDirection: "row", padding: 8, paddingTop: 16, paddingBottom: 16, backgroundColor: "white", alignItems: "center", justifyContent: "space-between" }}>
-                <Button variant="outline" onPress={() => setShowActionsheet(true)}>
-                    <ButtonText>Filtry</ButtonText>
-                    <Ionicons name="filter-outline" size={20} color="black" />
-                </Button>
+                <Box style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                    <Button variant="outline" onPress={() => setShowActionsheet(true)}>
+                        <ButtonText>Filtruj</ButtonText>
+                        <Ionicons name="filter-outline" size={20} color="black" />
+                    </Button>
+                    <Button variant="outline" onPress={() => setShowSortSheet(true)}>
+                        <Ionicons name="chevron-expand-outline" size={20} color="black" />
+                    </Button>
+                </Box>
                 {filterActive && (
                     <Button variant="link" onPress={() => router.replace("/notices")}>
                         <ButtonText>Wyczyść</ButtonText>
@@ -184,12 +227,17 @@ export default function Notices() {
             </Box>
             <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
                 <ActionsheetBackdrop />
-                <ActionsheetContent>
+                <ActionsheetContent  style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: '100%' }} >
+    <KeyboardAwareScrollView
+      contentContainerStyle={{ flexGrow: 1, width: '100%' }}
+      enableOnAndroid={true}
+      extraScrollHeight={40}
+      >
                     <ActionsheetDragIndicatorWrapper>
                         <ActionsheetDragIndicator />
                     </ActionsheetDragIndicatorWrapper>
-                    <Box className="mb-4">
-                        <HStack space="md" style={{ width: "100%"}}>
+                    <Box className="mb-4" style={{ width: "100%" }}>
+                        <HStack space="md" style={{ width: "100%" }}>
                             <FormControl
                                 style={{ flex: 1 }}>
                                 <Input>
@@ -207,21 +255,22 @@ export default function Notices() {
                                     <InputField
                                         keyboardType="numeric"
                                         placeholder="Do:"
-                                        value={params.priceTo || ''} 
+                                        value={params.priceTo || ''}
                                         onChangeText={handlePriceTo}
                                     />
                                 </Input>
                             </FormControl>
                         </HStack>
                     </Box>
-                    <Box className="mb-4 w-full">
+                    <Box className="mb-4" style={{ flex: 1 }}>
                         <Select
-                            style={{ width: '100%' }}
+                            style={{  flex: 1  }}
                             selectedValue={params.category || ''}
                             onValueChange={handleCategorySelect}
                         >
                             <SelectTrigger variant="outline" size="md">
                                 <SelectInput
+                                style={{ flex: 1 }}
                                     placeholder="Wybierz kategorię"
                                     value={selectedCategory ? selectedCategory.label : ""}
                                 />
@@ -230,7 +279,7 @@ export default function Notices() {
                             <SelectPortal>
                                 <SelectBackdrop />
                                 <SelectContent
-                                    style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: '100%' }}
+                                    style={{ maxHeight: SCREEN_HEIGHT * 0.6}}
                                 >
                                     <SelectDragIndicatorWrapper>
                                         <SelectDragIndicator />
@@ -250,7 +299,40 @@ export default function Notices() {
                             </SelectPortal>
                         </Select>
                     </Box>
-
+</KeyboardAwareScrollView>
+                </ActionsheetContent>
+            </Actionsheet>
+            <Actionsheet isOpen={showSortSheet} onClose={() => setShowSortSheet(false)}>
+                <ActionsheetBackdrop />
+                <ActionsheetContent>
+                    <ActionsheetDragIndicatorWrapper>
+                        <ActionsheetDragIndicator />
+                    </ActionsheetDragIndicatorWrapper>
+                    <ActionsheetItem 
+                    className={ !params.sort ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort()}>
+                        <ActionsheetItemText>Trafność</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'latest' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('latest')}>
+                        <ActionsheetItemText>Najnowsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'oldest' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('oldest')}>
+                        <ActionsheetItemText>Najstarsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'cheapest' ? 'bg-gray-200' : ''}
+                     onPress={() => handleSort('cheapest')}>
+                        <ActionsheetItemText>Najtańsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem
+                     className={ params.sort == 'expensive' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('expensive')}>
+                        <ActionsheetItemText>Najdroższe</ActionsheetItemText>
+                    </ActionsheetItem>
                 </ActionsheetContent>
             </Actionsheet>
             <FlatList

ArtisanConnect/app/_layout.jsx

@@ -1,9 +1,9 @@
-import { Stack } from "expo-router";
+import { Stack, Redirect } from "expo-router";
 import "@/global.css";
 import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useEffect } from "react";
-import { useNoticesStore } from "@/store/noticesStore";
+import { useEffect, useState } from "react";
+import { useNoticesStore } from "@/store/noticesStore"; 
 
 const queryClient = new QueryClient();
 export default function RootLayout() {
@@ -12,9 +12,11 @@ export default function RootLayout() {
   useEffect(() => {
     fetchNotices();
   }, []);
-  return (
+  
+return (
     <QueryClientProvider client={queryClient}>
       <GluestackUIProvider>
+        
         <Stack
           screenOptions={{
             headerTintColor: "#1c1c1e",
@@ -23,6 +25,12 @@ export default function RootLayout() {
           }}
         >
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen
+            name="(auth)/login"
+            options={{ headerShown: false }}/>
+          <Stack.Screen 
+          name="registration"
+          options={{ headerShown: false }}/>
         </Stack>
       </GluestackUIProvider>
     </QueryClientProvider>

ArtisanConnect/app/registration.jsx

@@ -0,0 +1,112 @@
+import React, {useState} from 'react';
+import {StyleSheet, ActivityIndicator, SafeAreaView, View} from 'react-native';
+import {useAuthStore} from '@/store/authStore';
+import {useRouter} from 'expo-router';
+
+import {Box} from "@/components/ui/box"
+import {Button, ButtonText,ButtonIcon} from "@/components/ui/button"
+import {ArrowRightIcon} from "@/components/ui/icon"
+import {Center} from "@/components/ui/center"
+import {Heading} from "@/components/ui/heading"
+import {Input, InputField} from "@/components/ui/input"
+import {VStack} from "@/components/ui/vstack"
+import {Link} from "expo-router"
+
+export default function Registration() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const {signUp, isLoading} = useAuthStore();
+    const router = useRouter();
+
+    const handleInternalRegistration = async () => {
+        if (!email || !password || !firstName || !lastName) {
+            alert('Proszę uzupełnić wszystkie pola');
+            return;
+        }
+
+        try {
+            await signUp({email, password, firstName, lastName});
+            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 w-[80%] border border-background-300 rounded-lg">
+                    <VStack className="pb-4" space="xs">
+                        <Heading className="leading-[30px]">Rejestracja</Heading>
+                        <Box className="flex flex-row">
+                           {/* <Link href="/login" asChild> */}
+                                <Button variant="link" size="sm" className="p-0" onPress={() => router.replace("/login")}>
+                                    <ButtonText style={styles.signupbutton}>Masz już konto? Zaloguj się!</ButtonText>
+                                    <ButtonIcon className="mr-1" size="md" as={ArrowRightIcon}/>
+                                </Button>
+                            {/* </Link>  */}
+                        </Box>
+                    </VStack>
+                    <VStack space="xl" className="py-2">
+                        <Input>
+                            <InputField type="email" className="py-2" placeholder="E-mail" onChangeText={setEmail}/>
+                        </Input>
+                        <Input>
+                            <InputField className="py-2" placeholder="Imię" onChangeText={setFirstName}/>
+                        </Input>
+                        <Input>
+                            <InputField className="py-2" placeholder="Nazwisko" onChangeText={setLastName}/>
+                        </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={handleInternalRegistration}>
+                            <ButtonText>Zarejestruj się</ButtonText>
+                        </Button>
+                    </VStack>
+                </Box>
+             
+            </Center>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    formContainer: {
+        width: '80%',
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 5,
+        marginBottom: 15,
+        padding: 10,
+    },
+    errorText: {
+        color: 'red',
+        marginBottom: 10,
+    },
+     signupbutton: {
+        fontWeight: '300',
+        textAlign: 'left',
+    },
+});

ArtisanConnect/components/ui/center/index.tsx

@@ -0,0 +1,22 @@
+import { View, ViewProps } from 'react-native';
+import React from 'react';
+import { centerStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type ICenterProps = ViewProps & VariantProps<typeof centerStyle>;
+
+const Center = React.forwardRef<React.ComponentRef<typeof View>, ICenterProps>(
+  function Center({ className, ...props }, ref) {
+    return (
+      <View
+        className={centerStyle({ class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Center.displayName = 'Center';
+
+export { Center };

ArtisanConnect/components/ui/center/index.web.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { centerStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type ICenterProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof centerStyle>;
+
+const Center = React.forwardRef<HTMLDivElement, ICenterProps>(function Center(
+  { className, ...props },
+  ref
+) {
+  return (
+    <div className={centerStyle({ class: className })} {...props} ref={ref} />
+  );
+});
+
+Center.displayName = 'Center';
+
+export { Center };

ArtisanConnect/components/ui/center/styles.tsx

@@ -0,0 +1,8 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+
+export const centerStyle = tva({
+  base: `justify-center items-center ${baseStyle}`,
+});

ArtisanConnect/components/ui/divider/index.tsx

@@ -0,0 +1,40 @@
+'use client';
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { Platform, View } from 'react-native';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const dividerStyle = tva({
+  base: 'bg-background-200',
+  variants: {
+    orientation: {
+      vertical: 'w-px h-full',
+      horizontal: 'h-px w-full',
+    },
+  },
+});
+
+type IUIDividerProps = React.ComponentPropsWithoutRef<typeof View> &
+  VariantProps<typeof dividerStyle>;
+
+const Divider = React.forwardRef<
+  React.ComponentRef<typeof View>,
+  IUIDividerProps
+>(function Divider({ className, orientation = 'horizontal', ...props }, ref) {
+  return (
+    <View
+      ref={ref}
+      {...props}
+      aria-orientation={orientation}
+      role={Platform.OS === 'web' ? 'separator' : undefined}
+      className={dividerStyle({
+        orientation,
+        class: className,
+      })}
+    />
+  );
+});
+
+Divider.displayName = 'Divider';
+
+export { Divider };

ArtisanConnect/package.json

@@ -15,6 +15,7 @@
     "@gluestack-ui/actionsheet": "^0.2.53",
     "@gluestack-ui/avatar": "^0.1.18",
     "@gluestack-ui/button": "^1.0.14",
+    "@gluestack-ui/divider": "^0.1.10",
     "@gluestack-ui/form-control": "^0.1.19",
     "@gluestack-ui/hstack": "^0.1.17",
     "@gluestack-ui/icon": "^0.1.27",
@@ -29,25 +30,31 @@
     "@gluestack-ui/themed": "^1.1.73",
     "@gluestack-ui/toast": "^1.0.9",
     "@legendapp/motion": "^2.4.0",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/cli-link-assets": "^18.0.0",
     "@react-navigation/drawer": "^7.3.11",
     "@tanstack/react-query": "^5.74.4",
     "axios": "^1.9.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "expo": "^53.0.0",
+    "expo-auth-session": "~6.1.5",
     "expo-camera": "~16.1.6",
     "expo-constants": "~17.1.5",
     "expo-image-picker": "~16.1.4",
     "expo-linking": "~7.1.4",
     "expo-router": "~5.0.5",
     "expo-status-bar": "~2.2.3",
+    "expo-web-browser": "~14.1.6",
     "form-data": "^4.0.2",
     "fs": "^0.0.1-security",
+    "lucide-react-native": "^0.511.0",
     "nativewind": "^4.1.23",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "0.79.2",
     "react-native-css-interop": "^0.1.22",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.10.0",

ArtisanConnect/store/authStore.jsx

@@ -0,0 +1,108 @@
+import {create} from "zustand";
+import {createJSONStorage, persist} from "zustand/middleware";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import axios from "axios";
+
+const API_URL = "http://10.0.2.2:8080/api/v1";
+
+export const useAuthStore = create(
+    persist(
+        (set) => ({
+            user: null,
+            token: null,
+            isLoading: false,
+            error: null,
+
+            signIn: async (email, password) => {
+                set({isLoading: true, error: null});
+                try {
+                    const response = await axios.post(`${API_URL}/auth/login`, {
+                        email,
+                        password
+                    });
+
+                    const user = response.data.user;
+                    const token = response.data.token;
+                    set({user, token, isLoading: false});
+                } catch (error) {
+                    set({error: error.response?.data?.message || error.message, isLoading: false});
+                    throw error;
+                }
+            },
+
+            signUp: async (userData) => {
+                set({isLoading: true, error: null});
+                try {
+                    console.log(userData);
+
+                    const response = await axios.post(`${API_URL}/auth/register`, userData, {
+                        headers: {'Content-Type': 'application/json'}
+                    });
+
+                    console.log(response.data);
+
+                    const user = response.data.user;
+                    const token = response.data.token;
+                    set({user, token, isLoading: false});
+
+                    return user;
+                } catch (error) {
+                    set({error: error.response?.data?.message || error.message, isLoading: false});
+                    throw error;
+                }
+            },
+
+            signInWithGoogle: async (googleToken) => {
+                set({isLoading: true, error: null});
+                try {
+                    const response = await axios.post(`${API_URL}/auth/google`, {token: googleToken});
+
+                    const {user, token} = response.data;
+                    set({user, token, isLoading: false});
+
+                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+
+                    return user;
+                } catch (error) {
+                    set({error: error.response?.data?.message || error.message, isLoading: false});
+                    throw error;
+                }
+            },
+
+            signOut: async () => {
+                try {
+                    // Можно отправить запрос на бэкенд для инвалидации токена
+                    await axios.post(`${API_URL}/auth/logout`);
+                } catch (error) {
+                    console.error("Logout error:", error);
+                } finally {
+                    delete axios.defaults.headers.common["Authorization"];
+                    set({user: null, token: null});
+                }
+            },
+
+            checkAuth: async () => {
+                const {token} = useAuthStore.getState();
+                if (!token) return null;
+
+                set({isLoading: true});
+                try {
+                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+
+                    const response = await axios.get(`${API_URL}/auth/me`);
+
+                    set({user: response.data, isLoading: false});
+                    return response.data;
+                } catch (error) {
+                    delete axios.defaults.headers.common["Authorization"];
+                    set({user: null, token: null, isLoading: false});
+                    return null;
+                }
+            },
+        }),
+        {
+            name: "auth-storage",
+            storage: createJSONStorage(() => AsyncStorage),
+        }
+    )
+);