feat(WEB-163): edit profile field validation

components/Forms/Edit/Profile/FormContent/index.tsx

@@ -7,6 +7,7 @@ import { languageSelect } from "@/constants/languages"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
+import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Select from "@/components/TempDesignSystem/Form/Select"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -21,8 +22,8 @@ export default function FormContent() {
   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 newPassword = formatMessage({ id: "New password" })
   const retypeNewPassword = formatMessage({ id: "Retype new password" })
   const zipCode = formatMessage({ id: "Zip code" })
 
@@ -46,7 +47,7 @@ export default function FormContent() {
             label={zipCode}
             name="address.zipCode"
             placeholder={zipCode}
-            required
+            registerOptions={{ required: true }}
           />
           <CountrySelect
             label={country}
@@ -55,12 +56,17 @@ export default function FormContent() {
             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" })}
+        <Input
+          label={email}
+          name="email"
+          placeholder={email}
           registerOptions={{ required: true }}
+          type="email"
+        />
+        <Phone
+          label={phoneNumber}
+          name="phoneNumber"
+          placeholder={phoneNumber}
         />
         <Select
           items={languageSelect}
@@ -79,12 +85,7 @@ export default function FormContent() {
           placeholder={password}
           type="password"
         />
-        <Input
-          label={newPassword}
-          name="newPassword"
-          placeholder={newPassword}
-          type="password"
-        />
+        <NewPassword />
         <Input
           label={retypeNewPassword}
           name="retypeNewPassword"

components/Forms/Edit/Profile/index.tsx

@@ -1,13 +1,16 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useParams } from "next/navigation"
 import { useFormState as useReactFormState } from "react-dom"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { profile } from "@/constants/routes/myPages"
+
 import { editProfile } from "@/actions/editProfile"
 import Header from "@/components/Profile/Header"
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import FormContent from "./FormContent"
@@ -19,11 +22,14 @@ import type {
   EditFormProps,
   State,
 } from "@/types/components/myPages/myProfile/edit"
+import type { Lang } from "@/constants/languages"
 
 const formId = "edit-profile"
 
 export default function Form({ user }: EditFormProps) {
   const { formatMessage } = useIntl()
+  const params = useParams()
+  const lang = params.lang as Lang
   /**
    * like react, react-hook-form also exports a useFormState hook,
    * we want to clearly keep them separate by naming.
@@ -33,12 +39,14 @@ export default function Form({ user }: EditFormProps) {
     null
   )
 
-  const form = useForm<EditProfileSchema>({
+  const methods = useForm<EditProfileSchema>({
     defaultValues: {
-      "address.city": user.address.city ?? "",
-      "address.countryCode": user.address.countryCode ?? "",
-      "address.streetAddress": user.address.streetAddress ?? "",
-      "address.zipCode": user.address.zipCode ?? "",
+      address: {
+        city: user.address.city ?? "",
+        countryCode: user.address.countryCode ?? "",
+        streetAddress: user.address.streetAddress ?? "",
+        zipCode: user.address.zipCode ?? "",
+      },
       dateOfBirth: user.dateOfBirth,
       email: user.email,
       language: user.language,
@@ -53,7 +61,7 @@ export default function Form({ user }: EditFormProps) {
   })
 
   return (
-    <FormProvider {...form}>
+    <>
       <Header>
         <hgroup>
           <Title as="h4" color="red" level="h1">
@@ -64,17 +72,15 @@ export default function Form({ user }: EditFormProps) {
           </Title>
         </hgroup>
         <div className={styles.btns}>
-          <Button
-            form={formId}
-            intent="secondary"
-            size="small"
-            theme="base"
-            type="reset"
-          >
-            {formatMessage({ id: "Discard changes" })}
+          <Button asChild intent="secondary" size="small" theme="base">
+            <Link href={profile[lang]}>
+              {formatMessage({ id: "Discard changes" })}
+            </Link>
           </Button>
           <Button
-            disabled={!form.formState.isValid || form.formState.isSubmitting}
+            disabled={
+              !methods.formState.isValid || methods.formState.isSubmitting
+            }
             form={formId}
             intent="primary"
             size="small"
@@ -85,10 +91,11 @@ export default function Form({ user }: EditFormProps) {
           </Button>
         </div>
       </Header>
-      <Divider color="burgundy" opacity={8} />
       <form action={formAction} className={styles.form} id={formId}>
-        <FormContent />
+        <FormProvider {...methods}>
+          <FormContent />
+        </FormProvider>
       </form>
-    </FormProvider>
+    </>
   )
 }

components/Forms/Edit/Profile/schema.ts

@@ -1,24 +1,98 @@
 import { z } from "zod"
 
-// import { phoneValidator } from "@/utils/phoneValidator"
+import { Key } from "@/components/TempDesignSystem/Form/NewPassword/newPassword"
+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"
-  // ),
+const countryRequiredMsg = "Country is required"
+export const editProfileSchema = z
+  .object({
+    address: z.object({
+      city: z.string().optional(),
+      countryCode: z
+        .string({
+          required_error: countryRequiredMsg,
+          invalid_type_error: countryRequiredMsg,
+        })
+        .min(1, countryRequiredMsg),
+      streetAddress: z.string().optional(),
+      zipCode: z.string().min(1, "Zip code is required"),
+    }),
+    dateOfBirth: z.string().min(1),
+    email: z.string().email(),
+    language: z.string(),
+    phoneNumber: phoneValidator(
+      "Phone is required",
+      "Please enter a valid phone number"
+    ),
 
-  currentPassword: z.string().optional(),
-  newPassword: z.string().optional(),
-  retypeNewPassword: z.string().optional(),
-})
+    currentPassword: z.string().optional(),
+    newPassword: z.string().optional(),
+    retypeNewPassword: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.currentPassword) {
+      if (!data.newPassword) {
+        ctx.addIssue({
+          code: "custom",
+          message: "New password is required",
+          path: ["newPassword"],
+        })
+      }
+      if (!data.retypeNewPassword) {
+        ctx.addIssue({
+          code: "custom",
+          message: "Retype new password is required",
+          path: ["retypeNewPassword"],
+        })
+      }
+    } else {
+      if (data.newPassword || data.retypeNewPassword) {
+        ctx.addIssue({
+          code: "custom",
+          message: "Current password is required",
+          path: ["currentPassword"],
+        })
+      }
+    }
+
+    if (data.newPassword) {
+      const msgs = []
+      if (data.newPassword.length < 10 || data.newPassword.length > 40) {
+        msgs.push(Key.CHAR_LENGTH)
+      }
+      if (!data.newPassword.match(/[A-Z]/g)) {
+        msgs.push(Key.UPPERCASE)
+      }
+      if (!data.newPassword.match(/[0-9]/g)) {
+        msgs.push(Key.NUM)
+      }
+      if (!data.newPassword.match(/[^A-Za-z0-9]/g)) {
+        msgs.push(Key.SPECIAL_CHAR)
+      }
+      if (msgs.length) {
+        ctx.addIssue({
+          code: "custom",
+          message: msgs.join(","),
+          path: ["newPassword"],
+        })
+      }
+    }
+
+    if (data.newPassword && !data.retypeNewPassword) {
+      ctx.addIssue({
+        code: "custom",
+        message: "Retype new password is required",
+        path: ["retypeNewPassword"],
+      })
+    }
+
+    if (data.retypeNewPassword !== data.newPassword) {
+      ctx.addIssue({
+        code: "custom",
+        message: "Retype new password does not match new password",
+        path: ["retypeNewPassword"],
+      })
+    }
+  })
 
 export type EditProfileSchema = z.infer<typeof editProfileSchema>