feat: enhance login screen with social login options

apps/native/app/(auth)/login.tsx

@@ -1,3 +1,165 @@
-import LoginScreen from "@/screens/auth/Login.screen";
+import React, { useState } from "react";
+import {
+  View,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableOpacity,
+  Text,
+  ScrollView,
+} from "react-native";
+import SocialButton from "@/components/SocialButton";
+import CustomTextInput from "@/components/ui/common/CustomTextInput";
+import CustomTitle from "@/components/ui/common/CustomTitle";
+import CustomSubmitButton from "@/components/ui/common/CustomSubmitButton";
+import { useRouter } from "expo-router";
 
-export default () => <LoginScreen />;
+const LoginScreen = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const isLoginEnabled = email.length > 0 && password.length > 0;
+  console.log(isLoginEnabled);
+  const router = useRouter();
+
+  const handleLogIn = () => {};
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={styles.keyboardContainer}>
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
+        <CustomTitle title="Log In" />
+        <CustomTextInput
+          label="Email"
+          placeholder="Enter your email"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          error={false}
+        />
+
+        <CustomTextInput
+          label="Password"
+          placeholder="Enter your password"
+          secureTextEntry
+          value={password}
+          onChangeText={setPassword}
+          error={false}
+        />
+
+        <View style={styles.buttonContainer}>
+          <CustomSubmitButton
+            title="log in"
+            onPress={handleLogIn}
+            disabled={isLoginEnabled}
+            style={
+              (isLoginEnabled ? styles.buttonActive : styles.buttonDisabled,
+              [{ textTransform: "uppercase" }])
+            }
+          />
+        </View>
+
+        <View style={styles.forgotPasswordContainer}>
+          <Text style={styles.forgotPasswordText}>Forgot password? </Text>
+          <TouchableOpacity onPress={() => router.navigate("/(auth)/login")}>
+            <Text style={styles.resetText}>Reset</Text>
+          </TouchableOpacity>
+        </View>
+
+        <Text style={styles.orText}>or</Text>
+
+        <SocialButton
+          iconName="google"
+          title="LOG IN WITH GMAIL"
+          onPress={() => console.log("Gmail Login")}
+        />
+
+        <SocialButton
+          iconName="facebook-square"
+          title="LOG IN WITH FACEBOOK"
+          onPress={() => console.log("Facebook Login")}
+        />
+
+        <SocialButton
+          iconName="github"
+          title="LOG IN WITH GITHUB"
+          onPress={() => console.log("GitHub Login")}
+        />
+
+        <View style={styles.signupContainer}>
+          <Text style={styles.signupText}>Don't have an account? </Text>
+          <TouchableOpacity>
+            <Text style={styles.signupLink}>Sign up</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "white",
+  },
+  keyboardContainer: {
+    flex: 1,
+  },
+  scrollContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 20,
+  },
+
+  buttonContainer: {
+    paddingVertical: 13,
+    alignItems: "center",
+  },
+  buttonActive: {
+    backgroundColor: "#61892F",
+    paddingVertical: 15,
+    width: "100%",
+    alignItems: "center",
+  },
+  buttonDisabled: {
+    backgroundColor: "gray",
+    opacity: 0.5,
+    paddingVertical: 15,
+    width: "100%",
+    alignItems: "center",
+  },
+  buttonText: {
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "white",
+  },
+  orText: {
+    textAlign: "center",
+    color: "#666",
+    marginVertical: 20,
+  },
+
+  signupContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginTop: 20,
+  },
+  signupText: {
+    color: "#333",
+  },
+  signupLink: {
+    color: "#6B8E23",
+  },
+  forgotPasswordContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginBottom: 20,
+  },
+  forgotPasswordText: {
+    color: "#333",
+  },
+  resetText: {
+    color: "#6B8E23",
+  },
+});
+
+export default LoginScreen;

apps/native/app/_layout.tsx

@@ -1,32 +1,14 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { useFonts } from "expo-font";
-import { Stack } from "expo-router";
+import { Slot } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import "react-native-reanimated";
-import {
-  MD3LightTheme as DefaultTheme,
-  PaperProvider,
-} from "react-native-paper";
-
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
-import { StyleSheet } from "react-native";
-
-export { ErrorBoundary } from "expo-router";
-
-const theme = {
-  ...DefaultTheme,
-  colors: {
-    ...DefaultTheme.colors,
-    primary: "tomato",
-    secondary: "yellow",
-  },
-};
 
 SplashScreen.preventAutoHideAsync();
 
-export default function RootLayout() {
-  const [loaded, error] = useFonts({
+export default function AppLayout() {
+  const [areFontsLoaded, fontLoadError] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
     Roboto: require("../assets/fonts/Roboto-Regular.ttf"),
     RobotoBold: require("../assets/fonts/Roboto-Bold.ttf"),
@@ -35,48 +17,10 @@ export default function RootLayout() {
   });
 
   useEffect(() => {
-    if (error) throw error;
-  }, [error]);
-
-  useEffect(() => {
-    if (loaded) {
+    if (areFontsLoaded || fontLoadError) {
       SplashScreen.hideAsync();
     }
-  }, [loaded]);
+  }, [areFontsLoaded, fontLoadError]);
 
-  if (!loaded) {
-    return null;
-  }
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <RootLayoutNav />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
+  return <Slot />;
 }
-
-export const options = {
-  headerShown: false,
-};
-
-function RootLayoutNav() {
-  return (
-    <PaperProvider theme={theme}>
-      <Stack>
-        <Stack.Screen name="index" options={{ headerShown: false }} />
-        <Stack.Screen name="(tabs)" options={options} />
-        <Stack.Screen name="(auth)/login" options={{ headerShown: false }} />
-        <Stack.Screen name="(auth)/register" options={{ headerShown: false }} />
-        <Stack.Screen name="accountConfirmation" options={options} />
-      </Stack>
-    </PaperProvider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

apps/native/app/index.tsx

@@ -1,2 +1,24 @@
-import OnboardingScreen from "@/screens/onboarding/Onboarding.screen";
-export default () => <OnboardingScreen />;
+import React, { useEffect, useState } from "react";
+import { Redirect, useRouter } from "expo-router";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export default function InitialRoute() {
+  const [shouldShowOnboarding, setShouldShowOnboarding] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const verifyAppLaunchStatus = async () => {
+      const hasCompletedOnboarding = await AsyncStorage.getItem("hasLaunched");
+
+      if (hasCompletedOnboarding === null) {
+        setShouldShowOnboarding(true);
+      } else {
+        router.replace("/(auth)/login");
+      }
+    };
+
+    verifyAppLaunchStatus();
+  }, [router]);
+
+  return shouldShowOnboarding ? <Redirect href="/onboarding" /> : null;
+}