validation

frontend/src/screen/auth/Login.js

 import { useNavigation } from "@react-navigation/native";
 import Orientation from 'react-native-orientation-locker';
-import React from "react";
+import React, { useState } from "react";
 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 Login = () => {
 
     const navigation = useNavigation();
@@ -15,6 +31,46 @@ const Login = () => {
         return unsubscribe;
       }, [navigation]);
 
+      const [userInfo, setUserInfo] = useState({
+        email: '',
+        password: '',
+    });
+
+    const { email, password } = 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);
+        }
+
+        if (!isValidEmail(email)){
+            return updateError('Invalid email !', setError);
+        }
+
+        if (!password.trim() || password.length < 8){
+            return updateError('Password is less than 8 characters !', setError);
+        }
+
+        return true;
+    }
+
+    const submitForm = () => {
+        if (isValidForm()){
+            ()=> { navigation.navigate("Start")}
+            console.log(userInfo);
+        }
+    }
+
     return(
         <SafeAreaView>
             <ScrollView>
@@ -25,16 +81,19 @@ const Login = () => {
                     </View>
                     <View elevation={5} style={styles.main_container}>
                         <Text style={styles.main_title}>Sign In</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>
+                            <TextInput value={email} autoCapitalize="none" onChangeText={value => handleOnChangeText(value, 'email')} 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>
+                            <TextInput value={password} autoCapitalize="none" secureTextEntry onChangeText={value => handleOnChangeText(value, 'password')} keyboardType="visible-password" style={styles.text_input} placeholder="Enter Password"></TextInput>
                         </View>
 
                         <View style={styles.form_input}>
-                        <TouchableOpacity onPress={()=> { navigation.navigate("Start")}} style={styles.btn}>
+                        <TouchableOpacity onPress={submitForm} style={styles.btn}>
                                 <Text style={styles.btn_text}>
                                     Sign In
                                 </Text>
@@ -42,8 +101,8 @@ const Login = () => {
                         </View>
 
                         <View style={styles.text_if}>
-                        <TouchableOpacity onPress={()=> { navigation.navigate("Register")}}>
-                                <Text style={styles.btn_text}>
+                        <TouchableOpacity  onPress={()=> { navigation.navigate("Register")}}>
+                                <Text style={styles.btn_text2}>
                                 If you don't have account? Sign Up
                                 </Text>
                                 </TouchableOpacity>
@@ -115,7 +174,12 @@ const styles = StyleSheet.create({
     btn_text:{
         fontSize: 20,
         fontWeight: 'bold',
-        color:'#000000'
+        color:'#000000',
+    },btn_text2:{
+        fontSize: 20,
+        fontWeight: 'bold',
+        color:'#000000',
+        marginTop:-10
     },
     text_if:{
         fontSize: 20,