Register Screen
user_9363972
javascript
12 days ago
3.7 kB
5
Indexable
Never
import { View, StyleSheet, Image, TouchableOpacity, ScrollView, Text, Alert, } from "react-native"; import { Button } from "../components/ButtonComponent"; import { Input } from "../components/InputComponent"; import { styles } from "../styles/style"; import { createProfile } from "../store/actions/profileAction"; import { useDispatch, useSelector } from "react-redux"; import { useEffect, useState } from "react"; const RegisterScreenJS = ({ navigation }) => { const data = useSelector((store) => store.profileReducer); const dispatch = useDispatch(); const [isPassVisible, setIsPassVisible] = useState(false); const [isEmail, setIsEmail] = useState(false); const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/; const [form, setForm] = useState({ username: "", password: "", email: "", }); useEffect(() => { console.log(data); }, []); function changeInput(type, value) { if (type === "email") { emailRegex.test(value) ? setIsEmail(true) : setIsEmail(false); } setForm({ ...form, [type]: value, }); } function sendData() { if ( form.username === "" || form.email === "" || form.password === "" || !isEmail ) { Alert.alert( "Error", "Make sure you fill all the field with the right information!" ); } else { dispatch(createProfile(form)); Alert.alert("Success", "Successfully create an account!", [ { text: "OK", onPress: () => navigation.navigate("Login"), }, ]); } } return ( <ScrollView contentContainerStyle={styles.scroll}> <View style={styles.mainContainerLogin}> <View style={styles.imageContainer}> <Image style={styles.image} source={require("../assets/images/login.png")} /> <Text>Register</Text> </View> <View style={styles.inputContainerLogin}> <Input title="Username" placeholder="Username" onChangeText={(text) => { changeInput("username", text); }} /> </View> <View style={styles.inputContainerLogin}> <Input title="Email" placeholder="Email" onChangeText={(text) => { changeInput("email", text); }} /> {isEmail ? null : ( <View style={styles.warningContainer}> <Text style={styles.warning}> Please input the right email format! </Text> </View> )} </View> <View style={styles.inputContainerLogin}> <Input title="Password" placeholder="Password" isPassword={true} secureTextEntry={isPassVisible} iconName={isPassVisible ? "eye-off" : "eye"} onPress={() => setIsPassVisible(!isPassVisible)} onChangeText={(text) => { changeInput("password", text); }} /> </View> <Button text="Register" onPress={() => sendData()} /> <View style={styles.textContainer}> <Text style={styles.textLogin}>Already have an account?</Text> <TouchableOpacity onPress={() => { navigation.navigate("Login"); }} > <Text style={styles.registerText}>Login</Text> </TouchableOpacity> </View> </View> </ScrollView> ); }; export default RegisterScreenJS;
Leave a Comment