feat(SW-360): Refactored NewPassword input

components/TempDesignSystem/Form/NewPassword/index.tsx

@@ -1,33 +1,60 @@
 "use client"
+
 import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { CheckIcon, CloseIcon } from "@/components/Icons"
-import Error from "@/components/TempDesignSystem/Form/ErrorMessage/Error"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Image from "next/image"
+import { useState } from "react"
 
-import { type IconProps, Key, type NewPasswordProps } from "./newPassword"
+import { CheckIcon, CloseIcon, InfoCircleIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import {
+  PasswordValidatorKey,
+  passwordValidators,
+} from "@/utils/passwordValidator"
+
+import Button from "../../Button"
+import { IconProps, type NewPasswordProps } from "./newPassword"
 
 import styles from "./newPassword.module.css"
 
 export default function NewPassword({
+  name = "newPassword",
   "aria-label": ariaLabel,
   disabled = false,
   placeholder = "",
   registerOptions = {},
+  label,
 }: NewPasswordProps) {
   const { control } = useFormContext()
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
+  const [isPasswordVisible, setPasswordVisible] = useState(false)
+
+  function getErrorMessage(key: PasswordValidatorKey) {
+    switch (key) {
+      case "length":
+        return `10 ${intl.formatMessage({ id: "to" })} 40 ${intl.formatMessage({ id: "characters" })}`
+      case "hasUppercase":
+        return `1 ${intl.formatMessage({ id: "uppercase letter" })}`
+      case "hasLowercase":
+        return `1 ${intl.formatMessage({ id: "lowercase letter" })}`
+      case "hasNumber":
+        return `1 ${intl.formatMessage({ id: "number" })}`
+      case "hasSpecialChar":
+        return `1 ${intl.formatMessage({ id: "special character" })}`
+    }
+  }
+
   return (
     <Controller
       disabled={disabled}
       control={control}
-      name="newPassword"
+      name={name}
       rules={registerOptions}
-      render={({ field, fieldState }) => {
-        const messages = (fieldState.error?.message?.split(",") ?? []) as Key[]
+      render={({ field, fieldState, formState }) => {
+        const errors = Object.values(formState.errors[name]?.types ?? []).flat()
         return (
           <TextField
             aria-label={ariaLabel}
@@ -39,51 +66,52 @@ export default function NewPassword({
             onChange={field.onChange}
             validationBehavior="aria"
             value={field.value}
-            type="password"
+            type={isPasswordVisible ? "text" : "password"}
           >
-            <AriaInputWithLabel
-              {...field}
-              aria-labelledby={field.name}
-              id={field.name}
-              label={formatMessage({ id: "New password" })}
-              placeholder={placeholder}
-              type="password"
-            />
+            <div className={styles.inputWrapper}>
+              <AriaInputWithLabel
+                {...field}
+                aria-labelledby={field.name}
+                id={field.name}
+                label={intl.formatMessage({ id: "New password" })}
+                placeholder={placeholder}
+                type={isPasswordVisible ? "text" : "password"}
+              />
+              <Button
+                className={styles.eyeIcon}
+                type="button"
+                variant="icon"
+                size="small"
+                intent="tertiary"
+                onClick={() => setPasswordVisible(!isPasswordVisible)}
+              >
+                <Image
+                  src={`/_static/img/icons/${isPasswordVisible ? "eye-icon" : "eye-show"}.svg`}
+                  alt="eye"
+                  width={24}
+                  height={24}
+                />
+              </Button>
+            </div>
             {field.value ? (
               <div className={styles.errors}>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.CHAR_LENGTH} messages={messages} />
-                    10 {formatMessage({ id: "to" })} 40{" "}
-                    {formatMessage({ id: "characters" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.UPPERCASE} messages={messages} />1{" "}
-                    {formatMessage({ id: "uppercase letter" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.NUM} messages={messages} />1{" "}
-                    {formatMessage({ id: "number" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.SPECIAL_CHAR} messages={messages} />1{" "}
-                    {formatMessage({ id: "special character" })}
-                  </Text>
-                </Caption>
+                {Object.entries(passwordValidators).map(
+                  ([key, { message }]) => (
+                    <Caption asChild color="black" key={key}>
+                      <Text className={styles.helpText} slot="description">
+                        <Icon errorMessage={message} errors={errors} />
+                        {getErrorMessage(key as PasswordValidatorKey)}
+                      </Text>
+                    </Caption>
+                  )
+                )}
               </div>
             ) : null}
             {!field.value && fieldState.error ? (
-              <Error>
-                <Text className={styles.helpText} slot="description">
-                  {fieldState.error.message}
-                </Text>
-              </Error>
+              <Caption className={styles.error} fontOnly>
+                <InfoCircleIcon color="red" />
+                {fieldState.error.message}
+              </Caption>
             ) : null}
           </TextField>
         )
@@ -92,8 +120,8 @@ export default function NewPassword({
   )
 }
 
-function Icon({ matcher, messages }: IconProps) {
-  return messages.includes(matcher) ? (
+function Icon({ errorMessage, errors }: IconProps) {
+  return errors.includes(errorMessage) ? (
     <CloseIcon color="red" height={20} width={20} />
   ) : (
     <CheckIcon color="green" height={20} width={20} />