first commit

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;