From c77ed0944c80748696e81532bcece13ac6e96124 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 29 May 2024 19:02:45 +0200 Subject: [PATCH 1/5] first commit on password form branch --- src/screens/ProfileScreen.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 3b324d5e..249396bc 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -20,3 +20,5 @@ export const ProfileScreen = () => { ) } + +//First commit on new branch From 693aefea8f989a0e115be1b0aaca63a949f18e69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 29 May 2024 20:53:17 +0200 Subject: [PATCH 2/5] UI of the password form done --- .../screens/profile/ProfilePasswordForm.tsx | 83 +++++++++++++++++++ src/hooks/forms/useUpdatePasswordForm.ts | 49 +++++++++++ src/i18n/translations/en.json | 9 +- src/screens/ProfileScreen.tsx | 39 ++++++++- 4 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 src/hooks/forms/useUpdatePasswordForm.ts diff --git a/src/components/screens/profile/ProfilePasswordForm.tsx b/src/components/screens/profile/ProfilePasswordForm.tsx index e69de29b..df4d29bb 100644 --- a/src/components/screens/profile/ProfilePasswordForm.tsx +++ b/src/components/screens/profile/ProfilePasswordForm.tsx @@ -0,0 +1,83 @@ +import { Box, Spacer, Button } from '@baca/design-system' +import { useTranslation } from '@baca/hooks' +import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm' + +import { ProfileControlledInput } from './ProfileControlledInput' + +// interface ProfilePasswordFormProps { +// onSubmit: (data: any) => void +// } + +export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { + const { control, errors, isSubmitting, submit } = useUpdatePasswordForm() + const { t } = useTranslation() + + return ( + + + + + + + + ) +} + +// import { Box, Spacer, Button } from '@baca/design-system' +// import { useForm, Controller } from 'react-hook-form' +// import { ProfileControlledInput } from './ProfileControlledInput' +// import { useTranslation } from '@baca/hooks' +// import { AuthUpdateDto } from '@baca/api/types' + +// interface ProfilePasswordFormProps { +// onSubmit: (data: AuthUpdateDto) => void +// } + +// export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { +// const { +// control, +// handleSubmit, +// formState: { errors }, +// } = useForm() +// const { t } = useTranslation() + +// return ( +// +// +// +// +// +// +// +// ) +// } diff --git a/src/hooks/forms/useUpdatePasswordForm.ts b/src/hooks/forms/useUpdatePasswordForm.ts new file mode 100644 index 00000000..0bfa342d --- /dev/null +++ b/src/hooks/forms/useUpdatePasswordForm.ts @@ -0,0 +1,49 @@ +import { useAuthControllerUpdate } from '@baca/api/query/auth/auth' +import { AuthUpdateDto } from '@baca/api/types' +import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' +import { useForm } from 'react-hook-form' +import { useTranslation } from 'react-i18next' + +export const useUpdatePasswordForm = () => { + const { t } = useTranslation() + const { mutate: updateUserMutation, isLoading } = useAuthControllerUpdate() + + const { + control, + formState: { errors }, + handleSubmit, + setError: setFormError, + setFocus, + } = useForm({ + mode: 'onTouched', + }) + + const onSubmit = (data: AuthUpdateDto) => { + updateUserMutation( + { data }, + { + onSuccess: () => { + showSuccessToast({ description: t('toast.success.password_updated') }) + }, + onError: (e) => { + handleFormError( + e as unknown as keyof AuthUpdateDto, + ({ field, description }) => { + setFormError(field, { message: description }) + } + ) + + hapticImpact() + }, + } + ) + } + + return { + control, + errors, + isSubmitting: isLoading, + setFocus, + submit: handleSubmit(onSubmit), + } +} diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 26a6c44a..05b737d7 100644 --- a/src/i18n/translations/en.json +++ b/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,7 +57,9 @@ "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", @@ -64,7 +67,9 @@ "email": "Enter your email", "first_name": "Enter your first name", "last_name": "Enter your last name", - "password": "Password" + "password": "Password", + "old_password": "Enter your current password", + "new_password": "Enter the new password" }, "select": {}, "validation": { diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 249396bc..b6f3cf19 100644 --- a/src/screens/ProfileScreen.tsx +++ b/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' @@ -11,14 +12,50 @@ export const ProfileScreen = () => { title: t('navigation.screen_titles.profile'), }) + const handlePasswordUpdate = (data) => { + console.log('Password updated:', data) + } + return ( + + + ) } -//First commit on new branch +// 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' + +// export const ProfileScreen = () => { +// const { t } = useTranslation() + +// useScreenOptions({ +// title: t('navigation.screen_titles.profile'), +// }) + +// const handlePasswordUpdate = (data) => { +// console.log('Password updated:', data) +// } + +// return ( +// +// +// +// +// +// +// +// +// +// ) +// } From 563bd242502eaa0f6829036bb234f4c4de6a2ae5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Thu, 30 May 2024 15:51:27 +0200 Subject: [PATCH 3/5] Password form almost done, some code to be reviewed --- .../profile/ProfileDeleteAccountButton.tsx | 2 +- .../screens/profile/ProfilePasswordForm.tsx | 108 +++++++++++++----- src/hooks/forms/useUpdatePasswordForm.ts | 21 +++- src/i18n/translations/en.json | 4 +- src/screens/ProfileScreen.tsx | 3 +- 5 files changed, 100 insertions(+), 38 deletions(-) diff --git a/src/components/screens/profile/ProfileDeleteAccountButton.tsx b/src/components/screens/profile/ProfileDeleteAccountButton.tsx index e8f0fea1..8f1bf67d 100644 --- a/src/components/screens/profile/ProfileDeleteAccountButton.tsx +++ b/src/components/screens/profile/ProfileDeleteAccountButton.tsx @@ -58,7 +58,7 @@ export const ProfileDeleteAccountButton = () => { return ( - + + + + + + + + + ) } +// import { Box, Button } from '@baca/design-system' +// import { useTranslation } from '@baca/hooks' +// import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm' +// import { ProfileControlledInput } from './ProfileControlledInput' +// import { AuthUpdateDto } from '@baca/api/types' + +// interface ProfilePasswordFormProps { +// onSubmit: (data: AuthUpdateDto) => void +// } + +// export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { +// const { t } = useTranslation() +// const { control, errors, isSubmitting, submit } = useUpdatePasswordForm() + +// return ( +// +// +// +// +// +// ) +// } + // import { Box, Spacer, Button } from '@baca/design-system' // import { useForm, Controller } from 'react-hook-form' // import { ProfileControlledInput } from './ProfileControlledInput' diff --git a/src/hooks/forms/useUpdatePasswordForm.ts b/src/hooks/forms/useUpdatePasswordForm.ts index 0bfa342d..8c5487c1 100644 --- a/src/hooks/forms/useUpdatePasswordForm.ts +++ b/src/hooks/forms/useUpdatePasswordForm.ts @@ -1,29 +1,40 @@ 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: updateUserMutation, isLoading } = useAuthControllerUpdate() + const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate() + + const defaultValues: AuthUpdateDto = useMemo( + () => ({ + oldPassword: '', + password: '', + }), + [] + ) const { control, formState: { errors }, handleSubmit, + reset, setError: setFormError, - setFocus, } = useForm({ mode: 'onTouched', + defaultValues, }) const onSubmit = (data: AuthUpdateDto) => { - updateUserMutation( + updatePasswordMutation( { data }, { onSuccess: () => { - showSuccessToast({ description: t('toast.success.password_updated') }) + showSuccessToast({ description: t('toast.success.profile_updated') }) + reset(defaultValues) }, onError: (e) => { handleFormError( @@ -32,7 +43,6 @@ export const useUpdatePasswordForm = () => { setFormError(field, { message: description }) } ) - hapticImpact() }, } @@ -43,7 +53,6 @@ export const useUpdatePasswordForm = () => { control, errors, isSubmitting: isLoading, - setFocus, submit: handleSubmit(onSubmit), } } diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 05b737d7..5cf7e004 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -68,8 +68,8 @@ "first_name": "Enter your first name", "last_name": "Enter your last name", "password": "Password", - "old_password": "Enter your current password", - "new_password": "Enter the new password" + "old_password": "Enter current password", + "new_password": "Enter new password" }, "select": {}, "validation": { diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index b6f3cf19..9a70cc89 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,3 +1,4 @@ +import { AuthUpdateDto } from '@baca/api/types' import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton' import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm' import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader' @@ -12,7 +13,7 @@ export const ProfileScreen = () => { title: t('navigation.screen_titles.profile'), }) - const handlePasswordUpdate = (data) => { + const handlePasswordUpdate = (data: AuthUpdateDto) => { console.log('Password updated:', data) } From f8503e0ac3c236f7bedb7e2b569874804099bf2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Thu, 30 May 2024 15:59:05 +0200 Subject: [PATCH 4/5] ProfilePasswordForm working --- .../screens/profile/ProfilePasswordForm.tsx | 95 +------------------ src/screens/ProfileScreen.tsx | 38 +------- 2 files changed, 2 insertions(+), 131 deletions(-) diff --git a/src/components/screens/profile/ProfilePasswordForm.tsx b/src/components/screens/profile/ProfilePasswordForm.tsx index 3d9d1441..55561cfb 100644 --- a/src/components/screens/profile/ProfilePasswordForm.tsx +++ b/src/components/screens/profile/ProfilePasswordForm.tsx @@ -1,4 +1,3 @@ -import { AuthUpdateDto } from '@baca/api/types' import { Box, Button, Row } from '@baca/design-system' import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm' import React from 'react' @@ -6,11 +5,7 @@ import { useTranslation } from 'react-i18next' import { ProfileControlledInput } from './ProfileControlledInput' -interface ProfilePasswordFormProps { - onSubmit: (data: AuthUpdateDto) => void -} - -export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { +export const ProfilePasswordForm = () => { const { t } = useTranslation() const { control, errors, submit, isSubmitting } = useUpdatePasswordForm() @@ -23,7 +18,6 @@ export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { placeholder={t('form.placeholders.old_password')} control={control} errors={errors} - // secureTextEntry /> { placeholder={t('form.placeholders.new_password')} control={control} errors={errors} - // secureTextEntry /> -// -// ) -// } - -// import { Box, Spacer, Button } from '@baca/design-system' -// import { useForm, Controller } from 'react-hook-form' -// import { ProfileControlledInput } from './ProfileControlledInput' -// import { useTranslation } from '@baca/hooks' -// import { AuthUpdateDto } from '@baca/api/types' - -// interface ProfilePasswordFormProps { -// onSubmit: (data: AuthUpdateDto) => void -// } - -// export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { -// const { -// control, -// handleSubmit, -// formState: { errors }, -// } = useForm() -// const { t } = useTranslation() - -// return ( -// -// -// -// -// -// -// -// ) -// } diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 9a70cc89..7ef9eaf1 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,4 +1,3 @@ -import { AuthUpdateDto } from '@baca/api/types' import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton' import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm' import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader' @@ -13,50 +12,15 @@ export const ProfileScreen = () => { title: t('navigation.screen_titles.profile'), }) - const handlePasswordUpdate = (data: AuthUpdateDto) => { - console.log('Password updated:', data) - } - return ( - + ) } - -// 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' - -// export const ProfileScreen = () => { -// const { t } = useTranslation() - -// useScreenOptions({ -// title: t('navigation.screen_titles.profile'), -// }) - -// const handlePasswordUpdate = (data) => { -// console.log('Password updated:', data) -// } - -// return ( -// -// -// -// -// -// -// -// -// -// ) -// } From 541103492ac379084be0997b0146974a40be1c74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Fri, 31 May 2024 10:02:38 +0200 Subject: [PATCH 5/5] Added changes to pl.json --- src/i18n/translations/pl.json | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index c9ebd6af..f6b51b62 100644 --- a/src/i18n/translations/pl.json +++ b/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,7 +57,9 @@ "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", @@ -64,7 +67,9 @@ "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": {