chore: Update reset password screen component

careconnect/navigators/AuthStackNavigator.js

@@ -2,7 +2,7 @@ import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import SigninScreen from "../screens/signin/SigninScreen";
 import SignupScreen from "../screens/signup/SignupScreen";
-// import ResetPasswordScreen from "../screens/resetpassword/ResetPasswordScreen";
+import ResetPasswordScreen from "../screens/resetpassword/ResetPasswordScreen";
 
 import { StyleSheet } from "react-native";
 
@@ -29,16 +29,11 @@ const AuthStackNavigator = () => {
         name="Signup Page"
         component={SignupScreen}
       />
-      {/* <AuthStack.Screen
-        options={{ headerStyle: styles.headerStyle }}
-        name="Sms"
-        component={VerifyEmailScreen}
-      /> */}
-      {/* <AuthStack.Screen
+      <AuthStack.Screen
         options={{ headerStyle: styles.headerStyle }}
-        name="ResetPassword"
+        name="Reset Password Page"
         component={ResetPasswordScreen}
-      /> */}
+      />
     </AuthStack.Navigator>
   );
 };

careconnect/screens/resetpassword/ResetPasswordScreen.js

@@ -1,10 +1,73 @@
 import React, { useState } from "react";
-import { View, Text, TextInput, Button, TouchableOpacity, Image } from "react-native";
+import { View, Text, Image } from "react-native";
+import { TextInput, Button, Snackbar } from "react-native-paper";
 
 import styles from "./styles";
 
-const ResetPasswordScreen = () => {
-  return <View />;
+const ResetPasswordScreen = ({ navigation }) => {
+  const [email, setEmail] = useState("");
+  const [emailError, setEmailError] = useState(false);
+  const [snackbarVisible, setSnackbarVisible] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+  const [snackbarBackgroundColor, setSnackbarBackgroundColor] = useState("red");
+
+  const handleEmailChange = text => {
+    setEmail(text);
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    // Validate email and set error state
+    setEmailError(!emailRegex.test(text));
+  };
+
+  const handleResetPassword = () => {
+  };
+
+  return (
+    <View style={styles.container}>
+      <Image source={require("../../assets/icons/logo-version-mauve.png")} style={styles.image} />
+      <View style={styles.subContainer}>
+        <View style={styles.formContainer}>
+          <Text style={styles.title}>Reset Your Password</Text>
+          <View style={{ position: "absolute", top: 100 }}>
+            <TextInput
+              label="Email"
+              placeholder="Enter your email address"
+              mode="outlined"
+              left={<TextInput.Icon icon="email" color="#BDBDBD" />}
+              style={styles.input}
+              outlineColor="#BDBDBD"
+              value={email}
+              error={emailError}
+              onChangeText={handleEmailChange}
+            />
+            {emailError && <Text style={styles.errorText}>Please enter a valid email address</Text>}
+          </View>
+        </View>
+        <Button
+          mode="contained-tonal"
+          style={styles.resetPasswordButton}
+          onPress={handleResetPassword}
+          buttonColor="#FCD9E0"
+          textColor="#FA89B8"
+        >
+          <Text style={styles.resetPasswordText}>Reset Password</Text>
+        </Button>
+      </View>
+      <Snackbar
+        visible={snackbarVisible}
+        onDismiss={() => setSnackbarVisible(false)}
+        duration={3000}
+        action={{
+          label: 'OK',
+          onPress: () => {
+            setSnackbarVisible(false);
+          },
+        }}
+        style={{ backgroundColor: snackbarBackgroundColor }}
+      >
+        {snackbarMessage}
+      </Snackbar>
+    </View>
+  );
 };
 
 export default ResetPasswordScreen;

careconnect/screens/resetpassword/styles.js

@@ -0,0 +1,59 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#B272A4",
+  },
+  subContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    bottom: -60,
+  },
+  formContainer: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#F3F4F8",
+    borderRadius: 20,
+    width: 340,
+    marginBottom: 440,
+  },
+  image: {
+    width: 380,
+    resizeMode: "contain",
+    bottom: -80,
+    marginBottom: 10,
+  },
+  title: {
+    fontFamily: "FiraSansMedium",
+    fontSize: 22,
+    color: "#FA89B8",
+    position: "absolute",
+    top: 25,
+  },
+  input: {
+    width: 290,
+  },
+  resetPasswordButton: {
+    borderRadius: 10,
+    position: "absolute",
+    top: 200,
+    width: "50%",
+  },
+  resetPasswordText: {
+    fontFamily: "FiraSansSemiBold",
+    fontSize: 18,
+  },
+  errorText: {
+    fontFamily: "FiraSansRegular",
+    fontSize: 12,
+    color: "red",
+    marginTop: 5,
+    textAlign: "center",
+  },
+});
+
+export default styles;

careconnect/screens/signin/SigninScreen.js

@@ -48,7 +48,7 @@ const SigninScreen = ({ navigation }) => {
   };
 
   const handleForgotPassword = () => {
-    // Handle forgot password logic here
+    navigation.navigate("AuthScreen", { screen: "Reset Password Page" });
   };
 
   return (