83 lines
No EOL
4.1 KiB
JavaScript
83 lines
No EOL
4.1 KiB
JavaScript
import { StyleSheet, Text, View, SafeAreaView, KeyboardAvoidingView, Image, TextInput, Pressable, Alert } from 'react-native'
|
|
import React, { useState } from 'react'
|
|
import { Fontisto } from '@expo/vector-icons';
|
|
import { Entypo } from '@expo/vector-icons';
|
|
import { AntDesign } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import axios from "axios";
|
|
|
|
const register = () => {
|
|
const [name, setName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const router = useRouter();
|
|
|
|
const handleRegister = () => {
|
|
const user = {
|
|
name: name,
|
|
email: email,
|
|
password: password,
|
|
}
|
|
axios.post("http://localhost:3030/register", user).then((res) => {
|
|
console.log(res);
|
|
Alert.alert("Registration succeeded!");
|
|
setEmail('');
|
|
setPassword('');
|
|
setName('');
|
|
}).catch((error) => {
|
|
Alert.alert("Registration failed!");
|
|
console.log("error", error);
|
|
})
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={{flex:1, backgroundColor: "white", alignItems: "center", justifyContent:"center"}}>
|
|
<View>
|
|
<View style={{alignItems: "center"}}>
|
|
<Image
|
|
style={{width: 150, height: 150, resizeMode: "containe"}}
|
|
source={{
|
|
uri:"./assets/images/logo.png",
|
|
}}
|
|
/>
|
|
</View>
|
|
<Text style={{fontSize: 24, fontWeight: 600, color: "#222831", marginTop: 20}}>Keep Tracking</Text>
|
|
</View>
|
|
<KeyboardAvoidingView>
|
|
<View style={{alignItems: "center"}}>
|
|
<Text style={{fontSize: 16, fontWeight: 600, color: "black", marginTop: 20}}>Register</Text>
|
|
</View>
|
|
|
|
<View style={{marginTop: 50}}>
|
|
<View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5}}>
|
|
<AntDesign name="user" size={16} color="#31363F" />
|
|
<TextInput value={name} onChangeText={(text) => setName(text)} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Username'/>
|
|
</View>
|
|
<View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5, marginTop: 10}}>
|
|
<Fontisto name="email" size={16} color="#31363F" />
|
|
<TextInput value={email} onChangeText={(text) => setEmail(text)} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your email'/>
|
|
</View>
|
|
|
|
<View style={{flexDirection: "row", justifyContent: "center", alignItems: "center", gap:5, backgroundColor: "#EEEEEE", paddingHorizontal:10, borderRadius:5, marginTop: 10}}>
|
|
<Entypo name="key" size={16} color="#31363F" />
|
|
<TextInput value={password} onChangeText={(text) => setPassword(text)} secureTextEntry={true} style={{color: "#31363F", width:250, outlineStyle: 'none', marginVertical: 10, fontSize:email ? 14 : 14}} placeholder='Enter your password'/>
|
|
</View>
|
|
|
|
<View style={{marginTop: 50}}/>
|
|
|
|
<Pressable onPress={handleRegister} style={{backgroundColor: "#61677A", padding:10, borderRadius:5, alignItems: "center"}}>
|
|
<Text style={{color: "#D8D9DA", fontSize: 16, fontWeight: 600}}>Register</Text>
|
|
</Pressable>
|
|
|
|
<Pressable onPress={() => router.replace("/login")} style={{marginTop: 10}}>
|
|
<Text style={{fontSize: 12, textAlign:"center"}}>Already have an account? <Text style={{fontWeight: 700}}>Login</Text></Text>
|
|
</Pressable>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
export default register
|
|
|
|
const styles = StyleSheet.create({}) |