hamx/ArtisanConnectFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ekran logowania i rejestracja działa! Tylko wewnętrzne logowanie, bez google

Browse Source
This commit is contained in:
Andrii Solianyk
2025-06-04 15:41:40 +02:00
parent 9962dc1e55
commit 1862b6b79e
8 changed files with 418 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
ArtisanConnect/app/(tabs)/_layout.jsx
View File

@@ -1,64 +1,75 @@
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="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
title: "Konto",
tabBarLabel: "Konto",
tabBarIcon: ({color, size}) => (
<Ionicons name="person-outline" size={size} color={color}/>
),
}}
/>
</Tabs>
);
}

114
ArtisanConnect/app/(tabs)/login.jsx Normal file
View File

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