Skip to content

Commit e4a1a67

Browse files
jgmuendejgmuende
committed
Signout button not working
Network connectivity issues for different platforms Adding development testing options Improving user experience
1 parent 1014f8a commit e4a1a67

14 files changed

Lines changed: 956 additions & 78 deletions

File tree

‎KonditionExpo/app/(tabs)/profile.tsx‎

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,49 @@
11
import React, { useState } from 'react';
2-
import { SafeAreaView, View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Switch } from 'react-native';
2+
import { SafeAreaView, View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Switch, Alert } from 'react-native';
33
import { useUser } from '@/contexts/UserContext';
4+
import { useAuth } from '@/contexts/AuthContext';
45
import { router } from 'expo-router';
56

67
const ProfileScreen = () => {
78
const { name, height, weight, age } = useUser();
9+
const { user, logout, isLoading } = useAuth();
810
const [notificationsEnabled, setNotificationsEnabled] = useState(false);
911

1012
const toggleNotifications = () => setNotificationsEnabled(prev => !prev);
1113

14+
const handleLogout = () => {
15+
Alert.alert(
16+
'Sign Out',
17+
'Are you sure you want to sign out?',
18+
[
19+
{
20+
text: 'Cancel',
21+
style: 'cancel',
22+
},
23+
{
24+
text: 'Sign Out',
25+
style: 'destructive',
26+
onPress: async () => {
27+
try {
28+
await logout();
29+
// Navigation will be handled automatically by AuthNavigator
30+
} catch (error) {
31+
console.error('Logout error:', error);
32+
Alert.alert('Error', 'Failed to sign out. Please try again.');
33+
}
34+
},
35+
},
36+
]
37+
);
38+
};
39+
1240
return (
1341
<SafeAreaView style={styles.container}>
1442
<ScrollView contentContainerStyle={styles.content}>
1543
{/* Profile Box */}
1644
<View style={styles.profileBox}>
17-
<Text style={styles.profileName}>{name || 'User'}</Text>
45+
<Text style={styles.profileName}>{user?.full_name || name || 'User'}</Text>
46+
<Text style={styles.profileEmail}>{user?.email || 'No email'}</Text>
1847
<TouchableOpacity style={styles.editBtn}>
1948
<Text style={styles.editText}>Edit</Text>
2049
</TouchableOpacity>
@@ -65,6 +94,17 @@ const ProfileScreen = () => {
6594
<Text style={styles.optionItem}>Contact Us</Text>
6695
<Text style={styles.optionItem}>Settings</Text>
6796
</View>
97+
98+
{/* Logout Button */}
99+
<TouchableOpacity
100+
style={styles.logoutButton}
101+
onPress={handleLogout}
102+
disabled={isLoading}
103+
>
104+
<Text style={styles.logoutText}>
105+
{isLoading ? 'Signing Out...' : 'Sign Out'}
106+
</Text>
107+
</TouchableOpacity>
68108
</ScrollView>
69109
</SafeAreaView>
70110
);
@@ -75,6 +115,7 @@ const styles = StyleSheet.create({
75115
content: { padding: 16, paddingBottom: 80 },
76116
profileBox: { backgroundColor: '#E5F1FF', borderRadius: 20, padding: 16, marginBottom: 24 },
77117
profileName: { fontSize: 24, fontWeight: 'bold', color: '#333' },
118+
profileEmail: { fontSize: 14, color: '#666', marginTop: 4 },
78119
editBtn: { backgroundColor: '#70A1FF', borderRadius: 12, paddingVertical: 6, paddingHorizontal: 12, alignSelf: 'flex-start', marginTop: 8 },
79120
editText: { color: '#FFF' },
80121
statsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 16 },
@@ -85,6 +126,19 @@ const styles = StyleSheet.create({
85126
sectionTitle: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 8 },
86127
optionItem: { fontSize: 14, color: '#555', paddingVertical: 6 },
87128
toggleRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
129+
logoutButton: {
130+
backgroundColor: '#FF6B6B',
131+
borderRadius: 16,
132+
padding: 16,
133+
alignItems: 'center',
134+
marginTop: 16,
135+
marginBottom: 24
136+
},
137+
logoutText: {
138+
color: '#FFF',
139+
fontSize: 16,
140+
fontWeight: 'bold'
141+
},
88142
});
89143

90144
export default ProfileScreen;

‎KonditionExpo/app/_layout.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useFonts } from 'expo-font';
33
import { Stack } from 'expo-router';
44
import { StatusBar } from 'expo-status-bar';
55
import { AuthProvider } from '@/contexts/AuthContext';
6+
import { ProtectedRoute } from '@/components/ProtectedRoute';
67
import 'react-native-reanimated';
78

89
import { useColorScheme } from '@/hooks/useColorScheme';
@@ -24,18 +25,25 @@ export default function RootLayout() {
2425
<UserProvider>
2526
<WorkoutProvider>
2627
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
27-
<Stack>
28-
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
29-
<Stack.Screen name="login" options={{ headerShown: false }} />
30-
<Stack.Screen name="workout" options={{ headerShown: false }} />
31-
<Stack.Screen name="+not-found" />
32-
</Stack>
28+
<ProtectedRoute>
29+
<Stack>
30+
<Stack.Screen name="index" options={{ headerShown: false }} />
31+
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
32+
<Stack.Screen name="login" options={{ headerShown: false }} />
33+
<Stack.Screen name="signup" options={{ headerShown: false }} />
34+
<Stack.Screen name="signup2" options={{ headerShown: false }} />
35+
<Stack.Screen name="workout" options={{ headerShown: false }} />
36+
<Stack.Screen name="notification" options={{ headerShown: false }} />
37+
<Stack.Screen name="profile" options={{ headerShown: false }} />
38+
<Stack.Screen name="home" options={{ headerShown: false }} />
39+
<Stack.Screen name="+not-found" />
40+
</Stack>
41+
</ProtectedRoute>
3342
<StatusBar style="auto" />
3443
</ThemeProvider>
3544
</WorkoutProvider>
3645
</UserProvider>
3746
</AuthProvider>
38-
3947
);
4048
}
4149

