frontend/Signup.js
2024-02-08 09:10:53 -05:00

67 lines
2.0 KiB
JavaScript

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useTailwind } from 'tailwind-rn';
function SignupScreen({ navigation }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const tailwind = useTailwind();
async function signupUser() {
try {
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
setErrorMessage(null); // Reset the error message before starting a new request
const response = await fetch(`${apiUrl}/api/v1/app/auth/register`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
});
if (!response.ok) {
throw new Error(`Failed to signup: ${response.status} ${await response.text()}`);
}
const { token, userId } = await response.json();
await AsyncStorage.setItem('token', token);
await AsyncStorage.setItem('userID', userId);
navigation.reset({
index: 0,
routes: [{ name: 'Home' }],
});
} catch (error) {
console.error('Error:', error);
setErrorMessage(error.message);
}
}
return (
<View style={tailwind('p-4')}>
{errorMessage ? <Text style={tailwind('text-red-500 mb-2 text-center')}>{errorMessage}</Text> : null}
<TextInput
style={tailwind('border border-gray-500 p-2 mb-4')}
value={username}
onChangeText={setUsername}
placeholder="Username"
/>
<TextInput
style={tailwind('border border-gray-500 p-2 mb-4')}
value={password}
onChangeText={setPassword}
placeholder="Password"
secureTextEntry
/>
<Button title="Sign up" onPress={signupUser} />
<Button title="Log in instead" onPress={() => navigation.navigate('Login')} />
</View>
);
}
export default SignupScreen;