feat(WEB-163): edit profile field validation

2024-07-01 15:37:12 +02:00
parent 2a71a45d3d
commit 56bfbc3b71
30 changed files with 588 additions and 134 deletions
--- a/components/TempDesignSystem/Form/NewPassword/index.tsx
+++ b/components/TempDesignSystem/Form/NewPassword/index.tsx
@@ -0,0 +1,113 @@
+"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} />
+  )
+}