105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
"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>
|
|
</>
|
|
)
|
|
}
|