From ec155c25f76be974bb7072f293218460399c8a29 Mon Sep 17 00:00:00 2001
From: Oli <olifer97@gmail.com>
Date: Wed, 6 May 2020 22:26:01 -0300
Subject: [PATCH] Add register screen.

---
 src/app/components/TabBarIcon/index.js        |  4 +-
 src/app/components/TabBarIcon/styles.js       |  9 +++
 src/app/index.js                              |  2 +
 src/app/screens/LoginScreen/index.js          | 10 ++-
 src/app/screens/SignUpScreen/index.js         | 67 +++++++++++++++++++
 src/app/screens/SignUpScreen/styles.js        | 45 +++++++++++++
 src/constants/routes.js                       |  3 +-
 .../LoginScreen/utils.js => utils/email.js}   |  0
 8 files changed, 136 insertions(+), 4 deletions(-)
 create mode 100644 src/app/components/TabBarIcon/styles.js
 create mode 100644 src/app/screens/SignUpScreen/index.js
 create mode 100644 src/app/screens/SignUpScreen/styles.js
 rename src/{app/screens/LoginScreen/utils.js => utils/email.js} (100%)

diff --git a/src/app/components/TabBarIcon/index.js b/src/app/components/TabBarIcon/index.js
index 55e3218..4a4ce05 100644
--- a/src/app/components/TabBarIcon/index.js
+++ b/src/app/components/TabBarIcon/index.js
@@ -3,12 +3,14 @@ import React from 'react';
 
 import { COLORS } from '@constants/colors';
 
+import styles from './styles';
+
 export default function TabBarIcon({ name, focused }) {
   return (
     <Ionicons
       name={name}
       size={30}
-      style={{ marginBottom: -3 }}
+      style={styles.icon}
       color={focused ? COLORS.main : COLORS.gray}
     />
   );
diff --git a/src/app/components/TabBarIcon/styles.js b/src/app/components/TabBarIcon/styles.js
new file mode 100644
index 0000000..25ca003
--- /dev/null
+++ b/src/app/components/TabBarIcon/styles.js
@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  icon: {
+    marginBottom: -3
+  }
+});
+
+export default styles;
diff --git a/src/app/index.js b/src/app/index.js
index d8cac20..fb92749 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -7,6 +7,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { ROUTES } from '@constants/routes';
 import { COLORS } from '@constants/colors';
 import LoginScreen from '@screens/LoginScreen';
+import SignUpScreen from '@screens/SignUpScreen';
 import InitialLoading from '@screens/InitialLoading';
 import HomeScreen from '@screens/HomeScreen';
 import NotificationsScreen from '@screens/NotificationsScreen';
