114 lines
4.1 KiB
JavaScript
114 lines
4.1 KiB
JavaScript
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',
|
|
},
|
|
}); |