[auth] Reorganize auth routes (#42)

* Create folders for each auth route

* Fix tsc errors

---------

Co-authored-by: Aditya Pawar <[email protected]>

src/app/auth/_layout.tsx

@@ -3,7 +3,6 @@ import { Stack } from 'expo-router';
 function StackLayout() {
   return (
     <Stack>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
       <Stack.Screen name="signup" options={{ headerShown: false }} />
       <Stack.Screen name="login" options={{ headerShown: false }} />
       <Stack.Screen name="onboarding" options={{ headerShown: false }} />

src/app/auth/forgotPassword/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/auth/forgotPassword.tsx → src/app/auth/forgotPassword/index.tsx

@@ -1,10 +1,11 @@
 import { router } from 'expo-router';
 import React, { useState } from 'react';
-import { Alert, TextInput, View, StyleSheet } from 'react-native';
+import { Alert, TextInput, View } from 'react-native';
 import { Button, Input } from 'react-native-elements';
 
-import globalStyles from '../../styles/globalStyles';
-import { useSession } from '../../utils/AuthContext';
+import styles from './styles';
+import globalStyles from '../../../styles/globalStyles';
+import { useSession } from '../../../utils/AuthContext';
 
 function ForgotPasswordScreen() {
   const { updateUser, signOut, resetPassword, verifyOtp } = useSession();
@@ -115,23 +116,3 @@ function ForgotPasswordScreen() {
 }
 
 export default ForgotPasswordScreen;
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    borderColor: 'gray',
-    borderWidth: 1,
-    marginTop: 10,
-    padding: 5,
-  },
-  verticallySpaced: {
-    paddingTop: 4,
-    paddingBottom: 4,
-    alignSelf: 'stretch',
-  },
-  container: {
-    paddingVertical: 63,
-    paddingLeft: 43,
-    paddingRight: 44,
-  },
-});

src/app/auth/forgotPassword/styles.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  input: {
+    height: 40,
+    borderColor: 'gray',
+    borderWidth: 1,
+    marginTop: 10,
+    padding: 5,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+  container: {
+    paddingVertical: 63,
+    paddingLeft: 43,
+    paddingRight: 44,
+  },
+});

src/app/auth/login/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/auth/login.tsx → src/app/auth/login/index.tsx

@@ -1,15 +1,16 @@
 import { Link, router } from 'expo-router';
 import React, { useState } from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { Text, View } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import validator from 'validator';
 
-import StyledButton from '../../components/StyledButton/StyledButton';
-import UserStringInput from '../../components/UserStringInput/UserStringInput';
-import { isEmailUsed, queryEmailByUsername } from '../../queries/auth';
-import globalStyles from '../../styles/globalStyles';
-import { useSession } from '../../utils/AuthContext';
+import styles from './styles';
+import { isEmailUsed, queryEmailByUsername } from '../../../queries/auth';
+import globalStyles from '../../../styles/globalStyles';
+import { useSession } from '../../../utils/AuthContext';
+import StyledButton from '../../../components/StyledButton/StyledButton';
+import UserStringInput from '../../../components/UserStringInput/UserStringInput';
 
 function LoginScreen() {
   const sessionHandler = useSession();
@@ -123,38 +124,3 @@ function LoginScreen() {
 }
 
 export default LoginScreen;
-
-const styles = StyleSheet.create({
-  flex: {
-    justifyContent: 'space-between',
-  },
-  forgotPassword: {
-    fontSize: 12,
-    textDecorationLine: 'underline',
-    paddingTop: 18,
-    paddingBottom: 16,
-    fontWeight: '400',
-  },
-  link: {
-    fontWeight: '700',
-    textDecorationLine: 'underline',
-  },
-  redirectText: {
-    textAlign: 'center',
-    marginTop: 16,
-    marginBottom: 64,
-  },
-  title: {
-    lineHeight: 33,
-    paddingTop: 64,
-    marginBottom: 28,
-    fontSize: 24,
-    fontWeight: '700',
-  },
-  error: {
-    color: 'red',
-  },
-  icon: {
-    paddingRight: 10,
-  },
-});

src/app/auth/login/styles.tsx

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  flex: {
+    justifyContent: 'space-between',
+  },
+  forgotPassword: {
+    fontSize: 12,
+    textDecorationLine: 'underline',
+    paddingTop: 18,
+    paddingBottom: 16,
+    fontWeight: '400',
+  },
+  link: {
+    fontWeight: '700',
+    textDecorationLine: 'underline',
+  },
+  redirectText: {
+    textAlign: 'center',
+    marginTop: 16,
+    marginBottom: 64,
+  },
+  title: {
+    lineHeight: 33,
+    paddingTop: 64,
+    marginBottom: 28,
+    fontSize: 24,
+    fontWeight: '700',
+  },
+  error: {
+    color: 'red',
+  },
+  icon: {
+    paddingRight: 10,
+  },
+});

