Merge pull request #100 from bambu-group-03/recover_password

Recover password

src/navigation/auth-navigator.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { useAuth } from '@/core';
 import { Login } from '@/screens';
 import { Pressable, View } from '@/ui';
+import { RecoverPasswordScreen } from '@/screens/login/recover-password-screen';
 
 export const GoToLogout = () => {
   const status = useAuth.use.status();
@@ -24,6 +25,7 @@ export const GoToLogout = () => {
 
 export type AuthStackParamList = {
   Login: undefined;
+  RecoverPasswordScreen: { email: string };
 };
 const Stack = createNativeStackNavigator<AuthStackParamList>();
 
@@ -37,6 +39,10 @@ export const AuthNavigator = () => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name="RecoverPasswordScreen"
+        component={RecoverPasswordScreen}
+      />
     </Stack.Navigator>
   );
 };

src/navigation/types.tsx

@@ -9,6 +9,7 @@ import type { ProfileStackParamList } from '../screens/profile/profile-navigator
 import type { AuthStackParamList } from './auth-navigator';
 import type { FeedStackParamList } from './feed-navigator';
 import type { NotificationReceivedStackParamList } from './notification-handlers';
+import { LoginStackParamList } from '@/screens/login/login-navigator';
 
 // TODO: change, this must be dynamic
 export type RootStackParamList = AuthStackParamList &
@@ -18,6 +19,7 @@ export type RootStackParamList = AuthStackParamList &
   UserStackParamList &
   NotificationStackParamList &
   NotificationReceivedStackParamList &
+  LoginStackParamList &
   SearchStackParamList;
 
 declare global {

src/screens/login/firebase.tsx

@@ -47,6 +47,18 @@ auth.onIdTokenChanged(async (user) => {
 });
 const db = getFirestore(app);
 
+// Send password reset email
+const resetPasswordEmail = async (email: string) => {
+  try {
+    await sendPasswordResetEmail(auth, email);
+    console.log('Password reset email sent successfully.');
+  } catch (error) {
+    console.error('Error sending password reset email:', error);
+  }
+
+  return;
+};
+
 const logInWithEmailAndPassword = async (email: string, password: string) => {
   let userCred: UserCredential | null = null;
 
@@ -117,7 +129,6 @@ const registerWithEmailAndPassword = async (
 const sendPasswordReset = async (email: string) => {
   try {
     await sendPasswordResetEmail(auth, email);
-    console.error('Password reset link sent!');
   } catch (err) {
     console.error(err);
   }
@@ -150,4 +161,5 @@ export {
   registerIntoDb,
   registerWithEmailAndPassword,
   sendPasswordReset,
+  resetPasswordEmail,
 };

src/screens/login/login-form.tsx

@@ -4,8 +4,10 @@ import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
-import { Image } from '@/ui';
+import { Image, TouchableOpacity } from '@/ui';
 import { Button, ControlledInput, Text, View } from '@/ui';
+import { useNavigation } from '@react-navigation/native';
+import { ResetFormProps } from './recover-password-screen';
 
 const schema = z.object({
   name: z.string().optional(),
@@ -37,6 +39,9 @@ export const LoginForm = ({
   const { handleSubmit, control } = useForm<FormType>({
     resolver: zodResolver(schema),
   });
+
+  let navigate = useNavigation();
+
   return (
     <View className="flex-1 justify-center p-4 ">
       <Image
@@ -64,6 +69,21 @@ export const LoginForm = ({
         secureTextEntry={true}
       />
 
+      <TouchableOpacity
+        onPress={() =>
+          navigate.navigate('RecoverPasswordScreen', {
+            email: '',
+          })
+        }
+      >
+        <Text
+          testID="forgot-password"
+          className="text-right py-2 text-blue-600"
+        >
+          Forgot Password?
+        </Text>
+      </TouchableOpacity>
+
       <Button
         testID="login-button"
         label="Login with Google"

src/screens/login/login-navigator.tsx

@@ -0,0 +1,22 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import * as React from 'react';
+import { FormType, RecoverPasswordScreen } from './recover-password-screen';
+import Login from '.';
+import { SubmitHandler } from 'react-hook-form';
+
+export type LoginStackParamList = {
+  Login: undefined;
+  RecoverPasswordScreen: {
+    email: string;
+  };
+};
+
+const Stack = createNativeStackNavigator<LoginStackParamList>();
+
+export const LoginNavigator = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Login" component={Login} />
+    </Stack.Navigator>
+  );
+};

src/screens/login/recover-password-screen.tsx

@@ -0,0 +1,75 @@
+import { View, Text, ControlledInput, Button } from '@/ui';
+import { LoginStackParamList } from './login-navigator';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { useState } from 'react';
+import * as z from 'zod';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { sendPasswordReset } from './firebase';
+
+const onResetSubmit: ResetFormProps['onResetSubmit'] = (data) => {
+  try {
+    sendPasswordReset(data.email).then(() => {});
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+const schema = z.object({
+  email: z
+    .string({
+      required_error: 'Email is required',
+    })
+    .email('Invalid email format'),
+});
+
+export type FormType = z.infer<typeof schema>;
+
+export type ResetFormProps = {
+  onResetSubmit?: SubmitHandler<FormType>;
+};
+
+export const RecoverPasswordScreen = () => {
+  const route =
+    useRoute<RouteProp<LoginStackParamList, 'RecoverPasswordScreen'>>();
+  const { email } = route.params;
+
+  const [emailRecover, setEmailRecover] = useState(email);
+
+  const { handleSubmit, control } = useForm<FormType>({
+    resolver: zodResolver(schema),
+  });
+
+  let navigate = useNavigation();
+
+  return (
+    <View className="flex-1 justify-center p-4 ">
+      <Text testID="form-title" variant="h1" className="pb-6 text-center">
+        Reset Password
+      </Text>
+
+      <ControlledInput
+        testID="email-input"
+        placeholder={emailRecover}
+        control={control}
+        name="email"
+        label="Email"
+      />
+      <Button
+        testID="login-button"
+        label="Reset Password"
+        onPress={handleSubmit(onResetSubmit)}
+        variant="primary"
+      />
+
+      <Button
+        testID="go-back-button"
+        label="Volver atras"
+        onPress={() => {
+          navigate.navigate('Login');
+        }}
+        variant="primary"
+      />
+    </View>
+  );
+};