Skip to content

Commit e55a13e

Browse files
adrianborosadrianboros
authored
fix(wallet/frontend): update account settings page (#1698)
* remove edit profile form * update page title * fix eye positioning on password fields when field has error * remove unused imports * move change password at bottom and spacing fix * remove updateProfile function * remove line * remove more unused vars * remove unused profileSchema
1 parent 4d6a554 commit e55a13e

7 files changed

Lines changed: 40 additions & 147 deletions

File tree

‎packages/wallet/frontend/src/components/settings/ChangePasswordForm.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const ChangePasswordForm = () => {
9494
/>
9595
<span
9696
onClick={toggleCurrentPasswordVisibility}
97-
className="absolute right-2.5 top-1/2 cursor-pointer"
97+
className="absolute right-2.5 top-9 cursor-pointer"
9898
>
9999
{isCurrentPasswordVisible ? <SlashEye /> : <Eye />}
100100
</span>
@@ -109,7 +109,7 @@ export const ChangePasswordForm = () => {
109109
/>
110110
<span
111111
onClick={toggleNewPasswordVisibility}
112-
className="absolute right-2.5 top-1/2 cursor-pointer"
112+
className="absolute right-2.5 top-9 cursor-pointer"
113113
>
114114
{isNewPasswordVisible ? <SlashEye /> : <Eye />}
115115
</span>
@@ -126,7 +126,7 @@ export const ChangePasswordForm = () => {
126126
/>
127127
<span
128128
onClick={toggleConfirmNewPasswordVisibility}
129-
className="absolute right-2.5 top-1/2 cursor-pointer"
129+
className="absolute right-2.5 top-9 cursor-pointer"
130130
>
131131
{isConfirmNewPasswordVisible ? <SlashEye /> : <Eye />}
132132
</span>

‎packages/wallet/frontend/src/components/settings/PersonalSettingsForm.tsx‎

Lines changed: 31 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import { Button } from '@/ui/Button'
2-
import { Form } from '@/ui/forms/Form'
3-
import { useZodForm } from '@/lib/hooks/useZodForm'
42
import { Input } from '@/ui/forms/Input'
5-
import { useEffect, useState } from 'react'
6-
import { profileSchema, userService } from '@/lib/api/user'
7-
import { useDialog } from '@/lib/hooks/useDialog'
8-
import { ErrorDialog } from '../dialogs/ErrorDialog'
9-
import { getObjectKeys } from '@/utils/helpers'
103
import { ChangePasswordForm } from './ChangePasswordForm'
114
import { usePasswordContext } from '@/lib/context/password'
125
import { UserResponse } from '@wallet/shared'
@@ -17,132 +10,38 @@ type PersonalSettingsFormProps = {
1710

1811
// TODO: Can these details be updated by the user when switching to GateHub?
1912
export const PersonalSettingsForm = ({ user }: PersonalSettingsFormProps) => {
20-
const [isReadOnly, setIsReadOnly] = useState(true)
2113
const { isChangePassword, setIsChangePassword } = usePasswordContext()
22-
const [openDialog, closeDialog] = useDialog()
23-
const profileForm = useZodForm({
24-
schema: profileSchema,
25-
defaultValues: user
26-
})
27-
28-
useEffect(() => {
29-
profileForm.setFocus('firstName')
30-
}, [isReadOnly, profileForm])
3114

3215
return (
3316
<>
3417
<div className="mb-5">
35-
<h3 className="text-2xl text-green dark:text-teal-neon">Profile</h3>
18+
<h3 className="text-2xl text-green dark:text-teal-neon">Details</h3>
3619
</div>
37-
<Form
38-
form={profileForm}
39-
onSubmit={async (data) => {
40-
const response = await userService.updateProfile(data)
41-
42-
if (!response) {
43-
openDialog(
44-
<ErrorDialog
45-
onClose={closeDialog}
46-
content="Update profile failed. Please try again."
47-
/>
48-
)
49-
return
50-
}
51-
52-
if (response.success) {
53-
setIsReadOnly(!isReadOnly)
54-
} else {
55-
const { errors, message } = response
56-
57-
if (errors) {
58-
getObjectKeys(errors).map((field) =>
59-
profileForm.setError(field, {
60-
message: errors[field]
61-
})
62-
)
63-
}
64-
if (message) {
65-
profileForm.setError('root', { message })
66-
}
67-
}
68-
}}
69-
readOnly={isReadOnly}
70-
>
20+
<div className="mb-4">
7121
<Input
72-
required
7322
label="First name"
7423
placeholder="First name"
75-
error={profileForm.formState.errors.firstName?.message}
76-
{...profileForm.register('firstName')}
24+
disabled
25+
value={user.firstName}
7726
/>
27+
</div>
28+
<div className="mb-4">
7829
<Input
79-
required
8030
label="Last name"
8131
placeholder="Last name"
82-
error={profileForm.formState.errors.lastName?.message}
83-
{...profileForm.register('lastName')}
32+
disabled
33+
value={user.lastName}
8434
/>
85-
86-
{!isReadOnly && (
87-
<div className="mt-2 flex justify-between">
88-
<Button
89-
intent="outline"
90-
aria-label="stop editing"
91-
onClick={() => setIsReadOnly(!isReadOnly)}
92-
>
93-
Close editing
94-
</Button>
95-
<Button
96-
type="submit"
97-
aria-label="save personal settings"
98-
loading={profileForm.formState.isSubmitting}
99-
>
100-
Save profile
101-
</Button>
102-
</div>
103-
)}
104-
</Form>
105-
{isReadOnly && (
106-
<div className="mt-4 flex justify-between">
107-
<Button
108-
intent="primary"
109-
aria-label="edit personal details"
110-
onClick={() => {
111-
setIsReadOnly(!isReadOnly)
112-
setIsChangePassword(false)
113-
}}
114-
>
115-
Edit
116-
</Button>
117-
{!isChangePassword ? (
118-
<Button
119-
intent="primary"
120-
aria-label="change password"
121-
onClick={() => setIsChangePassword(!isChangePassword)}
122-
>
123-
Change Password
124-
</Button>
125-
) : (
126-
<Button
127-
intent="outline"
128-
aria-label="Cancel change password"
129-
onClick={() => setIsChangePassword(!isChangePassword)}
130-
>
131-
Cancel Change Password
132-
</Button>
133-
)}
134-
</div>
135-
)}
136-
{isChangePassword && <ChangePasswordForm />}
137-
<div className="mb-4 mt-6">
35+
</div>
36+
<div className="mb-4">
13837
<Input
13938
label="Address"
14039
placeholder="Address"
14140
disabled
14241
value={user.address}
14342
/>
14443
</div>
145-
<div>
44+
<div className="mb-4">
14645
<Input
14746
type="email"
14847
label="Email"
@@ -151,6 +50,26 @@ export const PersonalSettingsForm = ({ user }: PersonalSettingsFormProps) => {
15150
value={user.email}
15251
/>
15352
</div>
53+
<div className="mt-4 flex justify-between">
54+
{!isChangePassword ? (
55+
<Button
56+
intent="primary"
57+
aria-label="change password"
58+
onClick={() => setIsChangePassword(!isChangePassword)}
59+
>
60+
Change Password
61+
</Button>
62+
) : (
63+
<Button
64+
intent="outline"
65+
aria-label="Cancel change password"
66+
onClick={() => setIsChangePassword(!isChangePassword)}
67+
>
68+
Cancel Change Password
69+
</Button>
70+
)}
71+
</div>
72+
{isChangePassword && <ChangePasswordForm />}
15473
</>
15574
)
15675
}

‎packages/wallet/frontend/src/lib/api/user.ts‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,6 @@ import {
1616
IframeResponse
1717
} from '@wallet/shared'
1818

19-
export const profileSchema = z.object({
20-
firstName: z.string().min(1, { message: 'First name is required' }),
21-
lastName: z.string().min(1, { message: 'Last name is required' })
22-
})
23-
2419
export const resetPasswordSchema = z
2520
.object({
2621
password: z
@@ -117,10 +112,6 @@ type VerifyEmailResponse = SuccessResponse | VerifyEmailError
117112
type MeResult = SuccessResponse<UserResponse>
118113
type MeResponse = MeResult | ErrorResponse
119114

120-
type ProfileArgs = z.infer<typeof profileSchema>
121-
type ProfileError = ErrorResponse<ProfileArgs | undefined>
122-
type ProfileResponse = SuccessResponse | ProfileError
123-
124115
type ChangePasswordArgs = z.infer<typeof changePasswordSchema>
125116
type ChangePasswordError = ErrorResponse<ChangePasswordArgs | undefined>
126117
type ChangePasswordResponse = SuccessResponse | ChangePasswordError
@@ -137,7 +128,6 @@ interface UserService {
137128
checkToken: (token: string, cookies?: string) => Promise<CheckTokenResponse>
138129
verifyEmail: (args: VerifyEmailArgs) => Promise<VerifyEmailResponse>
139130
me: (cookies?: string) => Promise<MeResponse>
140-
updateProfile: (args: ProfileArgs) => Promise<ProfileResponse>
141131
changePassword: (args: ChangePasswordArgs) => Promise<ChangePasswordResponse>
142132
resendVerifyEmail: (
143133
args: ResendVerificationEmailArgs
@@ -288,22 +278,6 @@ const createUserService = (): UserService => ({
288278
}
289279
},
290280

291-
async updateProfile(args) {
292-
try {
293-
const response = await httpClient
294-
.post('updateProfile', {
295-
json: args
296-
})
297-
.json<SuccessResponse>()
298-
return response
299-
} catch (error) {
300-
return getError<ProfileArgs>(
301-
error,
302-
'Something went wrong while updating your profile. Please try again.'
303-
)
304-
}
305-
},
306-
307281
async changePassword(args) {
308282
try {
309283
const response = await httpClient

‎packages/wallet/frontend/src/pages/auth/login.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ const LoginPage: NextPageWithLayout = () => {
121121
/>
122122
<span
123123
onClick={togglePasswordVisibility}
124-
className="absolute right-2.5 top-1/2 cursor-pointer"
124+
className="absolute right-2.5 top-9 cursor-pointer"
125125
>
126126
{isPasswordVisible ? <SlashEye /> : <Eye />}
127127
</span>

‎packages/wallet/frontend/src/pages/auth/reset/[token].tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const ResetPasswordPage: NextPageWithLayout<ResetPasswordPageProps> = ({
9595
/>
9696
<span
9797
onClick={togglePasswordVisibility}
98-
className="absolute right-2.5 top-1/2 cursor-pointer"
98+
className="absolute right-2.5 top-9 cursor-pointer"
9999
>
100100
{isPasswordVisible ? <SlashEye /> : <Eye />}
101101
</span>
@@ -112,7 +112,7 @@ const ResetPasswordPage: NextPageWithLayout<ResetPasswordPageProps> = ({
112112
/>
113113
<span
114114
onClick={toggleConfirmPasswordVisibility}
115-
className="absolute right-2.5 top-1/2 cursor-pointer"
115+
className="absolute right-2.5 top-9 cursor-pointer"
116116
>
117117
{isConfirmPasswordVisible ? <SlashEye /> : <Eye />}
118118
</span>

‎packages/wallet/frontend/src/pages/auth/signup.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const SignUpPage: NextPageWithLayout = () => {
101101
/>
102102
<span
103103
onClick={togglePasswordVisibility}
104-
className="absolute right-2.5 top-1/2 cursor-pointer"
104+
className="absolute right-2.5 top-9 cursor-pointer"
105105
>
106106
{isPasswordVisible ? <SlashEye /> : <Eye />}
107107
</span>
@@ -116,7 +116,7 @@ const SignUpPage: NextPageWithLayout = () => {
116116
/>
117117
<span
118118
onClick={toggleRepeatPasswordVisibility}
119-
className="absolute right-2.5 top-1/2 cursor-pointer"
119+
className="absolute right-2.5 top-9 cursor-pointer"
120120
>
121121
{isRepeatPasswordVisible ? <SlashEye /> : <Eye />}
122122
</span>

‎packages/wallet/frontend/src/pages/settings/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const AccountSettingsPage: NextPageWithLayout<AccountSettingsProps> = ({
2323
: '/bird-envelope-light.webp'
2424
return (
2525
<>
26-
<PageHeader title="Personal Settings" message="Edit your details" />
26+
<PageHeader title="Account Settings" />
2727
<SettingsTabs />
2828
<div className="flex w-full flex-col md:max-w-lg">
2929
<PersonalSettingsForm user={user} />

0 commit comments

Comments
 (0)