Skip to content

Commit 693aefe

Browse files
olafcholafch
committed
UI of the password form done
1 parent c77ed09 commit 693aefe

4 files changed

Lines changed: 177 additions & 3 deletions

File tree

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Box, Spacer, Button } from '@baca/design-system'
2+
import { useTranslation } from '@baca/hooks'
3+
import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm'
4+
5+
import { ProfileControlledInput } from './ProfileControlledInput'
6+
7+
// interface ProfilePasswordFormProps {
8+
// onSubmit: (data: any) => void
9+
// }
10+
11+
export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => {
12+
const { control, errors, isSubmitting, submit } = useUpdatePasswordForm()
13+
const { t } = useTranslation()
14+
15+
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>
38+
</Box>
39+
)
40+
}
41+
42+
// import { Box, Spacer, Button } from '@baca/design-system'
43+
// import { useForm, Controller } from 'react-hook-form'
44+
// import { ProfileControlledInput } from './ProfileControlledInput'
45+
// import { useTranslation } from '@baca/hooks'
46+
// import { AuthUpdateDto } from '@baca/api/types'
47+
48+
// interface ProfilePasswordFormProps {
49+
// onSubmit: (data: AuthUpdateDto) => void
50+
// }
51+
52+
// export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => {
53+
// const {
54+
// control,
55+
// handleSubmit,
56+
// formState: { errors },
57+
// } = useForm<AuthUpdateDto>()
58+
// const { t } = useTranslation()
59+
60+
// return (
61+
// <Box as="form" onSubmit={handleSubmit(onSubmit)}>
62+
// <ProfileControlledInput
63+
// label={t('form.labels.old_password')}
64+
// name="oldPassword"
65+
// placeholder={t('form.placeholders.old_password')}
66+
// control={control}
67+
// errors={errors}
68+
// isPassword
69+
// />
70+
// <Spacer y={4} />
71+
// <ProfileControlledInput
72+
// label={t('form.labels.new_password')}
73+
// name="password"
74+
// placeholder={t('form.placeholders.new_password')}
75+
// control={control}
76+
// errors={errors}
77+
// isPassword
78+
// />
79+
// <Spacer y={4} />
80+
// <Button type="submit">{t('form.buttons.update_password')}</Button>
81+
// </Box>
82+
// )
83+
// }

‎src/hooks/forms/useUpdatePasswordForm.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { useAuthControllerUpdate } from '@baca/api/query/auth/auth'
2+
import { AuthUpdateDto } from '@baca/api/types'
3+
import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils'
4+
import { useForm } from 'react-hook-form'
5+
import { useTranslation } from 'react-i18next'
6+
7+
export const useUpdatePasswordForm = () => {
8+
const { t } = useTranslation()
9+
const { mutate: updateUserMutation, isLoading } = useAuthControllerUpdate()
10+
11+
const {
12+
control,
13+
formState: { errors },
14+
handleSubmit,
15+
setError: setFormError,
16+
setFocus,
17+
} = useForm<AuthUpdateDto>({
18+
mode: 'onTouched',
19+
})
20+
21+
const onSubmit = (data: AuthUpdateDto) => {
22+
updateUserMutation(
23+
{ data },
24+
{
25+
onSuccess: () => {
26+
showSuccessToast({ description: t('toast.success.password_updated') })
27+
},
28+
onError: (e) => {
29+
handleFormError<keyof AuthUpdateDto>(
30+
e as unknown as keyof AuthUpdateDto,
31+
({ field, description }) => {
32+
setFormError(field, { message: description })
33+
}
34+
)
35+
36+
hapticImpact()
37+
},
38+
}
39+
)
40+
}
41+
42+
return {
43+
control,
44+
errors,
45+
isSubmitting: isLoading,
46+
setFocus,
47+
submit: handleSubmit(onSubmit),
48+
}
49+
}

‎src/i18n/translations/en.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"go_back": "Go back",
2828
"remove": "Remove",
2929
"save": "Save",
30+
"change": "Change",
3031
"search": "Search",
3132
"try_again_later": "Please try again later",
3233
"try_again": "Try again"
@@ -56,15 +57,19 @@
5657
"email": "E-mail address",
5758
"first_name": "First name",
5859
"last_name": "Last name",
59-
"password": "Password"
60+
"password": "Password",
61+
"old_password": "Old password",
62+
"new_password": "New password"
6063
},
6164
"placeholders": {
6265
"confirm_password": "Confirm password",
6366
"create_password": "Create a password",
6467
"email": "Enter your email",
6568
"first_name": "Enter your first name",
6669
"last_name": "Enter your last name",
67-
"password": "Password"
70+
"password": "Password",
71+
"old_password": "Enter your current password",
72+
"new_password": "Enter the new password"
6873
},
6974
"select": {},
7075
"validation": {

‎src/screens/ProfileScreen.tsx‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton'
22
import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm'
33
import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader'
4+
import { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm'
45
import { Box, Spacer } from '@baca/design-system'
56
import { useTranslation, useScreenOptions } from '@baca/hooks'
67

@@ -11,14 +12,50 @@ export const ProfileScreen = () => {
1112
title: t('navigation.screen_titles.profile'),
1213
})
1314

15+
const handlePasswordUpdate = (data) => {
16+
console.log('Password updated:', data)
17+
}
18+
1419
return (
1520
<Box p={4}>
1621
<ProfileHeader />
1722
<Spacer y={4} />
1823
<ProfileDetailsForm />
24+
<Spacer y={4} />
25+
<ProfilePasswordForm onSubmit={handlePasswordUpdate} />
26+
<Spacer y={4} />
1927
<ProfileDeleteAccountButton />
2028
</Box>
2129
)
2230
}
2331

24-
//First commit on new branch
32+
// import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton'
33+
// import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm'
34+
// import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader'
35+
// import { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm'
36+
// import { Box, Spacer } from '@baca/design-system'
37+
// import { useTranslation, useScreenOptions } from '@baca/hooks'
38+
39+
// export const ProfileScreen = () => {
40+
// const { t } = useTranslation()
41+
42+
// useScreenOptions({
43+
// title: t('navigation.screen_titles.profile'),
44+
// })
45+
46+
// const handlePasswordUpdate = (data) => {
47+
// console.log('Password updated:', data)
48+
// }
49+
50+
// return (
51+
// <Box p={4}>
52+
// <ProfileHeader />
53+
// <Spacer y={4} />
54+
// <ProfileDetailsForm />
55+
// <Spacer y={4} />
56+
// <ProfilePasswordForm onSubmit={handlePasswordUpdate} />
57+
// <Spacer y={4} />
58+
// <ProfileDeleteAccountButton />
59+
// </Box>
60+
// )
61+
// }

0 commit comments

Comments
 (0)