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