feat: add update password screen

Author: Guillermo Machado

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

@@ -0,0 +1,44 @@
+import { createMutation } from 'react-query-kit';
+
+import { client } from '../common';
+
+type Variables = {
+  password: string;
+  passwordConfirmation: string;
+};
+
+type ResponseData = {
+  email: string;
+  provider: string;
+  uid: string;
+  id: number;
+  allow_password_change: boolean;
+  name: string;
+  nickname: string;
+  image: string | null;
+  created_at: string;
+  updated_at: string;
+  birthday: string | null;
+};
+
+type Response = {
+  success: boolean;
+  message: string;
+  data?: ResponseData;
+};
+
+const updatePasswordRequest = async (variables: Variables) => {
+  const { data } = await client({
+    url: '/v1/users/password',
+    method: 'PUT',
+    data: { ...variables },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return data;
+};
+
+export const useUpdatePassword = createMutation<Response, Variables>({
+  mutationFn: (variables) => updatePasswordRequest(variables),
+});

src/app/(app)/settings.tsx

@@ -50,6 +50,14 @@ export default function Settings() {
               text={'settings.account.email'}
               value={userData?.email ?? ''}
             />
+            <Link
+              asChild
+              href={{
+                pathname: '/update-password',
+              }}
+            >
+              <Item text="settings.account.password" />
+            </Link>
           </ItemsContainer>
           <ItemsContainer title="settings.generale">
             <LanguageItem />

src/app/_layout.tsx

@@ -5,6 +5,7 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { ThemeProvider } from '@react-navigation/native';
 import { SplashScreen, Stack } from 'expo-router';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
 import FlashMessage from 'react-native-flash-message';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -29,12 +30,19 @@ interceptors();
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
+  const { t } = useTranslation();
   return (
     <Providers>
       <Stack>
         <Stack.Screen name="(app)" options={{ headerShown: false }} />
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
         <Stack.Screen name="forgot-password" />
+        <Stack.Screen
+          name="update-password"
+          options={{
+            title: t('updatePassword.title'),
+          }}
+        />
         <Stack.Screen name="sign-in" options={{ headerShown: false }} />
         <Stack.Screen
           name="sign-up"

src/app/update-password.tsx

@@ -0,0 +1,97 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigation } from 'expo-router';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { showMessage } from 'react-native-flash-message';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import { z } from 'zod';
+
+import { useUpdatePassword } from '@/api/auth/use-update-password';
+import { Button, ControlledInput, FocusAwareStatusBar, Text, View } from '@/ui';
+
+type FormValues = { password: string; passwordConfirmation: string };
+const SIX = 6;
+
+const schema = z
+  .object({
+    password: z
+      .string()
+      .min(SIX, 'Password must be at least 6 characters long'),
+    passwordConfirmation: z.string(),
+  })
+  .refine((data) => data.password === data.passwordConfirmation, {
+    message: 'Passwords must match',
+    path: ['confirmPassword'],
+  });
+
+export default function UpdatePassword() {
+  const { t } = useTranslation();
+  const navigate = useNavigation();
+
+  const { mutateAsync: updatePassword } = useUpdatePassword({
+    onSuccess: () => {
+      showMessage({
+        message: t('updatePassword.successMessage'),
+        type: 'success',
+      });
+      navigate.goBack();
+    },
+    onError: () => {
+      showMessage({
+        message: t('updatePassword.errorMessage'),
+        type: 'danger',
+      });
+    },
+  });
+
+  const { handleSubmit, control } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+  });
+  const onSubmit = async (data: FormValues) => {
+    await updatePassword(data);
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <KeyboardAvoidingView>
+        <View className="gap-8 p-4">
+          <View className="gap-2">
+            <Text className="text-center text-2xl">
+              {t('updatePassword.title')}
+            </Text>
+            <Text className="text-center text-gray-600">
+              {t('updatePassword.description')}
+            </Text>
+          </View>
+          <View className="gap-2">
+            <ControlledInput
+              testID="password-input"
+              autoCapitalize="none"
+              secureTextEntry
+              control={control}
+              name="password"
+              label={t('updatePassword.passwordLabel')}
+              placeholder={t('updatePassword.passwordPlaceholder')}
+            />
+            <ControlledInput
+              testID="confirm-password-input"
+              autoCapitalize="none"
+              secureTextEntry
+              control={control}
+              name="passwordConfirmation"
+              label={t('updatePassword.confirmPasswordLabel')}
+              placeholder={t('updatePassword.confirmPasswordPlaceholder')}
+            />
+            <Button
+              testID="update-password-button"
+              label={t('updatePassword.buttonLabel')}
+              onPress={handleSubmit(onSubmit)}
+            />
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </>
+  );
+}

src/translations/en.json

@@ -68,6 +68,7 @@
     "account": {
       "email": "Email",
       "name": "Name",
+      "password": "Password",
       "title": "Account"
     },
     "app_name": "App Name",
@@ -102,6 +103,17 @@
     "version": "Version",
     "website": "Website"
   },
+  "updatePassword": {
+    "buttonLabel": "Update Password",
+    "confirmPasswordLabel": "Confirm Password",
+    "confirmPasswordPlaceholder": "Re-enter new password",
+    "description": "Enter a new password for your account.",
+    "errorMessage": "An error occurred while updating your password. Please try again.",
+    "passwordLabel": "New Password",
+    "passwordPlaceholder": "Enter new password",
+    "successMessage": "Your password has been successfully updated.",
+    "title": "Update Password"
+  },
   "welcome": "Welcome to rootstrap app site",
   "www": {
     "invalidUrl": "Invalid Url"