From 530817812f8fb7f1d71e3a31e90c33b1092f9897 Mon Sep 17 00:00:00 2001 From: Izan Gil <66965250+SrIzan10@users.noreply.github.com> Date: Fri, 1 Nov 2024 19:34:54 +0100 Subject: [PATCH] chore: google auth screens --- app/(auth)/_layout.tsx | 28 ----- app/(auth)/login.tsx | 112 +----------------- app/(auth)/signup.tsx | 176 ---------------------------- app/(tabs)/_layout.tsx | 29 ----- app/(tabs)/profile.tsx | 33 ------ app/(tabs)/settings.tsx | 92 ++++++++++----- app/_layout.tsx | 51 ++++---- app/drawer/_layout.tsx | 23 ---- app/drawer/profile.tsx | 33 ------ lib/providers/auth.tsx | 8 +- lib/ui/components/DrawerContent.tsx | 6 - 11 files changed, 101 insertions(+), 490 deletions(-) delete mode 100644 app/(auth)/_layout.tsx delete mode 100644 app/(auth)/signup.tsx delete mode 100644 app/(tabs)/profile.tsx delete mode 100644 app/drawer/profile.tsx diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx deleted file mode 100644 index 24be3e1..0000000 --- a/app/(auth)/_layout.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { View } from 'react-native' -import { Button, Text } from 'react-native-paper' - -import { useAuth } from '@/lib/providers/auth' - -function Layout() { - const { signIn, user } = useAuth() - - return ( - - - this is {JSON.stringify(user)}. - - /* ( - - ), - }} - > - - - */ - ) -} - -export default Layout diff --git a/app/(auth)/login.tsx b/app/(auth)/login.tsx index 45e8f12..c0c5b9e 100644 --- a/app/(auth)/login.tsx +++ b/app/(auth)/login.tsx @@ -1,107 +1,7 @@ -import { Image } from 'expo-image' -import { router } from 'expo-router' -import { Formik } from 'formik' -import React from 'react' -import { - Button, - Surface, - TextInput, - HelperText, - Text, -} from 'react-native-paper' -import * as Yup from 'yup' +import { Text } from "react-native-paper"; -import { styles } from '@/lib/ui' - -const Login = () => ( - - Logo - - - Welcome to ERNP - - - We're excited to have you back. Please log in to continue. - - - console.log(values)} - validationSchema={Yup.object().shape({ - username: Yup.string() - .min(3, 'Too Short!') - .max(64, 'Too Long!') - .required('Please enter a username.'), - password: Yup.string() - .min(8, 'Too Short! must be at least 8 characters.') - .max(64, 'Too Long!') - .matches( - /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/, - 'Must 1 uppercase, 1 lowercase, 1 number and 1 special case character', - ) - .required('Please enter a password'), - })} - > - {({ handleChange, handleBlur, handleSubmit, values, errors }) => ( - <> - - - - {errors.username} - - - - - - - {errors.password} - - - - - - )} - - - - -) - -export default Login +export default function Login() { + return ( + Login please + ) +} \ No newline at end of file diff --git a/app/(auth)/signup.tsx b/app/(auth)/signup.tsx deleted file mode 100644 index 6c1ff0d..0000000 --- a/app/(auth)/signup.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import { Image } from 'expo-image' -import { router } from 'expo-router' -import { Formik } from 'formik' -import React from 'react' -import { ScrollView } from 'react-native' -import { - Button, - Surface, - TextInput, - HelperText, - Text, -} from 'react-native-paper' -import * as Yup from 'yup' - -import { styles } from '@/lib/ui' - -const SignUp = () => ( - - - Logo - - - Join ERNP Today! - - - We're thrilled to have you on board. Let's get you set up. - - - console.log(values)} - validationSchema={Yup.object().shape({ - username: Yup.string() - .min(3, 'Too Short!') - .max(64, 'Too Long!') - .required('Please enter a username.'), - password: Yup.string() - .min(8, 'Too Short! must be at least 8 characters.') - .max(64, 'Too Long!') - .matches( - /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/, - 'Must 1 uppercase, 1 lowercase, 1 number and 1 special case character', - ) - .required('Please enter a password'), - email: Yup.string().email().required('Please enter an email.'), - firstName: Yup.string() - .min(3, 'Too Short!') - .max(64, 'Too Long!') - .required('Please enter a first name.'), - lastName: Yup.string() - .min(3, 'Too Short!') - .max(64, 'Too Long!') - .required('Please enter a last name.'), - })} - > - {({ handleChange, handleBlur, handleSubmit, values, errors }) => ( - <> - - - - {errors.username} - - - - - - - {errors.password} - - - - - - - {errors.email} - - - - - - - {errors.firstName} - - - - - - - {errors.lastName} - - - - - - )} - - - - - -) - -export default SignUp diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 295de0b..ee5ad60 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -68,35 +68,6 @@ const TabLayout = () => { ), }} /> - ( - <> - - router.push('/search')} - /> - - - router.push('/(tabs)/settings')} - /> - - - ), - tabBarIcon: (props) => ( - - ), - }} - /> ( - - - - - - - - - -) - -export default Profile diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx index 7420008..6be997e 100644 --- a/app/(tabs)/settings.tsx +++ b/app/(tabs)/settings.tsx @@ -13,11 +13,15 @@ import { import { Color, Setting } from '@/lib/types' import { Colors, LoadingIndicator, ScreenInfo, styles } from '@/lib/ui' +import { reloadAppAsync } from 'expo' +import { useAuth } from '@/lib/providers/auth' +import { Image } from 'expo-image' const Settings = () => { const colorScheme = useColorScheme() const [loading, setLoading] = React.useState(false) const [message, setMessage] = React.useState({ visible: false, content: '' }) + const { user, signIn, signOut } = useAuth() const [settings, setSettings] = React.useState({ color: 'default', theme: 'auto', @@ -204,42 +208,72 @@ const Settings = () => { )} /> + )} - - + {/* make a surface for the authentication */} + + } + > + {user ? ( + <> + } + /> + } + onPress={async () => { + await signOut() + }} + /> + + ) : ( + <> + } + onPress={async () => { + await signIn() + }} + /> + + )} + - - setMessage({ ...message, visible: false })} diff --git a/app/_layout.tsx b/app/_layout.tsx index 4047f8f..ac1ba16 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -4,15 +4,15 @@ import { JetBrainsMono_400Regular, } from '@expo-google-fonts/jetbrains-mono' import { NotoSans_400Regular } from '@expo-google-fonts/noto-sans' -import { SplashScreen, Stack } from 'expo-router' +import { Redirect, SplashScreen, Stack, useRootNavigationState, useRouter } from 'expo-router' import * as SecureStore from 'expo-secure-store' import React from 'react' import { Platform, useColorScheme } from 'react-native' import { PaperProvider } from 'react-native-paper' +import { AuthProvider, useAuth } from '@/lib/providers/auth' import { Setting } from '@/lib/types' import { StackHeader, Themes } from '@/lib/ui' -import { AuthProvider } from '@/lib/providers/auth' export { // Catch any errors thrown by the Layout component. @@ -34,6 +34,9 @@ const RootLayout = () => { ...MaterialCommunityIcons.font, }) + // Get authentication state + const rootNavigationState = useRootNavigationState() + // Expo Router uses Error Boundaries to catch errors in the navigation tree. React.useEffect(() => { if (error) throw error @@ -45,7 +48,8 @@ const RootLayout = () => { } }, [loaded]) - if (!loaded) { + // Make sure we have the navigation state before showing content + if (!loaded || !rootNavigationState) { return null } @@ -61,32 +65,28 @@ const RootLayoutNav = () => { // Load settings from the device React.useEffect(() => { - if (Platform.OS !== 'web') { - SecureStore.getItemAsync('settings').then((result) => { - if (result === null) { - SecureStore.setItemAsync('settings', JSON.stringify(settings)).then( - (res) => console.log(res), - ) - } + SecureStore.getItemAsync('settings').then((result) => { + if (result === null) { + SecureStore.setItemAsync('settings', JSON.stringify(settings)).then( + (res) => console.log(res), + ) + } - setSettings(JSON.parse(result ?? JSON.stringify(settings))) - }) - } else { - setSettings({ ...settings, theme: colorScheme ?? 'light' }) - } + setSettings(JSON.parse(result ?? JSON.stringify(settings))) + }) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return ( - - + + { ), }} > - @@ -104,8 +103,8 @@ const RootLayoutNav = () => { options={{ title: 'Modal', presentation: 'modal' }} /> - - + + ) } diff --git a/app/drawer/_layout.tsx b/app/drawer/_layout.tsx index acf76b9..6dccf96 100644 --- a/app/drawer/_layout.tsx +++ b/app/drawer/_layout.tsx @@ -77,29 +77,6 @@ const DrawerLayout = () => { ), }} /> - ( - <> - - router.push('/search')} - /> - - - router.push('/(tabs)/settings')} - /> - - - ), - }} - /> ( - - - - - - - - - -) - -export default Profile diff --git a/lib/providers/auth.tsx b/lib/providers/auth.tsx index 5e2c665..530916c 100644 --- a/lib/providers/auth.tsx +++ b/lib/providers/auth.tsx @@ -2,7 +2,13 @@ import { GoogleSignin, type User, } from '@react-native-google-signin/google-signin' -import { createContext, useContext, useEffect, useState, type ReactNode } from 'react' +import { + createContext, + useContext, + useEffect, + useState, + type ReactNode, +} from 'react' interface AuthProviderProps { children: ReactNode diff --git a/lib/ui/components/DrawerContent.tsx b/lib/ui/components/DrawerContent.tsx index f3639dd..5575538 100644 --- a/lib/ui/components/DrawerContent.tsx +++ b/lib/ui/components/DrawerContent.tsx @@ -20,12 +20,6 @@ const DrawerContent = (props: DrawerContentProps) => ( active={props.navProps.state.index === 0} onPress={() => router.push('/drawer')} /> - router.push('/drawer/profile')} - />