feat(WEB-162): final design edit profile page
This commit is contained in:
Simon Emanuelsson
committed by
Christel Westerberg
Christel Westerberg
parent
5f3e417593
commit
d84efcbb0f
@@ -0,0 +1,12 @@
|
||||
.password,
|
||||
.user {
|
||||
align-self: flex-start;
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
grid-template-columns: max(164px) 1fr;
|
||||
}
|
||||
104
components/Forms/Edit/Profile/FormContent/index.tsx
Normal file
104
components/Forms/Edit/Profile/FormContent/index.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
"use client"
|
||||
// import { useFormStatus } from "react-dom"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
|
||||
import DateSelect from "@/components/TempDesignSystem/Form/Date"
|
||||
import Input from "@/components/TempDesignSystem/Form/Input"
|
||||
import Phone from "@/components/TempDesignSystem/Form/Phone"
|
||||
import Select from "@/components/TempDesignSystem/Form/Select"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
|
||||
import styles from "./formContent.module.css"
|
||||
|
||||
const languages = [
|
||||
{ label: "Danish", value: "Da" },
|
||||
{ label: "German", value: "De" },
|
||||
{ label: "English", value: "En" },
|
||||
{ label: "Finnish", value: "Fi" },
|
||||
{ label: "Norwegian", value: "No" },
|
||||
{ label: "Swedish", value: "Sv" },
|
||||
]
|
||||
|
||||
export default function FormContent() {
|
||||
const { formatMessage } = useIntl()
|
||||
// const { pending } = useFormStatus()
|
||||
|
||||
const city = formatMessage({ id: "City" })
|
||||
const country = formatMessage({ id: "Country" })
|
||||
const email = `${formatMessage({ id: "Email" })} ${formatMessage({ id: "Address" }).toLowerCase()}`
|
||||
const street = formatMessage({ id: "Address" })
|
||||
const password = formatMessage({ id: "Current password" })
|
||||
const newPassword = formatMessage({ id: "New password" })
|
||||
const retypeNewPassword = formatMessage({ id: "Retype new password" })
|
||||
const zipCode = formatMessage({ id: "Zip code" })
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={styles.user}>
|
||||
<header>
|
||||
<Body textTransform="bold">
|
||||
{formatMessage({ id: "User information" })}
|
||||
</Body>
|
||||
</header>
|
||||
<DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
|
||||
<Input
|
||||
label={`${street} 1`}
|
||||
name="address.streetAddress"
|
||||
placeholder={street}
|
||||
/>
|
||||
<Input label={city} name="address.city" placeholder={city} />
|
||||
<div className={styles.container}>
|
||||
<Input
|
||||
label={zipCode}
|
||||
name="address.zipCode"
|
||||
placeholder={zipCode}
|
||||
required
|
||||
/>
|
||||
<CountrySelect
|
||||
label={country}
|
||||
name="address.countryCode"
|
||||
placeholder={country}
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
</div>
|
||||
<Input label={email} name="email" placeholder={email} required />
|
||||
<Phone
|
||||
label={formatMessage({ id: "Phone number" })}
|
||||
name="phoneNumber"
|
||||
placeholder={formatMessage({ id: "Phone number" })}
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
<Select
|
||||
items={languages}
|
||||
label={formatMessage({ id: "Language" })}
|
||||
name="language"
|
||||
placeholder={formatMessage({ id: "Select language" })}
|
||||
/>
|
||||
</section>
|
||||
<section className={styles.password}>
|
||||
<header>
|
||||
<Body textTransform="bold">{formatMessage({ id: "Password" })}</Body>
|
||||
</header>
|
||||
<Input
|
||||
label={password}
|
||||
name="currentPassword"
|
||||
placeholder={password}
|
||||
type="password"
|
||||
/>
|
||||
<Input
|
||||
label={newPassword}
|
||||
name="newPassword"
|
||||
placeholder={newPassword}
|
||||
type="password"
|
||||
/>
|
||||
<Input
|
||||
label={retypeNewPassword}
|
||||
name="retypeNewPassword"
|
||||
placeholder={retypeNewPassword}
|
||||
type="password"
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
10
components/Forms/Edit/Profile/form.module.css
Normal file
10
components/Forms/Edit/Profile/form.module.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x5);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
94
components/Forms/Edit/Profile/index.tsx
Normal file
94
components/Forms/Edit/Profile/index.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
"use client"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useFormState as useReactFormState } from "react-dom"
|
||||
import { FormProvider, useForm } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { editProfile } from "@/actions/editProfile"
|
||||
import Header from "@/components/Profile/Header"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
import Divider from "@/components/TempDesignSystem/Divider"
|
||||
import Title from "@/components/TempDesignSystem/Text/Title"
|
||||
|
||||
import FormContent from "./FormContent"
|
||||
import { type EditProfileSchema, editProfileSchema } from "./schema"
|
||||
|
||||
import styles from "./form.module.css"
|
||||
|
||||
import type {
|
||||
EditFormProps,
|
||||
State,
|
||||
} from "@/types/components/myPages/myProfile/edit"
|
||||
|
||||
const formId = "edit-profile"
|
||||
|
||||
export default function Form({ user }: EditFormProps) {
|
||||
const { formatMessage } = useIntl()
|
||||
/**
|
||||
* like react, react-hook-form also exports a useFormState hook,
|
||||
* we want to clearly keep them separate by naming.
|
||||
*/
|
||||
const [state, formAction] = useReactFormState<State, FormData>(
|
||||
editProfile,
|
||||
null
|
||||
)
|
||||
|
||||
const form = useForm<EditProfileSchema>({
|
||||
defaultValues: {
|
||||
"address.city": user.address.city ?? "",
|
||||
"address.countryCode": user.address.countryCode ?? "",
|
||||
"address.streetAddress": user.address.streetAddress ?? "",
|
||||
"address.zipCode": user.address.zipCode ?? "",
|
||||
dateOfBirth: user.dateOfBirth,
|
||||
email: user.email,
|
||||
language: user.language,
|
||||
phoneNumber: user.phoneNumber,
|
||||
currentPassword: "",
|
||||
newPassword: "",
|
||||
retypeNewPassword: "",
|
||||
},
|
||||
mode: "all",
|
||||
resolver: zodResolver(editProfileSchema),
|
||||
reValidateMode: "onChange",
|
||||
})
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<Header>
|
||||
<hgroup>
|
||||
<Title as="h4" color="peach80" level="h1">
|
||||
{formatMessage({ id: "Edit" })}
|
||||
</Title>
|
||||
<Title as="h4" color="burgundy" level="h2">
|
||||
{user.name}
|
||||
</Title>
|
||||
</hgroup>
|
||||
<div className={styles.btns}>
|
||||
<Button
|
||||
form={formId}
|
||||
intent="primary"
|
||||
size="small"
|
||||
theme="primaryDark"
|
||||
type="reset"
|
||||
>
|
||||
{formatMessage({ id: "Discard changes" })}
|
||||
</Button>
|
||||
<Button
|
||||
disabled={!form.formState.isValid || form.formState.isSubmitting}
|
||||
form={formId}
|
||||
intent="secondary"
|
||||
size="small"
|
||||
theme="base"
|
||||
type="submit"
|
||||
>
|
||||
{formatMessage({ id: "Save" })}
|
||||
</Button>
|
||||
</div>
|
||||
</Header>
|
||||
<Divider color="burgundy" opacity={8} />
|
||||
<form action={formAction} className={styles.form} id={formId}>
|
||||
<FormContent />
|
||||
</form>
|
||||
</FormProvider>
|
||||
)
|
||||
}
|
||||
24
components/Forms/Edit/Profile/schema.ts
Normal file
24
components/Forms/Edit/Profile/schema.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { z } from "zod"
|
||||
|
||||
// import { phoneValidator } from "@/utils/phoneValidator"
|
||||
|
||||
export const editProfileSchema = z.object({
|
||||
"address.city": z.string().optional(),
|
||||
"address.countryCode": z.string().min(1),
|
||||
"address.streetAddress": z.string().optional(),
|
||||
"address.zipCode": z.string().min(1),
|
||||
dateOfBirth: z.string().min(1),
|
||||
email: z.string().email(),
|
||||
language: z.string(),
|
||||
phoneNumber: z.string(),
|
||||
// phoneValidator(
|
||||
// "Phone is required",
|
||||
// "Please enter a valid phone number"
|
||||
// ),
|
||||
|
||||
currentPassword: z.string().optional(),
|
||||
newPassword: z.string().optional(),
|
||||
retypeNewPassword: z.string().optional(),
|
||||
})
|
||||
|
||||
export type EditProfileSchema = z.infer<typeof editProfileSchema>
|
||||
Reference in New Issue
Block a user