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,
},
});

6
components/theme/buttons/ThemedButton.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { StyleSheet, Pressable, PressableProps } from 'react-native';
import { StyleSheet, Pressable, PressableProps, DimensionValue } from 'react-native';
import ThemedView from '@/components/theme/default/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
@ -8,8 +8,8 @@ const DEFAULT_WIDTH = 320;
const DEFAULT_HEIGHT = 68;
type ThemedButtonProps = PressableProps & {
width?: number;
height?: number;
width?: DimensionValue;
height?: DimensionValue;
containerStyle?: object;
buttonStyle?: object;
};

17
components/theme/buttons/ThemedTextButton.tsx
View File

@ -1,18 +1,17 @@
import React from 'react';
import { TextStyle, PressableProps } from 'react-native';
import { TextStyle, PressableProps, DimensionValue } from 'react-native';
import ThemedButton from '@/components/theme/buttons/ThemedButton';
import ThemedText from '@/components/theme/default/ThemedText';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
const DEFAULT_FONT_SIZE = 16;
// Extend ThemedButton props (which already extends PressableProps)
type ThemedTextButtonProps = Omit<PressableProps, 'children'> & {
width?: number;
height?: number;
width?: DimensionValue;
height?: DimensionValue;
text: string;
fontSize?: number;
fontWeight?: 'normal' | 'semibold' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
textStyle?: TextStyle;
containerStyle?: object;
buttonStyle?: object;
@ -22,13 +21,15 @@ const ThemedTextButton: React.FC<ThemedTextButtonProps> = ({
width,
height,
text,
fontSize,
fontSize = 16,
fontWeight = 'normal',
textStyle,
containerStyle,
buttonStyle,
...restProps // This includes onPress and all other Pressable props
}) => {
const scheme = useColorScheme() ?? 'dark';
if (fontWeight === 'semibold') fontWeight = '600';
return (
<ThemedButton
@ -42,7 +43,9 @@ const ThemedTextButton: React.FC<ThemedTextButtonProps> = ({
style={[
{
color: Colors[scheme].background,
fontSize: fontSize ?? DEFAULT_FONT_SIZE,
fontSize,
lineHeight: fontSize * 1.5,
fontWeight,
},
textStyle,
]}

10
components/theme/default/ThemedText.tsx
View File

@ -7,23 +7,29 @@ export type ThemedViewProps = ViewProps & {
darkColor?: string;
};
export type ThemedTextProps = TextProps & {
fontSize?: number;
fontWeight?: 'normal' | 'semibold' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
lightColor?: string;
darkColor?: string;
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
type?: 'custom' | 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
};
const ThemedText = ({
fontSize = 16,
fontWeight = 'normal',
style,
lightColor,
darkColor,
type = 'default',
type='default',
...rest
}: ThemedTextProps) => {
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
if (fontWeight === 'semibold') fontWeight = '600';
return (
<Text
style={[
{ color },
type === 'custom' ? { fontSize, lineHeight: fontSize * 1.5, fontWeight } : undefined,
type === 'default' ? styles.default : undefined,
type === 'title' ? styles.title : undefined,
type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,