scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-160): update profile

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-07-17 16:12:18 +02:00
committed by Michael Zetterberg
parent b6e22d51a5
commit 2337d37f1a
32 changed files with 459 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Forms/Edit/Profile/FormContent/formContent.module.css
View File

@@ -10,3 +10,9 @@
gap: var(--Spacing-x2);
grid-template-columns: max(164px) 1fr;
}
@media (min-width: 768px) {
.divider {
display: none;
}
}

32
components/Forms/Edit/Profile/FormContent/index.tsx
View File

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
import { languageSelect } from "@/constants/languages"
import Divider from "@/components/TempDesignSystem/Divider"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
@@ -15,24 +16,24 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./formContent.module.css"
export default function FormContent() {
const { formatMessage } = useIntl()
const intl = 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 phoneNumber = formatMessage({ id: "Phone number" })
const password = formatMessage({ id: "Current password" })
const retypeNewPassword = formatMessage({ id: "Retype new password" })
const zipCode = formatMessage({ id: "Zip code" })
const city = intl.formatMessage({ id: "City" })
const country = intl.formatMessage({ id: "Country" })
const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
const street = intl.formatMessage({ id: "Address" })
const phoneNumber = intl.formatMessage({ id: "Phone number" })
const password = intl.formatMessage({ id: "Current password" })
const retypeNewPassword = intl.formatMessage({ id: "Retype new password" })
const zipCode = intl.formatMessage({ id: "Zip code" })
return (
<>
<section className={styles.user}>
<header>
<Body textTransform="bold">
{formatMessage({ id: "User information" })}
{intl.formatMessage({ id: "User information" })}
</Body>
</header>
<DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
@@ -59,16 +60,19 @@ export default function FormContent() {
<Phone label={phoneNumber} name="phoneNumber" />
<Select
items={languageSelect}
label={formatMessage({ id: "Language" })}
label={intl.formatMessage({ id: "Language" })}
name="language"
placeholder={formatMessage({ id: "Select language" })}
placeholder={intl.formatMessage({ id: "Select language" })}
/>
</section>
<Divider className={styles.divider} color="subtle" />
<section className={styles.password}>
<header>
<Body textTransform="bold">{formatMessage({ id: "Password" })}</Body>
<Body textTransform="bold">
{intl.formatMessage({ id: "Password" })}
</Body>
</header>
<Input label={password} name="currentPassword" type="password" />
<Input label={password} name="password" type="password" />
<NewPassword />
<Input
label={retypeNewPassword}