Skip to content

21_22-J 38
21_22-J 38
Commit 77ce6864 authored by RusiraPathum's avatar RusiraPathum
Browse files
Options

validations

parent 013e76fd
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 54 deletions
frontend/src/screen/auth/Register.js
View file @ 77ce6864
import React from "react"; import React, { useState } from "react";
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { SafeAreaView, ScrollView, View, StyleSheet, ImageBackground, Text, TextInput, TouchableOpacity, Image } from "react-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 Register = () => {
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => { const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations(); // The screen is focused
Orientation.lockToPortrait(); // Call any action
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
}); });
return unsubscribe; 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> <SafeAreaView>
<ScrollView> <ScrollView>
<View style={styles.continer}> <View style={styles.continer}>
<ImageBackground style={styles.backgroundImage} source={require('../../assets/login/login_background.png')} resizeMode="cover"> <ImageBackground style={styles.backgroundImage} source={require('../../assets/login/login_background.png')} resizeMode="cover">
<View> <View>
<Image style={styles.logo} source={require('../../assets/login/logo1.png')} resizeMode="contain"></Image> <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>
<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}> <View style={styles.form_input}>
<TextInput style={styles.text_input} placeholder="Enter Email"></TextInput> <TextInput value={name} onChangeText={value => handleOnChangeText(value, 'name')} style={styles.text_input} placeholder="Enter Name"></TextInput>
</View> </View>
<View style={styles.form_input}> <View style={styles.form_input}>
<TextInput keyboardType="visible-password" style={styles.text_input} placeholder="Enter Password"></TextInput> <TextInput value={email} onChangeText={value => handleOnChangeText(value, 'email')} autoCapitalize="none" style={styles.text_input} placeholder="Enter Email"></TextInput>
</View> </View>
<View style={styles.form_input}> <View style={styles.form_input}>
<TextInput keyboardType="visible-password" style={styles.text_input} placeholder="Enter Password"></TextInput> <TextInput value={password} onChangeText={value => handleOnChangeText(value, 'password')} autoCapitalize="none" secureTextEntry style={styles.text_input} placeholder="Enter Password"></TextInput>
</View> </View>
<View style={styles.form_input}> <View style={styles.form_input}>
<TouchableOpacity onPress={()=> { navigation.navigate("Start")}} style={styles.btn}> <TextInput value={confirmPassword} onChangeText={value => handleOnChangeText(value, 'confirmPassword')} autoCapitalize="none" secureTextEntry style={styles.text_input} placeholder="Enter Password"></TextInput>
<Text style={styles.btn_text}> </View>
Sign Up
</Text>
</TouchableOpacity>
</View>
<View style={styles.text_if}> <View style={styles.form_input}>
<TouchableOpacity onPress={()=> { navigation.navigate("Login")}}> <TouchableOpacity onPress={submitForm} style={styles.btn}>
<Text style={styles.btn_text}> <Text style={styles.btn_text}>
If you have an account? Sign In Sign Up
</Text> </Text>
</TouchableOpacity> </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>
</View>
</ImageBackground> </ImageBackground>
</View> </View>
</ScrollView> </ScrollView>
...@@ -67,24 +140,24 @@ const Register = () => { ...@@ -67,24 +140,24 @@ const Register = () => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
continer:{ continer: {
flex:1 flex: 1
}, },
backgroundImage:{ backgroundImage: {
width: '100%', width: '100%',
height: 900 height: 900
}, },
logo:{ logo: {
marginTop: 70, marginTop: 70,
marginLeft: 50, marginLeft: 50,
width: '80%', width: '80%',
height: '40%' height: '40%'
}, },
main_container:{ main_container: {
marginTop: -190, marginTop: -190,
marginLeft: 30, marginLeft: 30,
width: 350, width: 350,
height: 610, height: 630,
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
borderColor: '#000000', borderColor: '#000000',
borderRadius: 50, borderRadius: 50,
...@@ -96,43 +169,43 @@ const styles = StyleSheet.create({ ...@@ -96,43 +169,43 @@ const styles = StyleSheet.create({
width: 1 width: 1
}, },
}, },
main_title:{ main_title: {
textAlign: 'center', textAlign: 'center',
fontSize: 40, fontSize: 40,
color: '#000000' color: '#000000'
}, },
form_input:{ form_input: {
marginTop: 5, marginTop: 5,
padding: 20, padding: 20,
},text_input:{ }, text_input: {
padding: 15, padding: 15,
fontSize: 16, fontSize: 16,
borderWidth: 1, borderWidth: 1,
borderRadius: 50, borderRadius: 50,
backgroundColor: '#EDEDED', backgroundColor: '#EDEDED',
color:'#000000' color: '#000000'
},btn:{ }, btn: {
padding: 15, padding: 15,
borderRadius: 50, borderRadius: 50,
backgroundColor: '#1DCE92', backgroundColor: '#1DCE92',
width: 150, width: 150,
textAlign: 'center', textAlign: 'center',
alignItems: 'center', alignItems: 'center',
marginLeft: 80 marginLeft: 80
}, },
btn_text:{ btn_text: {
fontSize: 20, fontSize: 20,
fontWeight: 'bold', fontWeight: 'bold',
color:'#000000' color: '#000000',
}, },
text_if:{ text_if: {
fontSize: 20, fontSize: 20,
fontWeight: 'bold', fontWeight: 'bold',
color:'#000000', color: '#000000',
textAlign: 'center', textAlign: 'center',
alignItems: 'center', alignItems: 'center',
marginTop: 10 marginTop: 10
} }
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment