Skip to content

Commit cd1cabb

Browse files
Gunjan-ShahapurkarJasonBoutlaspowderly12CormacSharkeyMa-Golden
authored
Pers preferences (#33)
* Preferences object created * Personalisation Component and Workflow started * Preferences UI * UI updates * Full workflow changes * Co-authored-by: Cormac Sharkey <CormacSharkey@users.noreply.github.com> * Personalisation and login changes. Co-authored-by: Cormac Sharkey <CormacSharkey@users.noreply.github.com> * adding user login and signup endpoints * moving methods to accounts util function * Login and caching changes * Styling changes * Formatting * Removing preferences button tremporarily --------- Co-authored-by: JasonBoutlas <boutlasi@tcd.ie> Co-authored-by: Conor Powderly <powderlc@tcd.ie> Co-authored-by: Cormac Sharkey <CormacSharkey@users.noreply.github.com> Co-authored-by: CormacSharkey <csharkey@tcd.ie> Co-authored-by: Ma-Golden <125670894+Ma-Golden@users.noreply.github.com>
1 parent 8edf5b3 commit cd1cabb

15 files changed

Lines changed: 950 additions & 94 deletions

‎client/AccountScreen.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import * as React from 'react';
2+
import { useState, useRef } from 'react';
3+
import { StyleSheet, View, SafeAreaView, TextInput, Button, TouchableOpacity, Text, KeyboardAvoidingView, Platform } from 'react-native';
4+
import { useReducedMotion } from 'react-native-reanimated';
5+
6+
7+
export default function AccountScreen({ navigation }) {
8+
9+
10+
return (
11+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
12+
13+
<SafeAreaView style={styles.container}>
14+
15+
16+
<TouchableOpacity style={styles.TouchableOpacity1} onPress={() => navigation.navigate('LoginScreen')}
17+
color="#841584">
18+
<Text>Log In</Text>
19+
</TouchableOpacity>
20+
21+
<TouchableOpacity style={styles.TouchableOpacity2} onPress={() => navigation.navigate('SignUpScreen')}
22+
color="#841584">
23+
<Text>Sign Up</Text>
24+
</TouchableOpacity>
25+
26+
<TouchableOpacity style={styles.TouchableOpacity3} onPress={() => navigation.navigate('Map')}
27+
color="#841584">
28+
<Text>Continue as Guest</Text>
29+
</TouchableOpacity>
30+
31+
</SafeAreaView>
32+
</View>
33+
);
34+
}
35+
36+
const styles = StyleSheet.create({
37+
container: {
38+
alignItems: "center",
39+
justifyContent: "center",
40+
paddingVertical: 10,
41+
paddingHorizontal: 45,
42+
top: '-20%',
43+
//marginBottom: -150,
44+
},
45+
TextInput: {
46+
width: 100,
47+
height: 50,
48+
backgroundColor: '#fff',
49+
borderColor: '#ccc',
50+
borderWidth: 1,
51+
borderRadius: 10,
52+
paddingHorizontal: 10,
53+
marginBottom: 15,
54+
textAlign: 'center',
55+
textAlignVertical: 'center',
56+
},
57+
TouchableOpacity1: {
58+
alignItems: 'center',
59+
left: '0%',
60+
top: '20%',
61+
backgroundColor: '#007bff',
62+
paddingVertical: 10,
63+
paddingHorizontal: 40,
64+
borderRadius: 10,
65+
shadowColor: '#000',
66+
shadowOpacity: 0.2,
67+
shadowOffset: { width: 0, height: 2 },
68+
shadowRadius: 5,
69+
elevation: 5,
70+
},
71+
TouchableOpacity2: {
72+
alignItems: 'center',
73+
left: '0%',
74+
top: '30%',
75+
backgroundColor: '#007bff',
76+
paddingVertical: 10,
77+
paddingHorizontal: 40,
78+
borderRadius: 10,
79+
shadowColor: '#000',
80+
shadowOpacity: 0.2,
81+
shadowOffset: { width: 0, height: 2 },
82+
shadowRadius: 5,
83+
elevation: 5,
84+
},
85+
TouchableOpacity3: {
86+
alignItems: 'center',
87+
left: '0%',
88+
top: '40%',
89+
backgroundColor: '#007bff',
90+
paddingVertical: 10,
91+
paddingHorizontal: 40,
92+
borderRadius: 10,
93+
shadowColor: '#000',
94+
shadowOpacity: 0.2,
95+
shadowOffset: { width: 0, height: 2 },
96+
shadowRadius: 5,
97+
elevation: 5,
98+
},
99+
TouchableOpacityText: {
100+
color: '#fff',
101+
fontWeight: 'bold',
102+
textAlign: 'center',
103+
},
104+
});

‎client/App.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import WeatherScreen from './Weather';
77
import FindRouteScreen from './FindRoute';
88
import SelectRouteScreen from './SelectRoute';
99
import Dashboard from './SustainabilityDashboard'
10+
import PreferencesScreen from './Preferences'
11+
import AccountScreen from './AccountScreen';
12+
import SignUpScreen from './SignUp';
1013
import DisplayRouteScreen from './DisplayRoute';
1114
import FriendsScreen from './FriendsScreen'
1215

@@ -15,14 +18,17 @@ const Stack = createNativeStackNavigator();
1518
export default function App() {
1619
return (
1720
<NavigationContainer>
18-
<Stack.Navigator initialRouteName="Map">
19-
<Stack.Screen name="Map" component={MapScreen} />
21+
<Stack.Navigator initialRouteName="AccountScreen">
22+
<Stack.Screen options={{headerBackVisible:false}} name="Map" component={MapScreen} />
23+
<Stack.Screen options={{headerBackVisible:false}} name="AccountScreen" component={AccountScreen} />
2024
<Stack.Screen name="LoginScreen" component={LoginScreen} />
25+
<Stack.Screen name="SignUpScreen" component={SignUpScreen} />
2126
<Stack.Screen name="WeatherScreen" component={WeatherScreen} />
2227
<Stack.Screen name="FindRouteScreen" component={FindRouteScreen} />
2328
<Stack.Screen name="SelectRouteScreen" component={SelectRouteScreen} />
2429
<Stack.Screen name="DisplayRouteScreen" component={DisplayRouteScreen} />
2530
<Stack.Screen name="Dashboard" component={Dashboard} />
31+
<Stack.Screen name="PreferencesScreen" component={PreferencesScreen} />
2632
<Stack.Screen name="FriendsScreen" component={FriendsScreen} />
2733
</Stack.Navigator>
2834
</NavigationContainer>

‎client/LogIn.js‎

Lines changed: 18 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,15 @@ import * as React from 'react';
22
import { useState, useRef } from 'react';
33
import { StyleSheet, View, SafeAreaView, TextInput, Button, TouchableOpacity, Text, KeyboardAvoidingView, Platform } from 'react-native';
44
import { useReducedMotion } from 'react-native-reanimated';
5+
import { handleLogin, handleSignup } from "./accountUtils";
6+
57

68
export default function LoginScreen({ navigation }) {
79
const [serverResponse, setServerResponse] = useState("");
810
const [username, setUsername] = useState("");
911
const [password, setPassword] = useState("");
1012
const ref2 = React.useRef(null);
1113

12-
const passphrase = "jr023uf1(£12g*";
13-
14-
const handleLogin = async () => {
15-
if (username == '' || password == '') {
16-
alert("All fields have to be filled before logging in!")
17-
}
18-
else {
19-
console.log('username: ', username)
20-
console.log('password: ', password)
21-
// alert(`Username: ${username}\nPassword: ${password}`)
22-
navigation.goBack()
23-
24-
try {
25-
const baseUrl = Platform.OS === 'web'
26-
? 'http://localhost:8000'
27-
: process.env.EXPO_PUBLIC_API_URL;
28-
console.log(`Sending request to ${baseUrl}/login`);
29-
30-
const response = await fetch(`${baseUrl}/login`, {
31-
method: 'POST',
32-
headers: {
33-
'Content-Type': 'application/json',
34-
},
35-
body: JSON.stringify({username: username, password: password}),
36-
});
37-
38-
if (!response.ok) {
39-
throw new Error(`HTTP error! status: ${response.status}`);
40-
}
41-
42-
// Await response and print message from server
43-
const data = await response.json();
44-
alert(data.message)
45-
46-
console.log('Server response:', data);
47-
setServerResponse(data.message);
48-
} catch (error) {
49-
console.error('Error details:', error);
50-
setServerResponse(`Error: ${error.message}`);
51-
}
52-
}
53-
};
54-
5514
return (
5615
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
5716

@@ -73,7 +32,7 @@ export default function LoginScreen({ navigation }) {
7332
style={styles.TextInput}
7433
/>
7534

76-
<TouchableOpacity style={styles.TouchableOpacity} onPress={handleLogin}
35+
<TouchableOpacity style={styles.TouchableOpacity} onPress={() => handleLogin(username, password, setServerResponse, navigation)}
7736
color="#841584">
7837
<Text>Log In</Text>
7938
</TouchableOpacity>
@@ -90,6 +49,7 @@ const styles = StyleSheet.create({
9049
paddingVertical: 10,
9150
paddingHorizontal: 45,
9251
top: '-20%',
52+
//marginBottom: -150,
9353
},
9454
TextInput: {
9555
width: 100,
@@ -117,6 +77,20 @@ const styles = StyleSheet.create({
11777
shadowRadius: 5,
11878
elevation: 5,
11979
},
80+
TouchableOpacity1: {
81+
alignItems: 'center',
82+
left: '0%',
83+
top: '5%',
84+
backgroundColor: '#007bff',
85+
paddingVertical: 10,
86+
paddingHorizontal: 40,
87+
borderRadius: 10,
88+
shadowColor: '#000',
89+
shadowOpacity: 0.2,
90+
shadowOffset: { width: 0, height: 2 },
91+
shadowRadius: 5,
92+
elevation: 5,
93+
},
12094
TouchableOpacityText: {
12195
color: '#fff',
12296
fontWeight: 'bold',

‎client/Map.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function MapScreen({ navigation }) {
8686
</TouchableOpacity>
8787
<TouchableOpacity
8888
style={styles.loginButton}
89-
onPress={() => navigation.navigate('LoginScreen')}
89+
onPress={() => navigation.navigate('AccountScreen')}
9090
>
9191

9292
<Text style={styles.buttonText}>Log In</Text>
@@ -123,6 +123,15 @@ export default function MapScreen({ navigation }) {
123123
>
124124
<Text style={styles.buttonText}>Weather</Text>
125125
</TouchableOpacity>
126+
127+
{/* todo: Need to make new changes to the preferences logic */}
128+
{/* <TouchableOpacity
129+
style={styles.PreferencesButton}
130+
onPress={() => navigation.navigate('PreferencesScreen')}
131+
>
132+
<Text style={styles.buttonText}>User Preferences</Text>
133+
</TouchableOpacity> */}
134+
126135
</>
127136
) : (
128137
<Text style={styles.loadingText}>Fetching your location...</Text>
@@ -186,6 +195,21 @@ const styles = StyleSheet.create({
186195
shadowRadius: 5,
187196
elevation: 5,
188197
},
198+
PreferencesButton: {
199+
position: 'absolute',
200+
alignItems: 'center',
201+
left: '0%',
202+
top: '10%',
203+
backgroundColor: '#007bff',
204+
paddingVertical: 10,
205+
paddingHorizontal: 40,
206+
borderRadius: 10,
207+
shadowColor: '#000',
208+
shadowOpacity: 0.2,
209+
shadowOffset: { width: 0, height: 2 },
210+
shadowRadius: 5,
211+
elevation: 5,
212+
},
189213

190214
friendScreenButton: {
191215
position: 'absolute',

0 commit comments

Comments
 (0)