From c5245be253e74749b48f1adfb41a9bd109692470 Mon Sep 17 00:00:00 2001
From: Loule | Louis <35641311+Loule95450@users.noreply.github.com>
Date: Wed, 28 Feb 2024 16:54:20 +0100
Subject: [PATCH] Add register

---
 .../AccountNavigator/AccountNavigator.tsx     |  3 +-
 src/screens/login/LoginScreen.tsx             | 14 +++-
 src/screens/register/RegisterScreen.styles.ts | 70 +++++++++++++++++++
 src/screens/register/RegisterScreen.tsx       | 57 +++++++++++++--
 4 files changed, 137 insertions(+), 7 deletions(-)

diff --git a/src/components/navigators/AccountNavigator/AccountNavigator.tsx b/src/components/navigators/AccountNavigator/AccountNavigator.tsx
index 53bd228d..2aa5b45c 100644
--- 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
index d2af935c..1f969017 100644
--- 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
index e69de29b..83f447ca 100644
--- 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
index 7f839d88..b0b755b3 100644
--- 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;