gib/tech-tracker-expo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up login page

Browse Source
This commit is contained in:
Gabriel Brown
2025-03-10 15:18:50 -05:00
parent f9fd5dafc5
commit 6e41fd3ddf
9 changed files with 817 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/auth/AppleSignIniOS.tsx
View File

@ -3,7 +3,7 @@ import { supabase } from '@/lib/supabase';
import * as AppleAuthentication from 'expo-apple-authentication';
import { useColorScheme } from '@/hooks/useColorScheme';
import { ThemedView } from '@/components/theme';
import { StyleSheet, Platform } from 'react-native';
import { StyleSheet, Platform, Alert } from 'react-native';
import Constants from 'expo-constants';
import * as Notifications from 'expo-notifications';
import type { updateUser } from '@/constants/Types';
@ -46,7 +46,9 @@ const AppleSignInButton = () => {
};
const { error: authUpdateError } = await supabase.auth.updateUser({
data,
})
});
if (authUpdateError)
Alert.alert('Error updating auth info:', authUpdateError.message);
const { error: updateError } = await supabase
.from('profiles')
.upsert({
@ -78,7 +80,6 @@ const AppleSignInButton = () => {
if (Platform.OS !== 'ios') return <ThemedView />;
else
return (
<ThemedView style={styles.verticallySpaced}>
<AppleAuthentication.AppleAuthenticationButton
buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
buttonStyle={
@ -87,19 +88,9 @@ const AppleSignInButton = () => {
: AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
}
cornerRadius={5}
style={{ width: 200, height: 64 }}
style={{ width: '85%', height: 64 }}
onPress={signInWithApple}
/>
</ThemedView>
);
};
export default AppleSignInButton;
const styles = StyleSheet.create({
verticallySpaced: {
paddingTop: 4,
paddingBottom: 4,
alignItems: 'center',
marginTop: 20,
},
});

76
components/auth/Auth.tsx
View File

@ -4,6 +4,8 @@ import { supabase } from '@/lib/supabase';
import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/components/theme';
import AppleSignInButton from '@/components/auth/AppleSignIniOS';
import AzureSignIn from './AzureSignIn';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import type { updateUser } from '@/constants/Types';
// Tells Supabase Auth to continuously refresh the session automatically if
@ -21,6 +23,8 @@ if (Platform.OS !== 'web') {
}
const Auth = () => {
const scheme = useColorScheme() ?? 'dark';
const [full_name, setFullName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
@ -112,25 +116,46 @@ const Auth = () => {
/>
</ThemedView>
<ThemedView style={[styles.verticallySpaced, styles.mt20]}>
<ThemedTextButton
text='Sign in'
disabled={loading}
onPress={() => signInWithEmail()}
fontSize={24}
/>
<ThemedView style={styles.verticallySpaced}>
<ThemedView style={styles.horizontallySpaced}>
<ThemedTextButton
text='Sign in'
disabled={loading}
onPress={() => signInWithEmail()}
fontSize={28}
fontWeight='semibold'
width='50%'
/>
<ThemedTextButton
text='Sign up'
disabled={loading}
onPress={() => signUpWithEmail()}
fontSize={28}
fontWeight='semibold'
width='50%'
/>
</ThemedView>
</ThemedView>
<ThemedView style={styles.divider}>
<ThemedView style={[styles.dividerLine, { backgroundColor: Colors[scheme].text }]} />
<ThemedText type='subtitle' style={styles.dividerText}>or</ThemedText>
<ThemedView style={[styles.dividerLine, { backgroundColor: Colors[scheme].text }]} />
</ThemedView>
<ThemedView style={styles.verticallySpaced}>
<ThemedTextButton
text='Sign up'
disabled={loading}
onPress={() => signUpWithEmail()}
fontSize={24}
/>
<AppleSignInButton />
</ThemedView>
<ThemedView style={styles.divider}>
<ThemedView style={[styles.dividerLine, { backgroundColor: Colors[scheme].text }]} />
<ThemedText type='subtitle' style={styles.dividerText}>or</ThemedText>
<ThemedView style={[styles.dividerLine, { backgroundColor: Colors[scheme].text }]} />
</ThemedView>
<ThemedView style={styles.verticallySpaced}>
<AzureSignIn />
</ThemedView>
<AppleSignInButton />
<AzureSignIn />
</ThemedView>
);
};
@ -147,6 +172,14 @@ const styles = StyleSheet.create({
paddingBottom: 4,
alignItems: 'center',
},
horizontallySpaced: {
flexDirection: 'row',
paddingLeft: 4,
paddingRight: 4,
alignItems: 'center',
justifyContent: 'center',
width: '90%',
},
mt20: {
marginTop: 20,
},
@ -172,11 +205,18 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginVertical: 20,
marginVertical: 5,
width: '80%',
alignSelf: 'center',
},
dividerText: {
marginHorizontal: 10,
fontSize: 16,
marginHorizontal: 15,
fontSize: 14,
opacity: 0.7,
},
dividerLine: {
flex: 1,
height: 1,
opacity: 0.3,
}
});

34
components/auth/AzureSignIn.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { StyleSheet, Alert } from 'react-native';
import { Image, StyleSheet, Alert } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
import * as AuthSession from 'expo-auth-session';
@ -136,27 +136,27 @@ const AzureSignIn = () => {
};
return (
<ThemedView style={styles.verticallySpaced}>
<ThemedButton disabled={loading} onPress={signInWithAzure}>
<ThemedText
lightColor={Colors.dark.text}
darkColor={Colors.light.text}
type='defaultSemiBold'
>
{loading ? 'Signing in...' : 'Sign in with Microsoft'}
</ThemedText>
</ThemedButton>
</ThemedView>
<ThemedButton disabled={loading} onPress={signInWithAzure}>
<Image source={require('@/assets/images/Microsoft_Logo.png')} style={styles.microsoftLogo} />
<ThemedText
type='custom'
fontWeight='semibold'
fontSize={26}
lightColor={Colors.dark.text}
darkColor={Colors.light.text}
>
{loading ? 'Signing in...' : 'Sign in with Microsoft'}
</ThemedText>
</ThemedButton>
);
};
export default AzureSignIn;
const styles = StyleSheet.create({
verticallySpaced: {
paddingTop: 4,
paddingBottom: 4,
alignItems: 'center',
marginTop: 20,
microsoftLogo: {
height: 30,
width: 30,
marginRight: 10,
},
});