Skip to content

Commit 8807fad

Browse files
jasminegurujasmineguru
committed
settings page redesigned + signout
1 parent 2ed62fb commit 8807fad

File tree

5 files changed

+107
-19
lines changed

5 files changed

+107
-19
lines changed

‎backend/utils/FirebaseAPI.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
from models.user import User
88
from mongodb_api.carbon_track_db import CarbonTrackDB
99

10-
cred = credentials.Certificate(dict(os.environ))
10+
cred = credentials.Certificate("firebase.json")
1111
APP = firebase_admin.initialize_app(cred)
1212

1313

‎frontend/assets/colorConstants.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Colors = {
1717
TEAL: '#6bcfca',
1818
TRANSLIGHTGREEN: '#c6dbb2',
1919
TRANSLIGHTGREEN2: '#b3c99d',
20+
TRANSGREENLOGOUT: '#6e7d5f',
2021
TRANSGREENBACK: '#07332b',
2122
DARKDARKGREEN: '#031c19',
2223
GREYGREEN: '#B4C792',

‎frontend/src/APIs/FLASK_API.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import axios from "axios";
22
import firebaseService from "../utilities/firebase";
3-
const FLASK_LOCAL_ADDRESS: string = "http://10.0.0.72:6050";
3+
const FLASK_LOCAL_ADDRESS: string = "http://192.168.2.12:6050";
44

55
// Function to get the Firebase authentication token
66
const getFirebaseAuthToken = async (): Promise<string | null> => {

‎frontend/src/components/appNavigation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const AppNavigation = (): JSX.Element => {
4646
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
4747
<Stack.Screen name="LogIn" component={LogInScreen} options={{ headerShown: false }} />
4848
<Stack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false }} />
49-
<Stack.Screen name="Settings" component={SettingsScreen} />
49+
<Stack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
5050
<Stack.Screen name="MainApp" component={MainAppTabs} options={{ headerShown: false }} />
5151
<Stack.Screen name="Forum" component={Forum} />
5252

‎frontend/src/screens/settings.tsx

Lines changed: 103 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,115 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
33
import Colors from '../../assets/colorConstants';
44
import { useFonts } from 'expo-font';
55
import {type RootStackParamList} from '../components/types';
66
import type { StackNavigationProp } from '@react-navigation/stack';
77
import { useNavigation } from '@react-navigation/native';
8-
export type StackNavigation = StackNavigationProp<RootStackParamList>;
8+
import { Entypo,FontAwesome, Feather } from '@expo/vector-icons';
9+
import { getAuth, onAuthStateChanged } from 'firebase/auth';
10+
import firebaseService from '../utilities/firebase';
11+
import { UsersAPI } from '../APIs/UsersAPI';
12+
import { type User } from '../models/User';
913

14+
export type StackNavigation = StackNavigationProp<RootStackParamList>;
1015
export default function SettingsScreen(): JSX.Element {
1116

1217
const navigation = useNavigation<StackNavigation>();
1318

19+
const [user, setUser] = useState<User | undefined>(undefined);
20+
21+
1422
const [loaded] = useFonts({
1523
Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'),
1624
Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'),
1725
});
1826

27+
const auth = getAuth();
28+
onAuthStateChanged(auth, (user) => {
29+
if (user === null) {
30+
navigation.navigate('Home');
31+
}
32+
});
33+
34+
useEffect(() => {
35+
const fetchUserData = async (): Promise<void> => {
36+
void UsersAPI.GetLoggedInUser().then((res) => {
37+
if (res != null) {
38+
setUser(res);
39+
}
40+
});
41+
};
42+
void fetchUserData();
43+
}, []);
44+
45+
const handleLogOut =async ():Promise<void> => {
46+
try{
47+
if (user !== undefined || user != null){
48+
await firebaseService.signOutUser();
49+
console.log("User has been logged out!")
50+
navigation.navigate('Home');
51+
}
52+
} catch(error){
53+
console.error("Loggint Out Error:", error)
54+
}
55+
56+
}
57+
58+
1959
if (!loaded) {
2060
return <></>;
2161
}
2262

2363

2464
return (
2565
<View style={styles.container}>
26-
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('UpdateProfile');}}>
27-
<Text style={styles.labels}> Edit Profile </Text>
28-
</TouchableOpacity>
29-
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('UpdatePassword');}}>
30-
<Text style={styles.labels}> Update Password </Text>
31-
</TouchableOpacity>
32-
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('UpdateHomeInfo');}}>
33-
<Text style={styles.labels}> Update Home Info </Text>
34-
</TouchableOpacity>
35-
<TouchableOpacity style={styles.buttons}>
36-
<Text style={styles.labels}> Accessibility </Text>
37-
</TouchableOpacity>
66+
67+
<View style={styles.buttonsContainer}>
68+
69+
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('UpdateProfile');}}>
70+
<FontAwesome name="user-circle-o" size={24} color={Colors.DARKDARKGREEN} style={styles.icon} />
71+
<Text style={styles.labels}> Edit Profile </Text>
72+
<Feather name="edit-2" size={24} color={Colors.DARKDARKGREEN} style={styles.nextButton}/>
73+
</TouchableOpacity>
74+
75+
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('UpdatePassword');}}>
76+
<Entypo name="key" size={24} color={Colors.DARKDARKGREEN} style={styles.icon} />
77+
<Text style={styles.labels}> Update Password </Text>
78+
<Feather name="edit-2" size={24} color={Colors.DARKDARKGREEN} style={styles.nextButton}/>
79+
</TouchableOpacity>
80+
81+
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('UpdateHomeInfo');}}>
82+
<Entypo name="info-with-circle" size={24} color={Colors.DARKDARKGREEN} style={styles.icon} />
83+
<Text style={styles.labels}> Update Home Info </Text>
84+
<Feather name="edit-2" size={24} color={Colors.DARKDARKGREEN} style={styles.nextButton}/>
85+
</TouchableOpacity>
86+
87+
<TouchableOpacity style={styles.buttons}>
88+
<FontAwesome name="universal-access" size={24} color={Colors.DARKDARKGREEN} style={styles.icon} />
89+
<Text style={styles.labels}> Accessibility </Text>
90+
<Feather name="edit-2" size={24} color={Colors.DARKDARKGREEN} style={styles.nextButton}/>
91+
</TouchableOpacity>
92+
93+
<TouchableOpacity style={styles.logOutButton} onPress={() => {void handleLogOut()}}>
94+
<Text style={styles.logOutLabel}> Log Out </Text>
95+
<Entypo name="log-out" size={24} color={Colors.WHITE} style={styles.nextButton}/>
96+
</TouchableOpacity>
97+
98+
</View>
99+
38100
</View>
39101
);
40102
}
41103

