Files
ArtisanConnectFrontend/ArtisanConnect/app/registration.jsx

96 lines
3.3 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} from "@/components/ui/button"
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"
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>
</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,
},
});