feat(account-settings): ChangePassword component

packages/react/__tests__/__snapshots__/exports.ts.snap

@@ -9,6 +9,7 @@ Array [
  "Button",
  "ButtonGroup",
  "Card",
+ "ChangePassword",
  "CheckboxField",
  "Collection",
  "ComponentClassNames",

packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { Logger } from 'aws-amplify';
+import { changePassword, translate } from '@aws-amplify/ui';
+
+import { useAuth } from '../../../internal';
+import { View, Flex } from '../../../primitives';
+import {
+ DefaultCurrentPassword,
+ DefaultError,
+ DefaultNewPassword,
+ DefaultSubmitButton,
+} from './defaultComponents';
+import { ChangePasswordProps } from './types';
+import { FormValues } from '../types';
+
+const logger = new Logger('ChangePassword');
+
+function ChangePassword({
+ onSuccess,
+ onError,
+}: ChangePasswordProps): JSX.Element | null {
+ const [errorMessage, setErrorMessage] = React.useState<string>(null);
+ const [formValues, setFormValues] = React.useState<FormValues>({});
+
+ const { user, isLoading } = useAuth();
+
+ /** Return null if Auth.getCurrentAuthenticatedUser is still in progress */
+ if (isLoading) {
+ return null;
+ }
+
+ /** Return null if user isn't authenticated in the first place */
+ if (!user) {
+ logger.warn('<ChangePassword /> requires user to be authenticated.');
+ return null;
+ }
+
+ /** Translations */
+ // TODO: add AccountSettingsTextUtil to collect these strings
+ const currentPasswordLabel = translate('Current Password');
+ const newPasswordLabel = translate('New Password');
+ const updatePasswordText = translate('Update password');
+
+ /** Event Handlers */
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ event.preventDefault();
+
+ const { name, value } = event.target;
+ setFormValues({ ...formValues, [name]: value });
+ };
+
+ const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+ const { currentPassword, newPassword } = formValues;
+ if (errorMessage) {
+ setErrorMessage(null);
+ }
+ try {
+ await changePassword({ user, currentPassword, newPassword });
+
+ onSuccess?.(); // notify success to the parent
+ } catch (e) {
+ const error = e as Error;
+ if (error.message) setErrorMessage(error.message);
+
+ onError?.(error); // notify error to the parent
+ }
+ };
+
+ return (
+ <View as="form" className="amplify-changepassword" onSubmit={handleSubmit}>
+ <Flex direction="column">
+ <DefaultCurrentPassword
+ autoComplete="current-password"
+ isRequired
+ label={currentPasswordLabel}
+ name="currentPassword"
+ onChange={handleChange}
+ />
+ <DefaultNewPassword
+ autoComplete="new-password"
+ isRequired
+ label={newPasswordLabel}
+ name="newPassword"
+ onChange={handleChange}
+ />
+ <DefaultSubmitButton type="submit">
+ {updatePasswordText}
+ </DefaultSubmitButton>
+ {errorMessage ? <DefaultError>{errorMessage}</DefaultError> : null}
+ </Flex>
+ </View>
+ );
+}
+
+export default ChangePassword;

