web/packages/design-system/lib/components/PasswordInput/NewPasswordValidation.tsx

import { useIntl } from "react-intl"

import { passwordValidators } from "@scandic-hotels/common/utils/zod/passwordValidator"
import type { PasswordValidatorKey } from "@scandic-hotels/common/utils/zod/newPassword"
import { MaterialIcon } from "../Icons/MaterialIcon"
import { Typography } from "../Typography"

import styles from "./passwordInput.module.css"

export function NewPasswordValidation({
  value,
  errors,
  id,
}: {
  value: string
  errors: string[]
  id: string
}) {
  const intl = useIntl()

  if (!value) return null

  function getErrorMessage(key: PasswordValidatorKey) {
    switch (key) {
      case "length":
        return intl.formatMessage(
          {
            id: "passwordInput.lengthRequirement",
            defaultMessage: "{min} to {max} characters",
          },
          {
            min: 10,
            max: 40,
          }
        )
      case "hasUppercase":
        return intl.formatMessage(
          {
            id: "passwordInput.uppercaseRequirement",
            defaultMessage: "{count} uppercase letter",
          },
          { count: 1 }
        )
      case "hasLowercase":
        return intl.formatMessage(
          {
            id: "passwordInput.lowercaseRequirement",
            defaultMessage: "{count} lowercase letter",
          },
          { count: 1 }
        )
      case "hasNumber":
        return intl.formatMessage(
          {
            id: "passwordInput.numberRequirement",
            defaultMessage: "{count} number",
          },
          { count: 1 }
        )
      case "hasSpecialChar":
        return intl.formatMessage(
          {
            id: "passwordInput.specialCharacterRequirement",
            defaultMessage: "{count} special character",
          },
          { count: 1 }
        )
      case "allowedCharacters":
        return intl.formatMessage({
          id: "passwordInput.allowedCharactersRequirement",
          defaultMessage: "Only allowed characters",
        })
    }
  }

  return (
    <div
      className={styles.errors}
      role="status"
      aria-live="polite"
      aria-atomic="false"
      id={id}
    >
      {Object.entries(passwordValidators).map(([key, { message }]) => (
        <Typography variant="Label/xsRegular" key={key}>
          <span className={styles.helpText}>
            <Icon errorMessage={message} errors={errors} />
            {getErrorMessage(key as PasswordValidatorKey)}
          </span>
        </Typography>
      ))}
    </div>
  )
}

interface IconProps {
  errorMessage: string
  errors: string[]
}

function Icon({ errorMessage, errors }: IconProps) {
  const intl = useIntl()
  return errors.includes(errorMessage) ? (
    <MaterialIcon
      icon="close"
      color="Icon/Feedback/Error"
      size={20}
      role="img"
      aria-label={intl.formatMessage({
        id: "common.error",
        defaultMessage: "Error",
      })}
    />
  ) : (
    <MaterialIcon
      icon="check"
      color="Icon/Feedback/Success"
      size={20}
      role="img"
      aria-label={intl.formatMessage({
        id: "common.success",
        defaultMessage: "Success",
      })}
    />
  )
}