feat : Complete user sign-in functionnality

RitaSensei · Jun 2, 2024 · 9ac1049 · 9ac1049
1 parent ff446b3
commit 9ac1049
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 59 deletions.
diff --git a/careconnect/App.js b/careconnect/App.js
@@ -1,14 +1,10 @@
 import { useFonts } from "expo-font";
 import * as SplashScreen from "expo-splash-screen";
-// import { StatusBar } from "expo-status-bar";
 import React, { useCallback, useEffect, useState } from "react";
-// import { Text, View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { NavigationContainer } from "@react-navigation/native";
 import RootStackNavigator from "./navigators/RootStackNavigator";
-
 import { fonts } from "./assets/index";
-// import styles from "./styles";
 
 SplashScreen.preventAutoHideAsync(); // Keep splash screen visible until we are ready to hide it
 

diff --git a/careconnect/firebase/firebaseConfig.js b/careconnect/firebase/firebaseConfig.js
@@ -1,24 +1,21 @@
 /* eslint-disable prettier/prettier */
-// Import the functions you need from the SDKs you need
 import Constants  from 'expo-constants';
 import { initializeApp } from "firebase/app";
-import { getAuth } from  "firebase/auth";
+import { getAuth,initializeAuth, getReactNativePersistence } from  "firebase/auth";
 import { getFirestore } from "firebase/firestore";
+import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
 
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
-
-// Initialize the web app's Firebase configuration
 const firebaseConfig = {
-  apiKey: Constants.expoConfig.extra.apiKey,
-  authDomain: Constants.expoConfig.extra.firebaseAuthDomain,
-  projectId: Constants.expoConfig.extra.firebaseProjectId,
-  storageBucket: Constants.expoConfig.extra.firebaseStorageBucket,
-  messagingSenderId: Constants.expoConfig.extra.firebaseMessagingSenderId,
-  appId: Constants.expoConfig.extra.firebaseAppId,
+  apiKey: "AIzaSyBLRzR4uqoeO7Uc6pOA-3uTNx1PhxL-bb0",
+  authDomain: "careconnect-66481.firebaseapp.com",
+  projectId: "66481",
+  storageBucket: "careconnect-66481.appspot.com",
+  messagingSenderId: "9285222114",
+  appId: "1:9285222114:web:631966364d7e7650d268bb",
 };
 
 // Initialize Firebase, Firestore and authentication module
 export const FIREBASE_APP = initializeApp(firebaseConfig);
+export const FIREBASE_AUTH = initializeAuth(FIREBASE_APP, { persistence: getReactNativePersistence(ReactNativeAsyncStorage) });
 export const FIRESTORE_DB = getFirestore(FIREBASE_APP);
-export const FIREBASE_AUTH = getAuth(FIREBASE_APP);
+export const FIREBASE_GET_AUTH = getAuth(FIREBASE_APP);
diff --git a/careconnect/navigators/UserStackNavigator.js b/careconnect/navigators/UserStackNavigator.js
@@ -12,36 +12,44 @@ import { Image, StyleSheet } from "react-native";
 const Tab = AnimatedTabBarNavigator();
 const Stack = createStackNavigator();
 
