diff options
| author | Alberto Duarte (PWC) <alberto.duarte.delgado@pwc.com> | 2023-10-09 17:31:33 +0100 |
|---|---|---|
| committer | Alberto Duarte (PWC) <alberto.duarte.delgado@pwc.com> | 2023-10-09 17:31:33 +0100 |
| commit | 69b9513a19e8d0aa280bae8ec7b91dd5e81de2fa (patch) | |
| tree | 0d2e7e43874f26ac75687183552dc401d1bdd2cf /screens/signin.js | |
| parent | 6ff7c459e3d08ebdf6da6973ebe0410b5cab9c0a (diff) | |
Second commitmain
Diffstat (limited to 'screens/signin.js')
| -rw-r--r-- | screens/signin.js | 356 |
1 files changed, 178 insertions, 178 deletions
diff --git a/screens/signin.js b/screens/signin.js index 49d328d..85a179e 100644 --- a/screens/signin.js +++ b/screens/signin.js @@ -1,178 +1,178 @@ -import {useEffect, useState} from 'react'; -import { - Image, - Keyboard, - KeyboardAvoidingView, - Platform, - Pressable, - SafeAreaView, - Text, - TextInput, - TouchableWithoutFeedback, - View, -} from 'react-native'; - -import tw from 'twrnc'; - -import {EyeIcon} from 'react-native-heroicons/outline'; -import {EyeSlashIcon} from 'react-native-heroicons/outline'; -import auth from '@react-native-firebase/auth'; - -const SignIn = ({navigation}) => { - - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [isValidEmail, setIsValidEmail] = useState(false); - const [isValidPassword, setIsValidPassword] = useState(false); - const [isPasswordVisible, setIsPasswordVisible] = useState(true); - - useEffect(() => { - debounce(emailValidation()); - }, [email]); - - useEffect(() => { - debounce(passwordValidation()); - }, [password]); - - const emailValidation = () => { - const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; - if (!email || emailRegex.test(email) === false) { - setIsValidEmail(false); - return false; - } - setIsValidEmail(true); - return true; - }; - - const passwordValidation = () => { - const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]{8,}$/i; - - - if (!password || passwordRegex.test(password) === false) { - setIsValidPassword(false) - return false - } - setIsValidPassword(true) - return true - } - - // Utility FN · Mover a carpeta utils/utils.js - const debounce = fn => { - let id = null; - - return (...args) => { - if (id) { - clearTimeout(id); - } - id = setTimeout(() => { - fn(...args); - id = null; - }, 300); - }; - }; - - const loginUser = () => { - if (isValidEmail && isValidPassword) { - auth() - .signInWithEmailAndPassword(email, password) - .then(() => { - console.log('User signed in successfully!'); - // Navigate to the home screen or other desired screen - }) - .catch(error => { - console.error(error); - // Display an error message to the user - }); - } -}; - - return ( - <SafeAreaView style={tw`bg-black flex-1`}> - <TouchableWithoutFeedback - onPress={() => { - Keyboard.dismiss(); - }} - > - <KeyboardAvoidingView - behavior={Platform.OS === 'ios' ? 'padding' : 'height'} - style={tw`flex-1`} - > - <View style={tw`py-6 px-8 flex items-center justify-center`}> - <Image - source={require('../static/images/Vector.png')} - style={{ width: 140, height: 37 }} - /> - </View> - <View style={tw`flex-1 items-center justify-center px-12`}> - <Text style={tw`text-white text-2xl mb-12 self-start`}> - ingresar - </Text> - <TextInput - style={tw`h-12 px-4 font-medium bg-white/20 rounded w-full text-white mb-2 ${(!isValidEmail && email !== '') ? 'border border-red-500' : ''}`} - placeholderTextColor={tw.color('text-white/20')} - placeholder={'Email'} - value={email} - onChangeText={textInput => { - setEmail(textInput); - }} - autoCapitalize={'none'} - keyboardType={'email-address'} - /> - <Text - style={tw`text-red-500 self-start mb-6 ${ - (isValidEmail || email === '') && 'opacity-0' - }`} - > - email incorrecto. - </Text> - <View style={tw`relative flex flex-row`}> - <Pressable onPress={() => { - setIsPasswordVisible(!isPasswordVisible) - }} style={tw`absolute top-3 right-3 z-10`}> - {!isPasswordVisible? ( - <EyeSlashIcon style={tw`w-6 h-6 text-white/40`} /> - ) : ( - <EyeIcon style={tw`w-6 h-6 text-white/40`} /> - )} - </Pressable> - <TextInput - style={tw`h-12 px-4 font-medium bg-white/20 rounded w-full text-white mb-2 ${(!isValidPassword && password !== '') ? 'border border-red-500' : ''}`} - placeholderTextColor={tw.color('text-white/20')} - placeholder={'Contraseña'} - value={password} - onChangeText={passwordInput => { - setPassword(passwordInput) - }} - secureTextEntry={!isPasswordVisible} - /> - </View> - <Text - style={tw`text-red-500 self-start mb-6 ${ - (isValidPassword || password === '') && 'opacity-0' - }`} - > - debe contener a-b-0-! - </Text> - <Pressable style={tw`mb-12`} onPress={loginUser}> - <Text style={tw`text-white/40 text-xl`}>ingresar</Text> - </Pressable> - <Pressable - onPress={() => navigation.navigate('PasswordRecovery')} - style={tw`mb-16`} - > - <Text style={tw`text-white`}>¿olvidaste tu contraseña?</Text> - </Pressable> - <View style={tw`flex flex-row items-center`}> - <Text style={tw`text-white`}>¿no tienes una cuenta? </Text> - <Pressable onPress={() => navigation.navigate('SignUp')}> - <Text style={tw`text-red-500 font-bold`}>registrate</Text> - </Pressable> - </View> - </View> - </KeyboardAvoidingView> - </TouchableWithoutFeedback> - </SafeAreaView> - ); -}; - -export default SignIn; +import {useEffect, useState} from 'react';
+import {
+ Image,
+ Keyboard,
+ KeyboardAvoidingView,
+ Platform,
+ Pressable,
+ SafeAreaView,
+ Text,
+ TextInput,
+ TouchableWithoutFeedback,
+ View,
+} from 'react-native';
+
+import tw from 'twrnc';
+
+import {EyeIcon} from 'react-native-heroicons/outline';
+import {EyeSlashIcon} from 'react-native-heroicons/outline';
+import auth from '@react-native-firebase/auth';
+
+const SignIn = ({navigation}) => {
+
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [isValidEmail, setIsValidEmail] = useState(false);
+ const [isValidPassword, setIsValidPassword] = useState(false);
+ const [isPasswordVisible, setIsPasswordVisible] = useState(true);
+
+ useEffect(() => {
+ debounce(emailValidation());
+ }, [email]);
+
+ useEffect(() => {
+ debounce(passwordValidation());
+ }, [password]);
+
+ const emailValidation = () => {
+ const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+ if (!email || emailRegex.test(email) === false) {
+ setIsValidEmail(false);
+ return false;
+ }
+ setIsValidEmail(true);
+ return true;
+ };
+
+ const passwordValidation = () => {
+ const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]{8,}$/i;
+
+
+ if (!password || passwordRegex.test(password) === false) {
+ setIsValidPassword(false)
+ return false
+ }
+ setIsValidPassword(true)
+ return true
+ }
+
+ // Utility FN · Mover a carpeta utils/utils.js
+ const debounce = fn => {
+ let id = null;
+
+ return (...args) => {
+ if (id) {
+ clearTimeout(id);
+ }
+ id = setTimeout(() => {
+ fn(...args);
+ id = null;
+ }, 300);
+ };
+ };
+
+ const loginUser = () => {
+ if (isValidEmail && isValidPassword) {
+ auth()
+ .signInWithEmailAndPassword(email, password)
+ .then(() => {
+ console.log('User signed in successfully!');
+ // Navigate to the home screen or other desired screen
+ })
+ .catch(error => {
+ console.error(error);
+ // Display an error message to the user
+ });
+ }
+};
+
+ return (
+ <SafeAreaView style={tw`bg-black flex-1`}>
+ <TouchableWithoutFeedback
+ onPress={() => {
+ Keyboard.dismiss();
+ }}
+ >
+ <KeyboardAvoidingView
+ behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+ style={tw`flex-1`}
+ >
+ <View style={tw`py-6 px-8 flex items-center justify-center`}>
+ <Image
+ source={require('../static/images/Vector.png')}
+ style={{ width: 140, height: 37 }}
+ />
+ </View>
+ <View style={tw`flex-1 items-center justify-center px-12`}>
+ <Text style={tw`text-white text-2xl mb-12 self-start`}>
+ ingresar
+ </Text>
+ <TextInput
+ style={tw`h-12 px-4 font-medium bg-white/20 rounded w-full text-white mb-2 ${(!isValidEmail && email !== '') ? 'border border-red-500' : ''}`}
+ placeholderTextColor={tw.color('text-white/20')}
+ placeholder={'Email'}
+ value={email}
+ onChangeText={textInput => {
+ setEmail(textInput);
+ }}
+ autoCapitalize={'none'}
+ keyboardType={'email-address'}
+ />
+ <Text
+ style={tw`text-red-500 self-start mb-6 ${
+ (isValidEmail || email === '') && 'opacity-0'
+ }`}
+ >
+ email incorrecto.
+ </Text>
+ <View style={tw`relative flex flex-row`}>
+ <Pressable onPress={() => {
+ setIsPasswordVisible(!isPasswordVisible)
+ }} style={tw`absolute top-3 right-3 z-10`}>
+ {!isPasswordVisible? (
+ <EyeSlashIcon style={tw`w-6 h-6 text-white/40`} />
+ ) : (
+ <EyeIcon style={tw`w-6 h-6 text-white/40`} />
+ )}
+ </Pressable>
+ <TextInput
+ style={tw`h-11 px-4 font-medium bg-white/20 rounded w-full text-white mb-2 ${(!isValidPassword && password !== '') ? 'border border-red-500' : ''}`}
+ placeholderTextColor={tw.color('text-white/20')}
+ placeholder={'Contraseña'}
+ value={password}
+ onChangeText={passwordInput => {
+ setPassword(passwordInput)
+ }}
+ secureTextEntry={!isPasswordVisible}
+ />
+ </View>
+ <Text
+ style={tw`text-red-500 self-start mb-6 ${
+ (isValidPassword || password === '') && 'opacity-0'
+ }`}
+ >
+ debe contener a-b-0-!
+ </Text>
+ <Pressable style={tw`mb-12`} onPress={loginUser}>
+ <Text style={tw`text-white/40 text-xl`}>ingresar</Text>
+ </Pressable>
+ <Pressable
+ onPress={() => navigation.navigate('PasswordRecovery')}
+ style={tw`mb-16`}
+ >
+ <Text style={tw`text-white`}>¿olvidaste tu contraseña?</Text>
+ </Pressable>
+ <View style={tw`flex flex-row items-center`}>
+ <Text style={tw`text-white`}>¿no tienes una cuenta? </Text>
+ <Pressable onPress={() => navigation.navigate('SignUp')}>
+ <Text style={tw`text-red-500 font-bold`}>registrate</Text>
+ </Pressable>
+ </View>
+ </View>
+ </KeyboardAvoidingView>
+ </TouchableWithoutFeedback>
+ </SafeAreaView>
+ );
+};
+
+export default SignIn;
|