‎KonditionExpo/app/index.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { useEffect } from 'react';
2+
import { View, ActivityIndicator, StyleSheet } from 'react-native';
3+
import { router } from 'expo-router';
4+
import { useAuth } from '@/contexts/AuthContext';
5+
import { useThemeColor } from '@/hooks/useThemeColor';
6+
import { ThemedText } from '@/components/ThemedText';
7+
8+
export default function IndexScreen() {
9+
const { isAuthenticated, isLoading } = useAuth();
10+
const backgroundColor = useThemeColor({}, 'background');
11+
const textColor = useThemeColor({}, 'text');
12+
13+
useEffect(() => {
14+
if (!isLoading) {
15+
if (isAuthenticated) {
16+
router.replace('/(tabs)');
17+
} else {
18+
router.replace('/login');
19+
}
20+
}
21+
}, [isAuthenticated, isLoading]);
22+
23+
return (
24+
<View style={[styles.container, { backgroundColor }]}>
25+
<ActivityIndicator size="large" color={textColor} />
26+
<ThemedText style={styles.loadingText}>Loading Kondition...</ThemedText>
27+
</View>
28+
);
29+
}
30+
31+
const styles = StyleSheet.create({
32+
container: {
33+
flex: 1,
34+
justifyContent: 'center',
35+
alignItems: 'center',
36+
},
37+
loadingText: {
38+
marginTop: 16,
39+
fontSize: 16,
40+
},
41+
});

