Merge pull request #109 from rootstrap/feature/forgot-password-screen

feat: add forgot password screen

Author: guillermomachado

src/api/auth/use-forgot-password.ts

@@ -0,0 +1,29 @@
+import { createMutation } from 'react-query-kit';
+
+import { client } from '../common';
+
+type Variables = {
+  email: string;
+};
+
+type Response = {
+  message: string;
+};
+
+const sendForgotPasswordInstructions = async (variables: Variables) => {
+  const { data } = await client({
+    url: 'auth/forgot-password', // Dummy endpoint for forgot password
+    method: 'POST',
+    data: {
+      email: variables.email,
+    },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return data;
+};
+
+export const useForgotPassword = createMutation<Response, Variables>({
+  mutationFn: (variables) => sendForgotPasswordInstructions(variables),
+});

src/app/_layout.tsx

@@ -34,6 +34,7 @@ export default function RootLayout() {
         <Stack.Screen name="(app)" options={{ headerShown: false }} />
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
         <Stack.Screen name="login" options={{ headerShown: false }} />
+        <Stack.Screen name="forgot-password" />
       </Stack>
     </Providers>
   );

src/app/forgot-password.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { showMessage } from 'react-native-flash-message';
+
+import { useForgotPassword } from '@/api/auth/use-forgot-password';
+import {
+  ForgotPasswordForm,
+  type FormType as ForgotPasswordFormType,
+} from '@/components/forgot-password-form';
+import { FocusAwareStatusBar } from '@/ui';
+
+export default function ForgotPassword() {
+  const { t } = useTranslation();
+
+  const { mutate: sendForgotPasswordInstructions } = useForgotPassword({
+    onSuccess: () => {
+      showMessage({
+        message: t('forgotPassword.successMessage'),
+        type: 'success',
+      });
+    },
+    onError: () => {
+      showMessage({
+        message: t('forgotPassword.errorMessage'),
+        type: 'danger',
+      });
+    },
+  });
+
+  const onSubmit = (data: ForgotPasswordFormType) => {
+    sendForgotPasswordInstructions(data);
+  };
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <ForgotPasswordForm onSubmit={onSubmit} />
+    </>
+  );
+}

src/app/login.tsx

@@ -1,13 +1,16 @@
 import { useRouter } from 'expo-router';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { showMessage } from 'react-native-flash-message';
 
 import { useLogin } from '@/api/auth/use-login';
 import type { LoginFormProps } from '@/components/login-form';
 import { LoginForm } from '@/components/login-form';
 import { useAuth } from '@/core';
-import { FocusAwareStatusBar } from '@/ui';
+import { Button, FocusAwareStatusBar } from '@/ui';
 
 export default function Login() {
+  const { t } = useTranslation();
   const router = useRouter();
   const signIn = useAuth.use.signIn();
   const { mutate: login } = useLogin({
@@ -21,10 +24,20 @@ export default function Login() {
   const onSubmit: LoginFormProps['onSubmit'] = (data) => {
     login(data);
   };
+
+  const navigateToForgotPasswordScreen = () => {
+    router.push('/forgot-password');
+  };
   return (
     <>
       <FocusAwareStatusBar />
       <LoginForm onSubmit={onSubmit} />
+      <Button
+        testID="login-button"
+        variant="link"
+        label={t('auth.sign-in.forgotPasswordButton')}
+        onPress={navigateToForgotPasswordScreen}
+      />
     </>
   );
 }

src/components/forgot-password-form.test.tsx

@@ -0,0 +1,55 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@/core/test-utils';
+
+import {
+  ForgotPasswordForm,
+  type ForgotPasswordFormProps,
+} from './forgot-password-form';
+
+afterEach(cleanup);
+
+const onSubmitMock: jest.Mock<ForgotPasswordFormProps['onSubmit']> = jest.fn();
+
+describe('ForgotPasswordForm', () => {
+  const SEND_EMAIL_BUTTON = 'send-email-button';
+  const EMAIL_INPUT = 'email-input';
+
+  it('renders correctly', async () => {
+    render(<ForgotPasswordForm onSubmit={onSubmitMock} />);
+    expect(await screen.findByText(/Forgot your password?/i)).toBeOnTheScreen();
+  });
+
+  it('should display error when email is empty', async () => {
+    render(<ForgotPasswordForm onSubmit={onSubmitMock} />);
+    const button = screen.getByTestId(SEND_EMAIL_BUTTON);
+    fireEvent.press(button);
+    expect(await screen.findByText(/Required/i)).toBeOnTheScreen();
+  });
+
+  it('should display error when email is invalid', async () => {
+    render(<ForgotPasswordForm onSubmit={onSubmitMock} />);
+    const emailInput = screen.getByTestId(EMAIL_INPUT);
+    const button = screen.getByTestId(SEND_EMAIL_BUTTON);
+
+    fireEvent.changeText(emailInput, 'invalid-email');
+    fireEvent.press(button);
+
+    expect(await screen.findByText(/Invalid email format/i)).toBeOnTheScreen();
+  });
+
+  it('should call onSubmit with correct values when email is valid', async () => {
+    render(<ForgotPasswordForm onSubmit={onSubmitMock} />);
+    const emailInput = screen.getByTestId(EMAIL_INPUT);
+    const button = screen.getByTestId(SEND_EMAIL_BUTTON);
+
+    fireEvent.changeText(emailInput, '[email protected]');
+    fireEvent.press(button);
+
+    await waitFor(() => {
+      expect(onSubmitMock).toHaveBeenCalledTimes(1);
+    });
+
+    expect(onSubmitMock).toHaveBeenCalledWith({
+      email: '[email protected]',
+    });
+  });
+});

src/components/forgot-password-form.tsx

@@ -0,0 +1,70 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import { z } from 'zod';
+
+import { translate } from '@/core';
+import { Button, ControlledInput, Text, View } from '@/ui';
+
+const schema = z.object({
+  email: z
+    .string()
+    .email(translate('forgotPassword.emailInvalidFormatFormError')),
+});
+
+export type FormType = z.infer<typeof schema>;
+
+export type ForgotPasswordFormProps = {
+  onSubmit: (data: FormType) => void;
+};
+
+export const ForgotPasswordForm = (props: ForgotPasswordFormProps) => {
+  const { t } = useTranslation();
+  const { handleSubmit, control } = useForm<{
+    email: string;
+  }>({
+    resolver: zodResolver(schema),
+  });
+
+  const onSubmit = (data: FormType) => {
+    props.onSubmit(data);
+  };
+
+  return (
+    <KeyboardAvoidingView>
+      <View className="gap-8 p-4">
+        <View className="gap-2">
+          <Text
+            testID="forgot-password-form-title"
+            className="text-center text-2xl"
+          >
+            {t('forgotPassword.title')}
+          </Text>
+          <Text className="text-center text-gray-600">
+            {t('forgotPassword.description')}
+          </Text>
+        </View>
+        <View className="gap-2">
+          <ControlledInput
+            testID="email-input"
+            autoCapitalize="none"
+            autoComplete="email"
+            control={control}
+            name="email"
+            label={t('forgotPassword.emailLabel')}
+            placeholder={t('forgotPassword.emailPlaceholder')}
+          />
+          <Text className="text-sm text-gray-500">
+            {t('forgotPassword.instructions')}
+          </Text>
+          <Button
+            testID="send-email-button"
+            label={t('forgotPassword.buttonLabel')}
+            onPress={handleSubmit(onSubmit)}
+          />
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+};

src/components/login-form.tsx

@@ -42,6 +42,8 @@ export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
 
         <ControlledInput
           testID="email-input"
+          autoCapitalize="none"
+          autoComplete="email"
           control={control}
           name="email"
           label="Email (optional)"

src/translations/en.json

@@ -1,4 +1,20 @@
 {
+  "auth": {
+    "sign-in": {
+      "forgotPasswordButton": "Forgot Password"
+    }
+  },
+  "forgotPassword": {
+    "buttonLabel": "Send Reset Instructions",
+    "description": "Enter your email address below and we'll send you instructions to reset your password.",
+    "emailInvalidFormatFormError": "Invalid email format",
+    "emailLabel": "Email Address",
+    "emailPlaceholder": "Enter your email",
+    "errorMessage": "There was an error sending the instructions. Please try again.",
+    "instructions": "You'll receive an email with a link to reset your password. Please check your inbox.",
+    "successMessage": "Instructions to reset your password have been sent to your email.",
+    "title": "Forgot your password?"
+  },
   "onboarding": {
     "message": "Welcome to rootstrap app site"
   },