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} />

components/TempDesignSystem/Form/NewPassword/newPassword.module.css

@@ -1,12 +1,90 @@
+.container {
+  align-content: center;
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Scandic-Beige-40);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  height: 60px;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  transition: border-color 200ms ease;
+  position: relative;
+}
+
+.container:has(.input:active, .input:focus) {
+  border-color: var(--Scandic-Blue-90);
+}
+
+.container:has(.input:disabled) {
+  background-color: var(--Main-Grey-10);
+  border: none;
+  color: var(--Main-Grey-40);
+}
+
+.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
+  border-color: var(--Scandic-Red-60);
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Main-Grey-100);
+  height: 18px;
+  margin: 0;
+  order: 2;
+  overflow: visible;
+  padding: 0;
+}
+
+.input:not(:active, :focus):placeholder-shown {
+  height: 0px;
+  transition: height 150ms ease;
+}
+
+.input:focus,
+.input:focus:placeholder-shown,
+.input:active,
+.input:active:placeholder-shown {
+  height: 18px;
+  transition: height 150ms ease;
+  outline: none;
+}
+
+.input:disabled {
+  color: var(--Main-Grey-40);
+}
+
 .helpText {
   align-items: flex-start;
   display: flex;
   gap: var(--Spacing-x-half);
 }
 
+.error {
+  align-items: center;
+  color: var(--Scandic-Red-60);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin: var(--Spacing-x1) 0 0;
+}
+
 .errors {
   display: flex;
   flex-wrap: wrap;
   gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
   padding-top: var(--Spacing-x1);
 }
+
+.eyeIcon {
+  position: absolute;
+  right: var(--Spacing-x2);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+}
+
+.inputWrapper {
+  position: relative;
+}

components/TempDesignSystem/Form/NewPassword/newPassword.ts

@@ -1,12 +1,5 @@
 import type { RegisterOptions } from "react-hook-form"
 
-export enum Key {
-  CHAR_LENGTH = "CHAR_LENGTH",
-  NUM = "NUM",
-  SPECIAL_CHAR = "SPECIAL_CHAR",
-  UPPERCASE = "UPPERCASE",
-}
-
 export interface NewPasswordProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
@@ -14,6 +7,6 @@ export interface NewPasswordProps
 }
 
 export interface IconProps {
-  matcher: Key
-  messages: Key[]
+  errorMessage: string
+  errors: string[]
 }