src/app/auth/onboarding/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/auth/onboarding.tsx → src/app/auth/onboarding/index.tsx

@@ -1,13 +1,14 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { Redirect, router } from 'expo-router';
 import { useState, useEffect } from 'react';
-import { Alert, StyleSheet, ScrollView, Platform } from 'react-native';
+import { Alert, ScrollView, Platform } from 'react-native';
 import { Button } from 'react-native-elements';
 
-import StyledButton from '../../components/StyledButton/StyledButton';
-import UserStringInput from '../../components/UserStringInput/UserStringInput';
-import { useSession } from '../../utils/AuthContext';
-import supabase from '../../utils/supabase';
+import styles from './styles';
+import UserStringInput from '../../../components/UserStringInput/UserStringInput';
+import { useSession } from '../../../utils/AuthContext';
+import supabase from '../../../utils/supabase';
+import StyledButton from '../../../components/StyledButton/StyledButton';
 
 function OnboardingScreen() {
   const { session } = useSession();
@@ -168,24 +169,4 @@ function OnboardingScreen() {
   );
 }
 
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    borderColor: 'gray',
-    borderWidth: 1,
-    marginTop: 10,
-    padding: 5,
-  },
-  verticallySpaced: {
-    paddingTop: 4,
-    paddingBottom: 4,
-    alignSelf: 'stretch',
-  },
-  container: {
-    paddingVertical: 63,
-    paddingLeft: 43,
-    paddingRight: 44,
-  },
-});
-
 export default OnboardingScreen;

src/app/auth/onboarding/styles.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  input: {
+    height: 40,
+    borderColor: 'gray',
+    borderWidth: 1,
+    marginTop: 10,
+    padding: 5,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+  container: {
+    paddingVertical: 63,
+    paddingLeft: 43,
+    paddingRight: 44,
+  },
+});

src/app/auth/signup/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/auth/signup.tsx → src/app/auth/signup/index.tsx

@@ -1,18 +1,19 @@
 import { Link, router } from 'expo-router';
 import React, { useEffect, useRef, useState } from 'react';
-import { Alert, Text, View, StyleSheet } from 'react-native';
+import { Alert, Text, View } from 'react-native';
 import { Icon as RNEIcon } from 'react-native-elements';
 import { ScrollView } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import validator from 'validator';
 
-import Icon from '../../../assets/icons';
-import StyledButton from '../../components/StyledButton/StyledButton';
-import UserStringInput from '../../components/UserStringInput/UserStringInput';
-import colors from '../../styles/colors';
-import globalStyles from '../../styles/globalStyles';
-import { useSession } from '../../utils/AuthContext';
-import supabase from '../../utils/supabase';
+import styles from './styles';
+import Icon from '../../../../assets/icons';
+import StyledButton from '../../../components/StyledButton/StyledButton';
+import UserStringInput from '../../../components/UserStringInput/UserStringInput';
+import colors from '../../../styles/colors';
+import globalStyles from '../../../styles/globalStyles';
+import { useSession } from '../../../utils/AuthContext';
+import supabase from '../../../utils/supabase';
 
 function SignUpScreen() {
   const { signUp } = useSession();
@@ -315,53 +316,3 @@ function SignUpScreen() {
 }
 
 export default SignUpScreen;
-
-const styles = StyleSheet.create({
-  flex: {
-    flexGrow: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  },
-  inputError: {
-    color: 'red',
-    marginTop: 8,
-  },
-  link: {
-    fontWeight: '700',
-    textDecorationLine: 'underline',
-  },
-  redirectText: {
-    textAlign: 'center',
-    marginBottom: 64,
-    marginTop: 16,
-  },
-  title: {
-    fontSize: 24,
-    paddingTop: 64,
-    marginBottom: 23,
-    fontWeight: '700',
-  },
-  icon: {
-    marginRight: 10,
-  },
-  passwordComplexity: {
-    display: 'flex',
-    flexDirection: 'row',
-    paddingBottom: 8,
-  },
-  passwordErrorText: {
-    fontSize: 12,
-    marginLeft: 8,
-  },
-  verticallySpaced: {
-    paddingTop: 4,
-    paddingBottom: 4,
-    alignSelf: 'stretch',
-  },
-  inputs: {
-    paddingBottom: 8,
-  },
-  navigation: {
-    // marginTop: 'auto',
-  },
-});