@@ -91,6 +92,7 @@ export default function App() {
       <Stack.Navigator initialRouteName={ROUTES.Login} headerMode="none">
         <Stack.Screen name={ROUTES.InitialLoading} component={InitialLoading} />
         <Stack.Screen name={ROUTES.Login} component={LoginScreen} />
+        <Stack.Screen name={ROUTES.SignUp} component={SignUpScreen} />
         <Stack.Screen name={ROUTES.Home} component={TabNavigatorScreen} />
       </Stack.Navigator>
     </NavigationContainer>
diff --git a/src/app/screens/LoginScreen/index.js b/src/app/screens/LoginScreen/index.js
index 80cc07e..0ddcb52 100644
--- a/src/app/screens/LoginScreen/index.js
+++ b/src/app/screens/LoginScreen/index.js
@@ -4,7 +4,7 @@ import { View, SafeAreaView, TextInput, Text } from 'react-native';
 import CustomButton from '@components/CustomButton';
 import { ROUTES } from '@constants/routes';
 
-import { validateEmail } from './utils';
+import { validateEmail } from '@utils/email';
 
 import styles from './styles';
 
@@ -24,7 +24,7 @@ function LoginScreen({ navigation }) {
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>TU2BO</Text>
+      <Text style={styles.title}>Tu2bo</Text>
       <View styles={styles.loginContainer}>
         <TextInput
           style={styles.input}
@@ -49,6 +49,12 @@ function LoginScreen({ navigation }) {
           onPress={onSubmit}
           disable={disable}
         />
+        <CustomButton
+          text="UNIRSE"
+          style={styles.loginButton}
+          textStyle={styles.loginButtonText}
+          onPress={() => navigation.navigate(ROUTES.SignUp)}
+        />
       </View>
     </SafeAreaView>
   );
diff --git a/src/app/screens/SignUpScreen/index.js b/src/app/screens/SignUpScreen/index.js
new file mode 100644
index 0000000..61f9f21
--- /dev/null
+++ b/src/app/screens/SignUpScreen/index.js
@@ -0,0 +1,67 @@
+import React, { useCallback, useState } from 'react';
+import { View, SafeAreaView, TextInput, Text } from 'react-native';
+
+import CustomButton from '@components/CustomButton';
+import { ROUTES } from '@constants/routes';
+
+import { validateEmail } from '@utils/email';
+
+import styles from './styles';
+
+function SignUpScreen({ navigation }) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPw, setConfirmPw] = useState('');
+
+  const emailValid = validateEmail(email);
+  const passwordValid = password.length > 0;
+  const disable = !emailValid || !passwordValid || password !== confirmPw;
+
+  const onSubmit = useCallback(() => {
+    navigation.navigate(ROUTES.Login);
+    setEmail('');
+    setPassword('');
+    setConfirmPw('');
+  }, [navigation]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Tu2bo</Text>
+      <View styles={styles.loginContainer}>
+        <TextInput
+          style={styles.input}
+          onChangeText={setEmail}
+          value={email}
+          label="Email"
+          placeholder="Email"
+          keyboardType="email-address"
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={setPassword}
+          value={password}
+          label="Password"
+          placeholder="Contraseña"
+          secureTextEntry
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={setConfirmPw}
+          value={confirmPw}
+          label="Confirm Password"
+          placeholder="Confirmar Contraseña"
+          secureTextEntry
+        />
+        <CustomButton
+          text="REGISTRARSE"
+          style={[styles.loginButton, disable && styles.buttonDisable]}
+          textStyle={disable ? styles.textDisable : styles.loginButtonText}
+          onPress={onSubmit}
+          disable={disable}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+export default SignUpScreen;
diff --git a/src/app/screens/SignUpScreen/styles.js b/src/app/screens/SignUpScreen/styles.js
new file mode 100644
index 0000000..a25c72f
--- /dev/null
+++ b/src/app/screens/SignUpScreen/styles.js
@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../../../constants/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.main
+  },
+  title: {
+    fontSize: 40,
+    fontWeight: 'bold',
+    color: COLORS.white,
+    marginBottom: 30
+  },
+  loginContainer: {
+    flex: 1
+  },
+  input: {
+    backgroundColor: COLORS.white,
+    borderRadius: 5,
+    marginBottom: 20,
+    padding: 5,
+    width: 200
+  },
+  loginButton: {
+    backgroundColor: COLORS.main,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: COLORS.white,
+    marginBottom: 10
+  },
+  buttonDisable: {
+    borderColor: COLORS.gray
+  },
+  loginButtonText: {
+    color: COLORS.white
+  },
+  textDisable: {
+    color: COLORS.gray
+  }
+});
+
+export default styles;
diff --git a/src/constants/routes.js b/src/constants/routes.js
index d53493e..b7d31b4 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -5,5 +5,6 @@ export const ROUTES = {
   Wall: 'Muro',
   VideoScreen: 'VideoScreen',
   Notifications: 'Notificaciones',
-  Profile: 'Perfil'
+  Profile: 'Perfil',
+  SignUp: 'Registro'
 };
diff --git a/src/app/screens/LoginScreen/utils.js b/src/utils/email.js
similarity index 100%
rename from src/app/screens/LoginScreen/utils.js
rename to src/utils/email.js