feat(WEB-162): final design edit profile page

2024-06-18 08:15:57 +02:00
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
--- a/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/components/Forms/Edit/Profile/FormContent/index.tsx
@@ -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>
+    </>
+  )
+}