packages/react/src/components/AccountSettings/ChangePassword/__tests__/ChangePassword.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+import * as UIModule from '@aws-amplify/ui';
+
+import ChangePassword from '../ChangePassword';
+
+const user = {} as unknown as UIModule.AmplifyUser;
+jest.mock('../../../../internal', () => ({
+ useAuth: () => ({
+ user,
+ isLoading: false,
+ }),
+}));
+
+const changePasswordSpy = jest.spyOn(UIModule, 'changePassword');
+
+describe('ChangePassword', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders as expected', () => {
+ const { container } = render(<ChangePassword />);
+ expect(container).toMatchSnapshot();
+ });
+
+ it('calls changePassword with expected arguments', async () => {
+ changePasswordSpy.mockResolvedValue();
+
+ const onSuccess = jest.fn();
+ render(<ChangePassword onSuccess={onSuccess} />);
+
+ const currentPassword = await screen.findByLabelText('Current Password');
+ const newPassword = await screen.findByLabelText('New Password');
+ const submitButton = await screen.findByRole('button', {
+ name: 'Update password',
+ });
+
+ fireEvent.input(currentPassword, {
+ target: { name: 'currentPassword', value: 'oldpassword' },
+ });
+
+ fireEvent.input(newPassword, {
+ target: { name: 'newPassword', value: 'newpassword' },
+ });
+
+ fireEvent.submit(submitButton);
+
+ expect(changePasswordSpy).toBeCalledWith({
+ user,
+ currentPassword: 'oldpassword',
+ newPassword: 'newpassword',
+ });
+ });
+
+ it('onSuccess is called after successful sign up', async () => {
+ changePasswordSpy.mockResolvedValue();
+
+ const onSuccess = jest.fn();
+ render(<ChangePassword onSuccess={onSuccess} />);
+
+ const submitButton = await screen.findByRole('button', {
+ name: 'Update password',
+ });
+ fireEvent.submit(submitButton);
+
+ // submit handling is async, wait for onSuccess to be called
+ // https://testing-library.com/docs/dom-testing-library/api-async/#waitfor
+ await waitFor(() => expect(onSuccess).toBeCalledTimes(1));
+ });
+
+ it('onError is called after unsuccessful submit', async () => {
+ changePasswordSpy.mockRejectedValue(new Error('Mock Error'));
+
+ const onError = jest.fn();
+ render(<ChangePassword onError={onError} />);
+
+ const submitButton = await screen.findByRole('button', {
+ name: 'Update password',
+ });
+
+ fireEvent.submit(submitButton);
+
+ // submit handling is async, wait for onError to be called
+ await waitFor(() => expect(onError).toBeCalledTimes(1));
+ });
+
+ it('error message is displayed after unsuccessful submit', async () => {
+ changePasswordSpy.mockRejectedValue(new Error('Mock Error'));
+
+ const onError = jest.fn();
+ render(<ChangePassword onError={onError} />);
+
+ const submitButton = await screen.findByRole('button', {
+ name: 'Update password',
+ });
+
+ fireEvent.submit(submitButton);
+
+ // submit handling is async, wait for error to be displayed
+ await waitFor(() => expect(screen.findByText('Mock Error')).toBeDefined());
+ });
+});

packages/react/src/components/AccountSettings/ChangePassword/__tests__/__snapshots__/ChangePassword.test.tsx.snap

