add required login

ArtisanConnect/app/(auth)/login.jsx

@@ -51,13 +51,13 @@ export default function Login() {
                     <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">
+                            {/* <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>
+                            {/* </Link> */}
                         </Box>
                     </VStack>
                     <VStack space="xl" className="py-2">

ArtisanConnect/app/(tabs)/_layout.jsx

@@ -48,21 +48,10 @@ export default function TabLayout() {
                     ),
                 }}
             />
-            <Tabs.Screen
-                name="login"
-                options={{
-                    headerShown: false, // Ukryj nagłówek dla Drawer
-                    title: "Authentication",
-                    tabBarLabel: "Authentication",
-                    tabBarIcon: ({color, size}) => (
-                        <Ionicons name="key" size={size} color={color}/>
-                    ),
-                }}
-            />
             <Tabs.Screen
                 name="dashboard"
                 options={{
-                    headerShown: false, // Ukryj nagłówek dla Drawer
+                    headerShown: false, 
                     title: "Konto",
                     tabBarLabel: "Konto",
                     tabBarIcon: ({color, size}) => (

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/_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

@@ -4,11 +4,13 @@ import {useAuthStore} from '@/store/authStore';
 import {useRouter} from 'expo-router';
 
 import {Box} from "@/components/ui/box"
-import {Button, ButtonText} from "@/components/ui/button"
+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('');
@@ -44,9 +46,18 @@ export default function Registration() {
     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>
@@ -69,6 +80,7 @@ export default function Registration() {
                         </Button>
                     </VStack>
                 </Box>
+             
             </Center>
         </SafeAreaView>
     );
@@ -93,4 +105,8 @@ const styles = StyleSheet.create({
         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 };