diff options
Diffstat (limited to 'screens/signup.js')
| -rw-r--r-- | screens/signup.js | 201 |
1 files changed, 201 insertions, 0 deletions
diff --git a/screens/signup.js b/screens/signup.js new file mode 100644 index 0000000..73edf4f --- /dev/null +++ b/screens/signup.js @@ -0,0 +1,201 @@ +import {useEffect, useState} from 'react'; +import { + Keyboard, + KeyboardAvoidingView, + Platform, + Pressable, + SafeAreaView, + Text, + TextInput, + TouchableWithoutFeedback, + View, +} from 'react-native'; + +import auth from '@react-native-firebase/auth'; +import tw from 'twrnc'; +import {useToast} from 'react-native-toast-notifications'; + +import Logo from '../static/images/netflix-logo.svg'; +import {EyeIcon} from 'react-native-heroicons/outline'; +import {EyeSlashIcon} from 'react-native-heroicons/outline'; + +const SignUp = ({navigation}) => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isValidEmail, setIsValidEmail] = useState(false); + const [isValidPassword, setIsValidPassword] = useState(false); + const [isPasswordVisible, setIsPasswordVisible] = useState(false); + + const toast = useToast(); + + 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])(?=.*[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 registerUser = () => { + if (isValidEmail && isValidPassword) { + auth() + .createUserWithEmailAndPassword(email, password) + .then(() => { + console.log('User account created & signed in!'); + }) + .catch(error => { + if (error.code === 'auth/email-already-in-use') { + console.log('That email address is already in use!'); + toast.show({ + type: 'info', + text1: 'Este email ya existe.', + text2: 'Por favor prueba un diferente.' + }); + toast.show('Este email ya existe', { + type: 'info', + data: { + subtitle: 'Por favor prueba uno diferente.', + }, + }); + console.log('hello') + return error + } + + if (error.code === 'auth/invalid-email') { + console.log('That email address is invalid!'); + return error + } + + console.error(error); + }); + } + }; + + 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`}> + </View> + <View style={tw`flex-1 items-center justify-center px-12`}> + <Text style={tw`text-white text-2xl mb-12 self-start`}> + Registrate + </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); + }} + autoCorrect={false} + 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 + onPress={() => { + registerUser(); + }} + style={tw`mb-12`} + > + <Text style={tw`text-white/40 text-xl`}>Registrate</Text> + </Pressable> + <View style={tw`flex flex-row items-center`}> + <Text style={tw`text-white`}>¿Ya tienes una cuenta? </Text> + <Pressable onPress={() => navigation.navigate('SignIn')}> + <Text style={tw`text-red-500 font-bold`}>Ingresa</Text> + </Pressable> + </View> + </View> + </KeyboardAvoidingView> + </TouchableWithoutFeedback> + </SafeAreaView> + ); +}; + +export default SignUp; |