‎KonditionExpo/app/login.tsx‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
1-
import React, { useState } from 'react';
2-
import { View, StyleSheet, TouchableOpacity, Text, Image, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
1+
import React, { useState, useEffect } from 'react';
2+
import { View, StyleSheet, TouchableOpacity, Text, Image, KeyboardAvoidingView, Platform, ScrollView, Alert } from 'react-native';
33
import { useThemeColor } from '../hooks/useThemeColor';
44
import { Button } from '../components/ui/Button';
55
import { Input } from '../components/ui/Input';
66
import { Checkbox } from '../components/ui/Checkbox';
77
import { router } from 'expo-router';
8-
import { useUser } from '@/contexts/UserContext';
8+
import { useAuth } from '@/contexts/AuthContext';
99

1010
export default function LoginScreen() {
11-
const { setName: setUserName } = useUser();
11+
const { login, isLoading, isAuthenticated } = useAuth();
1212
const [email, setEmail] = useState('');
1313
const [password, setPassword] = useState('');
1414
const [rememberMe, setRememberMe] = useState(false);
1515
const [showPassword, setShowPassword] = useState(false);
16-
const [isLoading, setIsLoading] = useState(false);
1716
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
1817

1918
const backgroundColor = useThemeColor({}, 'background');
2019
const textColor = useThemeColor({}, 'text');
2120
const tintColor = useThemeColor({}, 'tint');
21+
22+
// Redirect if already authenticated
23+
useEffect(() => {
24+
if (isAuthenticated) {
25+
router.replace('/(tabs)');
26+
}
27+
}, [isAuthenticated]);
2228

2329
const handleLogin = async () => {
2430
setErrors({});
@@ -36,20 +42,16 @@ export default function LoginScreen() {
3642
return;
3743
}
3844

39-
setIsLoading(true);
40-
4145
try {
42-
// Simulate API call
43-
await new Promise(resolve => setTimeout(resolve, 1500));
44-
45-
// Set the name (this mimics what signup does)
46-
setUserName('Returning User'); // You can replace this with a real name from API later
47-
48-
router.replace('/(tabs)');
46+
await login(email, password);
47+
// Navigation will happen automatically via useEffect when isAuthenticated becomes true
4948
} catch (error) {
5049
console.error('Login error:', error);
51-
} finally {
52-
setIsLoading(false);
50+
Alert.alert(
51+
'Login Failed',
52+
error instanceof Error ? error.message : 'An unexpected error occurred. Please try again.',
53+
[{ text: 'OK' }]
54+
);
5355
}
5456
};
5557

@@ -100,7 +102,12 @@ export default function LoginScreen() {
100102
secureTextEntry={!showPassword}
101103
error={errors.password}
102104
rightIcon={
103-
<TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
105+
<TouchableOpacity
106+
onPress={() => setShowPassword(!showPassword)}
107+
accessibilityLabel={showPassword ? 'Hide password' : 'Show password'}
108+
accessibilityRole="button"
109+
accessible={true}
110+
>
104111
<Text style={{ color: tintColor }}>{showPassword ? 'Hide' : 'Show'}</Text>
105112
</TouchableOpacity>
106113
}
@@ -114,7 +121,12 @@ export default function LoginScreen() {
114121
label="Remember me"
115122
/>
116123

117-
<TouchableOpacity onPress={handleForgotPassword}>
124+
<TouchableOpacity
125+
onPress={handleForgotPassword}
126+
accessibilityLabel="Forgot Password"
127+
accessibilityRole="button"
128+
accessible={true}
129+
>
118130
<Text style={[styles.forgotPassword, { color: tintColor }]}>Forgot Password?</Text>
119131
</TouchableOpacity>
120132
</View>
@@ -130,7 +142,12 @@ export default function LoginScreen() {
130142

131143
<View style={styles.signupContainer}>
132144
<Text style={{ color: textColor }}>Don't have an account? </Text>
133-
<TouchableOpacity onPress={handleSignUp}>
145+
<TouchableOpacity
146+
onPress={handleSignUp}
147+
accessibilityLabel="Sign Up"
148+
accessibilityRole="button"
149+
accessible={true}
150+
>
134151
<Text style={{ color: tintColor, fontWeight: '600' }}>Sign Up</Text>
135152
</TouchableOpacity>
136153
</View>

0 commit comments

Comments
 (0)