Add register

CodingFactory-Repos · Feb 28, 2024 · c5245be · c5245be
1 parent b9185b8
commit c5245be
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 7 deletions.
diff --git a/src/components/navigators/AccountNavigator/AccountNavigator.tsx b/src/components/navigators/AccountNavigator/AccountNavigator.tsx
@@ -8,6 +8,7 @@ import {
   AccountNavigatorParamList,
 } from './AccountNavigator.interfaces.ts';
 import LoginScreen from '../../../screens/login/LoginScreen.tsx';
+import RegisterScreen from '../../../screens/register/RegisterScreen.tsx';
 
 const Stack = createNativeStackNavigator<AccountNavigatorParamList>();
 
@@ -42,7 +43,7 @@ export default function AccountNavigator() {
       />
       <Stack.Screen
         name={ACCOUNT_NAVIGATOR_ROUTES.REGISTER}
-        component={Example}
+        component={RegisterScreen}
       />
     </Stack.Navigator>
   );

diff --git a/src/screens/login/LoginScreen.tsx b/src/screens/login/LoginScreen.tsx
@@ -8,8 +8,16 @@ import {
   View,
 } from 'react-native';
 import {styles} from './LoginScreen.styles.ts';
+import {useNavigation} from '@react-navigation/native';
+import {ACCOUNT_NAVIGATOR_ROUTES} from '../../components/navigators/AccountNavigator/AccountNavigator.interfaces.ts';
 
 const LoginScreen = () => {
+  const navigation = useNavigation();
+
+  function RedirectToRegister() {
+    navigation.navigate(ACCOUNT_NAVIGATOR_ROUTES.REGISTER);
+  }
+
   return (
     <>
       <SafeAreaView style={styles.safeAreaView}>
@@ -36,7 +44,11 @@ const LoginScreen = () => {
           <View style={styles.buttonView}>
             <View style={styles.row}>
               <Text style={styles.leftText}>Forgot Password?</Text>
-              <Text style={styles.rightText}>You don't have an account?</Text>
+              <Text
+                style={styles.rightText}
+                onPress={() => RedirectToRegister()}>
+                Don't have an account?
+              </Text>
             </View>
           </View>
         </View>

diff --git a/src/screens/register/RegisterScreen.styles.ts b/src/screens/register/RegisterScreen.styles.ts
@@ -0,0 +1,70 @@
+import {StyleSheet} from 'react-native';
+import {Colors} from '../../utils/colors.ts';
+
+const baseTextInput = {
+  borderWidth: 1,
+  padding: 10,
+  borderRadius: 10,
+  borderColor: 'gray',
+};
+
+export const styles = StyleSheet.create({
+  safeAreaView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: 200,
+    height: 200,
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  view: {
+    flex: 3,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    backgroundColor: Colors.primary,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    marginTop: 20,
+  },
+  innerView: {
+    width: '80%',
+  },
+  textInput: {
+    ...baseTextInput,
+  },
+  passwordInput: {
+    ...baseTextInput,
+    marginTop: 10,
+    color: 'black',
+  },
+  buttonView: {
+    marginTop: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  leftText: {
+    textAlign: 'left',
+    width: '50%',
+  },
+  rightText: {
+    textAlign: 'right',
+    width: '100%',
+  },
+  button: {
+    backgroundColor: 'white',
+    padding: 10,
+    borderRadius: 10,
+    marginTop: 50,
+    alignItems: 'center',
+    width: '80%',
+  },
+  buttonText: {
+    fontSize: 18,
+  },
+});
diff --git a/src/screens/register/RegisterScreen.tsx b/src/screens/register/RegisterScreen.tsx
@@ -1,12 +1,59 @@
 import React from 'react';
-import {SafeAreaView, Text} from 'react-native';
+import {
+  Image,
+  SafeAreaView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {styles} from './RegisterScreen.styles.ts';
+import {useNavigation} from '@react-navigation/native';
+import {ACCOUNT_NAVIGATOR_ROUTES} from '../../components/navigators/AccountNavigator/AccountNavigator.interfaces.ts';
 
 const RegisterScreen = () => {
+  const navigation = useNavigation();
+
+  function RedirectToLogin() {
+    navigation.navigate(ACCOUNT_NAVIGATOR_ROUTES.LOGIN);
+  }
+
   return (
-    <SafeAreaView>
-      <Text>RegisterScreen</Text>
-    </SafeAreaView>
+    <>
+      <SafeAreaView style={styles.safeAreaView}>
+        <Image
+          source={require('../../../assets/kayu.png')}
+          style={styles.image}
+        />
+        <Text style={styles.text}>Welcome to Kayu</Text>
+      </SafeAreaView>
+      <View style={styles.view}>
+        <View style={styles.innerView}>
+          <View>
+            <TextInput
+              placeholder="Email"
+              textContentType={'emailAddress'}
+              style={styles.textInput}
+            />
+            <TextInput
+              placeholder="Password"
+              textContentType={'password'}
+              style={styles.passwordInput}
+            />
+          </View>
+          <View style={styles.buttonView}>
+            <View style={styles.row}>
+              <Text style={styles.rightText} onPress={() => RedirectToLogin()}>
+                Already have an account?
+              </Text>
+            </View>
+          </View>
+        </View>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>Login</Text>
+        </TouchableOpacity>
+      </View>
+    </>
   );
 };
-
 export default RegisterScreen;