Merge pull request #62 from binarapps/feat/password-form

Feat/ProfilePasswordForm added

Author: MateuszRostkowski

src/components/screens/profile/ProfileDeleteAccountButton.tsx

@@ -58,7 +58,7 @@ export const ProfileDeleteAccountButton = () => {
 
   return (
     <Box>
-      <Box borderColor="border.secondary" borderTopWidth={1} my={4} py={6} alignItems="flex-start">
+      <Box borderColor="border.secondary" borderTopWidth={1} py={6} alignItems="flex-start">
         <Button
           leftIconName="delete-bin-line"
           variant="SecondaryDestructive"

src/components/screens/profile/ProfilePasswordForm.tsx

@@ -0,0 +1,42 @@
+import { Box, Button, Row } from '@baca/design-system'
+import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ProfileControlledInput } from './ProfileControlledInput'
+
+export const ProfilePasswordForm = () => {
+  const { t } = useTranslation()
+  const { control, errors, submit, isSubmitting } = useUpdatePasswordForm()
+
+  return (
+    <Box>
+      <Box borderColor="border.secondary" borderTopWidth={1} py={6}>
+        <ProfileControlledInput
+          label={t('form.labels.old_password')}
+          name="oldPassword"
+          placeholder={t('form.placeholders.old_password')}
+          control={control}
+          errors={errors}
+        />
+        <ProfileControlledInput
+          label={t('form.labels.new_password')}
+          name="password"
+          placeholder={t('form.placeholders.new_password')}
+          control={control}
+          errors={errors}
+        />
+        <Row maxW={800} justifyContent="flex-end">
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            onPress={submit}
+            testID="changePasswordButton"
+          >
+            {t('common.change')}
+          </Button>
+        </Row>
+      </Box>
+    </Box>
+  )
+}

src/hooks/forms/useUpdatePasswordForm.ts

@@ -0,0 +1,58 @@
+import { useAuthControllerUpdate } from '@baca/api/query/auth/auth'
+import { AuthUpdateDto } from '@baca/api/types'
+import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils'
+import { useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+export const useUpdatePasswordForm = () => {
+  const { t } = useTranslation()
+  const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate()
+
+  const defaultValues: AuthUpdateDto = useMemo(
+    () => ({
+      oldPassword: '',
+      password: '',
+    }),
+    []
+  )
+
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    reset,
+    setError: setFormError,
+  } = useForm<AuthUpdateDto>({
+    mode: 'onTouched',
+    defaultValues,
+  })
+
+  const onSubmit = (data: AuthUpdateDto) => {
+    updatePasswordMutation(
+      { data },
+      {
+        onSuccess: () => {
+          showSuccessToast({ description: t('toast.success.profile_updated') })
+          reset(defaultValues)
+        },
+        onError: (e) => {
+          handleFormError<keyof AuthUpdateDto>(
+            e as unknown as keyof AuthUpdateDto,
+            ({ field, description }) => {
+              setFormError(field, { message: description })
+            }
+          )
+          hapticImpact()
+        },
+      }
+    )
+  }
+
+  return {
+    control,
+    errors,
+    isSubmitting: isLoading,
+    submit: handleSubmit(onSubmit),
+  }
+}

src/i18n/translations/en.json

@@ -27,6 +27,7 @@
     "go_back": "Go back",
     "remove": "Remove",
     "save": "Save",
+    "change": "Change",
     "search": "Search",
     "try_again_later": "Please try again later",
     "try_again": "Try again"
@@ -56,15 +57,19 @@
       "email": "E-mail address",
       "first_name": "First name",
       "last_name": "Last name",
-      "password": "Password"
+      "password": "Password",
+      "old_password": "Old password",
+      "new_password": "New password"
     },
     "placeholders": {
       "confirm_password": "Confirm password",
       "create_password": "Create a password",
       "email": "Enter your email",
       "first_name": "Enter your first name",
       "last_name": "Enter your last name",
-      "password": "Password"
+      "password": "Password",
+      "old_password": "Enter current password",
+      "new_password": "Enter new password"
     },
     "select": {},
     "validation": {

src/i18n/translations/pl.json

@@ -27,6 +27,7 @@
     "go_back": "Cofnij",
     "remove": "Usuń",
     "save": "Zapisz",
+    "change": "Zmień",
     "search": "Szukaj",
     "try_again_later": "Proszę spróbuj ponownie później",
     "try_again": "Spróbuj ponownie"
@@ -56,15 +57,19 @@
       "email": "Adres e-mail",
       "first_name": "Imię",
       "last_name": "Nazwisko",
-      "password": "Hasło"
+      "password": "Hasło",
+      "old_password": "Stare hasło",
+      "new_password": "Nowe hasło"
     },
     "placeholders": {
       "confirm_password": "Potwierdź hasło",
       "create_password": "Utwórz nowe hasło",
       "email": "Podaj adres e-mail",
       "first_name": "Podaj swoje imię",
       "last_name": "Podaj swoje nazwisko",
-      "password": "Hasło"
+      "password": "Hasło",
+      "old_password": "Podaj stare hasło",
+      "new_password": "Podaj nowe hasło"
     },
     "select": {},
     "validation": {
@@ -126,18 +131,6 @@
     "colors_label": "Kolory"
   },
   "components_screen": {
-    "test_notification": "Test notification",
-    "typography": {
-      "label": "Typography",
-      "xs": "xs",
-      "sm": "sm",
-      "md": "md",
-      "lg": "lg",
-      "xl": "xl",
-      "2xl": "2xl",
-      "3xl": "3xl",
-      "4xl": "4xl"
-    },
     "button_variants": {
       "disabled": "Button disabled",
       "header": "Button variants",
@@ -166,6 +159,18 @@
     "notification": {
       "description": "by react-native-notificated 🎉",
       "title": "In-app notification example"
+    },
+    "test_notification": "Test notification",
+    "typography": {
+      "label": "Typography",
+      "xs": "xs",
+      "sm": "sm",
+      "md": "md",
+      "lg": "lg",
+      "xl": "xl",
+      "2xl": "2xl",
+      "3xl": "3xl",
+      "4xl": "4xl"
     }
   },
   "confirm_email_screen": {

src/screens/ProfileScreen.tsx

@@ -1,6 +1,7 @@
 import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton'
 import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm'
 import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader'
+import { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm'
 import { Box, Spacer } from '@baca/design-system'
 import { useTranslation, useScreenOptions } from '@baca/hooks'
 
@@ -16,6 +17,9 @@ export const ProfileScreen = () => {
       <ProfileHeader />
       <Spacer y={4} />
       <ProfileDetailsForm />
+      <Spacer y={4} />
+      <ProfilePasswordForm />
+      <Spacer y={4} />
       <ProfileDeleteAccountButton />
     </Box>
   )