Merged in feat/LOY-183-Make-Other-Password-Inputs-Maskable (pull request #1569)
feat(LOY-183): Make Current & Retype Password Inputs Maskable in My Profile Edit Form * feat(LOY-183): implement PasswordInput and PasswordToggleButton components - Added PasswordInput component for password fields with visibility toggle. - Introduced PasswordToggleButton for toggling password visibility. - Updated NewPassword component to utilize the new PasswordInput. * refactor(LOY-183): replace NewPassword component with PasswordInput Approved-by: Christian Andolf
This commit is contained in:
Chuma Mcphoy (We Ahead)
@@ -0,0 +1,191 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Text, TextField } from "react-aria-components"
|
||||
import { Controller, useFormContext } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import {
|
||||
CheckIcon,
|
||||
CloseIcon,
|
||||
EyeHideIcon,
|
||||
EyeShowIcon,
|
||||
InfoCircleIcon,
|
||||
} from "@/components/Icons"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
import { passwordValidators } from "@/utils/zod/passwordValidator"
|
||||
|
||||
import styles from "./passwordInput.module.css"
|
||||
|
||||
import type { PasswordValidatorKey } from "@/types/components/form/newPassword"
|
||||
import type { IconProps, PasswordInputProps } from "./passwordInput"
|
||||
|
||||
export default function PasswordInput({
|
||||
name = "password",
|
||||
label,
|
||||
"aria-label": ariaLabel,
|
||||
disabled = false,
|
||||
placeholder = "",
|
||||
registerOptions = {},
|
||||
visibilityToggleable = true,
|
||||
isNewPassword = false,
|
||||
className = "",
|
||||
}: PasswordInputProps) {
|
||||
const { control } = useFormContext()
|
||||
const intl = useIntl()
|
||||
const [isPasswordVisible, setIsPasswordVisible] = useState(false)
|
||||
|
||||
return (
|
||||
<Controller
|
||||
disabled={disabled}
|
||||
control={control}
|
||||
name={name}
|
||||
rules={registerOptions}
|
||||
render={({ field, fieldState, formState }) => {
|
||||
const errors = isNewPassword
|
||||
? Object.values(formState.errors[name]?.types ?? []).flat()
|
||||
: []
|
||||
|
||||
return (
|
||||
<TextField
|
||||
className={className}
|
||||
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={
|
||||
visibilityToggleable && isPasswordVisible ? "text" : "password"
|
||||
}
|
||||
>
|
||||
<div className={styles.inputWrapper}>
|
||||
<AriaInputWithLabel
|
||||
{...field}
|
||||
aria-labelledby={field.name}
|
||||
id={field.name}
|
||||
label={
|
||||
label ||
|
||||
(isNewPassword
|
||||
? intl.formatMessage({ id: "New password" })
|
||||
: intl.formatMessage({ id: "Password" }))
|
||||
}
|
||||
placeholder={placeholder}
|
||||
type={
|
||||
visibilityToggleable && isPasswordVisible
|
||||
? "text"
|
||||
: "password"
|
||||
}
|
||||
/>
|
||||
{visibilityToggleable ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="icon"
|
||||
size="small"
|
||||
intent="tertiary"
|
||||
onClick={() => setIsPasswordVisible((value) => !value)}
|
||||
aria-label={
|
||||
isPasswordVisible ? "Hide password" : "Show password"
|
||||
}
|
||||
aria-controls={field.name}
|
||||
className={styles.toggleButton}
|
||||
>
|
||||
{isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{isNewPassword && (
|
||||
<NewPasswordValidation value={field.value} errors={errors} />
|
||||
)}
|
||||
|
||||
{isNewPassword ? (
|
||||
!field.value && fieldState.error ? (
|
||||
<Caption className={styles.error} fontOnly>
|
||||
<InfoCircleIcon color="red" />
|
||||
{fieldState.error.message}
|
||||
</Caption>
|
||||
) : null
|
||||
) : fieldState.error ? (
|
||||
<Caption className={styles.error} fontOnly>
|
||||
<InfoCircleIcon color="red" />
|
||||
{fieldState.error &&
|
||||
intl.formatMessage({ id: fieldState.error.message })}
|
||||
</Caption>
|
||||
) : null}
|
||||
</TextField>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Icon({ errorMessage, errors }: IconProps) {
|
||||
return errors.includes(errorMessage) ? (
|
||||
<CloseIcon color="red" height={20} width={20} />
|
||||
) : (
|
||||
<CheckIcon color="green" height={20} width={20} />
|
||||
)
|
||||
}
|
||||
|
||||
function NewPasswordValidation({
|
||||
value,
|
||||
errors,
|
||||
}: {
|
||||
value: string
|
||||
errors: string[]
|
||||
}) {
|
||||
const intl = useIntl()
|
||||
|
||||
if (!value) return null
|
||||
|
||||
function getErrorMessage(key: PasswordValidatorKey) {
|
||||
switch (key) {
|
||||
case "length":
|
||||
return intl.formatMessage(
|
||||
{
|
||||
id: "{min} to {max} characters",
|
||||
},
|
||||
{
|
||||
min: 10,
|
||||
max: 40,
|
||||
}
|
||||
)
|
||||
case "hasUppercase":
|
||||
return intl.formatMessage(
|
||||
{ id: "{count} uppercase letter" },
|
||||
{ count: 1 }
|
||||
)
|
||||
case "hasLowercase":
|
||||
return intl.formatMessage(
|
||||
{ id: "{count} lowercase letter" },
|
||||
{ count: 1 }
|
||||
)
|
||||
case "hasNumber":
|
||||
return intl.formatMessage({ id: "{count} number" }, { count: 1 })
|
||||
case "hasSpecialChar":
|
||||
return intl.formatMessage(
|
||||
{ id: "{count} special character" },
|
||||
{ count: 1 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.errors}>
|
||||
{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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
.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);
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
position: absolute;
|
||||
right: var(--Spacing-x2);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Hide the built-in password reveal icon in Microsoft Edge.
|
||||
* See: https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal
|
||||
*/
|
||||
.inputWrapper input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
.inputWrapper input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { RegisterOptions } from "react-hook-form"
|
||||
|
||||
export interface PasswordInputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string
|
||||
registerOptions?: RegisterOptions
|
||||
visibilityToggleable?: boolean
|
||||
isNewPassword?: boolean
|
||||
}
|
||||
|
||||
export interface IconProps {
|
||||
errorMessage: string
|
||||
errors: string[]
|
||||
}
|
||||
Reference in New Issue
Block a user