-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[nav] Refactor auth to follow design user flows (#21)
* Refactor components to be screens * Working on email verification redirect * Redirect to onboarding after sign up * Fix eslint errors * Run prettier * Fix navigation and global styles * Add update profile to setting page --------- Co-authored-by: Aditya Pawar <[email protected]>
- Loading branch information
1 parent
0f24043
commit ef3803e
Showing
10 changed files
with
328 additions
and
275 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import React, { useState } from 'react'; | ||
import { Redirect, Link } from 'expo-router'; | ||
import { Alert, View } from 'react-native'; | ||
import { Button, Input } from 'react-native-elements'; | ||
import { useSession } from '../../utils/AuthContext'; | ||
import globalStyles from '../../styles/globalStyles'; | ||
|
||
function LoginScreen() { | ||
const sessionHandler = useSession(); | ||
const [email, setEmail] = useState(''); | ||
const [password, setPassword] = useState(''); | ||
const [loading, setLoading] = useState(false); | ||
|
||
if (sessionHandler.session) { | ||
return <Redirect href="/home" />; | ||
} | ||
|
||
const signInWithEmail = async () => { | ||
setLoading(true); | ||
const { error, data } = await sessionHandler.signInWithEmail( | ||
email, | ||
password, | ||
); | ||
|
||
if (error) Alert.alert(error.message); | ||
setLoading(false); | ||
}; | ||
|
||
return ( | ||
<View style={globalStyles.auth_container}> | ||
<View style={[globalStyles.verticallySpaced, globalStyles.mt20]}> | ||
<Input | ||
label="Email" | ||
leftIcon={{ type: 'font-awesome', name: 'envelope' }} | ||
onChangeText={text => setEmail(text)} | ||
value={email} | ||
placeholder="[email protected]" | ||
autoCapitalize="none" | ||
/> | ||
</View> | ||
<View style={globalStyles.verticallySpaced}> | ||
<Input | ||
label="Password" | ||
leftIcon={{ type: 'font-awesome', name: 'lock' }} | ||
onChangeText={text => setPassword(text)} | ||
value={password} | ||
secureTextEntry | ||
placeholder="Password" | ||
autoCapitalize="none" | ||
/> | ||
</View> | ||
|
||
<Link href="/auth/signup">Don't have an account? Sign Up</Link> | ||
|
||
<View style={[globalStyles.verticallySpaced, globalStyles.mt20]}> | ||
<Button title="Log In" disabled={loading} onPress={signInWithEmail} /> | ||
</View> | ||
</View> | ||
); | ||
} | ||
|
||
export default LoginScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,86 @@ | ||
import { View } from 'react-native'; | ||
|
||
import Account from '../../components/Account'; | ||
import Login from '../../components/Login'; | ||
import React, { useEffect, useState } from 'react'; | ||
import { Redirect, Link, router } from 'expo-router'; | ||
import { Alert, View, Text } from 'react-native'; | ||
import { Button, Input } from 'react-native-elements'; | ||
import { useSession } from '../../utils/AuthContext'; | ||
import globalStyles from '../../styles/globalStyles'; | ||
|
||
function SignUpScreen() { | ||
const { session } = useSession(); | ||
const { session, signUp, signInWithEmail } = useSession(); | ||
|
||
const [email, setEmail] = useState(''); | ||
const [password, setPassword] = useState(''); | ||
const [loading, setLoading] = useState(false); | ||
const [signedUp, setSignedUp] = useState(false); | ||
|
||
if (session) { | ||
return <Redirect href="/home" />; | ||
} | ||
|
||
const signIn = async () => { | ||
setLoading(true); | ||
const { error } = await signInWithEmail(email, password); | ||
|
||
if (error) Alert.alert(error.message); | ||
else router.replace('/auth/onboarding'); | ||
|
||
setLoading(false); | ||
}; | ||
|
||
const signUpWithEmail = async () => { | ||
setLoading(true); | ||
const { error } = await signUp(email, password); | ||
|
||
if (error) Alert.alert(error.message); | ||
else { | ||
Alert.alert( | ||
'Please follow the instructions in your email to verify your account, then login', | ||
); | ||
setSignedUp(true); | ||
} | ||
setLoading(false); | ||
}; | ||
|
||
return ( | ||
<View>{session?.user ? <Account key={session.user.id} /> : <Login />}</View> | ||
<View style={globalStyles.auth_container}> | ||
<View style={[globalStyles.verticallySpaced, globalStyles.mt20]}> | ||
<Input | ||
label="Email" | ||
leftIcon={{ type: 'font-awesome', name: 'envelope' }} | ||
onChangeText={text => setEmail(text)} | ||
value={email} | ||
placeholder="[email protected]" | ||
autoCapitalize="none" | ||
/> | ||
</View> | ||
<View style={globalStyles.verticallySpaced}> | ||
<Input | ||
label="Password" | ||
leftIcon={{ type: 'font-awesome', name: 'lock' }} | ||
onChangeText={text => setPassword(text)} | ||
value={password} | ||
secureTextEntry | ||
placeholder="Password" | ||
autoCapitalize="none" | ||
/> | ||
</View> | ||
{signedUp ? ( | ||
<View style={[globalStyles.verticallySpaced, globalStyles.mt20]}> | ||
<Button title="Log In" disabled={loading} onPress={signIn} /> | ||
</View> | ||
) : ( | ||
<> | ||
<Link href="/auth/login">Already have an account? Log In</Link> | ||
<View style={[globalStyles.verticallySpaced, globalStyles.mt20]}> | ||
<Button | ||
title="Sign Up" | ||
disabled={loading} | ||
onPress={signUpWithEmail} | ||
/> | ||
</View> | ||
</> | ||
)} | ||
</View> | ||
); | ||
} | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,11 @@ | ||
import { Redirect } from 'expo-router'; | ||
import { useSession } from '../utils/AuthContext'; | ||
|
||
function StartPage() { | ||
return <Redirect href="/auth" />; | ||
const { session } = useSession(); | ||
|
||
if (!session) return <Redirect href="/auth/login" />; | ||
return <Redirect href="/home" />; | ||
} | ||
|
||
export default StartPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.