-const UserTabNavigator = () => {
+const UserTabNavigator = ({
+  initialRouteName = 'User Home Page',
+  activeTintColor = '#FA89B8',
+  tabBarLabelStyle = { fontFamily: 'FiraSansRegular', fontSize: 10 },
+  iconSize = 18,
+  topPadding = 10,
+  bottomPadding = -8,
+  activeTabBackgrounds = '#F1E7E8',
+  dotSize = 'small',
+  tabButtonLayout = 'vertical',
+}) => {
   return (
     <Tab.Navigator
       screenOptions={{
         headerShown: false,
       }}
       tabBarOptions={{
-        activeTintColor: "#FA89B8",
+        activeTintColor: activeTintColor,
         tabStyle: { height: 75 },
       }}
       appearance={{
-        topPadding: 10,
-        bottomPadding: -8,
-        activeTabBackgrounds: "#F1E7E8",
+        topPadding: topPadding,
+        bottomPadding: bottomPadding,
+        activeTabBackgrounds: activeTabBackgrounds,
         whenInactiveShow: "icon-only",
-        dotSize: "small",
-        tabButtonLayout: "vertical",
+        dotSize: dotSize,
+        tabButtonLayout: tabButtonLayout,
       }}
+      initialRouteName={initialRouteName}
     >
       <Tab.Screen
         name="User Home Page"
         component={UserHomeScreen}
         options={{
           tabBarLabel: "Home",
-          tabBarLabelStyle: {
-            fontFamily: "FiraSansRegular",
-            fontSize: 10,
-          },
+          tabBarLabelStyle: tabBarLabelStyle,
           tabBarIcon: ({ color, focused }) => (
-            <Ionicons name={focused ? "home" : "home-outline"} size={18} color={color} />
+            <Ionicons name={focused ? "home" : "home-outline"} size={iconSize} color={color} />
           ),
         }}
       />
@@ -50,12 +58,9 @@ const UserTabNavigator = () => {
         component={SettingsScreen}
         options={{
           tabBarLabel: "Settings",
-          tabBarLabelStyle: {
-            fontFamily: "FiraSansRegular",
-            fontSize: 10,
-          },
+          tabBarLabelStyle: tabBarLabelStyle,
           tabBarIcon: ({ color, focused }) => (
-            <Ionicons name={focused ? "settings" : "settings-outline"} size={18} color={color} />
+            <Ionicons name={focused ? "settings" : "settings-outline"} size={iconSize} color={color} />
           ),
         }}
       />
@@ -64,14 +69,11 @@ const UserTabNavigator = () => {
         component={ProfileScreen}
         options={{
           tabBarLabel: "Profile",
-          tabBarLabelStyle: {
-            fontFamily: "FiraSansRegular",
-            fontSize: 10,
-          },
+          tabBarLabelStyle: tabBarLabelStyle,
           tabBarIcon: ({ color, focused }) => (
             <MaterialCommunityIcons
               name={focused ? "account" : "account-outline"}
-              size={18}
+              size={iconSize}
               color={color}
             />
           ),
@@ -82,14 +84,11 @@ const UserTabNavigator = () => {
         component={NotificationsScreen}
         options={{
           tabBarLabel: "Notifications",
-          tabBarLabelStyle: {
-            fontFamily: "FiraSansRegular",
-            fontSize: 10,
-          },
+          tabBarLabelStyle: tabBarLabelStyle,
           tabBarIcon: ({ color, focused }) => (
             <MaterialIcons
               name={focused ? "notifications" : "notifications-none"}
-              size={18}
+              size={iconSize}
               color={color}
             />
           ),
@@ -111,14 +110,6 @@ const UserStackNavigator = ({ navigation }) => {
         headerTitle: HeaderLogo,
         headerStyle: styles.headerStyle,
         headerTintColor: "#fff",
-        // todo: icon should be profile pic of user
-        // headerRight: () => (
-        //   <TouchableOpacity
-        //     onPress={() => navigation.navigate("WelcomeScreen", { screen: "Welcome Page" })}
-        //   >
-        //     <FontAwesome name="user-circle" size={38} color="black" style={{ right: 10 }} />
-        //   </TouchableOpacity>
-        // ),
       }}
     >
       <Stack.Screen name="UserTabNavigator" component={UserTabNavigator} />
@@ -139,5 +130,5 @@ const styles = StyleSheet.create({
     top: -5,
   },
 });
-// TODO : change styles (add tab bar navigation)
-export default UserStackNavigator;
+
+export default UserStackNavigator;
diff --git a/careconnect/package-lock.json b/careconnect/package-lock.json
diff --git a/careconnect/package.json b/careconnect/package.json
@@ -13,6 +13,7 @@
     "@babel/plugin-transform-logical-assignment-operators": "^7.24.1",
     "@babel/plugin-transform-template-literals": "^7.24.6",
     "@expo/vector-icons": "^14.0.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-picker/picker": "^2.7.5",
     "@react-navigation/bottom-tabs": "^6.5.20",
@@ -36,6 +37,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
     "react-native-animated-nav-tab-bar": "^3.1.10",
+    "react-native-config": "^1.5.1",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-gesture-handler": "^2.14.0",
     "react-native-gifted-chat": "^2.4.0",
@@ -52,6 +54,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "dotenv": "^16.4.5",
     "eslint": "^9.4.0",
     "eslint-config-universe": "^12.0.0",
     "prettier": "^3.2.5"

diff --git a/careconnect/screens/home/user/UserHomeScreen.js b/careconnect/screens/home/user/UserHomeScreen.js
@@ -4,7 +4,6 @@ import { Entypo } from "@expo/vector-icons";
 
 import styles from "./styles";
 import { renderProfile } from "../../../components/ProfilesSlider";
-import { Testimonials } from "../../../components/Testimonials";
 
 const profileData = [
   {

diff --git a/careconnect/screens/signin/SigninScreen.js b/careconnect/screens/signin/SigninScreen.js
@@ -1,14 +1,21 @@
 import React, { useState } from "react";
 import { View, Text, TouchableOpacity, Image } from "react-native";
-import { TextInput, Button } from "react-native-paper";
+import { TextInput, Button, Snackbar } from "react-native-paper";
+import { FIREBASE_GET_AUTH, FIRESTORE_DB } from "../../firebase/firebaseConfig";
+import { signInWithEmailAndPassword } from "firebase/auth";
 
 import styles from "./styles";
 
 const SigninScreen = ({ navigation }) => {
   const [email, setEmail] = useState("");
-  const [emailError, setEmailError] = useState(false); // Add this line to handle errors for email field.
+  const [emailError, setEmailError] = useState(false);
   const [password, setPassword] = useState("");
   const [secureTextEntry, setSecureTextEntry] = useState(true);
+  const [snackbarVisible, setSnackbarVisible] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+  const [snackbarBackgroundColor, setSnackbarBackgroundColor] = useState("red");
+  const auth = FIREBASE_GET_AUTH;
+  const db = FIRESTORE_DB;
 
   const handleEmailChange = text => {
     setEmail(text);
@@ -17,8 +24,27 @@ const SigninScreen = ({ navigation }) => {
     setEmailError(!emailRegex.test(text));
   };
 
-  const handleLogin = () => {
-    // Handle login logic here
+  const handleLogin = async () => {
+    if (email.trim() === "" || password.trim() === "") {
+      setSnackbarMessage("Please enter email and password");
+      setSnackbarBackgroundColor("red");
+      setSnackbarVisible(true);
+      return;
+    }
+    try {
+      // Sign in with Firebase Auth
+      await signInWithEmailAndPassword(auth,email, password);
+      setSnackbarMessage("Login successful");
+      setSnackbarBackgroundColor("green");
+      setSnackbarVisible(true);
+      setEmail("");
+      setPassword("");
+      navigation.navigate("User", { screen: "User Home Page" });
+    } catch (error) {
+      setSnackbarMessage("Login failed! Please check your credentials");
+      setSnackbarBackgroundColor("red");
+      setSnackbarVisible(true);
+    }
   };
 
   const handleForgotPassword = () => {
@@ -103,6 +129,20 @@ const SigninScreen = ({ navigation }) => {
           Don't want to create an account? Go as a visitor
         </Text>
       </TouchableOpacity>
+      <Snackbar
+        visible={snackbarVisible}
+        onDismiss={() => setSnackbarVisible(false)}
+        duration={3000}
+        action={{
+          label: 'OK',
+          onPress: () => {
+            setSnackbarVisible(false);
+          },
+        }}
+        style={{ backgroundColor: snackbarBackgroundColor }}
+      >
+        {snackbarMessage}
+      </Snackbar>
     </View>
   );
 };