42104
const styles = StyleSheet.create({
43105
container: {
44106
flex: 1,
45-
alignItems: 'center',
46107
backgroundColor: Colors.LIGHTFGREEN,
47108
paddingTop: 40
109+
110+
},
111+
buttonsContainer:{
112+
alignItems: 'center',
48113
},
49114
buttons:{
50115
width: '85%',
@@ -56,9 +121,31 @@ const styles = StyleSheet.create({
56121
},
57122
labels:{
58123
fontWeight: '600',
59-
color: Colors.BLACK,
124+
color: Colors.DARKDARKGREEN,
125+
fontSize: 18,
126+
marginLeft: '14%',
127+
},
128+
nextButton:{
129+
position: 'absolute',
130+
left: '85%',
131+
},
132+
logOutButton:{
133+
width: '60%',
134+
height: 56,
135+
borderRadius: 15,
136+
backgroundColor: Colors.DARKGREEN,
137+
top: '50%',
138+
justifyContent: 'center',
139+
},
140+
logOutLabel:{
141+
fontWeight: '600',
60142
fontSize: 18,
61143
marginLeft: 15,
144+
color: Colors.WHITE
62145
},
146+
icon:{
147+
position: 'absolute',
148+
left: '5%',
149+
}
63150

64151
});

0 commit comments

Comments
 (0)