validations

frontend/src/screen/auth/Register.js

-import React from "react";
+import React, { useState } from "react";
 import Orientation from 'react-native-orientation-locker';
 import { useNavigation } from "@react-navigation/native";
 import { SafeAreaView, ScrollView, View, StyleSheet, ImageBackground, Text, TextInput, TouchableOpacity, Image } from "react-native";
 
+const isValidObjectField = (obj) => {
+    return Object.values(obj).every(value => value.trim());
+}
+
+const updateError = (error, stateUpdater) => {
+    stateUpdater(error);
+    setTimeout( () => {
+        stateUpdater('')
+    }, 2500);
+}
+
+const isValidEmail = (value) => {
+    const regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
+    return regex.test(value);
+}
+
 const Register = () => {
 
     const navigation = useNavigation();
 
     React.useEffect(() => {
+
         const unsubscribe = navigation.addListener("focus", () => {
-          Orientation.unlockAllOrientations();
-          Orientation.lockToPortrait();
+            // The screen is focused
+            // Call any action
+            Orientation.unlockAllOrientations();
+            Orientation.lockToPortrait();
         });
+
         return unsubscribe;
-      }, [navigation]);
+    }, [navigation]);
+
+    
+
+    const [userInfo, setUserInfo] = useState({
+        name: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+    });
+
+    const { name, email, password, confirmPassword } = userInfo;
+
+    const handleOnChangeText = (value, fieldName) => {
+
+        setUserInfo({ ...userInfo, [fieldName]: value });
+
+        // console.log(value, fieldName);
+    };
+
+    const [ error, setError ] = useState('');
+
+    const isValidForm = () => {
+
+        if (!isValidObjectField(userInfo)) {
+            return updateError('Required all fields!', setError);
+        }
 
-    return(
+        if (!name.trim() || name.length < 3){
+            return updateError('Invalid name !', setError);
+        }
+
+        if (!isValidEmail(email)){
+            return updateError('Invalid email !', setError);
+        }
+
+        if (!password.trim() || password.length < 8){
+            return updateError('Password is less than 8 characters !', setError);
+        }
+
+        if (password !== confirmPassword){
+            return updateError('Password dose not match !', setError);
+        }
+
+        return true;
+    }
+
+    const submitForm = () => {
+        if (isValidForm()){
+            console.log(userInfo);
+        }
+    }
+
+    return (
         <SafeAreaView>
             <ScrollView>
-                <View style={styles.continer}>               
-                    <ImageBackground style={styles.backgroundImage} source={require('../../assets/login/login_background.png')} resizeMode="cover">                   
-                    <View>
+                <View style={styles.continer}>
+                    <ImageBackground style={styles.backgroundImage} source={require('../../assets/login/login_background.png')} resizeMode="cover">
+                        <View>
                         <Image style={styles.logo} source={require('../../assets/login/logo1.png')} resizeMode="contain"></Image>
-                    </View>
-                    <View elevation={5} style={styles.main_container}>
-                        <Text style={styles.main_title}>Sign Up</Text>
-
-                        <View style={styles.form_input}>
-                            <TextInput style={styles.text_input} placeholder="Enter Email"></TextInput>
                         </View>
+                        <View elevation={5} style={styles.main_container}>
+                            <Text style={styles.main_title}>Sign Up</Text>
+                            
+                            {error ? (<Text style={{color: 'red', fontSize: 18, textAlign: 'center'}}>{error}</Text>) : null}
 
-                        <View style={styles.form_input}>
-                            <TextInput style={styles.text_input} placeholder="Enter Email"></TextInput>
-                        </View>
+                            <View style={styles.form_input}>
+                                <TextInput value={name} onChangeText={value => handleOnChangeText(value, 'name')} style={styles.text_input} placeholder="Enter Name"></TextInput>
+                            </View>
 
-                        <View style={styles.form_input}>
-                            <TextInput keyboardType="visible-password" style={styles.text_input} placeholder="Enter Password"></TextInput>
-                        </View>
+                            <View style={styles.form_input}>
+                                <TextInput value={email} onChangeText={value => handleOnChangeText(value, 'email')} autoCapitalize="none" style={styles.text_input} placeholder="Enter Email"></TextInput>
+                            </View>
 
-                        <View style={styles.form_input}>
-                            <TextInput keyboardType="visible-password" style={styles.text_input} placeholder="Enter Password"></TextInput>
-                        </View>
+                            <View style={styles.form_input}>
+                                <TextInput value={password} onChangeText={value => handleOnChangeText(value, 'password')} autoCapitalize="none" secureTextEntry style={styles.text_input} placeholder="Enter Password"></TextInput>
+                            </View>
 
-                        <View style={styles.form_input}>
-                        <TouchableOpacity onPress={()=> { navigation.navigate("Start")}} style={styles.btn}>
-                                <Text style={styles.btn_text}>
-                                    Sign Up
-                                </Text>
-                            </TouchableOpacity>
-                        </View>
+                            <View style={styles.form_input}>
+                                <TextInput value={confirmPassword} onChangeText={value => handleOnChangeText(value, 'confirmPassword')} autoCapitalize="none" secureTextEntry style={styles.text_input} placeholder="Enter Password"></TextInput>
+                            </View>
 
-                        <View style={styles.text_if}>
-                        <TouchableOpacity onPress={()=> { navigation.navigate("Login")}}>
-                                <Text style={styles.btn_text}>
-                                If you have an account? Sign In
-                                </Text>
+                            <View style={styles.form_input}>
+                                <TouchableOpacity onPress={submitForm} style={styles.btn}>
+                                    <Text style={styles.btn_text}>
+                                        Sign Up
+                                    </Text>
                                 </TouchableOpacity>
+                            </View>
+
+                            <View style={styles.text_if}>
+                                <TouchableOpacity onPress={() => { navigation.navigate("Login") }}>
+                                    <Text style={styles.btn_text}>
+                                        If you have an account? Sign In
+                                    </Text>
+                                </TouchableOpacity>
+                            </View>
                         </View>
-                    </View>
                     </ImageBackground>
                 </View>
             </ScrollView>
@@ -67,24 +140,24 @@ const Register = () => {
 
 const styles = StyleSheet.create({
 
-    continer:{
-        flex:1
+    continer: {
+        flex: 1
     },
-    backgroundImage:{
+    backgroundImage: {
         width: '100%',
         height: 900
     },
-    logo:{
+    logo: {
         marginTop: 70,
         marginLeft: 50,
         width: '80%',
         height: '40%'
     },
-    main_container:{
+    main_container: {
         marginTop: -190,
         marginLeft: 30,
         width: 350,
-        height: 610,
+        height: 630,
         backgroundColor: "#ffffff",
         borderColor: '#000000',
         borderRadius: 50,
@@ -96,43 +169,43 @@ const styles = StyleSheet.create({
             width: 1
         },
     },
-    main_title:{
+    main_title: {
         textAlign: 'center',
         fontSize: 40,
         color: '#000000'
     },
-    form_input:{
+    form_input: {
         marginTop: 5,
         padding: 20,
-    },text_input:{
+    }, text_input: {
         padding: 15,
         fontSize: 16,
         borderWidth: 1,
         borderRadius: 50,
         backgroundColor: '#EDEDED',
-        color:'#000000'
-        
-    },btn:{
+        color: '#000000'
+
+    }, btn: {
         padding: 15,
         borderRadius: 50,
         backgroundColor: '#1DCE92',
         width: 150,
         textAlign: 'center',
         alignItems: 'center',
-        marginLeft: 80   
+        marginLeft: 80
     },
-    btn_text:{
+    btn_text: {
         fontSize: 20,
         fontWeight: 'bold',
-        color:'#000000'
+        color: '#000000',
     },
-    text_if:{
+    text_if: {
         fontSize: 20,
         fontWeight: 'bold',
-        color:'#000000',
+        color: '#000000',
         textAlign: 'center',
         alignItems: 'center',
-        marginTop: 10 
+        marginTop: 10
     }
 
 })