@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChangePassword renders as expected 1`] = `
+<div>
+ <form
+ class="amplify-changepassword"
+ >
+ <div
+ class="amplify-flex"
+ style="flex-direction: column;"
+ >
+ <div
+ class="amplify-flex amplify-field amplify-textfield amplify-passwordfield"
+ >
+ <label
+ class="amplify-label"
+ for="amplify-id-0"
+ >
+ Current Password
+ </label>
+ <div
+ class="amplify-flex amplify-field-group amplify-field-group--horizontal"
+ data-orientation="horizontal"
+ >
+ <div
+ class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
+ data-orientation="horizontal"
+ >
+ <input
+ aria-invalid="false"
+ autocomplete="current-password"
+ class="amplify-input amplify-field-group__control"
+ id="amplify-id-0"
+ name="currentPassword"
+ required=""
+ type="password"
+ />
+ </div>
+ <div
+ class="amplify-field-group__outer-end"
+ >
+ <button
+ aria-checked="false"
+ aria-label="Show password"
+ class="amplify-button amplify-field-group__control amplify-field__show-password"
+ data-fullwidth="false"
+ role="switch"
+ type="button"
+ >
+ <span
+ aria-live="polite"
+ class="amplify-visually-hidden"
+ >
+ Password is hidden
+ </span>
+ <span
+ class="amplify-icon"
+ style="width: 1em; height: 1em;"
+ >
+ <svg
+ fill="none"
+ height="24"
+ viewBox="0 0 24 24"
+ width="24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 6C15.79 6 19.17 8.13 20.82 11.5C19.17 14.87 15.79 17 12 17C8.21 17 4.83 14.87 3.18 11.5C4.83 8.13 8.21 6 12 6ZM12 4C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19C17 19 21.27 15.89 23 11.5C21.27 7.11 17 4 12 4ZM12 9C13.38 9 14.5 10.12 14.5 11.5C14.5 12.88 13.38 14 12 14C10.62 14 9.5 12.88 9.5 11.5C9.5 10.12 10.62 9 12 9ZM12 7C9.52 7 7.5 9.02 7.5 11.5C7.5 13.98 9.52 16 12 16C14.48 16 16.5 13.98 16.5 11.5C16.5 9.02 14.48 7 12 7Z"
+ fill="currentColor"
+ />
+ </svg>
+ </span>
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ class="amplify-flex amplify-field amplify-textfield amplify-passwordfield"
+ >
+ <label
+ class="amplify-label"
+ for="amplify-id-1"
+ >
+ New Password
+ </label>
+ <div
+ class="amplify-flex amplify-field-group amplify-field-group--horizontal"
+ data-orientation="horizontal"
+ >
+ <div
+ class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
+ data-orientation="horizontal"
+ >
+ <input
+ aria-invalid="false"
+ autocomplete="new-password"
+ class="amplify-input amplify-field-group__control"
+ id="amplify-id-1"
+ name="newPassword"
+ required=""
+ type="password"
+ />
+ </div>
+ <div
+ class="amplify-field-group__outer-end"
+ >
+ <button
+ aria-checked="false"
+ aria-label="Show password"
+ class="amplify-button amplify-field-group__control amplify-field__show-password"
+ data-fullwidth="false"
+ role="switch"
+ type="button"
+ >
+ <span
+ aria-live="polite"
+ class="amplify-visually-hidden"
+ >
+ Password is hidden
+ </span>
+ <span
+ class="amplify-icon"
+ style="width: 1em; height: 1em;"
+ >
+ <svg
+ fill="none"
+ height="24"
+ viewBox="0 0 24 24"
+ width="24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 6C15.79 6 19.17 8.13 20.82 11.5C19.17 14.87 15.79 17 12 17C8.21 17 4.83 14.87 3.18 11.5C4.83 8.13 8.21 6 12 6ZM12 4C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19C17 19 21.27 15.89 23 11.5C21.27 7.11 17 4 12 4ZM12 9C13.38 9 14.5 10.12 14.5 11.5C14.5 12.88 13.38 14 12 14C10.62 14 9.5 12.88 9.5 11.5C9.5 10.12 10.62 9 12 9ZM12 7C9.52 7 7.5 9.02 7.5 11.5C7.5 13.98 9.52 16 12 16C14.48 16 16.5 13.98 16.5 11.5C16.5 9.02 14.48 7 12 7Z"
+ fill="currentColor"
+ />
+ </svg>
+ </span>
+ </button>
+ </div>
+ </div>
+ </div>
+ <button
+ class="amplify-button amplify-field-group__control"
+ data-fullwidth="false"
+ type="submit"
+ >
+ Update password
+ </button>
+ </div>
+ </form>
+</div>
+`;

packages/react/src/components/AccountSettings/ChangePassword/defaultComponents.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Alert, Button, PasswordField } from '../../../primitives';
+import {
+ AccountSettingsError,
+ AccountSettingsPasswordField,
+ AccountSettingsSubmitButton,
+} from '../types';
+
+/** ChangePassword subcomponents */
+// TODO: enable component override
+export const DefaultCurrentPassword: AccountSettingsPasswordField = (props) => {
+ return <PasswordField {...props} />;
+};
+
+export const DefaultNewPassword: AccountSettingsPasswordField = (props) => {
+ return <PasswordField {...props} />;
+};
+
+export const DefaultSubmitButton: AccountSettingsSubmitButton = ({
+ children,
+ ...rest
+}) => {
+ return <Button {...rest}>{children}</Button>;
+};
+
+export const DefaultError: AccountSettingsError = ({ children, ...rest }) => {
+ return (
+ <Alert variation="error" {...rest}>
+ {children}
+ </Alert>
+ );
+};

packages/react/src/components/AccountSettings/ChangePassword/index.ts

@@ -0,0 +1 @@
+export { default as ChangePassword } from './ChangePassword';