Skip to content

Commit 563bd24

Browse files
olafcholafch
committed
Password form almost done, some code to be reviewed
1 parent 693aefe commit 563bd24

5 files changed

Lines changed: 100 additions & 38 deletions

File tree

‎src/components/screens/profile/ProfileDeleteAccountButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const ProfileDeleteAccountButton = () => {
5858

5959
return (
6060
<Box>
61-
<Box borderColor="border.secondary" borderTopWidth={1} my={4} py={6} alignItems="flex-start">
61+
<Box borderColor="border.secondary" borderTopWidth={1} py={6} alignItems="flex-start">
6262
<Button
6363
leftIconName="delete-bin-line"
6464
variant="SecondaryDestructive"

‎src/components/screens/profile/ProfilePasswordForm.tsx‎

Lines changed: 80 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,96 @@
1-
import { Box, Spacer, Button } from '@baca/design-system'
2-
import { useTranslation } from '@baca/hooks'
1+
import { AuthUpdateDto } from '@baca/api/types'
2+
import { Box, Button, Row } from '@baca/design-system'
33
import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm'
4+
import React from 'react'
5+
import { useTranslation } from 'react-i18next'
46

57
import { ProfileControlledInput } from './ProfileControlledInput'
68

7-
// interface ProfilePasswordFormProps {
8-
// onSubmit: (data: any) => void
9-
// }
9+
interface ProfilePasswordFormProps {
10+
onSubmit: (data: AuthUpdateDto) => void
11+
}
1012

1113
export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => {
12-
const { control, errors, isSubmitting, submit } = useUpdatePasswordForm()
1314
const { t } = useTranslation()
15+
const { control, errors, submit, isSubmitting } = useUpdatePasswordForm()
1416

1517
return (
16-
<Box as="form" onSubmit={submit}>
17-
<ProfileControlledInput
18-
label={t('form.labels.old_password')}
19-
name="oldPassword"
20-
placeholder={t('form.placeholders.old_password')}
21-
control={control}
22-
errors={errors}
23-
isPassword
24-
/>
25-
<Spacer y={4} />
26-
<ProfileControlledInput
27-
label={t('form.labels.new_password')}
28-
name="password"
29-
placeholder={t('form.placeholders.new_password')}
30-
control={control}
31-
errors={errors}
32-
isPassword
33-
/>
34-
<Spacer y={4} />
35-
<Button type="submit" isLoading={isSubmitting}>
36-
{t('common.change')}
37-
</Button>
18+
<Box>
19+
<Box borderColor="border.secondary" borderTopWidth={1} py={6}>
20+
<ProfileControlledInput
21+
label={t('form.labels.old_password')}
22+
name="oldPassword"
23+
placeholder={t('form.placeholders.old_password')}
24+
control={control}
25+
errors={errors}
26+
// secureTextEntry
27+
/>
28+
<ProfileControlledInput
29+
label={t('form.labels.new_password')}
30+
name="password"
31+
placeholder={t('form.placeholders.new_password')}
32+
control={control}
33+
errors={errors}
34+
// secureTextEntry
35+
/>
36+
<Row maxW={800} justifyContent="flex-end">
37+
<Button
38+
disabled={isSubmitting}
39+
loading={isSubmitting}
40+
onPress={submit}
41+
testID="changePasswordButton"
42+
>
43+
{t('common.change')}
44+
</Button>
45+
</Row>
46+
</Box>
3847
</Box>
3948
)
4049
}
4150

51+
// import { Box, Button } from '@baca/design-system'
52+
// import { useTranslation } from '@baca/hooks'
53+
// import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm'
54+
// import { ProfileControlledInput } from './ProfileControlledInput'
55+
// import { AuthUpdateDto } from '@baca/api/types'
56+
57+
// interface ProfilePasswordFormProps {
58+
// onSubmit: (data: AuthUpdateDto) => void
59+
// }
60+
61+
// export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => {
62+
// const { t } = useTranslation()
63+
// const { control, errors, isSubmitting, submit } = useUpdatePasswordForm()
64+
65+
// return (
66+
// <Box
67+
// /* as="form" onSubmit={submit} */ borderColor="border.secondary"
68+
// borderTopWidth={1}
69+
// py={6}
70+
// >
71+
// <ProfileControlledInput
72+
// label={t('form.labels.old_password')}
73+
// name="oldPassword"
74+
// placeholder={t('form.placeholders.old_password')}
75+
// control={control}
76+
// errors={errors}
77+
// // isPassword
78+
// />
79+
// <ProfileControlledInput
80+
// label={t('form.labels.new_password')}
81+
// name="password"
82+
// placeholder={t('form.placeholders.new_password')}
83+
// control={control}
84+
// errors={errors}
85+
// // isPassword
86+
// />
87+
// <Button type="submit" isLoading={isSubmitting}>
88+
// {t('common.change')}
89+
// </Button>
90+
// </Box>
91+
// )
92+
// }
93+
4294
// import { Box, Spacer, Button } from '@baca/design-system'
4395
// import { useForm, Controller } from 'react-hook-form'
4496
// import { ProfileControlledInput } from './ProfileControlledInput'

‎src/hooks/forms/useUpdatePasswordForm.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
11
import { useAuthControllerUpdate } from '@baca/api/query/auth/auth'
22
import { AuthUpdateDto } from '@baca/api/types'
33
import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils'
4+
import { useMemo } from 'react'
45
import { useForm } from 'react-hook-form'
56
import { useTranslation } from 'react-i18next'
67

78
export const useUpdatePasswordForm = () => {
89
const { t } = useTranslation()
9-
const { mutate: updateUserMutation, isLoading } = useAuthControllerUpdate()
10+
const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate()
11+
12+
const defaultValues: AuthUpdateDto = useMemo(
13+
() => ({
14+
oldPassword: '',
15+
password: '',
16+
}),
17+
[]
18+
)
1019

1120
const {
1221
control,
1322
formState: { errors },
1423
handleSubmit,
24+
reset,
1525
setError: setFormError,
16-
setFocus,
1726
} = useForm<AuthUpdateDto>({
1827
mode: 'onTouched',
28+
defaultValues,
1929
})
2030

2131
const onSubmit = (data: AuthUpdateDto) => {
22-
updateUserMutation(
32+
updatePasswordMutation(
2333
{ data },
2434
{
2535
onSuccess: () => {
26-
showSuccessToast({ description: t('toast.success.password_updated') })
36+
showSuccessToast({ description: t('toast.success.profile_updated') })
37+
reset(defaultValues)
2738
},
2839
onError: (e) => {
2940
handleFormError<keyof AuthUpdateDto>(
@@ -32,7 +43,6 @@ export const useUpdatePasswordForm = () => {
3243
setFormError(field, { message: description })
3344
}
3445
)
35-
3646
hapticImpact()
3747
},
3848
}
@@ -43,7 +53,6 @@ export const useUpdatePasswordForm = () => {
4353
control,
4454
errors,
4555
isSubmitting: isLoading,
46-
setFocus,
4756
submit: handleSubmit(onSubmit),
4857
}
4958
}

‎src/i18n/translations/en.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@
6868
"first_name": "Enter your first name",
6969
"last_name": "Enter your last name",
7070
"password": "Password",
71-
"old_password": "Enter your current password",
72-
"new_password": "Enter the new password"
71+
"old_password": "Enter current password",
72+
"new_password": "Enter new password"
7373
},
7474
"select": {},
7575
"validation": {

‎src/screens/ProfileScreen.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { AuthUpdateDto } from '@baca/api/types'
12
import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton'
23
import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm'
34
import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader'
@@ -12,7 +13,7 @@ export const ProfileScreen = () => {
1213
title: t('navigation.screen_titles.profile'),
1314
})
1415

15-
const handlePasswordUpdate = (data) => {
16+
const handlePasswordUpdate = (data: AuthUpdateDto) => {
1617
console.log('Password updated:', data)
1718
}
1819

0 commit comments

Comments
 (0)