114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
"use client"
|
|
import {
|
|
Input as AriaInput,
|
|
Label as AriaLabel,
|
|
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 Label from "@/components/TempDesignSystem/Form/Label"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import { type IconProps, Key, type NewPasswordProps } from "./newPassword"
|
|
|
|
import styles from "./newPassword.module.css"
|
|
|
|
export default function NewPassword({
|
|
"aria-label": ariaLabel,
|
|
disabled = false,
|
|
placeholder = "",
|
|
registerOptions = {},
|
|
}: NewPasswordProps) {
|
|
const { control } = useFormContext()
|
|
const { formatMessage } = useIntl()
|
|
return (
|
|
<Controller
|
|
disabled={disabled}
|
|
control={control}
|
|
name="newPassword"
|
|
rules={registerOptions}
|
|
render={({ field, fieldState }) => {
|
|
const messages = (fieldState.error?.message?.split(",") ?? []) as Key[]
|
|
return (
|
|
<TextField
|
|
aria-label={ariaLabel}
|
|
isDisabled={field.disabled}
|
|
isInvalid={fieldState.invalid}
|
|
isRequired={!!registerOptions.required}
|
|
name={field.name}
|
|
onBlur={field.onBlur}
|
|
onChange={field.onChange}
|
|
validationBehavior="aria"
|
|
value={field.value}
|
|
type="password"
|
|
>
|
|
<AriaLabel className={styles.container} htmlFor={field.name}>
|
|
<Body asChild fontOnly>
|
|
<AriaInput
|
|
aria-labelledby={field.name}
|
|
className={styles.input}
|
|
id={field.name}
|
|
placeholder={placeholder}
|
|
type="password"
|
|
/>
|
|
</Body>
|
|
<Label required={!!registerOptions.required}>
|
|
{formatMessage({ id: "New password" })}
|
|
</Label>
|
|
</AriaLabel>
|
|
{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>
|
|
</div>
|
|
) : null}
|
|
{!field.value && fieldState.error ? (
|
|
<Error>
|
|
<Text className={styles.helpText} slot="description">
|
|
{fieldState.error.message}
|
|
</Text>
|
|
</Error>
|
|
) : null}
|
|
</TextField>
|
|
)
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function Icon({ matcher, messages }: IconProps) {
|
|
return messages.includes(matcher) ? (
|
|
<CloseIcon color="red" height={20} width={20} />
|
|
) : (
|
|
<CheckIcon color="green" height={20} width={20} />
|
|
)
|
|
}
|