From 4e6838d1239e493aef5ed1ce3198f7de6c1bcfb4 Mon Sep 17 00:00:00 2001 From: genjiguru <54900323+jasmineguru@users.noreply.github.com> Date: Wed, 13 Dec 2023 22:05:08 -0500 Subject: [PATCH] update password working - will edit linting errors in next commit --- frontend/src/APIs/UsersAPI.ts | 4 +- frontend/src/components/appNavigation.tsx | 16 +- .../src/screens/settings/updateHomeScreen.tsx | 168 +++++++++++++- .../src/screens/settings/updatePassword.tsx | 210 +++++++++++++++++- frontend/src/utilities/firebase.ts | 12 +- 5 files changed, 372 insertions(+), 38 deletions(-) diff --git a/frontend/src/APIs/UsersAPI.ts b/frontend/src/APIs/UsersAPI.ts index 2e87784..befb267 100644 --- a/frontend/src/APIs/UsersAPI.ts +++ b/frontend/src/APIs/UsersAPI.ts @@ -2,7 +2,7 @@ import FLASK_HTTPS from './FLASK_API'; import type { User } from '../models/User'; import firebaseService from '../utilities/firebase'; import { type ObjectId } from 'mongodb'; -import axios, { AxiosError } from 'axios'; +import axios, { type AxiosError } from 'axios'; const routeName = '/users'; @@ -114,7 +114,7 @@ export const UsersAPI = { // Make the request to update the email with the new token const res = await FLASK_HTTPS.patch( routeName + `/user/update_email/${userId.toHexString()}`, - { email: email }, + { email }, { headers: { Authorization: `Bearer ${newToken}`, diff --git a/frontend/src/components/appNavigation.tsx b/frontend/src/components/appNavigation.tsx index f58beb0..d6aaeee 100644 --- a/frontend/src/components/appNavigation.tsx +++ b/frontend/src/components/appNavigation.tsx @@ -66,24 +66,12 @@ const AppNavigation = (): JSX.Element => { ; +export default function UpdateProfileScreen(): JSX.Element { + const navigation = useNavigation(); + const [loaded] = useFonts({ + Montserrat: require('../../../assets/fonts/MontserratThinRegular.ttf'), + Josefin: require('../../../assets/fonts/JosefinSansThinRegular.ttf'), + }); + const [userid, setUserid] = useState(''); + const [rerenderKey, setRerenderKey] = useState(0); + const [loggedUser, setLoggedUser] = useState(undefined); -export default function UpdateHomeScreen(): JSX.Element { + const auth = getAuth(); + onAuthStateChanged(auth, (user) => { + if (user === null) { + navigation.navigate('LogIn'); + } + }); + + useEffect(() => { + const fetchUserData = async (): Promise => { + const user = await firebaseService.getFirebaseUser(); + setUserid(user?.uid ?? ''); + }; + void fetchUserData(); + }, [rerenderKey]); + + const handleUpdateHome = async (): Promise => { + try { + const user = await firebaseService.getFirebaseUser(); + + if (user != null) { + console.log('update home') + } + } catch (error: any) { + // Log any errors + console.error('Error updating email in UpdateProfile: ', error); + } + }; + + if (!loaded) { + return <>; + } return ( - - Moved? No worries, update your info here. - + + + navigation.goBack()}> + + Settings + + Update Home Info + + + + + Henlo mate + + + handleUpdateHome}> + Confirm Change + + + ); } - const styles = StyleSheet.create({ container: { - flex: 1, + flexGrow: 1, + backgroundColor: Colors.DARKDARKGREEN, + }, + profileContainer: { + height: 645, + width: '85%', + backgroundColor: Colors.DARKGREEN, + borderRadius: 20, + alignSelf: 'center', + margin: 40, + }, + backButton: { + position: 'absolute', + top: 60, + left: 20, + flexDirection: 'row', alignItems: 'center', - backgroundColor: Colors.LIGHTFGREEN, - paddingTop: 40 + padding: 10, + }, + buttonText: { + fontSize: 16, + color: Colors.WHITE, + fontWeight: '500', + }, + header: { + fontSize: 40, + color: Colors.WHITE, + position: 'absolute', + top: 105, + textAlign: 'center', + fontWeight: '700', + }, + headerBox: { + alignItems: 'center', + paddingBottom: 130, + }, + textInputBox: { + alignSelf: 'center', + top: '10%', + padding: 10, + }, + label: { + fontSize: 16, + opacity: 0.5, + color: Colors.WHITE, + }, + textInput: { + paddingHorizontal: 5, + marginBottom: 30, + marginTop: 10, + borderRadius: 10, + fontSize: 16, + borderBottomWidth: 1, + borderColor: Colors.WHITE, + color: Colors.WHITE, + width: 270, + }, + saveButton: { + borderRadius: 5, + alignSelf: 'center', + top: '20%', + }, + saveButtonText: { + color: Colors.LIGHTFGREEN, + fontSize: 16, + textDecorationLine: 'underline', + fontWeight: '400', + shadowColor: Colors.LIGHTFGREEN, }, -}); \ No newline at end of file +}); diff --git a/frontend/src/screens/settings/updatePassword.tsx b/frontend/src/screens/settings/updatePassword.tsx index 271194c..e37bc5f 100644 --- a/frontend/src/screens/settings/updatePassword.tsx +++ b/frontend/src/screens/settings/updatePassword.tsx @@ -1,22 +1,212 @@ -import React from 'react'; -import { View, Text, StyleSheet } from 'react-native'; +import React, { useState, useEffect } from 'react'; +import { + ScrollView, + View, + Text, + StyleSheet, + TouchableOpacity, + TextInput, + Alert, +} from 'react-native'; import Colors from '../../../assets/colorConstants'; +import { type RootStackParamList } from '../../components/types'; +import type { StackNavigationProp } from '@react-navigation/stack'; +import { useNavigation } from '@react-navigation/native'; +import Ionicons from '@expo/vector-icons/Ionicons'; +import { useFonts } from 'expo-font'; +import firebaseService from '../../utilities/firebase'; +import { type User } from '../../models/User'; +import { + onAuthStateChanged, + getAuth, + updatePassword, + EmailAuthProvider, + reauthenticateWithCredential, +} from 'firebase/auth'; +export type StackNavigation = StackNavigationProp; +export default function UpdateProfileScreen(): JSX.Element { + const navigation = useNavigation(); + const [loaded] = useFonts({ + Montserrat: require('../../../assets/fonts/MontserratThinRegular.ttf'), + Josefin: require('../../../assets/fonts/JosefinSansThinRegular.ttf'), + }); + const [userid, setUserid] = useState(''); + const [rerenderKey, setRerenderKey] = useState(0); + const [loggedUser, setLoggedUser] = useState(undefined); + const [newPass, setNewPass] = useState(''); -export default function UpdatePasswordScreen(): JSX.Element { + const auth = getAuth(); + onAuthStateChanged(auth, (user) => { + if (user === null) { + navigation.navigate('LogIn'); + } + }); + + useEffect(() => { + const fetchUserData = async (): Promise => { + const user = await firebaseService.getFirebaseUser(); + setUserid(user?.uid ?? ''); + }; + void fetchUserData(); + }, [rerenderKey]); + + const handleUpdatePassword = async (): Promise => { + try { + const user = await firebaseService.getFirebaseUser(); + if (user != null) { + if (newPass != null && user.email != null){ + const userCreds = await promptUserForCredentials(); + if (userCreds != null){ + const creds = EmailAuthProvider.credential(user.email, userCreds.password); + await reauthenticateWithCredential(user, creds) + .then( async (result) => { + await updatePassword(user, newPass) + .then(() => alert('Password reset email has be sent. Please check your inbox for next steps. You will now be logged out.')) + .catch((error: any) => console.log('update password after alert error:', error)); + console.log('Firebase (frontend): Update password sucess (maybay)') + + await firebaseService.signOutUser(); + navigation.navigate('LogIn'); + // await sendPasswordResetEmail(auth, user.email) + // .then(() => alert('Password reset email has be sent. Please check your inbox for next steps.')) + // .catch((error: any) => console.log('Password email error:', error)) + } + ); + } + + } + + + + } + } catch (error: any) { + // Log any errors + console.error('Error updating email in Update Password screen: ', error); + } + }; + + const promptUserForCredentials = async (): Promise<{ password: string } | null> => { + return await new Promise((resolve) => { + Alert.prompt( + 'Reauthentication', + 'Please enter your current password:', + [ + { + text: 'Cancel', + onPress: () => resolve(null), + style: 'cancel', + }, + { + text: 'Submit', + onPress: (password) => resolve({ password: password ?? '' }), + }, + ], + 'secure-text' + ); + }); + }; + + + if (!loaded) { + return <>; + } return ( - - Update Password - + + + navigation.goBack()}> + + Settings + + Update Pasword + + + + Name + setNewPass(text)} + /> + + + {/* f onPress={handleUpdatePassword} */} + Update Password + + + ); } - const styles = StyleSheet.create({ container: { - flex: 1, + flexGrow: 1, + backgroundColor: Colors.DARKDARKGREEN, + }, + profileContainer: { + height: 645, + width: '85%', + backgroundColor: Colors.DARKGREEN, + borderRadius: 20, + alignSelf: 'center', + margin: 40, + }, + backButton: { + position: 'absolute', + top: 60, + left: 20, + flexDirection: 'row', + alignItems: 'center', + padding: 10, + }, + buttonText: { + fontSize: 16, + color: Colors.WHITE, + fontWeight: '500', + }, + header: { + fontSize: 40, + color: Colors.WHITE, + position: 'absolute', + top: 105, + textAlign: 'center', + fontWeight: '700', + }, + headerBox: { alignItems: 'center', - backgroundColor: Colors.LIGHTFGREEN, - paddingTop: 40 + paddingBottom: 130, + }, + textInputBox: { + alignSelf: 'center', + top: '10%', + padding: 10, + }, + label: { + fontSize: 16, + opacity: 0.5, + color: Colors.WHITE, + }, + saveButton: { + borderRadius: 5, + alignSelf: 'center', + top: '20%', + }, + textInput: { + paddingHorizontal: 5, + marginBottom: 30, + marginTop: 10, + borderRadius: 10, + fontSize: 16, + borderBottomWidth: 1, + borderColor: Colors.WHITE, + color: Colors.WHITE, + width: 270, + }, + saveButtonText: { + color: Colors.LIGHTFGREEN, + fontSize: 16, + textDecorationLine: 'underline', + fontWeight: '400', + shadowColor: Colors.LIGHTFGREEN, }, }); diff --git a/frontend/src/utilities/firebase.ts b/frontend/src/utilities/firebase.ts index 91aad2b..8a71650 100644 --- a/frontend/src/utilities/firebase.ts +++ b/frontend/src/utilities/firebase.ts @@ -10,7 +10,7 @@ import { updateEmail, type User, type UserCredential, - sendEmailVerification, + updatePassword, } from 'firebase/auth'; import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage'; import { getStorage, ref as storageRef, uploadBytes, getDownloadURL } from 'firebase/storage'; @@ -96,6 +96,16 @@ const firebaseService = { throw error; } }, + // updateUserPassword: async (user: User, newPassword: string) => { + // try{ + // await updatePassword(user, newPassword) + // .then(() => alert('Password reset email has be sent. Please check your inbox for next steps. You will now be logged out.')) + // .catch((error: any) => console.log('update password after alert error:', error)); + // console.log('Firebase (frontend): Update password sucess (maybay)') + // } catch (error){ + // console.error('UpdatePassword Error:', error); + // } + // }, }; export default firebaseService;