diff --git a/packages/react-native-components/__tests__/components/Password.test.tsx b/packages/react-native-components/__tests__/components/Password.test.tsx new file mode 100644 index 00000000..46cace3c --- /dev/null +++ b/packages/react-native-components/__tests__/components/Password.test.tsx @@ -0,0 +1,110 @@ +/************************************************************************* +* ADOBE CONFIDENTIAL +* ___________________ +* +* Copyright 2026 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. + +* Adobe permits you to use and modify this file solely in accordance with +* the terms of the Adobe license agreement accompanying it. +*************************************************************************/ + +import { fireEvent } from '@testing-library/react-native'; +import Password from '../../src/components/Password'; +import { ReactTestInstance } from 'react-test-renderer'; +import { renderComponent, DEFAULT_ERROR_MESSAGE } from '../utils'; + +const field = { + name: 'password', + id: 'password', + label: { + value: 'password field', + }, + fieldType: 'password', + placeholder: 'enter password field', + visible: true, + required: true, +}; +const helper = renderComponent(Password); + +describe('Password Field', () => { + + test('value entered by user in password field is set in model', async () => { + const f = { + ...field, + }; + const { renderResponse, element } = await helper(f); + const input: ReactTestInstance = await renderResponse.findByPlaceholderText(f.placeholder); + const inputVal = 'secret123'; + fireEvent.changeText(input, inputVal); + const state = element.getState(); + expect(state.value).toEqual(inputVal); + }); + + test('the input is rendered as a masked (secure) entry by default', async () => { + const { renderResponse } = await helper(field); + const input: ReactTestInstance = await renderResponse.findByPlaceholderText(field.placeholder); + expect(input.props.secureTextEntry).toBe(true); + }); + + test('the show/hide toggle reveals and re-masks the value', async () => { + const { renderResponse } = await helper(field); + let input: ReactTestInstance = await renderResponse.findByPlaceholderText(field.placeholder); + expect(input.props.secureTextEntry).toBe(true); + + const toggle = renderResponse.getByTestId(`${field.id}-toggle`); + fireEvent.press(toggle); + input = await renderResponse.findByPlaceholderText(field.placeholder); + expect(input.props.secureTextEntry).toBe(false); + + fireEvent.press(toggle); + input = await renderResponse.findByPlaceholderText(field.placeholder); + expect(input.props.secureTextEntry).toBe(true); + }); + + test('the toggle is not rendered when fd:showHidePassword is false', async () => { + const f = { + ...field, + properties: { + 'fd:showHidePassword': false, + }, + }; + const { renderResponse } = await helper(f); + expect(renderResponse.queryByTestId(`${f.id}-toggle`)).toBeNull(); + }); + + test('it should handle visible property', async () => { + const f = { + ...field, + visible: false, + }; + const { renderResponse } = await helper(f); + expect(renderResponse.queryByText(f.label.value)).toBeNull(); + }); + + test('help text content changes when field becomes invalid', async () => { + const f = { + ...field, + description: 'some description', + }; + const { renderResponse, element } = await helper(f); + let description = renderResponse.queryByText('some description'); + expect(description).not.toBeNull(); + + element.value = null; + let error = renderResponse.queryByTestId(`${f.id}-error`); + description = renderResponse.queryByText('some description'); + expect(error).not.toBeNull(); + expect(description).toBeNull(); + }); + +}); diff --git a/packages/react-native-components/src/components/Password.tsx b/packages/react-native-components/src/components/Password.tsx new file mode 100644 index 00000000..2d290b78 --- /dev/null +++ b/packages/react-native-components/src/components/Password.tsx @@ -0,0 +1,86 @@ +/************************************************************************* +* ADOBE CONFIDENTIAL +* ___________________ +* +* Copyright 2026 Adobe +* All Rights Reserved. +* +* NOTICE: All information contained herein is, and remains +* the property of Adobe and its suppliers, if any. The intellectual +* and technical concepts contained herein are proprietary to Adobe +* and its suppliers and are protected by all applicable intellectual +* property laws, including trade secret and copyright laws. +* Dissemination of this information or reproduction of this material +* is strictly forbidden unless prior written permission is obtained +* from Adobe. + +* Adobe permits you to use and modify this file solely in accordance with +* the terms of the Adobe license agreement accompanying it. +*************************************************************************/ + +import React, { useCallback, useState } from 'react'; +import { Input, FormControl, Pressable, Text } from 'native-base'; +import { PROPS, INPUT } from '../utils/types'; +import withRuleEngine from '../shared/withRuleEngine'; + +const PasswordComponent = function (props: PROPS) { + const { isError, required, label, errorMessage, description } = props; + const [revealed, setRevealed] = useState(false); + + // Mirrors PasswordInput.isShowHidePasswordEnabled() (default true) from the core component. + const showHidePasswordEnabled = (props as any).properties?.['fd:showHidePassword'] !== false; + + const changeHandler = useCallback((event: any) => { + props.dispatchChange(event); + }, [props.dispatchChange]); + + const blurHandler = useCallback((event: any) => { + props.dispatchBlur(event); + }, [props.dispatchBlur]); + + const focusHandler = useCallback((event: any) => { + props.dispatchFocus(event); + }, [props.dispatchFocus]); + + const toggleLabel = revealed ? 'Hide password' : 'Show password'; + + const inputProps: INPUT = { + placeholder: props.placeholder || '', + value: props.value == null ? '' : props.value, + onChangeText: changeHandler, + onBlur: blurHandler, + onFocus: focusHandler, + isReadOnly: props.readOnly === true, + isRequired: props.required === true, + isDisabled: props.enabled === false, + KeyboardTypeOptions: 'default', + maxLength: props.maxLength, + minLength: props.minLength, + pattern: props.pattern, + type: revealed ? 'text' : 'password' + }; + + return ( + + {label?.visible && {label?.value}} + setRevealed((prev) => !prev)} + accessibilityRole="button" + accessibilityLabel={toggleLabel} + accessibilityState={{ selected: revealed }} + testID={`${props.id}-toggle`} + > + {toggleLabel} + + ) : undefined} + /> + {errorMessage && {errorMessage}} + {description && !errorMessage && {description}} + + ); +}; + +export default withRuleEngine(PasswordComponent); diff --git a/packages/react-native-components/src/components/TextField.tsx b/packages/react-native-components/src/components/TextField.tsx index ad30d734..d835d57f 100644 --- a/packages/react-native-components/src/components/TextField.tsx +++ b/packages/react-native-components/src/components/TextField.tsx @@ -51,7 +51,7 @@ const TextFieldComponent = function (props: PROPS) { maxLength: props.maxLength, minLength: props.minLength, pattern: props.pattern, - type: props[':type'] === 'password-input' ? 'password' : 'text' + type: 'text' }; const Comp = props.fieldType === 'multiline-input' ? TextArea: Input; diff --git a/packages/react-native-components/src/index.ts b/packages/react-native-components/src/index.ts index 9603238c..ee509eaa 100644 --- a/packages/react-native-components/src/index.ts +++ b/packages/react-native-components/src/index.ts @@ -31,6 +31,7 @@ import PlainText from "./components/PlainText"; import RadioGroup from "./components/RadioGroup"; import Repeater from "./components/Repeater"; import TextField from "./components/TextField"; +import Password from "./components/Password"; import DatePicker from "./components/DatePicker"; import Themes from './utils/theme'; @@ -48,6 +49,7 @@ export { RadioGroup, Repeater, TextField, + Password, DatePicker, Themes } \ No newline at end of file diff --git a/packages/react-native-components/src/utils/mappings.ts b/packages/react-native-components/src/utils/mappings.ts index c138c9e5..d5fd9483 100644 --- a/packages/react-native-components/src/utils/mappings.ts +++ b/packages/react-native-components/src/utils/mappings.ts @@ -20,6 +20,7 @@ import Form from '../components/Form'; import TextField from '../components/TextField'; +import Password from '../components/Password'; import NumberField from '../components/NumberField'; import Panel from '../components/Panel'; import Button from '../components/Button'; @@ -44,7 +45,7 @@ export default { 'checkbox-group': CheckboxGroup, 'radio-group': RadioGroup, 'drop-down': DropDown, - 'password-input': TextField, + password: Password, 'plain-text': PlainText, 'file-input': FileUpload, 'date-input': DatePicker diff --git a/packages/react-vanilla-components/README.md b/packages/react-vanilla-components/README.md index 6a832f16..5fdfe793 100644 --- a/packages/react-vanilla-components/README.md +++ b/packages/react-vanilla-components/README.md @@ -23,6 +23,7 @@ The document provides detailed information on React Vanilla Components(HTML5 bas - Image - Number Field - Panel + - Password - Plain Text - Radio Group - ReCAPTCHA diff --git a/packages/react-vanilla-components/__tests__/components/Password.test.tsx b/packages/react-vanilla-components/__tests__/components/Password.test.tsx new file mode 100644 index 00000000..ec705f6d --- /dev/null +++ b/packages/react-vanilla-components/__tests__/components/Password.test.tsx @@ -0,0 +1,156 @@ +/* + * Copyright 2026 Adobe, Inc. + * + * Your access and use of this software is governed by the Adobe Customer Feedback Program Terms and Conditions or other Beta License Agreement signed by your employer and Adobe, Inc.. This software is NOT open source and may not be used without one of the foregoing licenses. Even with a foregoing license, your access and use of this file is limited to the earlier of (a) 180 days, (b) general availability of the product(s) which utilize this software (i.e. AEM Forms), (c) January 1, 2023, (d) Adobe providing notice to you that you may no longer use the software or that your beta trial has otherwise ended. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL ADOBE NOR ITS THIRD PARTY PROVIDERS AND PARTNERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import React from "react"; +import { render, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { AdaptiveForm } from "@aemforms/af-react-renderer"; +import Password from "../../src/components/Password"; +import mappings from "../../src/utils/mappings"; +import { renderComponent, DEFAULT_ERROR_MESSAGE } from "../utils"; +import "@testing-library/jest-dom/extend-expect"; + +const field = { + name: "password", + label: { + value: "Password", + }, + fieldType: "password", + placeholder: "enter password", + visible: true, + required: true, +}; + +const helper = renderComponent(Password); + +describe("Password Field", () => { + test("value entered by user in password field is set in model", async () => { + const f = { + ...field, + }; + const { renderResponse, element } = await helper(f); + const input = await renderResponse.findByPlaceholderText(f.placeholder); + const inputVal = "abc"; + userEvent.type(input, inputVal); + const state = element.getState(); + expect(state.value).toEqual(inputVal); + }); + + test("the widget renders as a masked password input by default", async () => { + const { renderResponse } = await helper(field); + const input = await renderResponse.findByPlaceholderText(field.placeholder); + expect(input).toHaveAttribute("type", "password"); + }); + + test("the show/hide toggle reveals and re-masks the value", async () => { + const { renderResponse } = await helper(field); + const input = await renderResponse.findByPlaceholderText(field.placeholder); + const toggle = renderResponse.container.getElementsByClassName("cmp-adaptiveform-passwordinput__toggle-visibility")[0]; + expect(toggle).toHaveAttribute("aria-pressed", "false"); + + userEvent.click(toggle); + expect(input).toHaveAttribute("type", "text"); + expect(toggle).toHaveAttribute("aria-pressed", "true"); + + userEvent.click(toggle); + expect(input).toHaveAttribute("type", "password"); + expect(toggle).toHaveAttribute("aria-pressed", "false"); + }); + + test("the toggle is not rendered when fd:showHidePassword is false", async () => { + const f = { + ...field, + properties: { + "fd:showHidePassword": false, + }, + }; + const { renderResponse } = await helper(f); + const toggle = renderResponse.container.getElementsByClassName("cmp-adaptiveform-passwordinput__toggle-visibility"); + expect(toggle).toHaveLength(0); + }); + + test("it should handle visible property", async () => { + const f = { + ...field, + visible: false, + }; + const { renderResponse } = await helper(f); + expect(renderResponse.queryByText(f.label.value)).toBeNull(); + }); + + test("error message element exists when the field is invalid", async () => { + const f = { + ...field, + valid: false, + errorMessage: DEFAULT_ERROR_MESSAGE, + }; + const { renderResponse } = await helper(f); + expect(renderResponse.queryByText(DEFAULT_ERROR_MESSAGE)).not.toBeNull(); + }); + + test('labels and inputs are linked with for and id attribute', async () => { + let { renderResponse } = await helper(field); + const input = await renderResponse.findByPlaceholderText(field.placeholder); + const label = await renderResponse.queryByText(field.label.value) + expect(input?.getAttribute('id')).toEqual(label?.getAttribute('for')); + }); + + test('Aria-describedby should contain long des short desc if present otherwise it should be empty', async () => { + const f= { + ...field, + id: 'password-123', + tooltip: "short description", + description: "long description", + properties: { + "afs:layout": { + tooltipVisible: true + }, + } + }; + const { renderResponse } = await helper(f); + const input = renderResponse.container.getElementsByClassName("cmp-adaptiveform-passwordinput__widget"); + expect(input).toHaveLength(1); + expect(input[0]).toHaveAttribute('aria-describedby', `${f.id}__longdescription ${f.id}__shortdescription`) + }); +}); + +describe("AEM-exported password form resolved via mappings", () => { + // Minimal adaptive-form model mirroring what AEM exports for the password core component. + // The field carries fieldType "password" but a :type of "forms-components-examples/components/form/passwordinput" + // (the examples proxy resource type, which is NOT in mappings) — so headless resolution relies on the fieldType key. + const formJson: any = { + id: "passwordform", + fieldType: "form", + adaptiveform: "0.15.2", + metadata: { grammar: "json-formula-1.0.0", version: "1.0.0" }, + ":itemsOrder": ["passwordinput1"], + ":items": { + passwordinput1: { + id: "passwordinput-1", + fieldType: "password", + name: "passwordinput1", + type: "string", + label: { value: "Password Input 1" }, + ":type": "forms-components-examples/components/form/passwordinput", + }, + }, + }; + + test("resolves the password field via its fieldType and renders a masked widget", async () => { + const { container } = render(); + + const widget = await waitFor(() => { + const w = container.getElementsByClassName("cmp-adaptiveform-passwordinput__widget"); + expect(w.length).toBe(1); + return w[0]; + }); + + // Masked by default, confirming resolution to our Password component (not the :type key). + expect(widget).toHaveAttribute("type", "password"); + }); +}); diff --git a/packages/react-vanilla-components/src/components/Password.tsx b/packages/react-vanilla-components/src/components/Password.tsx new file mode 100644 index 00000000..ea918739 --- /dev/null +++ b/packages/react-vanilla-components/src/components/Password.tsx @@ -0,0 +1,115 @@ +// ******************************************************************************* +// * Copyright 2026 Adobe +// * +// * Licensed under the Apache License, Version 2.0 (the “License”); +// * you may not use this file except in compliance with the License. +// * You may obtain a copy of the License at +// * +// * http://www.apache.org/licenses/LICENSE-2.0 +// * +// * Unless required by applicable law or agreed to in writing, software +// * distributed under the License is distributed on an “AS IS” BASIS, +// * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// * See the License for the specific language governing permissions and +// * limitations under the License. + +// * The BEM markup is as per the AEM core form components guidelines. +// * LINK- https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/passwordinput/v1/passwordinput/passwordinput.html +// ****************************************************************************** + +import React, { useCallback, useState } from 'react'; +import { withRuleEngine } from '../utils/withRuleEngine'; +import { PROPS } from '../utils/type'; +import FieldWrapper from './common/FieldWrapper'; +import { syncAriaDescribedBy } from '../utils/utils'; + +const Password = (props: PROPS) => { + const { id, value, label, required, readOnly = false, placeholder, minLength, maxLength, enabled, visible, name, appliedCssClassNames, valid } = props; + const [revealed, setRevealed] = useState(false); + + // The visibility toggle is rendered unless the author explicitly disables it (fd:showHidePassword === false), + // mirroring PasswordInput.isShowHidePasswordEnabled() which defaults to true in the core component. + const showHidePasswordEnabled = props.properties?.['fd:showHidePassword'] !== false; + // autocomplete is author-controlled (new-password / current-password / off); omitted when unset. + const autoComplete = (props as any).autocomplete; + + const handleChange = useCallback((event: React.ChangeEvent) => { + props.dispatchChange(event.target.value); + }, [props.dispatchChange]); + + const handleBlur = useCallback((event: React.ChangeEvent) => { + props.dispatchBlur(event.target.value); + }, [props.dispatchBlur]); + + const handleFocus = useCallback(() => { + props.dispatchFocus(); + }, [props.dispatchFocus]); + + const toggleVisibility = useCallback((event: React.MouseEvent) => { + event.preventDefault(); + setRevealed((prev) => !prev); + }, []); + + const toggleLabel = revealed ? 'Hide password' : 'Show password'; + + return ( +
+ +
+ + {showHidePasswordEnabled ? ( + + ) : null} +
+ +
+ ); +}; + +export default withRuleEngine(Password); diff --git a/packages/react-vanilla-components/src/index.ts b/packages/react-vanilla-components/src/index.ts index dbbaa2a4..2d452921 100644 --- a/packages/react-vanilla-components/src/index.ts +++ b/packages/react-vanilla-components/src/index.ts @@ -23,6 +23,7 @@ import Accordion from './components/Accordion/Accordion'; import HorizontalTab from './components/tabs/HorizontalTab'; import VerticalTab from './components/tabs/VerticalTab'; import Email from './components/Email'; +import Password from './components/Password'; import PlainText from './components/PlainText'; import Switch from './components/Switch'; import TelephoneInput from './components/TelephoneInput'; @@ -50,6 +51,7 @@ export { TextFieldArea, Panel, Email, + Password, PlainText, Wizard, Accordion, diff --git a/packages/react-vanilla-components/src/utils/mappings.ts b/packages/react-vanilla-components/src/utils/mappings.ts index 90b887a7..572f9499 100644 --- a/packages/react-vanilla-components/src/utils/mappings.ts +++ b/packages/react-vanilla-components/src/utils/mappings.ts @@ -30,6 +30,7 @@ import Wizard from '../components/Wizard'; import Accordion from '../components/Accordion/Accordion'; import HorizontalTab from '../components/tabs/HorizontalTab'; import Email from '../components/Email'; +import Password from '../components/Password'; import VerticalTab from '../components/tabs/VerticalTab'; import Form from '../components/Form'; import PlainText from '../components/PlainText'; @@ -53,6 +54,7 @@ const mappings = { checkbox: CheckBox, 'file-input': FileUpload, email: Email, + password: Password, 'multiline-input': TextFieldArea, 'core/fd/components/form/wizard/v1/wizard': Wizard, 'core/fd/components/form/accordion/v1/accordion': Accordion,